Fixed input when it has icon & refactored signin/register to reflect

changes in store

src/components/ui/SeasonedInput.vue

@@ -1,44 +1,55 @@
 <template>
-  <div class="group" :class="{ completed: value }">
-    <svg class="group__input-icon">
-      <use v-bind="{ 'xlink:href': '#icon' + icon }"></use>
-    </svg>
+  <div class="group" :class="{ completed: value, focus }">
+    <component :is="inputIcon" v-if="inputIcon" />
+
     <input
-      class="group__input"
+      class="input"
       :type="tempType || type"
       @input="handleInput"
       v-model="inputValue"
       :placeholder="placeholder"
-      @keyup.enter="submit"
+      @keyup.enter="event => $emit('enter', event)"
+      @focus="focus = true"
+      @blur="focus = false"
     />
 
     <i
       v-if="value && type === 'password'"
       @click="toggleShowPassword"
-      class="group__input-show noselect"
+      @keydown.enter="toggleShowPassword"
+      class="show noselect"
+      tabindex="0"
       >{{ tempType == "password" ? "show" : "hide" }}</i
     >
   </div>
 </template>
 
 <script>
+import IconKey from "../../icons/IconKey";
+import IconEmail from "../../icons/IconEmail";
+
 export default {
+  components: { IconKey, IconEmail },
   props: {
     placeholder: { type: String },
-    icon: { type: String },
     type: { type: String, default: "text" },
     value: { type: String, default: undefined }
   },
   data() {
     return {
       inputValue: this.value || undefined,
-      tempType: this.type
+      tempType: this.type,
+      focus: false
     };
   },
+  computed: {
+    inputIcon() {
+      if (this.type === "password") return IconKey;
+      if (this.type === "email") return IconEmail;
+      return false;
+    }
+  },
   methods: {
-    submit(event) {
-      this.$emit("enter");
-    },
     handleInput(event) {
       if (this.value !== undefined) {
         this.$emit("update:value", this.inputValue);
@@ -62,74 +73,62 @@ export default {
 
 .group {
   display: flex;
-  margin-bottom: 1rem;
   width: 100%;
   position: relative;
   max-width: 35rem;
+  border: 1px solid var(--text-color-50);
+  background-color: var(--background-color-secondary);
 
+  &.completed,
+  &.focus,
   &:hover,
   &:focus {
-    .group__input {
-      border-color: $text-color;
+    border-color: var(--text-color);
 
-      &-icon {
-        fill: $text-color;
-      }
+    svg {
+      fill: var(--text-color);
     }
   }
 
-  &.completed {
-    .group__input {
-      border-color: $text-color;
-
-      &-icon {
-        fill: $text-color;
-      }
-    }
-  }
-
-  &__input {
-    width: 100%;
-    padding: 10px 10px 10px 45px;
-    outline: none;
-    background-color: $background-color-secondary;
-    color: $text-color;
-    font-weight: 100;
-    font-size: 1.2rem;
-    border: 1px solid $text-color-50;
-    margin: 0;
-    margin-left: -2.2rem !important;
-    z-index: 3;
-    transition: color 0.5s ease, background-color 0.5s ease, border 0.5s ease;
-
-    border-radius: 0;
-    -webkit-appearance: none;
-
-    &-show {
-      position: absolute;
-      display: grid;
-      place-items: center;
-      right: 20px;
-      z-index: 11;
-      margin: auto 0;
-      height: 100%;
-      font-size: 0.9rem;
-      cursor: pointer;
-      color: $text-color-50;
-      -webkit-user-select: none;
-      user-select: none;
-    }
-  }
-
-  &__input-icon {
+  svg {
     width: 24px;
     height: 24px;
-    fill: $text-color-50;
-    transition: fill 0.5s ease;
+    fill: var(--text-color-50);
     pointer-events: none;
     margin-top: 10px;
     margin-left: 10px;
     z-index: 8;
   }
+
+  input {
+    width: 100%;
+    padding: 10px;
+    outline: none;
+    background-color: var(--background-color-secondary);
+    color: var(--text-color);
+    font-weight: 100;
+    font-size: 1.2rem;
+    margin: 0;
+    z-index: 3;
+    border: none;
+
+    border-radius: 0;
+    -webkit-appearance: none;
+  }
+
+  .show {
+    position: absolute;
+    display: grid;
+    place-items: center;
+    right: 20px;
+    z-index: 11;
+    margin: auto 0;
+    height: 100%;
+    font-size: 0.9rem;
+    cursor: pointer;
+    color: var(--text-color-50);
+    -webkit-user-select: none;
+    user-select: none;
+  }
 }
 </style>