fix: added tooltip with shortcut

frontend/components.d.ts

@@ -142,6 +142,7 @@ declare module 'vue' {
     KanbanIcon: typeof import('./src/components/Icons/KanbanIcon.vue')['default']
     KanbanSettings: typeof import('./src/components/Kanban/KanbanSettings.vue')['default']
     KanbanView: typeof import('./src/components/Kanban/KanbanView.vue')['default']
+    KeyboardShortcut: typeof import('./src/components/KeyboardShortcut.vue')['default']
     LayoutHeader: typeof import('./src/components/LayoutHeader.vue')['default']
     LeadModal: typeof import('./src/components/Modals/LeadModal.vue')['default']
     LeadsIcon: typeof import('./src/components/Icons/LeadsIcon.vue')['default']

frontend/src/components/Controls/Password.vue

@@ -4,22 +4,44 @@
     :value="modelValue || value"
     v-bind="$attrs"
     @keydown.meta.i.prevent="show = !show"
+    @keydown.ctrl.i.prevent="show = !show"
   >
     <template #prefix v-if="$slots.prefix">
       <slot name="prefix" />
     </template>
     <template #suffix>
-      <FeatherIcon
-        v-show="showEye"
-        :name="show ? 'eye-off' : 'eye'"
-        class="h-3 cursor-pointer mr-1"
-        @click="show = !show"
-      />
+      <Tooltip>
+        <template #body>
+          <div
+            class="rounded bg-surface-gray-7 py-1.5 px-2 text-xs text-ink-white shadow-xl"
+          >
+            <span class="flex items-center gap-1">
+              {{ show ? __('Hide Password') : __('Show Password') }}
+              <KeyboardShortcut
+                bg
+                ctrl
+                class="!bg-surface-gray-5 !text-ink-gray-2 px-1"
+              >
+                <span class="font-mono leading-none tracking-widest">+I</span>
+              </KeyboardShortcut>
+            </span>
+          </div>
+        </template>
+        <div>
+          <FeatherIcon
+            v-show="showEye"
+            :name="show ? 'eye-off' : 'eye'"
+            class="h-3 cursor-pointer mr-1"
+            @click="show = !show"
+          />
+        </div>
+      </Tooltip>
     </template>
   </FormControl>
 </template>
 <script setup>
-import { FormControl } from 'frappe-ui'
+import KeyboardShortcut from '@/components/KeyboardShortcut.vue'
+import { FormControl, Tooltip } from 'frappe-ui'
 import { ref, computed } from 'vue'
 
 const props = defineProps({

frontend/src/components/KeyboardShortcut.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    class="inline-flex items-center gap-0.5 text-sm"
+    :class="{
+      'bg-surface-gray-2 rounded-sm text-ink-gray-5 py-0.5 px-1': bg,
+      'text-ink-gray-4': !bg,
+    }"
+  >
+    <span v-if="ctrl || meta">
+      <LucideCommand v-if="isMac" class="w-3 h-3" />
+      <span v-else>Ctrl</span>
+    </span>
+    <span v-if="shift"><LucideShift class="w-3 h-3" /></span>
+    <span v-if="alt"><LucideAlt class="w-3 h-3" /></span>
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import LucideCommand from '~icons/lucide/command'
+import LucideShift from '~icons/lucide/arrow-big-up'
+import LucideAlt from '~icons/lucide/option'
+
+const isMac = navigator.userAgent.includes('Mac')
+
+defineProps({
+  meta: Boolean,
+  ctrl: Boolean,
+  shift: Boolean,
+  alt: Boolean,
+  shortcut: String,
+  bg: Boolean,
+})
+</script>

frontend/src/components/Modals/ChangePasswordModal.vue

@@ -102,23 +102,26 @@ function isStrongPassword(password) {
   return regex.test(password)
 }
 
-watch(newPassword, () => {
+watch([newPassword, confirmPassword], () => {
+  confirmPasswordMessage.value = ''
   newPasswordMessage.value = ''
+
   if (newPassword.value.length < 8) {
     newPasswordMessage.value = 'Password must be at least 8 characters'
   } else if (!isStrongPassword(newPassword.value)) {
     newPasswordMessage.value =
       'Password must contain uppercase, lowercase, number, and symbol'
   }
-})
 
-watch(confirmPassword, () => {
-  confirmPasswordMessage.value = ''
-  if (newPassword.value !== confirmPassword.value) {
+  if (
+    confirmPassword.value.length &&
+    newPassword.value !== confirmPassword.value
+  ) {
     confirmPasswordMessage.value = 'Passwords do not match'
   } else if (
     newPassword.value === confirmPassword.value &&
-    newPassword.value.length
+    newPassword.value.length &&
+    confirmPassword.value.length
   ) {
     confirmPasswordMessage.value = 'Passwords match'
   }