From dfc649043a88e775c9b3db1124d6d92f6b6c5368 Mon Sep 17 00:00:00 2001
From: PhantomMantis <phantommedia01@gmail.com>
Date: Fri, 12 Apr 2024 21:51:55 -0600
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=94=A7=20moved=20password=20t?=
 =?UTF-8?q?o=20account=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/modules/settings/pages/Account.vue    | 77 +++++++++++++++++--
 .../src/modules/settings/pages/Main.vue       |  7 --
 .../src/modules/settings/pages/Password.vue   | 64 ---------------
 .../src/modules/settings/router/children.ts   |  9 ---
 4 files changed, 71 insertions(+), 86 deletions(-)
 delete mode 100644 apps/wizarr-frontend/src/modules/settings/pages/Password.vue

diff --git a/apps/wizarr-frontend/src/modules/settings/pages/Account.vue b/apps/wizarr-frontend/src/modules/settings/pages/Account.vue
index 0107a51ed..ef9db652d 100644
--- a/apps/wizarr-frontend/src/modules/settings/pages/Account.vue
+++ b/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="__('marvin@wizarr.dev')" />
+            <FormKit type="email" name="email" :disabled="true" :value="user?.email" :label="__('Email')" :placeholder="__('marvin@wizarr.dev')" />
+
+            <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>
diff --git a/apps/wizarr-frontend/src/modules/settings/pages/Main.vue b/apps/wizarr-frontend/src/modules/settings/pages/Main.vue
index 7dcf83715..f196eae0e 100644
--- a/apps/wizarr-frontend/src/modules/settings/pages/Main.vue
+++ b/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"),
diff --git a/apps/wizarr-frontend/src/modules/settings/pages/Password.vue b/apps/wizarr-frontend/src/modules/settings/pages/Password.vue
deleted file mode 100644
index 305a03aac..000000000
--- a/apps/wizarr-frontend/src/modules/settings/pages/Password.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-    <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" />
-            <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="">
-                <FormKit type="submit" :classes="{ outer: 'w-auto', input: 'text-xs w-auto justify-center !font-bold' }">
-                    {{ __("Confirm") }}
-                </FormKit>
-            </div>
-        </div>
-    </FormKit>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-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 {
-            auth: new Auth(),
-            old_password: "",
-            new_password: "",
-            confirm_password: "",
-        };
-    },
-    methods: {
-        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>
diff --git a/apps/wizarr-frontend/src/modules/settings/router/children.ts b/apps/wizarr-frontend/src/modules/settings/router/children.ts
index bc0d2f0a7..e7187ed03 100644
--- a/apps/wizarr-frontend/src/modules/settings/router/children.ts
+++ b/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",