Added show password button to new sync password fields.

Fixed Android bug when back button does not cause the correct action for certain screens. Fixed Android button styles to remove hover/focus pseudo class styling. Updated localised strings.
xbrowsersync · Jan 5, 2020 · b721db8 · b721db8
1 parent 4ebff3b
commit b721db8
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 54 deletions.
diff --git a/css/styles.scss b/css/styles.scss
@@ -113,6 +113,11 @@ body {
         transition: color ease-in-out 0.2s;
         z-index: 10;
 
+        &:active {
+          background-color: $colour-link-highlight;
+          color: $colour-text1;
+        }
+
         &.fixed {
           position: fixed;
           bottom: 1rem;
@@ -357,7 +362,7 @@ body {
         font-size: 0.9em;
         color: $colour-text1;
         border-radius: $border-radius-input;
-        background: #7db2be;
+        background-color: #7db2be;
         z-index: 55;
 
         &:focus {
@@ -368,6 +373,7 @@ body {
           }
         }
 
+        &:active,
         &:hover {
           background: $colour-bg2;
         }
@@ -537,7 +543,7 @@ body {
     color: #fff;
     background: $colour-danger;
     padding: 0 0.5rem;
-    z-index: 20;
+    z-index: 60;
     border-radius: $border-radius-input;
   }
 
@@ -708,6 +714,7 @@ body {
       line-height: 1.2rem;
       max-width: 99%;
 
+      &:active,
       &:hover,
       &:focus {
         cursor: pointer;
@@ -734,7 +741,6 @@ body {
   }
 
   .tags-input-container {
-    @extend .btn-icon-container;
     border-radius: $border-radius-input;
     background-color: $colour-text1;
     overflow: hidden;

diff --git a/js/app.js b/js/app.js
@@ -1029,6 +1029,7 @@ xBrowserSync.App.Controller = function ($q, $timeout, platform, globals, api, ut
     vm.sync.password = '';
     vm.sync.passwordComplexity = {};
     vm.sync.passwordConfirmation = null;
+    vm.sync.showPassword = false;
     vm.sync.upgradeConfirmed = false;
     if (vm.syncForm) {
       vm.syncForm.$setPristine();

diff --git a/platform/android/css/platform.scss b/platform/android/css/platform.scss
@@ -92,36 +92,19 @@ body {
   }
 
   button.btn {
-    &.btn-default {
-      &:not([disabled]):active:hover {
-        background-color: $colour-text1;
-        color: $colour-link-highlight;
-        border-color: $colour-text1;
-      }
-
-      &:not([disabled]):hover {
+    &.btn-default:not([disabled]) {
+      &:hover,
+      &:focus {
         background-color: transparent;
         color: $colour-text1;
         border-color: $colour-text1;
-      }
-
-      &:not([disabled]):focus {
         text-decoration: none;
       }
     }
 
-    &.btn-default:not([disabled]):focus {
-      text-decoration: none;
-    }
-
     &.btn-icon {
-      &:active:hover {
-        i {
-          opacity: 1;
-        }
-      }
-
-      &:hover {
+      &:hover,
+      &:focus {
         i {
           opacity: 0.4;
         }
@@ -148,6 +131,18 @@ body {
     height: 100vh;
   }
 
+  .form-group {
+    &.btn-icon-container {
+      .btn-icon {
+        &:focus,
+        &:hover {
+          background-color: #7db2be;
+          border: none;
+        }
+      }
+    }
+  }
+
   .header-panel {
     font-size: 1.5rem;
     margin-bottom: 0.75rem;
@@ -177,23 +172,17 @@ body {
   }
 
   .well {
-    .btn.btn-default {
-      color: $colour-text2;
-      border-color: $colour-text2;
-      font-weight: normal;
-      border-width: 1px;
+    button.btn.btn-default {
       font-size: 1rem;
 
-      &:not([disabled]):active:hover {
-        background-color: $colour-text2;
-        color: $colour-link-highlight;
-        border-color: $colour-text2;
-      }
-
-      &:not([disabled]):hover {
-        background-color: transparent;
-        color: $colour-text2;
-        border-color: $colour-text2;
+      &:not([disabled]) {
+        &:hover,
+        &:focus {
+          background-color: transparent;
+          color: $colour-text2;
+          border-color: $colour-text2;
+          text-decoration: none;
+        }
       }
     }
   }
@@ -215,6 +204,13 @@ body {
     .badge {
       font-size: 1rem;
       line-height: 1.3rem;
+
+      &:focus,
+      &:hover {
+        i {
+          color: $colour-link;
+        }
+      }
     }
 
     .label {

diff --git a/platform/android/js/platformImplementation.js b/platform/android/js/platformImplementation.js
@@ -637,7 +637,7 @@ xBrowserSync.App.PlatformImplementation = function ($interval, $q, $timeout, pla
       "message": "Local data has been refreshed, please redo previous unsynced changes."
     },
     "error_OutOfSync_Title": {
-      "message": "Data out of sync"
+      "message": "Sync conflict detected"
     },
     "error_OutOfSync_Message": {
       "message": "Local data was out of sync and has now been refreshed. Please redo previous unsynced changes."
@@ -1570,7 +1570,10 @@ xBrowserSync.App.PlatformImplementation = function ($interval, $q, $timeout, pla
   var handleBackButton = function (event) {
     if (vm.view.current === vm.view.views.bookmark ||
       vm.view.current === vm.view.views.settings ||
-      vm.view.current === vm.view.views.about
+      vm.view.current === vm.view.views.help ||
+      vm.view.current === vm.view.views.support ||
+      vm.view.current === vm.view.views.updated ||
+      vm.view.current === vm.view.views.scan
     ) {
       // Back to login/search panel
       event.preventDefault();

diff --git a/platform/chrome/_locales/de/messages.json b/platform/chrome/_locales/de/messages.json
@@ -630,7 +630,7 @@
     "message": "Local data has been refreshed, please redo previous unsynced changes."
   },
   "error_OutOfSync_Title": {
-    "message": "Daten nicht mehr synchron"
+    "message": "Sync conflict detected"
   },
   "error_OutOfSync_Message": {
     "message": "Local data was out of sync and has now been refreshed. Please redo previous unsynced changes."

diff --git a/platform/chrome/_locales/en/messages.json b/platform/chrome/_locales/en/messages.json
@@ -630,7 +630,7 @@
     "message": "Local data has been refreshed, please redo previous unsynced changes."
   },
   "error_OutOfSync_Title": {
-    "message": "Data out of sync"
+    "message": "Sync conflict detected"
   },
   "error_OutOfSync_Message": {
     "message": "Local data was out of sync and has now been refreshed. Please redo previous unsynced changes."

diff --git a/platform/chrome/_locales/fr/messages.json b/platform/chrome/_locales/fr/messages.json
@@ -630,7 +630,7 @@
     "message": "Local data has been refreshed, please redo previous unsynced changes."
   },
   "error_OutOfSync_Title": {
-    "message": "Données non synchronisées"
+    "message": "Sync conflict detected"
   },
   "error_OutOfSync_Message": {
     "message": "Local data was out of sync and has now been refreshed. Please redo previous unsynced changes."

diff --git a/platform/firefox/_locales/en/messages.json b/platform/firefox/_locales/en/messages.json
@@ -630,7 +630,7 @@
     "message": "Local data has been refreshed, please redo previous unsynced changes."
   },
   "error_OutOfSync_Title": {
-    "message": "Data out of sync"
+    "message": "Sync conflict detected"
   },
   "error_OutOfSync_Message": {
     "message": "Local data was out of sync and has now been refreshed. Please redo previous unsynced changes."

diff --git a/views/bookmark.html b/views/bookmark.html
@@ -50,7 +50,7 @@ <h2 data-ng-if="!vm.bookmark.displayUpdateForm">{{ vm.platform.GetConstant(vm.gl
       placeholder="{{ vm.platform.GetConstant(vm.globals.Constants.Bookmark_DescriptionField_Label) }}"></textarea>
   </div>
   <div class="mobile-landscape">
-    <div class="form-group tags-input-container">
+    <div class="form-group tags-input-container btn-icon-container">
       <label for="bookmarkTags" class="sr-only">{{ vm.platform.GetConstant(vm.globals.Constants.Bookmark_TagsField_Label)
       }}</label>
       <input type="text" class="form-control" name="bookmarkTags"

diff --git a/views/login.html b/views/login.html
@@ -21,12 +21,19 @@
     data-ng-show="vm.sync.displayNewSyncPanel">
     <div data-ng-if="!vm.utility.IsMobilePlatform(vm.platformName)">
       <div class="animate-fade-in" data-ng-show="vm.sync.displayPasswordConfirmation">
-        <div class="form-group secret-form-group">
+        <div class="form-group secret-form-group btn-icon-container">
           <label class="sr-only" for="txtPasswordConfirmation">{{
           vm.platform.GetConstant(vm.globals.Constants.Login_PasswordConfirmationField_Label) }}</label>
-          <input name="txtPasswordConfirmation" data-ng-model="vm.sync.passwordConfirmation" type="password"
-            class="form-control" maxlength="150"
-            placeholder="{{ vm.platform.GetConstant(vm.globals.Constants.Login_PasswordConfirmationField_Label) }}" />
+          <input class="form-control" name="txtPasswordConfirmation" data-ng-model="vm.sync.passwordConfirmation"
+            type="{{ vm.sync.showPassword ? 'text' : 'password' }}" maxlength="150"
+            placeholder="{{ vm.platform.GetConstant(vm.globals.Constants.Login_PasswordConfirmationField_Label) }}"
+            spellcheck="false" />
+          <button class="btn btn-icon btn-show-password" data-ng-class="{ 'active': vm.sync.showPassword }"
+            data-ng-show="vm.sync.password"
+            title="{{ vm.platform.GetConstant(vm.globals.Constants.Button_ShowPassword_Label) }}"
+            data-ng-click="vm.events.syncForm_ShowPassword_Click()">
+            <i class="fas fa-eye" aria-hidden="true"></i>
+          </button>
         </div>
         <div class="form-group buttons">
           <button type="button" class="btn btn-default btn-new-sync"
@@ -40,13 +47,20 @@
         </div>
       </div>
       <div class="animate-fade-in" data-ng-hide="vm.sync.displayPasswordConfirmation">
-        <div class="form-group secret-form-group"
+        <div class="form-group secret-form-group btn-icon-container"
           data-ng-class="{ true: 'has-error' }[vm.syncForm.$submitted && vm.syncForm.txtPassword.$invalid]">
           <label class="sr-only" for="txtPassword">{{
           vm.platform.GetConstant(vm.globals.Constants.Login_PasswordField_Label) }}</label>
-          <input name="txtPassword" data-ng-model="vm.sync.password" type="password" class="form-control"
-            data-zxcvbn="vm.sync.passwordComplexity" data-ng-disabled="vm.sync.enabled" maxlength="150"
+          <input class="form-control" name="txtPassword" data-ng-model="vm.sync.password"
+            type="{{ vm.sync.showPassword ? 'text' : 'password' }}" data-zxcvbn="vm.sync.passwordComplexity"
+            data-ng-disabled="vm.sync.enabled" maxlength="150" spellcheck="false"
             placeholder="{{ vm.platform.GetConstant(vm.globals.Constants.Login_PasswordField_New_Description) }}" />
+          <button class="btn btn-icon btn-show-password" data-ng-class="{ 'active': vm.sync.showPassword }"
+            data-ng-show="vm.sync.password"
+            title="{{ vm.platform.GetConstant(vm.globals.Constants.Button_ShowPassword_Label) }}"
+            data-ng-click="vm.events.syncForm_ShowPassword_Click()">
+            <i class="fas fa-eye" aria-hidden="true"></i>
+          </button>
           <div class="validation" data-ng-if="vm.sync.password && ((vm.sync.passwordComplexity.feedback.suggestions && vm.sync.passwordComplexity.feedback.suggestions.length > 0) || 
           vm.sync.passwordComplexity.feedback.warning)">
             {{ vm.sync.passwordComplexity.feedback.warning ? vm.sync.passwordComplexity.feedback.warning :