From 2ba948bc828afd36d2ca9e4c6cd3fd2b2d7c2244 Mon Sep 17 00:00:00 2001 From: Harvey Kandola Date: Mon, 27 Nov 2017 19:33:42 +0000 Subject: [PATCH] onboard new UX --- gui/app/components/onboard/share-folder.js | 24 ++-- gui/app/pods/auth/share/template.hbs | 8 +- gui/app/styles/view/page-onboard.scss | 16 +-- .../components/onboard/share-folder.hbs | 125 +++++++----------- 4 files changed, 73 insertions(+), 100 deletions(-) diff --git a/gui/app/components/onboard/share-folder.js b/gui/app/components/onboard/share-folder.js index 0ee21051..014edd2e 100644 --- a/gui/app/components/onboard/share-folder.js +++ b/gui/app/components/onboard/share-folder.js @@ -38,18 +38,22 @@ export default Component.extend({ $("#stage-1-next").off('click').on('click', function() { if (!$("#stage-1-firstname").val()) { $("#stage-1-firstname").focus(); - $("#stage-1-firstname").addClass("error"); + $("#stage-1-firstname").addClass("is-invalid"); $(".name-status").attr("src", "/assets/img/onboard/person-red.png"); return; } + $("#stage-1-firstname").removeClass("is-invalid"); + if (!$("#stage-1-lastname").val()) { $("#stage-1-lastname").focus(); - $("#stage-1-lastname").addClass("error"); + $("#stage-1-lastname").addClass("is-invalid"); $(".name-status").attr("src", "/assets/img/onboard/person-red.png"); return; } + $("#stage-1-lastname").removeClass("is-invalid"); + self.set('processing', false); $(".stage-1").fadeOut("slow", function() { @@ -66,9 +70,9 @@ export default Component.extend({ $("#stage-2-password-confirm").keyup(function() { if ($("#stage-2-password").val().length < 6 || $("#stage-2-password").val().length > 50 || ($("#stage-2-password").val() !== $("#stage-2-password-confirm").val())) { - $(".password-status").attr("src", "/assets/img/onboard/lock-red.png"); + // $(".password-status").attr("src", "/assets/img/onboard/lock-red.png"); } else { - $(".password-status").attr("src", "/assets/img/onboard/lock-green.png"); + // $(".password-status").attr("src", "/assets/img/onboard/lock-green.png"); } }); }); @@ -78,22 +82,26 @@ export default Component.extend({ $("#stage-2-next").off('click').on('click', function() { if (!$("#stage-2-password").val() || $("#stage-2-password").val().length < 6 || $("#stage-2-password").val().length > 50) { $("#stage-2-password").focus(); - $("#stage-2-password").addClass("error"); + $("#stage-2-password").addClass("is-invalid"); return; } + $("#stage-2-password").removeClass("is-invalid"); + if (!$("#stage-2-password-confirm").val()) { $("#stage-2-password-confirm").focus(); - $("#stage-2-password-confirm").addClass("error"); + $("#stage-2-password-confirm").addClass("is-invalid"); return; } if ($("#stage-2-password-confirm").val() !== $("#stage-2-password").val()) { $(".mismatch").show(); - $(".password-status").attr("src", "/assets/img/onboard/lock-red.png"); + // $(".password-status").attr("src", "/assets/img/onboard/lock-red.png"); return; } + $("#stage-2-password-confirm").removeClass("is-invalid"); + self.set('processing', false); $(".stage-2").fadeOut("slow", function() { @@ -104,7 +112,7 @@ export default Component.extend({ self.set('processing', true); $(".stage-3").fadeIn(); - $("#spinner-1").show(); + // $("#spinner-1").show(); var payload = '{ "Password": "' + $("#stage-2-password").val() + '", "Serial": "' + self.serial + '", "Firstname": "' + $("#stage-1-firstname").val() + '", "Lastname": "' + $("#stage-1-lastname").val() + '" }'; var password = $("#stage-2-password").val(); diff --git a/gui/app/pods/auth/share/template.hbs b/gui/app/pods/auth/share/template.hbs index 9004a6e5..0d92b902 100644 --- a/gui/app/pods/auth/share/template.hbs +++ b/gui/app/pods/auth/share/template.hbs @@ -1,7 +1 @@ -
-
-
- {{onboard/share-folder serial=serial folderId=folderId slug=slug}} -
-
-
\ No newline at end of file +{{onboard/share-folder serial=serial folderId=folderId slug=slug}} diff --git a/gui/app/styles/view/page-onboard.scss b/gui/app/styles/view/page-onboard.scss index 226c118d..f9ea5a6e 100644 --- a/gui/app/styles/view/page-onboard.scss +++ b/gui/app/styles/view/page-onboard.scss @@ -2,7 +2,8 @@ width: 100%; text-align: left; color: $color-off-black; - letter-spacing: 1px; + letter-spacing: 1px; + margin: 50px 0; .stage-1 { @@ -16,7 +17,7 @@ img { - margin: 100px 0 0 200px; + // margin: 100px 0 0 200px; } } @@ -39,7 +40,7 @@ img { - margin: 100px 0 0 200px; + // margin: 100px 0 0 200px; } } @@ -144,10 +145,6 @@ .sidebar { - margin-left: -15px; - padding: 100px 50px 50px 50px; - overflow: auto; - .logo { height: 62px; @@ -177,9 +174,8 @@ .rightbar { @extend .absolute-center; - height: 400px; - width: 500px; - margin-top: 200px; + height: 400px; + max-width: 500px; background-color: #f6f9fc; position: relative; border-radius: 10px; diff --git a/gui/app/templates/components/onboard/share-folder.hbs b/gui/app/templates/components/onboard/share-folder.hbs index 87aa1f85..ff6488f9 100644 --- a/gui/app/templates/components/onboard/share-folder.hbs +++ b/gui/app/templates/components/onboard/share-folder.hbs @@ -1,81 +1,56 @@ -
-
+
+
+
- +
+
+ + + +
+

Let's set up your account

+
+ + + Nickname or otherwise +
+
+ + + Usually not the same as your firstname +
+
+
Next →
+
+
+ +
+

Password

+
+ + + Between 6 and 50 characters + +
+
+ + + Re-type your chosen password +
+
+
Sign In →
+
+
+ +
+

Please Wait

+

Signing you in...

+
+ +
+
-
-

Let's set up your account

-
- -
Nickname or otherwise
- -
-
- -
What the government calls you
- -
-
-
Next →
-
- -
-

Password

-
- -
Between 6 and 50 characters
- -
-
- -
Re-type your chosen password
- -
-
-
Sign In →
-
-
- -
-

Please Wait

-

Signing you in...

-
-
-
-
-
- -
- -
- -
- -
- -
-
- -