refactor: 🔧 moved password to account page

apps/wizarr-frontend/src/modules/settings/pages/Account.vue

@@ -1,19 +1,51 @@
 <template>
     <div class="flex flex-col">
-        <span class="border border-yellow-500 rounded p-2 text-yellow-500 text-xs text-center">{{ __("This page is currently read only!") }}</span>
+        <div class="mb-4">
+            <div class="flex flex-col">
+                <div class="text-lg font-bold leading-tight tracking-tight text-gray-900 md:text-xl dark:text-white">Account details</div>
+                <div class="text-xs font-semibold leading-tight tracking-tight text-gray-900 md:text-sm dark:text-gray-400">Change email and name</div>
+            </div>
+        </div>
+        <span class="border border-yellow-500 rounded p-2 text-yellow-500 text-xs text-center">{{ __("This section is currently read only!") }}</span>
         <br />
-        <FormKit type="form" :disabled="true" @submit="saveAccount" :submit-label="__('Save Account')" :submit-attrs="{ wrapperClass: 'flex justify-end' }">
+        <FormKit type="form" @submit="saveAccount" :submit-attrs="{ wrapperClass: 'flex justify-end' }" :actions="false">
             <!-- Name -->
             <div class="flex flex-row flex-wrap gap-2">
-                <FormKit type="text" name="firstName" :value="firstName" :label="__('First name')" :placeholder="__('Marvin')" :classes="{ outer: 'flex-grow' }" />
-                <FormKit type="text" name="lastName" :value="lastName" :label="__('Last name')" :placeholder="__('Martian')" :classes="{ outer: 'flex-grow' }" />
+                <FormKit type="text" name="firstName" :disabled="true" :value="firstName" :label="__('First name')" :placeholder="__('Marvin')" :classes="{ outer: 'flex-grow' }" />
+                <FormKit type="text" name="lastName" :disabled="true" :value="lastName" :label="__('Last name')" :placeholder="__('Martian')" :classes="{ outer: 'flex-grow' }" />
             </div>
 
             <!-- Username -->
-            <FormKit type="text" name="username" :value="user?.username" :label="__('Username')" :placeholder="__('marvin')" />
+            <FormKit type="text" name="username" :disabled="true" :value="user?.username" :label="__('Username')" :placeholder="__('marvin')" />
 
             <!-- Email -->
-            <FormKit type="email" name="email" :value="user?.email" :label="__('Email')" :placeholder="__('[email protected]')" />
+            <FormKit type="email" name="email" :disabled="true" :value="user?.email" :label="__('Email')" :placeholder="__('[email protected]')" />
+
+            <div class="flex w-full justify-end">
+                <FormKit type="submit" :disabled="true" :classes="{ outer: 'w-auto', input: 'text-xs w-auto justify-center !font-bold' }">
+                    {{ __("Save Account") }}
+                </FormKit>
+            </div>
+        </FormKit>
+        <div class="py-4 mt-6 border-t border-gray-200 dark:border-gray-600">
+            <div class="flex flex-col">
+                <div class="text-lg font-bold leading-tight tracking-tight text-gray-900 md:text-xl dark:text-white">Password</div>
+                <div class="text-xs font-semibold leading-tight tracking-tight text-gray-900 md:text-sm dark:text-gray-400">Change password</div>
+            </div>
+        </div>
+        <FormKit type="form" @submit="changePassword" submit-label="Change Password" :actions="false">
+            <div class="space-y-4">
+                <FormKit type="password" v-model="old_password" label="Previous password" name="old_password" placeholder="••••••••" required autocomplete="current-password" />
+                <FormKit type="password" v-model="new_password" label="New password" name="new_password" placeholder="••••••••" 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 password" name="confirm_password" placeholder="••••••••" required autocomplete="new-password" />
+
+                <div class="flex w-full justify-end">
+                    <FormKit type="submit" :classes="{ outer: 'w-auto', input: 'text-xs w-auto justify-center !font-bold' }">
+                        {{ __("Change Password") }}
+                    </FormKit>
+                </div>
+            </div>
         </FormKit>
     </div>
 </template>
@@ -23,6 +55,9 @@ import { defineComponent } from "vue";
 import { useUserStore } from "@/stores/user";
 import { mapState, mapActions } from "pinia";
 
+import Auth from "@/api/authentication";
+import PasswordMeter from "vue-simple-password-meter";
+
 interface SaveAccountData {
     firstName: string;
     lastName: string;
@@ -41,6 +76,17 @@ export default defineComponent({
         },
         ...mapState(useUserStore, ["user"]),
     },
+    components: {
+        PasswordMeter,
+    },
+    data() {
+        return {
+            auth: new Auth(),
+            old_password: "",
+            new_password: "",
+            confirm_password: "",
+        };
+    },
     methods: {
         saveAccount(data: SaveAccountData) {
             this.updateUser({
@@ -50,6 +96,25 @@ export default defineComponent({
             });
         },
         ...mapActions(useUserStore, ["updateUser"]),
+        resetForm() {
+            this.old_password = "";
+            this.new_password = "";
+            this.confirm_password = "";
+        },
+        async changePassword({ old_password, new_password, confirm_password }: { old_password: string; new_password: string; confirm_password: string }) {
+            if (new_password !== confirm_password) {
+                this.$toast.error("Passwords do not match");
+                return;
+            } else if (old_password === new_password) {
+                this.$toast.error("New password cannot be the same as the old password");
+                return;
+            }
+            await this.auth.changePassword(old_password, new_password).then((res) => {
+                if (res !== undefined) {
+                    this.resetForm();
+                }
+            });
+        },
     },
 });
 </script>

apps/wizarr-frontend/src/modules/settings/pages/Main.vue

@@ -162,13 +162,6 @@ export default defineComponent({
                             icon: "fas fa-user-circle",
                             url: "/admin/settings/account",
                         },
-                        {
-                            title: this.__("Password"),
-                            description: this.__("Change your password"),
-                            icon: "fas fa-lock",
-                            url: "/admin/settings/password",
-                            disabled: false,
-                        },
                         {
                             title: this.__("Sessions"),
                             description: this.__("View and manage your active sessions"),

apps/wizarr-frontend/src/modules/settings/router/children.ts

@@ -70,15 +70,6 @@ const children: RouteRecordRaw[] = [
             subheader: "Configure multi-factor authentication",
         },
     },
-    {
-        path: "password",
-        name: "admin-settings-password",
-        component: () => import("../pages/Password.vue"),
-        meta: {
-            header: "Manage Password",
-            subheader: "Change your account password",
-        },
-    },
     {
         path: "tasks",
         name: "admin-settings-tasks",