From 5c26f41e0baadcf36f33c96553886169a4e8428d Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Wed, 12 Jul 2023 20:16:53 +0200
Subject: [PATCH] Client - make "show password" keyboard-navigable

---
 .../src/components/Common/PasswordInput.vue   | 32 +++++++++++--------
 .../src/components/Common/PasswordStength.vue |  1 +
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/fittrackee_client/src/components/Common/PasswordInput.vue b/fittrackee_client/src/components/Common/PasswordInput.vue
index 75a13877..4d66b486 100644
--- a/fittrackee_client/src/components/Common/PasswordInput.vue
+++ b/fittrackee_client/src/components/Common/PasswordInput.vue
@@ -11,13 +11,15 @@
       @input="updatePassword"
       @invalid="invalidPassword"
     />
-    <div class="show-password" @click="togglePassword">
-      {{ $t(`user.${showPassword ? 'HIDE' : 'SHOW'}_PASSWORD`) }}
-      <i
-        class="fa"
-        :class="`fa-eye${showPassword ? '-slash' : ''}`"
-        aria-hidden="true"
-      />
+    <div class="show-password">
+      <button class="transparent" @click.prevent="togglePassword" type="button">
+        {{ $t(`user.${showPassword ? 'HIDE' : 'SHOW'}_PASSWORD`) }}
+        <i
+          class="fa"
+          :class="`fa-eye${showPassword ? '-slash' : ''}`"
+          aria-hidden="true"
+        />
+      </button>
     </div>
     <div v-if="checkStrength" class="form-info">
       <i class="fa fa-info-circle" aria-hidden="true" />
@@ -71,6 +73,7 @@
     (newPassword) => {
       if (newPassword === '') {
         passwordValue.value = ''
+        showPassword.value = false
       }
     }
   )
@@ -84,12 +87,15 @@
     flex-direction: column;
 
     .show-password {
-      font-style: italic;
-      font-size: 0.85em;
-      text-align: right;
-      margin-top: -0.75 * $default-margin;
-      padding-right: $default-padding;
-      cursor: pointer;
+      margin-top: -0.5 * $default-margin;
+      display: flex;
+      justify-content: right;
+      button {
+        font-style: italic;
+        font-size: 0.85em;
+        padding: $default-padding * 0.5 $default-padding;
+        cursor: pointer;
+      }
     }
   }
 </style>
diff --git a/fittrackee_client/src/components/Common/PasswordStength.vue b/fittrackee_client/src/components/Common/PasswordStength.vue
index d104fcdc..30a39c7d 100644
--- a/fittrackee_client/src/components/Common/PasswordStength.vue
+++ b/fittrackee_client/src/components/Common/PasswordStength.vue
@@ -9,6 +9,7 @@
       min="0"
       max="4"
       step="1"
+      :tabindex="-1"
     />
     <div v-if="passwordStrength" class="password-strength-details">
       <span class="password-strength-value">