From b329bcdf9c7aaf69dc0d3cf04f8718ad1723a7c5 Mon Sep 17 00:00:00 2001
From: Tanner R <2151516+TannerR1776@users.noreply.github.com>
Date: Wed, 30 Jun 2021 21:11:53 -0500
Subject: [PATCH] feat(password): refactor password input component to better
 support password managers

---
 src/components/Seed.vue                  |  7 +--
 src/components/Utility/InputPassword.vue | 71 ++++++++++++++++++----
 src/global-styles/custom.scss            | 76 ++++++++++++++++++++----
 src/views/Login.vue                      | 36 +----------
 src/views/Settings.vue                   | 10 ++--
 src/views/Start.vue                      |  4 +-
 6 files changed, 135 insertions(+), 69 deletions(-)

diff --git a/src/components/Seed.vue b/src/components/Seed.vue
index d74f2af8..7e3ac0a0 100644
--- a/src/components/Seed.vue
+++ b/src/components/Seed.vue
@@ -6,11 +6,8 @@
         v-model="password"
         ref="password"
         placeholder="Password"
-        inputGroupClass="neu-input-group"
-        :inputClass="[
-                    isIncorrectPassword ? 'incorrect-password' : '',
-                    'form-control form-control-lg neu-input w-100'
-                  ]"
+        displayStyle="FormStyle"
+        :displayInvalidAttempt="isIncorrectPassword"
         :disabled="isLoadingSeed"
       />
 
diff --git a/src/components/Utility/InputPassword.vue b/src/components/Utility/InputPassword.vue
index 39cebfcd..86f9b1fd 100644
--- a/src/components/Utility/InputPassword.vue
+++ b/src/components/Utility/InputPassword.vue
@@ -1,16 +1,15 @@
 <template>
-  <b-input-group :class="inputGroupClass">
-    <!-- Todo: make it work with b-form-input + v-model -->
-    <input
-      :class="inputClass"
+  <b-input-group :class="[getGroupClassesByStyle, displayInvalidAttempt ? 'incorrect-password' : '']">
+    <b-form-input
+      :class="getInputClassesByStyle"
       :placeholder="placeholder"
       :type="showPassword ? 'text' : 'password'"
-      v-bind:value="value"
-      v-on:input="$emit('input', $event.target.value)"
+      :value="value"
+      @input="updateInputValue"
       :disabled="disabled"
     />
     <b-input-group-append>
-      <b-button @click="togglePassword" :disabled="disabled">
+      <b-button :class="getInputClassesByStyle" @click="togglePassword" :disabled="disabled">
         <b-icon :icon="showPassword ? 'eye-slash-fill' : 'eye-fill'"></b-icon>
       </b-button>
     </b-input-group-append>
@@ -18,13 +17,18 @@
 </template>
 
 <script>
+const CardStyle = "CardStyle";
+const FormStyle = "FormStyle";
 export default {
   props: {
     value: String,
-    inputClass: [String, Array],
-    inputGroupClass: {
+    displayInvalidAttempt: {
+      type: Boolean,
+      default: false
+    },
+    displayStyle: {
       type: String,
-      default: "card-input-group"
+      default: CardStyle
     },
     placeholder: String,
     disabled: {
@@ -35,7 +39,17 @@ export default {
   computed: {
     showPassword() {
       return this.state.showPassword;
-    }
+    },
+    getGroupClassesByStyle() {
+      return this.displayStyle === FormStyle
+        ? "form-input-group"
+        : "card-input-group";
+    },
+    getInputClassesByStyle() {
+      return this.displayStyle === FormStyle
+        ? "form-control-lg form-input-group-input btn-lg"
+        : "card-input-group-input";
+    },
   },
   data() {
     return {
@@ -47,9 +61,42 @@ export default {
   methods: {
     togglePassword() {
       return (this.state.showPassword = !this.state.showPassword);
+    },
+    updateInputValue: function(val) {
+      this.$emit("input", val);
     }
   }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.incorrect-password {
+  animation: shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+@keyframes shake {
+  10%,
+  90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+
+  20%,
+  80% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  30%,
+  50%,
+  70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  40%,
+  60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
+</style>
diff --git a/src/global-styles/custom.scss b/src/global-styles/custom.scss
index 8a5900c0..fb83737a 100644
--- a/src/global-styles/custom.scss
+++ b/src/global-styles/custom.scss
@@ -129,6 +129,48 @@ a {
     }
 }
   
+.form-input-group {
+    border-radius: 1rem;
+
+  .form-input-group-input {
+      box-shadow: inset 2px 7px 9px -7px rgba(0,0,0,0.2),  //top 
+                  inset 2px -7px 9px -7px rgba(0,0,0,0.2), //bottom 
+                  inset 5px 0 5px -7px rgba(0,0,0,0.2);    //left
+      border: none !important;  
+    }
+
+  .form-input-group-input:focus {
+      box-shadow: inset 3px 7px 9px -7px rgba(0,0,0,0.3),  //top 
+                  inset 3px -7px 9px -7px rgba(0,0,0,0.3), //bottom 
+                  inset 5px 0 5px -7px rgba(0,0,0,0.3);    //left
+      border: none !important;
+  }
+
+  .form-input-group-input:focus + .input-group-append > .btn-lg {
+    box-shadow: inset -3px 7px 9px -7px rgba(0,0,0,0.3),  //top
+                inset -3px -7px 9px -7px rgba(0,0,0,0.3), //bottom
+                inset -5px 0 5px -7px rgba(0,0,0,0.3)     //right
+                !important; 
+  }
+
+  .input-group-append {
+    margin-left: 0px;
+  }
+
+  .input-group-append > .btn-lg {
+    padding: 0.375rem 0.75rem;
+    color: #616877;
+    box-shadow: inset -2px 7px 9px -7px rgba(0,0,0,0.2),  //top
+                inset -2px -7px 9px -7px rgba(0,0,0,0.2), //bottom
+                inset -5px 0 5px -7px rgba(0,0,0,0.2)     //right
+               !important; 
+    background-color: unset;
+  }
+
+  .input-group-append > .btn-lg:active {
+    background-color: unset;
+  }
+}
 
 .dropdown-menu {
     background: #ffffff;
@@ -160,19 +202,33 @@ a {
 }
 
 .card-input-group {
-    .card-input {
-        padding-right: 3rem;
+    box-shadow: 0px 10px 30px rgba(209, 213, 223, 0.5);
+    border-radius: 1rem;
+
+    &:hover,
+    &:focus,
+    &:active {
+      box-shadow: 0px 10px 40px rgba(209, 213, 223, 0.9);
+    }
+
+    .card-input-group-input {
+        -webkit-appearance: none; //iOS messes up forms - See: https://stackoverflow.com/questions/10757146/iphone-ios-will-not-display-box-shadow-properly
+        border-radius: 1rem;
+        height: calc(2.25em + 1.125rem + 2px);
+        padding: 0.5rem 1rem;
+        outline: 0 !important;
+        border: none !important;
+
+        &:hover,
+        &:focus,
+        &:active {
+            box-shadow: none;
+        }
     }
+    
     .input-group-append > .btn {
-        background: none !important;
         color: #616877;
-        border: none !important;    
-        outline: none !important;
-        box-shadow: none !important;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        right: 0.5rem;
+        background-color: #ffffff !important;
     }
 }
 
diff --git a/src/views/Login.vue b/src/views/Login.vue
index f0fb9217..293c06dd 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -21,10 +21,8 @@
           v-model="password"
           ref="password"
           placeholder="Password"
-          :inputClass="[
-            isIncorrectPassword ? 'incorrect-password' : '',
-            'card-input w-100'
-          ]"
+          formStyle="CardInput"
+          :displayInvalidAttempt="isIncorrectPassword"
           :disabled="isLoggingIn"
         />
         <div class="login-button-container">
@@ -143,36 +141,6 @@ export default {
   }
 }
 
-.incorrect-password {
-  animation: shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
-  transform: translate3d(0, 0, 0);
-  backface-visibility: hidden;
-  perspective: 1000px;
-}
-
-@keyframes shake {
-  10%,
-  90% {
-    transform: translate3d(-1px, 0, 0);
-  }
-
-  20%,
-  80% {
-    transform: translate3d(2px, 0, 0);
-  }
-
-  30%,
-  50%,
-  70% {
-    transform: translate3d(-4px, 0, 0);
-  }
-
-  40%,
-  60% {
-    transform: translate3d(4px, 0, 0);
-  }
-}
-
 .loading-fade-blink {
   animation: loadingFadeBlink 1s infinite linear;
 }
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index a94c51ed..4c3dbb2a 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -173,8 +173,8 @@
                   <input-password
                     v-model="currentPassword"
                     ref="password"
-                    inputGroupClass="neu-input-group"
-                    :inputClass="[ isIncorrectPassword ? 'incorrect-password' : '', 'form-control form-control-lg neu-input w-100']"
+                    displayStyle="FormStyle"
+                    :displayInvalidAttempt="isIncorrectPassword"
                     :disabled="isChangingPassword"
                   />
                   <div class="py-2"></div>
@@ -182,8 +182,7 @@
                   <input-password
                     v-model="newPassword"
                     ref="password"
-                    inputGroupClass="neu-input-group"
-                    inputClass="form-control form-control-lg neu-input w-100"
+                    displayStyle="FormStyle"
                     :disabled="isChangingPassword"
                   />
                   <div class="py-2"></div>
@@ -191,8 +190,7 @@
                   <input-password
                     v-model="confirmNewPassword"
                     ref="password"
-                    inputGroupClass="neu-input-group"
-                    inputClass="form-control form-control-lg neu-input w-100"
+                    displayStyle="FormStyle"
                     :disabled="isChangingPassword"
                   />
                   <div class="py-2"></div>
diff --git a/src/views/Start.vue b/src/views/Start.vue
index 1d01f418..9c80c3a4 100644
--- a/src/views/Start.vue
+++ b/src/views/Start.vue
@@ -20,7 +20,7 @@
           ref="password"
           v-show="currentStep === 2"
           placeholder="Your password"
-          inputClass="card-input w-100"
+          displayStyle="CardInput"
         />
 
         <input-password
@@ -28,7 +28,7 @@
           ref="confirmPassword"
           placeholder="Re-enter your password"
           v-show="currentStep === 3"
-          inputClass="card-input w-100"
+          displayStyle="CardInput"
         />
 
         <div v-show="currentStep === 5">