Added:

- tooltip for passwords Cleanup based on comments
MerginMaps · Jan 9, 2024 · 9f8c1d5 · 9f8c1d5
1 parent 184fcc1
commit 9f8c1d5
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 35 deletions.
diff --git a/web-app/packages/lib/src/common/components/AppPasswordTooltip.vue b/web-app/packages/lib/src/common/components/AppPasswordTooltip.vue
@@ -0,0 +1,33 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
+<template>
+  <label class="flex align-items-center" :for="'for'"
+    ><slot name="label"></slot>&nbsp;
+    <i
+      class="ti ti-info-circle-filled cursor-pointer text-color-medium-green hover:text-color text-base"
+      :style="{ color: 'var(--medium-green-color)' }"
+      v-tooltip="{
+        value: tooltip,
+        escape: false
+      }"
+  /></label>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ for: string }>()
+const tooltip = `
+  <ul>
+    <li>Password must be at least 8 characters long.</li>
+    <li>Password must contain at least 3 character categories among the following:
+      Lowercase characters (a-z)
+      Uppercase characters (A-Z)
+      Digits (0-9)
+      Special characters
+    </li>
+  </ul>
+`
+</script>
diff --git a/web-app/packages/lib/src/modules/user/components/ChangePasswordForm.vue b/web-app/packages/lib/src/modules/user/components/ChangePasswordForm.vue
@@ -29,14 +29,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     </span>
 
     <span class="p-input-filled">
-      <label class="flex align-items-center" for="newPassword"
-        >New Password&nbsp;<i
-          class="ti ti-info-circle-filled cursor-pointer text-color-medium-green hover:text-color text-base"
-          v-tooltip="{
-            value: passwordTooltip,
-            escape: false
-          }"
-      /></label>
+      <app-password-tooltip for="newPassword"
+        ><template #label>New Password</template>
+      </app-password-tooltip>
 
       <PPassword
         id="newPassword"
@@ -59,16 +54,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     </span>
 
     <span class="p-input-filled">
-      <label class="flex align-items-center" for="confirm"
-        >Confirm password&nbsp;
-        <i
-          class="ti ti-info-circle-filled cursor-pointer text-color-medium-green hover:text-color text-base"
-          :style="{ color: 'var(--medium-green-color)' }"
-          v-tooltip="{
-            value: passwordTooltip,
-            escape: false
-          }"
-      /></label>
+      <app-password-tooltip for="confirm">
+        <template #label>Change password</template>
+      </app-password-tooltip>
 
       <PPassword
         id="confirm"
@@ -120,6 +108,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
 
+import AppPasswordTooltip from '@/common/components/AppPasswordTooltip.vue'
 import { waitCursor } from '@/common/html_utils'
 import { useDialogStore } from '@/modules/dialog/store'
 import { useFormStore } from '@/modules/form/store'
@@ -138,18 +127,6 @@ export default defineComponent({
     ...mapState(useFormStore, ['getErrorByComponentId']),
     errors() {
       return this.getErrorByComponentId(this.merginComponentUuid) ?? {}
-    },
-    passwordTooltip() {
-      return `
-      <ul>
-        <li>Password must be at least 8 characters long.</li>
-        <li>Password must contain at least 3 character categories among the following:</li>
-          Lowercase characters (a-z)
-          Uppercase characters (A-Z)
-          Digits (0-9)
-          Special characters
-      </ul>
-      `
     }
   },
   beforeDestroy() {
@@ -174,6 +151,7 @@ export default defineComponent({
       waitCursor(true)
       this.changePasswordAction({ data, componentId: this.merginComponentUuid })
     }
-  }
+  },
+  components: { AppPasswordTooltip }
 })
 </script>
diff --git a/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue b/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue
@@ -57,10 +57,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     </app-container>
     <app-container>
       <app-section class="p-4">
-        <div
-          v-if="loggedUser"
-          class="flex flex-column align-items-center row-gap-3 text-center"
-        >
+        <div class="flex flex-column align-items-center row-gap-3 text-center">
           <PAvatar
             :label="(loggedUser.username ?? '').charAt(0).toUpperCase()"
             shape="circle"