fix: change password validation messsage

frontend/src/components/Controls/Password.vue

@@ -3,17 +3,25 @@
     :type="show ? 'text' : 'password'"
     :value="modelValue || value"
     v-bind="$attrs"
+    @keydown.meta.i.prevent="show = !show"
   >
+    <template #prefix v-if="$slots.prefix">
+      <slot name="prefix" />
+    </template>
     <template #suffix>
-      <Button v-show="showEye" class="!h-4" @click="show = !show">
-        <FeatherIcon :name="show ? 'eye-off' : 'eye'" class="h-3" />
-      </Button>
+      <FeatherIcon
+        v-show="showEye"
+        :name="show ? 'eye-off' : 'eye'"
+        class="h-3 cursor-pointer mr-1"
+        @click="show = !show"
+      />
     </template>
   </FormControl>
 </template>
 <script setup>
 import { FormControl } from 'frappe-ui'
 import { ref, computed } from 'vue'
+
 const props = defineProps({
   modelValue: {
     type: [String, Number],

frontend/src/components/Modals/ChangePasswordModal.vue

@@ -1,12 +1,39 @@
 <template>
   <Dialog v-model="show" :options="{ title: __('Change Password') }">
     <template #body-content>
-      <Password
-        v-model="newPassword"
-        :label="__('New Password')"
-        class="mb-4"
-      />
-      <Password v-model="confirmPassword" :label="__('Confirm Password')" />
+      <div class="flex flex-col gap-4">
+        <div>
+          <Password v-model="newPassword" :placeholder="__('New Password')">
+            <template #prefix>
+              <LockKeyhole class="size-4 text-ink-gray-4" />
+            </template>
+          </Password>
+          <p v-if="newPasswordMessage" class="text-sm text-ink-gray-5 mt-2">
+            {{ newPasswordMessage }}
+          </p>
+        </div>
+        <div>
+          <Password
+            v-model="confirmPassword"
+            :placeholder="__('Confirm Password')"
+          >
+            <template #prefix>
+              <LockKeyhole class="size-4 text-ink-gray-4" />
+            </template>
+          </Password>
+          <p
+            v-if="confirmPasswordMessage"
+            class="text-sm text-ink-gray-5 mt-2"
+            :class="
+              confirmPasswordMessage === 'Passwords match'
+                ? 'text-ink-green-3'
+                : 'text-ink-red-3'
+            "
+          >
+            {{ confirmPasswordMessage }}
+          </p>
+        </div>
+      </div>
     </template>
     <template #actions>
       <div class="flex justify-between items-center">
@@ -27,11 +54,12 @@
   </Dialog>
 </template>
 <script setup>
+import LockKeyhole from '~icons/lucide/lock-keyhole'
 import Password from '@/components/Controls/Password.vue'
 import { usersStore } from '@/stores/users'
 import { Dialog, toast, createResource } from 'frappe-ui'
 import { useOnboarding } from 'frappe-ui/frappe'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 const show = defineModel()
 
@@ -40,6 +68,8 @@ const { updateOnboardingStep } = useOnboarding('frappecrm')
 
 const newPassword = ref('')
 const confirmPassword = ref('')
+const newPasswordMessage = ref('')
+const confirmPasswordMessage = ref('')
 
 const error = ref('')
 
@@ -65,4 +95,32 @@ const updatePassword = createResource({
     error.value = err.messages[0] || __('Failed to update password')
   },
 })
+
+function isStrongPassword(password) {
+  const regex =
+    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
+  return regex.test(password)
+}
+
+watch(newPassword, () => {
+  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) {
+    confirmPasswordMessage.value = 'Passwords do not match'
+  } else if (
+    newPassword.value === confirmPassword.value &&
+    newPassword.value.length
+  ) {
+    confirmPasswordMessage.value = 'Passwords match'
+  }
+})
 </script>

frontend/src/components/Settings/Users.vue

@@ -69,7 +69,7 @@
     <!-- Users List -->
     <ul
       v-if="!users.loading && Boolean(users.data?.length)"
-      class="divide-y overflow-auto"
+      class="divide-y divide-outline-gray-modals overflow-auto"
     >
       <li
         class="flex items-center justify-between py-2"