From 5937675668483666d8b86bee9567be71806a5c2d Mon Sep 17 00:00:00 2001 From: Mo Bitar Date: Fri, 5 May 2017 20:40:20 -0500 Subject: [PATCH] simplified and separate sign in/register flow --- .../services/directives/views/accountMenu.js | 19 +++-- app/assets/stylesheets/app/_standard.scss | 4 + .../app/{_mostrap.scss => _ui.scss} | 57 ++++++++------ app/assets/stylesheets/frontend.css.scss | 2 +- .../directives/account-menu.html.haml | 76 ++++++++++--------- .../global-extensions-menu.html.haml | 4 +- 6 files changed, 92 insertions(+), 70 deletions(-) rename app/assets/stylesheets/app/{_mostrap.scss => _ui.scss} (78%) diff --git a/app/assets/javascripts/app/services/directives/views/accountMenu.js b/app/assets/javascripts/app/services/directives/views/accountMenu.js index a4e38408b..168b4f4f0 100644 --- a/app/assets/javascripts/app/services/directives/views/accountMenu.js +++ b/app/assets/javascripts/app/services/directives/views/accountMenu.js @@ -78,10 +78,17 @@ class AccountMenu { }); }) }) - } - $scope.loginSubmitPressed = function() { + $scope.submitAuthForm = function() { + if($scope.formData.showLogin) { + $scope.login(); + } else { + $scope.register(); + } + } + + $scope.login = function() { $scope.formData.status = "Generating Login Keys..."; $timeout(function(){ authManager.login($scope.formData.url, $scope.formData.email, $scope.formData.user_password, function(response){ @@ -98,12 +105,8 @@ class AccountMenu { }) } - $scope.submitRegistrationForm = function() { - $scope.formData.confirmPassword = true; - } - - $scope.submitPasswordConfirmation = function() { - let confirmation = $scope.formData.pw_confirmation; + $scope.register = function() { + let confirmation = $scope.formData.password_conf; if(confirmation !== $scope.formData.user_password) { alert("The two passwords you entered do not match. Please try again."); return; diff --git a/app/assets/stylesheets/app/_standard.scss b/app/assets/stylesheets/app/_standard.scss index 56668b08d..436b4a833 100644 --- a/app/assets/stylesheets/app/_standard.scss +++ b/app/assets/stylesheets/app/_standard.scss @@ -78,6 +78,10 @@ padding-bottom: 0px !important; } +.pt-5 { + padding-top: 5px; +} + .faded { opacity: 0.5; } diff --git a/app/assets/stylesheets/app/_mostrap.scss b/app/assets/stylesheets/app/_ui.scss similarity index 78% rename from app/assets/stylesheets/app/_mostrap.scss rename to app/assets/stylesheets/app/_ui.scss index 76ca64788..d69d2faac 100644 --- a/app/assets/stylesheets/app/_mostrap.scss +++ b/app/assets/stylesheets/app/_ui.scss @@ -63,32 +63,41 @@ $screen-md-max: ($screen-lg-min - 1) !default; *:focus {outline:0;} -button:focus {outline:0;} +.float-group { + height: 15px; + &.h10 { + height: 10px; + } -.btn { - display: inline-block; - margin-bottom: 0; - font-weight: normal; - text-align: center; - vertical-align: middle; - touch-action: manipulation; - cursor: pointer; - background-image: none; - border: 1px solid transparent; - white-space: nowrap; - padding: 6px 12px; - font-size: 14px; - line-height: 1.42857; - border-radius: 4px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + &.h20 { + height: 20px; + } + + &.h30 { + height: 30px; + } + clear: both; } -.btn-block { - display: block; - width: 100%; +button:focus {outline:0;} + + +.button-group { + clear: both; + height: 36px; +} + +.ui-button { + background-color: $blue-color; + border: 0; + color: white; + font-weight: bold; + min-height: 36px; + font-size: 14px; + + &.block { + width: 100%; + } } .panel { @@ -123,8 +132,6 @@ button:focus {outline:0;} border: 1px solid #ccc; border-radius: 4px; box-shadow: 0; - -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; - transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; } input, button, select, textarea { diff --git a/app/assets/stylesheets/frontend.css.scss b/app/assets/stylesheets/frontend.css.scss index 401325815..8945b6b50 100644 --- a/app/assets/stylesheets/frontend.css.scss +++ b/app/assets/stylesheets/frontend.css.scss @@ -1,8 +1,8 @@ $dark-gray: #2e2e2e; @import "app/standard"; -@import "app/mostrap"; @import "app/main"; +@import "app/ui"; @import "app/header"; @import "app/tags"; @import "app/notes"; diff --git a/app/assets/templates/frontend/directives/account-menu.html.haml b/app/assets/templates/frontend/directives/account-menu.html.haml index 44798da9c..e9951fcaf 100644 --- a/app/assets/templates/frontend/directives/account-menu.html.haml +++ b/app/assets/templates/frontend/directives/account-menu.html.haml @@ -1,44 +1,52 @@ .panel.panel-default.panel-right.account-data-menu .panel-body.large-padding %div{"ng-if" => "!user"} - %div{"ng-if" => "!formData.confirmPassword"} - %p Enter your account information. You can also register for free using the default server address. - .small-v-space - %form.mt-5 - %input.form-control{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'formData.url'} - %input.form-control{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'formData.email'} - %input.form-control{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.user_password'} - .checkbox{"ng-if" => "localNotesCount() > 0"} - %label - %input{"type" => "checkbox", "ng-model" => "formData.mergeLocal", "ng-bind" => "true", "ng-change" => "mergeLocalChanged()"} - Merge local notes ({{localNotesCount()}} notes) + -# Account Section + .mb-10 - %div{"ng-if" => "!formData.status"} - %button.btn.dark-button.half-button{"ng-click" => "loginSubmitPressed()"} + .step-one{"ng-if" => "!formData.showLogin && !formData.showRegister"} + %h3 To enable encryption and sync, sign in or register (free). + .small-v-space + + .button-group.mt-5 + %button.ui-button.half-button{"ng-click" => "formData.showLogin = true"} %span Sign In - %button.btn.dark-button.half-button{"ng-click" => "submitRegistrationForm()"} + %button.ui-button.half-button{"ng-click" => "formData.showRegister = true"} %span Register - %br - .block.bold.center-align{"style" => "font-size: 14px;"} - %a.btn.mt-5{"ng-click" => "formData.showResetForm = !formData.showResetForm"} Passwords cannot be forgotten. - %div{"ng-if" => "formData.confirmPassword"} - %h3 Confirm your password. - %p.mt-5 Note that because your notes are encrypted using your password, Standard Notes does not have a password reset option. You cannot forget your password. - %form.mt-10 - %input.form-control{:placeholder => 'Confirm Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.pw_confirmation'} - %button.btn.dark-button.btn-block{"ng-click" => "submitPasswordConfirmation()"} - %span Confirm + %a.block.mt-10.center-align.centered{"href" => "https://standardnotes.org/your-data", "target" => "_blank"} Learn more about Standard Notes accounts. - %em.block.center-align.mt-10{"ng-if" => "formData.status", "style" => "font-size: 14px;"} {{formData.status}} + .step-two{"ng-if" => "formData.showLogin || formData.showRegister"} + .float-group.h20 + %h3.pull-left {{formData.showLogin ? "Sign In" : "Register (free)"}} + %a.pull-right.pt-5{"ng-click" => "formData.showLogin = false; formData.showRegister = false;"} Cancel - .gray-bg.medium-padding{"ng-if" => "formData.showResetForm"} - %p{"style" => "font-size: 13px;"} - Because notes are locally encrypted using a secret key derived from your password, there's no way to decrypt these notes if you forget your password. - For this reason, Standard Notes cannot offer a password reset option. You - %span.bold must - make sure to store or remember your password. + %form.mt-5 + %input.form-control.mt-10{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'formData.email'} + %input.form-control{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.user_password'} + %input.form-control{:placeholder => 'Confirm Password', "ng-if" => "formData.showRegister", :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.password_conf'} + + %a.block{"ng-click" => "formData.showAdvanced = !formData.showAdvanced"} Advanced Options + .advanced-options.mt-10{"ng-if" => "formData.showAdvanced"} + .float-group + %label.pull-left Standard File Domain + %a.pull-right{"href" => "https://standardnotes.org/your-data", "target" => "_blank"} ⓘ + %input.form-control.mt-5{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'formData.url'} + + .checkbox{"ng-if" => "localNotesCount() > 0"} + %label + %input{"type" => "checkbox", "ng-model" => "formData.mergeLocal", "ng-bind" => "true", "ng-change" => "mergeLocalChanged()"} + Merge local notes ({{localNotesCount()}} notes) + %button.ui-button.block.mt-10{"ng-click" => "submitAuthForm()"} {{formData.showLogin ? "Sign In" : "Register"}} + + .mt-15{"ng-if" => "formData.showRegister"} + %h3 No Password Reset. + %p.mt-5 Because your notes are encrypted using your password, Standard Notes does not have a password reset option. You cannot forget your password. + + %em.block.center-align.mt-10{"ng-if" => "formData.status", "style" => "font-size: 14px;"} {{formData.status}} + + -# End account section %div{"ng-if" => "user"} %h2 {{user.email}} @@ -73,7 +81,7 @@ %form %input.form-control{"type" => "text", "ng-model" => "newPasswordData.newPassword", "placeholder" => "Enter new password"} %input.form-control{"type" => "text", "ng-model" => "newPasswordData.newPasswordConfirmation", "placeholder" => "Confirm new password"} - %button.btn.dark-button.btn-block{"ng-click" => "submitPasswordChange()"} Submit + %button.ui-button.block{"ng-click" => "submitPasswordChange()"} Submit %p.italic.mt-10{"ng-if" => "newPasswordData.status"} {{newPasswordData.status}} .medium-v-space @@ -112,8 +120,8 @@ .mt-25 %h4 Analytics %p - Help Standard Notes improve by sending anonymous data on general usage. Learn more - %a{"href" => "https://standardnotes.org/philosophy", "target" => "_blank"} here. + Help Standard Notes improve by sending anonymous data on general usage. + %a{"href" => "https://standardnotes.org/philosophy", "target" => "_blank"} Learn more. %div.mt-5 %label Status: {{analyticsManager.enabled ? "Enabled" : "Disabled"}} diff --git a/app/assets/templates/frontend/directives/global-extensions-menu.html.haml b/app/assets/templates/frontend/directives/global-extensions-menu.html.haml index c9d0d65bc..840c08124 100644 --- a/app/assets/templates/frontend/directives/global-extensions-menu.html.haml +++ b/app/assets/templates/frontend/directives/global-extensions-menu.html.haml @@ -53,11 +53,11 @@ .large-v-space - %a.block{"ng-click" => "toggleExtensionForm()"} Add new extension + %a.block{"ng-click" => "toggleExtensionForm()"} Add New Extension %form.mt-10.mb-10{"ng-if" => "showNewExtensionForm"} %input.form-control{:autofocus => 'autofocus', :name => 'url', :placeholder => 'Extension URL', :required => true, :type => 'url', 'ng-model' => 'newExtensionData.url'} - %button.btn.dark-button.btn-block{"ng-click" => "submitNewExtensionForm()", :type => 'submit', "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"} + %button.ui-button.block{"ng-click" => "submitNewExtensionForm()", :type => 'submit', "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"} Add Extension %a.block.mt-5{"ng-click" => "reloadExtensionsPressed()", "ng-if" => "extensionManager.extensions.length > 0"} Reload all extensions