From e35680a0427908f4be12c6edc6bdf678457a94c7 Mon Sep 17 00:00:00 2001
From: Jam <1347620+JamsRepos@users.noreply.github.com>
Date: Sat, 6 Apr 2024 19:00:37 +0100
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=93=A6=20:lipstick:=20Added?=
 =?UTF-8?q?=20password=20meter=20to=20new=20password=20field?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/modules/settings/pages/Password.vue       | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/wizarr-frontend/src/modules/settings/pages/Password.vue b/apps/wizarr-frontend/src/modules/settings/pages/Password.vue
index 741df7db..8b420197 100644
--- a/apps/wizarr-frontend/src/modules/settings/pages/Password.vue
+++ b/apps/wizarr-frontend/src/modules/settings/pages/Password.vue
@@ -1,9 +1,18 @@
 <template>
-    <FormKit type="form" @submit="changePassword" :actions="false">
+    <FormKit
+        type="form"
+        @submit="changePassword"
+        submit-label="Change Password"
+        :actions="false"
+    >
         <div class="space-y-4">
             <FormKit type="password" v-model="old_password" label="Old Password" name="old_password" placeholder="Old Password" required autocomplete="current-password" />
-            <!-- <FormKit type="password" v-model="new_password" label="New Password" name="new_password" placeholder="New Password" required autocomplete="new-password" validation="length:20|*required" /> -->
             <FormKit type="password" v-model="new_password" label="New Password" name="new_password" placeholder="New Password" required autocomplete="new-password" />
+            <PasswordMeter
+                :password="new_password"
+                class="mb-[23px] mt-1 px-[2px]"
+                v-if="new_password"
+            />
             <FormKit type="password" v-model="confirm_password" label="Confirm New Password" name="confirm_password" placeholder="Confirm New Password" required autocomplete="new-password" />
 
             <div class="">
@@ -22,12 +31,14 @@ import DefaultNavBar from "@/components/NavBars/DefaultNavBar.vue";
 import DefaultLoading from "@/components/Loading/DefaultLoading.vue";
 
 import Auth from "@/api/authentication";
+import PasswordMeter from 'vue-simple-password-meter';
 
 export default defineComponent({
     name: "LoginView",
     components: {
         DefaultNavBar,
         DefaultLoading,
+        PasswordMeter,
     },
     data() {
         return {