init change password tab

client/src/App.vue

@@ -1,23 +1,42 @@
 <template>
   <component :is="layout">
     <router-view />
+    <Toast ref="toast" />
   </component>
 </template>
 
-<script>
-import { computed } from "vue";
+<script setup>
+import { computed, onMounted, provide, ref } from "vue";
 import { useRoute } from "vue-router";
+import userService from "./services/userService";
+import Toast from "./components/Toast.vue";
+const route = useRoute();
+const fetchedUser = ref({});
+const toast = ref();
 
-export default {
-  setup() {
-    const route = useRoute();
-    const layout = computed(() => {
-      const NoNavbar_layout = "No-Navbar";
-      return (route.meta.layout || NoNavbar_layout) + "-Layout";
-    });
-    return { layout };
-  },
+const layout = computed(() => {
+  const NoNavbar_layout = "No-Navbar";
+  return (route.meta.layout || NoNavbar_layout) + "-Layout";
+});
+
+const getUser = () => {
+  userService
+    .getUser()
+    .then((response) => {
+      const { user } = response.data.data;
+      fetchedUser.value = user;
+    })
+    .catch((response) => {
+      const { err } = response.response.data;
+      toast.value.toast(err, "#FF5252");
+    })
+    .finally(() => {});
 };
+provide("user", fetchedUser);
+
+onMounted(() => {
+  getUser();
+});
 </script>
 <style>
 .v-container--fluid {

client/src/router/index.js

@@ -8,7 +8,9 @@ import userService from "@/services/userService.js";
 import AccountTab from "@/views/tabs/Account.vue";
 import PaymentsTab from "@/views/tabs/Payments.vue";
 import Invoices from "@/views/tabs/Invoices.vue";
+import ChangePassword from "@/views/tabs/ChangePassword.vue";
 import AuditLogs from "@/views/tabs/AuditLogs.vue";
+import DeleteAccount from "@/views/tabs/DeleteAccount.vue";
 import Deploy from "@/views/Deploy.vue";
 
 const routes = [
@@ -122,6 +124,14 @@ const routes = [
             path: "/account/payments",
             component: PaymentsTab,
           },
+          {
+            path: "/account/change-password",
+            component: ChangePassword,
+          },
+          {
+            path: "/account/delete-account",
+            component: DeleteAccount,
+          },
           {
             path: "/account/invoices",
             component: Invoices,

client/src/views/Account.vue

@@ -22,8 +22,10 @@ import { ref } from "vue";
 const tabs = ref([
   { name: "Account", route: `/account` },
   { name: "Payments", route: `/account/payments` },
+  { name: "Change Password", route: `/account/change-password` },
   { name: "Invoices", route: `/account/invoices` },
   { name: "Audit logs", route: `/account/audit-logs` },
+  { name: "Delete Account", route: `/account/Delete-account` },
 ]);
 const activeTab = ref(tabs.value[0]);
 </script>

client/src/views/Otp.vue

@@ -139,7 +139,7 @@ const onSubmit = async () => {
       .forgotPasswordVerifyEmail(route.query.email, Number(otp.value))
       .then((response) => {
         const { access_token } = response.data.data;
-        localStorage.setItem("password_token", access_token);
+        localStorage.setItem("token", access_token);
         toast.value.toast(response.data.msg, "#4caf50");
         router.push({
           name: "NewPassword",

client/src/views/tabs/ChangePassword.vue

@@ -0,0 +1,122 @@
+<template>
+  <v-container>
+    <h5 class="text-h5 text-md-h6 font-weight-bold">Change Password</h5>
+
+    <v-form
+      v-model="verify"
+      ref="form"
+      class="my-5"
+      @submit.prevent="updatePassword"
+    >
+      <v-row>
+        <v-col cols="12">
+          <label class="font-weight-bold">Current Password</label>
+          <BaseInput
+            readonly
+            disabled
+            value="*******"
+            type="password"
+            class="my-1"
+          />
+          <v-row>
+            <v-col cols="12" class="d-flex flex-row-reverse py-0">
+              <router-link
+                class="d-inline-flex text-caption text-decoration-none text-grey text-end"
+                to="/forgetPassword"
+              >
+                Forgot your current password?</router-link
+              >
+            </v-col>
+          </v-row>
+        </v-col>
+        <v-col cols="12" md="6">
+          <label class="font-weight-bold">New Password</label>
+          <BaseInput
+            :append-inner-icon="visible ? 'mdi-eye' : 'mdi-eye-off'"
+            :type="visible ? 'text' : 'password'"
+            v-model="newPass"
+            :rules="passwordRules"
+            @click:append-inner="visible = !visible"
+          />
+        </v-col>
+
+        <v-col cols="12" md="6">
+          <label class="font-weight-bold">Confirm Password</label>
+          <BaseInput
+            :append-inner-icon="cShowPassword ? 'mdi-eye' : 'mdi-eye-off'"
+            :type="cShowPassword ? 'text' : 'password'"
+            v-model="confirmPass"
+            :rules="cPasswordRules"
+            @click:append-inner="cShowPassword = !cShowPassword"
+          />
+        </v-col>
+      </v-row>
+      <v-divider class="my-5" />
+      <v-row class="d-flex justify-end">
+        <BaseButton
+          text="Clear"
+          variant="outlined"
+          class="ma-2"
+          @click="form.reset()"
+        />
+
+        <BaseButton
+          type="submit"
+          text="Update"
+          color="secondary"
+          class="ma-2"
+          :disabled="!verify"
+        />
+      </v-row>
+    </v-form>
+    <Toast ref="toast" />
+  </v-container>
+</template>
+<script setup>
+import { ref, inject } from "vue";
+import BaseInput from "@/components/Form/BaseInput.vue";
+import BaseButton from "@/components/Form/BaseButton.vue";
+import Toast from "@/components/Toast.vue";
+import userService from "@/services/userService";
+
+const newPass = ref();
+const confirmPass = ref();
+const toast = ref();
+const verify = ref(false);
+const visible = ref(false);
+const cShowPassword = ref(false);
+const user = inject("user");
+const form = ref();
+
+const passwordRules = ref([
+  (value) => {
+    if (!value) return "Password is required";
+    if (value.length < 7) return "Password must be at least 7 characters";
+    if (value.length > 12) return "Password must be at most 12 characters";
+    return true;
+  },
+]);
+
+const cPasswordRules = ref([
+  (value) => {
+    if (!value) return "Confirm password is required";
+    if (value !== newPass.value) return "Passwords don't match";
+    return true;
+  },
+]);
+
+function updatePassword() {
+  userService
+    .changePassword(user.value.email, newPass.value, confirmPass.value)
+    .then((response) => {
+      toast.value.toast(response.data.msg, "#4caf50");
+    })
+    .catch((response) => {
+      const { err } = response.response.data;
+      toast.value.toast(err, "#FF5252");
+    })
+    .finally(() => {
+      form.value.reset();
+    });
+}
+</script>

client/src/views/tabs/DeleteAccount.vue

@@ -0,0 +1,7 @@
+<template lang="">
+  <div></div>
+</template>
+<script>
+export default {};
+</script>
+<style lang=""></style>