web/satellite/vuetify-poc: add tooltips for show/hide password eye icon

Added tooltips for show/hide password eye icon saying "Show/Hide password/passphrase" Issue: #6587 Change-Id: Ifbe4f07f69f6410a33323e3ab6cb9e3e0cd3da02
storj · Dec 11, 2023 · 989c786 · 989c786
1 parent ee3ae26
commit 989c786
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 26 deletions.
diff --git a/web/satellite/vuetify-poc/src/components/PasswordInputEyeIcons.vue b/web/satellite/vuetify-poc/src/components/PasswordInputEyeIcons.vue
@@ -0,0 +1,35 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <v-tooltip v-if="isVisible" :text="`Hide ${type}`" location="top">
+        <template #activator="{ props }">
+            <v-icon
+                v-bind="props"
+                icon="mdi-eye-outline"
+                @click="() => emit('toggleVisibility')"
+            />
+        </template>
+    </v-tooltip>
+    <v-tooltip v-else :text="`Show ${type}`" location="top">
+        <template #activator="{ props }">
+            <v-icon
+                v-bind="props"
+                icon="mdi-eye-off-outline"
+                @click="() => emit('toggleVisibility')"
+            />
+        </template>
+    </v-tooltip>
+</template>
+<script setup lang="ts">
+import { VIcon, VTooltip } from 'vuetify/components';
+
+defineProps<{
+    isVisible: boolean
+    type: string
+}>();
+
+const emit = defineEmits<{
+    toggleVisibility: [];
+}>();
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/EnterBucketPassphraseDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/EnterBucketPassphraseDialog.vue
@@ -45,14 +45,20 @@
                                 v-model="passphrase"
                                 :base-color="isWarningState ? 'warning' : ''"
                                 label="Encryption Passphrase"
-                                :append-inner-icon="isPassphraseVisible ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
                                 :type="isPassphraseVisible ? 'text' : 'password'"
                                 variant="outlined"
                                 :hide-details="false"
                                 :rules="[ RequiredRule ]"
                                 autofocus
-                                @click:append-inner="isPassphraseVisible = !isPassphraseVisible"
-                            />
+                            >
+                                <template #append-inner>
+                                    <password-input-eye-icons
+                                        :is-visible="isPassphraseVisible"
+                                        type="passphrase"
+                                        @toggleVisibility="isPassphraseVisible = !isPassphraseVisible"
+                                    />
+                                </template>
+                            </v-text-field>
                         </v-col>
                     </v-row>
                 </v-form>
@@ -111,6 +117,8 @@ import { useLoading } from '@/composables/useLoading';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { useNotify } from '@/utils/hooks';
 
+import PasswordInputEyeIcons from '@poc/components/PasswordInputEyeIcons.vue';
+
 const analyticsStore = useAnalyticsStore();
 const bucketsStore = useBucketsStore();
 const appStore = useAppStore();

diff --git a/...atellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/EnterPassphraseStep.vue b/...atellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/EnterPassphraseStep.vue
@@ -12,15 +12,21 @@
                 <v-text-field
                     v-model="passphrase"
                     label="Encryption Passphrase"
-                    :append-inner-icon="isPassphraseVisible ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
                     :type="isPassphraseVisible ? 'text' : 'password'"
                     variant="outlined"
                     :hide-details="false"
                     :rules="[ RequiredRule ]"
                     autofocus
                     class="mt-2 mb-n4"
-                    @click:append-inner="isPassphraseVisible = !isPassphraseVisible"
-                />
+                >
+                    <template #append-inner>
+                        <password-input-eye-icons
+                            :is-visible="isPassphraseVisible"
+                            type="passphrase"
+                            @toggleVisibility="isPassphraseVisible = !isPassphraseVisible"
+                        />
+                    </template>
+                </v-text-field>
                 <v-checkbox
                     v-if="ackRequired"
                     density="compact"
@@ -44,6 +50,8 @@ import { useBucketsStore } from '@/store/modules/bucketsStore';
 import { EdgeCredentials } from '@/types/accessGrants';
 import { useNotify } from '@/utils/hooks';
 
+import PasswordInputEyeIcons from '@poc/components/PasswordInputEyeIcons.vue';
+
 const bucketsStore = useBucketsStore();
 const notify = useNotify();
 

diff --git a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/AccessEncryptionStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/AccessEncryptionStep.vue
@@ -22,14 +22,19 @@
                             class="mt-6"
                             variant="outlined"
                             label="Encryption Passphrase"
-                            :append-inner-icon="isPassphraseVisible ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
                             :type="isPassphraseVisible ? 'text' : 'password'"
                             :rules="passphraseRules"
                             :hide-details="false"
                             autofocus
-                            @click:append-inner="isPassphraseVisible = !isPassphraseVisible"
-                        />
-                        <!-- <v-divider class="my-4" /> -->
+                        >
+                            <template #append-inner>
+                                <password-input-eye-icons
+                                    :is-visible="isPassphraseVisible"
+                                    type="passphrase"
+                                    @toggleVisibility="isPassphraseVisible = !isPassphraseVisible"
+                                />
+                            </template>
+                        </v-text-field>
                     </template>
                     <v-radio v-else :value="PassphraseOption.UseExistingPassphrase" density="compact" class="pb-4">
                         <template #label>
@@ -105,6 +110,7 @@ import { useBucketsStore } from '@/store/modules/bucketsStore';
 import { ValidationRule, DialogStepComponent } from '@poc/types/common';
 
 import InfoTooltip from '@poc/components/dialogs/createAccessSteps/InfoTooltip.vue';
+import PasswordInputEyeIcons from '@poc/components/PasswordInputEyeIcons.vue';
 
 const emit = defineEmits<{
     'selectOption': [option: PassphraseOption];

diff --git a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/InfoBullet.vue b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/InfoBullet.vue
@@ -39,7 +39,7 @@
 <script setup lang="ts">
 import { VList, VListItem, VListItemTitle, VListItemSubtitle, VIcon, VTooltip } from 'vuetify/components';
 
-const props = withDefaults(defineProps<{
+withDefaults(defineProps<{
     isPro?: boolean;
     title: string;
     info: string;

diff --git a/web/satellite/vuetify-poc/src/views/Login.vue b/web/satellite/vuetify-poc/src/views/Login.vue
@@ -87,9 +87,15 @@
                                 :type="showPassword ? 'text' : 'password'"
                                 :rules="passwordRules"
                                 required
-                                :append-inner-icon="showPassword ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
-                                @click:append-inner="showPassword = !showPassword"
-                            />
+                            >
+                                <template #append-inner>
+                                    <password-input-eye-icons
+                                        :is-visible="showPassword"
+                                        type="password"
+                                        @toggleVisibility="showPassword = !showPassword"
+                                    />
+                                </template>
+                            </v-text-field>
 
                             <v-btn
                                 color="primary"
@@ -151,6 +157,7 @@ import { ErrorTooManyRequests } from '@/api/errors/ErrorTooManyRequests';
 import { ErrorBadRequest } from '@/api/errors/ErrorBadRequest';
 
 import Login2FA from '@poc/views/Login2FA.vue';
+import PasswordInputEyeIcons from '@poc/components/PasswordInputEyeIcons.vue';
 
 import ErrorIcon from '@/../static/images/register/ErrorInfo.svg';
 

diff --git a/web/satellite/vuetify-poc/src/views/PasswordResetNew.vue b/web/satellite/vuetify-poc/src/views/PasswordResetNew.vue
@@ -32,18 +32,30 @@
                                 label="New Password"
                                 placeholder="Enter a new password"
                                 :type="showPassword ? 'text' : 'password'"
-                                :append-inner-icon="showPassword ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
-                                @click:append-inner="showPassword = !showPassword"
-                            />
+                            >
+                                <template #append-inner>
+                                    <password-input-eye-icons
+                                        :is-visible="showPassword"
+                                        type="password"
+                                        @toggleVisibility="showPassword = !showPassword"
+                                    />
+                                </template>
+                            </v-text-field>
 
                             <v-text-field
                                 v-model="password"
                                 label="Confirm Password"
                                 placeholder="Enter the new password again"
                                 :type="showPassword ? 'text' : 'password'"
-                                :append-inner-icon="showPassword ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
-                                @click:append-inner="showPassword = !showPassword"
-                            />
+                            >
+                                <template #append-inner>
+                                    <password-input-eye-icons
+                                        :is-visible="showPassword"
+                                        type="password"
+                                        @toggleVisibility="showPassword = !showPassword"
+                                    />
+                                </template>
+                            </v-text-field>
 
                             <v-btn color="primary" size="large" block router-link to="/password-reset-new-confirmation">
                                 Save New Password
@@ -61,6 +73,8 @@
 import { VBtn, VCard, VCardText, VCol, VContainer, VForm, VRow, VSelect, VTextField } from 'vuetify/components';
 import { ref } from 'vue';
 
+import PasswordInputEyeIcons from '@poc/components/PasswordInputEyeIcons.vue';
+
 const valid = ref(false);
 const checked = ref(false);
 const showPassword = ref(false);

diff --git a/web/satellite/vuetify-poc/src/views/Signup.vue b/web/satellite/vuetify-poc/src/views/Signup.vue
@@ -73,9 +73,15 @@
                                 color="secondary"
                                 :type="showPassword ? 'text' : 'password'"
                                 :rules="passwordRules"
-                                :append-inner-icon="showPassword ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
-                                @click:append-inner="showPassword = !showPassword"
-                            />
+                            >
+                                <template #append-inner>
+                                    <password-input-eye-icons
+                                        :is-visible="showPassword"
+                                        type="password"
+                                        @toggleVisibility="showPassword = !showPassword"
+                                    />
+                                </template>
+                            </v-text-field>
 
                             <v-text-field
                                 v-model="repPassword"
@@ -85,9 +91,15 @@
                                 color="secondary"
                                 :type="showPassword ? 'text' : 'password'"
                                 :rules="repeatPasswordRules"
-                                :append-inner-icon="showPassword ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
-                                @click:append-inner="showPassword = !showPassword"
-                            />
+                            >
+                                <template #append-inner>
+                                    <password-input-eye-icons
+                                        :is-visible="showPassword"
+                                        type="password"
+                                        @toggleVisibility="showPassword = !showPassword"
+                                    />
+                                </template>
+                            </v-text-field>
 
                             <v-alert
                                 v-if="isBetaSatellite"
@@ -217,6 +229,7 @@ import { RouteConfig } from '@/types/router';
 import { useNotify } from '@/utils/hooks';
 
 import SignupConfirmation from '@poc/views/SignupConfirmation.vue';
+import PasswordInputEyeIcons from '@poc/components/PasswordInputEyeIcons.vue';
 
 type ViewConfig = {
     title: string;