From d957ceef6d333567eb1e22dbb119c1c858e6375d Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 26 Jun 2024 17:00:32 +0300
Subject: [PATCH] - Remove password input wrapper - Create prepend inner icon
 for inputs with type password - Fix show/hide icon selection when press tab -
 Fix the order of dialog actions tabindex

---
 .../src/components/password_input_wrapper.vue |  15 -
 packages/playground/src/config.ts             |   2 -
 .../playground/src/global-components.d.ts     |   2 -
 .../src/hooks/use_password_input.ts           |  11 -
 .../src/weblets/profile_manager.vue           | 271 ++++++++++--------
 5 files changed, 145 insertions(+), 156 deletions(-)
 delete mode 100644 packages/playground/src/components/password_input_wrapper.vue
 delete mode 100644 packages/playground/src/hooks/use_password_input.ts

diff --git a/packages/playground/src/components/password_input_wrapper.vue b/packages/playground/src/components/password_input_wrapper.vue
deleted file mode 100644
index 3f1c56b0dc..0000000000
--- a/packages/playground/src/components/password_input_wrapper.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template :x="5">
-  <slot :props="props"></slot>
-</template>
-
-<script lang="ts" setup>
-import { usePasswordInput } from "../hooks";
-
-const props = usePasswordInput();
-</script>
-
-<script lang="ts">
-export default {
-  name: "PasswordInputWrapper",
-};
-</script>
diff --git a/packages/playground/src/config.ts b/packages/playground/src/config.ts
index 0a9c9201e5..695333c8f8 100644
--- a/packages/playground/src/config.ts
+++ b/packages/playground/src/config.ts
@@ -10,12 +10,10 @@ import InputValidator from "./components/input_validator.vue";
 import TfSelectCountry from "./components/node_selector/select_location_internals/TfSelectCountry.vue";
 import TfSelectRegion from "./components/node_selector/select_location_internals/TfSelectRegion.vue";
 import TfSelectionDetails from "./components/node_selector/TfSelectionDetails.vue";
-import PasswordInputWrapper from "./components/password_input_wrapper.vue";
 import ViewLayout from "./components/view_layout.vue";
 import WebletLayout from "./components/weblet_layout.vue";
 import * as validators from "./utils/validators";
 const GLOBAL_COMPONENTS: { [key: string]: Component } = {
-  PasswordInputWrapper,
   WebletLayout,
   CopyInputWrapper,
   DTabs,
diff --git a/packages/playground/src/global-components.d.ts b/packages/playground/src/global-components.d.ts
index 44f7ab4b49..d94858a2b2 100644
--- a/packages/playground/src/global-components.d.ts
+++ b/packages/playground/src/global-components.d.ts
@@ -9,13 +9,11 @@ import InputValidator from "./components/input_validator.vue";
 import TfSelectCountry from "./components/node_selector/select_location_internals/TfSelectCountry.vue";
 import TfSelectRegion from "./components/node_selector/select_location_internals/TfSelectRegion.vue";
 import TfSelectionDetails from "./components/node_selector/TfSelectionDetails.vue";
-import PasswordInputWrapper from "./components/password_input_wrapper.vue";
 import ViewLayout from "./components/view_layout.vue";
 import WebletLayout from "./components/weblet_layout.vue";
 import type * as validators from "./utils/validators";
 declare module "@vue/runtime-core" {
   export interface GlobalComponents {
-    PasswordInputWrapper: typeof PasswordInputWrapper;
     WebletLayout: typeof WebletLayout;
     CopyInputWrapper: typeof CopyInputWrapper;
     DTabs: typeof DTabs;
diff --git a/packages/playground/src/hooks/use_password_input.ts b/packages/playground/src/hooks/use_password_input.ts
deleted file mode 100644
index a060fac2c3..0000000000
--- a/packages/playground/src/hooks/use_password_input.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { computed, reactive, ref } from "vue";
-
-export function usePasswordInput(defaultShow = false) {
-  const show = ref(defaultShow);
-
-  return reactive({
-    type: computed(() => (show.value ? "text" : "password")),
-    "append-inner-icon": computed(() => (show.value ? "mdi-eye-outline" : "mdi-eye-off-outline")),
-    "onClick:append-inner": () => (show.value = !show.value),
-  });
-}
diff --git a/packages/playground/src/weblets/profile_manager.vue b/packages/playground/src/weblets/profile_manager.vue
index 2c36454672..5cdfdcb654 100644
--- a/packages/playground/src/weblets/profile_manager.vue
+++ b/packages/playground/src/weblets/profile_manager.vue
@@ -117,87 +117,90 @@
               >
                 <!-- Mnemonic Input -->
                 <template #activator="{ props: tooltipProps }">
-                  <PasswordInputWrapper #="{ props: passwordInputProps }">
-                    <InputValidator
-                      :value="mnemonic"
-                      :rules="[
-                        validators.required('Mnemonic or Hex Seed is required.'),
-                        v => {
-                          clearError();
-                          if (
-                            validateMnemonic(v) ||
-                            ((v.length === 64 || v.length === 66) && isAddress(v.length === 66 ? v : `0x${v}`))
-                          ) {
-                            return;
-                          }
-                          return {
-                            message: 'Mnemonic or Hex Seed doesn\'t seem to be valid.',
-                          };
-                        },
-                      ]"
-                      valid-message="Mnemonic or Hex Seed is valid."
-                      #="{ props: validationProps }"
-                      ref="mnemonicInput"
-                    >
-                      <v-row>
-                        <v-col cols="12" md="9">
-                          <div v-bind="tooltipProps">
-                            <VTextField
-                              :append-icon="!enableReload && !activatingAccount && mnemonic !== '' ? 'mdi-reload' : ''"
-                              label="Mnemonic or Hex Seed"
-                              placeholder="Please insert your Mnemonic or Hex Seed"
-                              v-model="mnemonic"
-                              v-bind="{
-                                ...passwordInputProps,
-                                ...validationProps,
-                              }"
-                              :disabled="creatingAccount || activatingAccount || activating"
-                              @click:append="reloadValidation"
-                              autocomplete="off"
-                            >
-                              <template v-slot:prepend-inner v-if="validationProps.hint || validationProps.error">
-                                <v-icon :color="validationProps.error ? 'red' : 'green'">
-                                  {{ validationProps.error ? "mdi-close" : "mdi-check" }}
-                                </v-icon>
-                              </template></VTextField
-                            >
-                          </div>
-                        </v-col>
-                        <v-col cols="12" md="3">
-                          <v-tooltip
-                            location="top"
-                            text="Using different keypair types will lead to a completely different account."
+                  <InputValidator
+                    :value="mnemonic"
+                    :rules="[
+                      validators.required('Mnemonic or Hex Seed is required.'),
+                      v => {
+                        clearError();
+                        if (
+                          validateMnemonic(v) ||
+                          ((v.length === 64 || v.length === 66) && isAddress(v.length === 66 ? v : `0x${v}`))
+                        ) {
+                          return;
+                        }
+                        return {
+                          message: 'Mnemonic or Hex Seed doesn\'t seem to be valid.',
+                        };
+                      },
+                    ]"
+                    valid-message="Mnemonic or Hex Seed is valid."
+                    #="{ props: validationProps }"
+                    ref="mnemonicInput"
+                  >
+                    <v-row>
+                      <v-col cols="12" md="9">
+                        <div v-bind="tooltipProps">
+                          <VTextField
+                            :type="showMnemonic ? 'text' : 'password'"
+                            :append-icon="!enableReload && !activatingAccount && mnemonic !== '' ? 'mdi-reload' : ''"
+                            label="Mnemonic or Hex Seed"
+                            placeholder="Please insert your Mnemonic or Hex Seed"
+                            v-model="mnemonic"
+                            v-bind="{
+                              ...validationProps,
+                            }"
+                            :disabled="creatingAccount || activatingAccount || activating"
+                            @click:append="reloadValidation"
+                            autocomplete="off"
                           >
-                            <template #activator="{ props }">
-                              <v-autocomplete
-                                label="Keypair Type"
-                                v-bind="props"
-                                :items="[...keyType]"
-                                item-title="name"
-                                v-model="keypairType"
-                                v-if="activeTab === 1"
-                              />
+                            <template v-slot:prepend-inner v-if="validationProps.hint || validationProps.error">
+                              <v-icon :color="validationProps.error ? 'red' : 'green'">
+                                {{ validationProps.error ? "mdi-close" : "mdi-check" }}
+                              </v-icon>
+                            </template>
+                            <template v-slot:append-inner>
+                              <v-icon tabindex="-1" @click="showMnemonic = !showMnemonic">
+                                {{ showMnemonic ? "mdi-eye-outline" : "mdi-eye-off-outline" }}
+                              </v-icon>
                             </template>
-                          </v-tooltip>
-                        </v-col>
-                      </v-row>
-
-                      <div class="d-flex flex-column flex-md-row justify-end mb-10">
-                        <VBtn
-                          class="mt-2 ml-3"
-                          color="secondary"
-                          variant="outlined"
-                          :disabled="
-                            isValidForm || !!mnemonic || shouldActivateAccount || keypairType === KeypairType.ed25519
-                          "
-                          :loading="creatingAccount"
-                          @click="openAcceptTerms = termsLoading = true"
+                          </VTextField>
+                        </div>
+                      </v-col>
+                      <v-col cols="12" md="3">
+                        <v-tooltip
+                          location="top"
+                          text="Using different keypair types will lead to a completely different account."
                         >
-                          create account
-                        </VBtn>
-                      </div>
-                    </InputValidator>
-                  </PasswordInputWrapper>
+                          <template #activator="{ props }">
+                            <v-autocomplete
+                              label="Keypair Type"
+                              v-bind="props"
+                              :items="[...keyType]"
+                              item-title="name"
+                              v-model="keypairType"
+                              v-if="activeTab === 1"
+                            />
+                          </template>
+                        </v-tooltip>
+                      </v-col>
+                    </v-row>
+
+                    <div class="d-flex flex-column flex-md-row justify-end mb-10">
+                      <VBtn
+                        class="mt-2 ml-3"
+                        color="secondary"
+                        variant="outlined"
+                        :disabled="
+                          isValidForm || !!mnemonic || shouldActivateAccount || keypairType === KeypairType.ed25519
+                        "
+                        :loading="creatingAccount"
+                        @click="openAcceptTerms = termsLoading = true"
+                      >
+                        create account
+                      </VBtn>
+                    </div>
+                  </InputValidator>
                 </template>
               </VTooltip>
 
@@ -263,55 +266,65 @@
               </input-validator>
 
               <!-- Password Input -->
-              <PasswordInputWrapper #="{ props: passwordInputProps }">
-                <InputValidator
-                  :value="password"
-                  :rules="[
-                    validators.required('Password is required.'),
-                    validators.minLength('Password must be at least 6 characters.', 6),
-                    validatePassword,
-                  ]"
-                  #="{ props: validationProps }"
-                  ref="passwordInput"
+              <InputValidator
+                :value="password"
+                :rules="[
+                  validators.required('Password is required.'),
+                  validators.minLength('Password must be at least 6 characters.', 6),
+                  validatePassword,
+                ]"
+                #="{ props: validationProps }"
+                ref="passwordInput"
+              >
+                <v-tooltip
+                  location="top right"
+                  text="Used to encrypt your mnemonic on your local system, and is used to login from the same device."
                 >
-                  <v-tooltip
-                    location="top right"
-                    text="Used to encrypt your mnemonic on your local system, and is used to login from the same device."
-                  >
-                    <template #activator="{ props: tooltipProps }">
-                      <div v-bind="tooltipProps">
-                        <VTextField
-                          label="Password"
-                          v-model="password"
-                          v-bind="{ ...passwordInputProps, ...validationProps }"
-                          :disabled="creatingAccount || activatingAccount || activating"
-                          autocomplete="off"
-                        />
-                      </div>
-                    </template>
-                  </v-tooltip>
-                </InputValidator>
-              </PasswordInputWrapper>
-
-              <PasswordInputWrapper #="{ props: confirmPasswordInputProps }" v-if="activeTab === 1">
-                <InputValidator
-                  :value="confirmPassword"
-                  :rules="[validators.required('A confirmation password is required.'), validateConfirmPassword]"
-                  #="{ props: validationProps }"
-                  ref="confirmPasswordInput"
+                  <template #activator="{ props: tooltipProps }">
+                    <div v-bind="tooltipProps">
+                      <VTextField
+                        :type="showPassword ? 'text' : 'password'"
+                        label="Password"
+                        v-model="password"
+                        v-bind="{ ...validationProps }"
+                        :disabled="creatingAccount || activatingAccount || activating"
+                        autocomplete="off"
+                      >
+                        <template v-slot:append-inner>
+                          <v-icon tabindex="-1" @click="showPassword = !showPassword">
+                            {{ showPassword ? "mdi-eye-outline" : "mdi-eye-off-outline" }}
+                          </v-icon>
+                        </template></VTextField
+                      >
+                    </div>
+                  </template>
+                </v-tooltip>
+              </InputValidator>
+
+              <InputValidator
+                v-if="activeTab === 1"
+                :value="confirmPassword"
+                :rules="[validators.required('A confirmation password is required.'), validateConfirmPassword]"
+                #="{ props: validationProps }"
+                ref="confirmPasswordInput"
+              >
+                <VTextField
+                  :type="showConfirmPassword ? 'text' : 'password'"
+                  label="Confirm Password"
+                  v-model="confirmPassword"
+                  v-bind="{
+                    ...validationProps,
+                  }"
+                  :disabled="creatingAccount || activatingAccount || activating"
+                  autocomplete="off"
                 >
-                  <VTextField
-                    label="Confirm Password"
-                    v-model="confirmPassword"
-                    v-bind="{
-                      ...confirmPasswordInputProps,
-                      ...validationProps,
-                    }"
-                    :disabled="creatingAccount || activatingAccount || activating"
-                    autocomplete="off"
-                  />
-                </InputValidator>
-              </PasswordInputWrapper>
+                  <template v-slot:append-inner>
+                    <v-icon tabindex="-1" @click="showConfirmPassword = !showConfirmPassword">
+                      {{ showConfirmPassword ? "mdi-eye-outline" : "mdi-eye-off-outline" }}
+                    </v-icon>
+                  </template>
+                </VTextField>
+              </InputValidator>
 
               <v-alert type="error" variant="tonal" class="mt-2 mb-4" v-if="loginError">
                 {{ loginError }}
@@ -319,11 +332,14 @@
             </FormValidator>
 
             <div class="d-flex justify-center mt-2">
-              <VBtn color="anchor" variant="outlined" @click="$emit('update:modelValue', false)"> Close </VBtn>
+              <VBtn tabindex="2" color="anchor" variant="outlined" @click="$emit('update:modelValue', false)">
+                Close
+              </VBtn>
               <VBtn
                 class="ml-2"
                 type="submit"
                 color="secondary"
+                tabindex="1"
                 :loading="activating"
                 :disabled="
                   !isValidForm ||
@@ -451,6 +467,9 @@ const keypairType = ref(KeypairType.sr25519);
 const enableReload = ref(true);
 const theme = useTheme();
 const qrCodeText = ref("");
+const showMnemonic = ref(false);
+const showPassword = ref(false);
+const showConfirmPassword = ref(false);
 const props = defineProps({
   modelValue: {
     required: false,