logout + change password

src/components/navbar/components/dropdowns/ProfileDropdown.vue

@@ -108,7 +108,7 @@ withDefaults(
         list: [
           {
             name: "logout",
-            to: "login",
+            to: "logout",
             icon: "mso-logout",
           },
         ],

src/pages/auth/Login.vue

@@ -40,11 +40,6 @@
     <div
       class="auth-layout__options flex flex-col sm:flex-row items-start sm:items-center justify-between"
     >
-      <VaCheckbox
-        v-model="formData.keepLoggedIn"
-        class="mb-2 sm:mb-0"
-        label="Запомнить меня"
-      />
       <RouterLink
         :to="{ name: 'recover-password' }"
         class="mt-2 sm:mt-0 sm:ml-1 font-semibold text-primary"

src/pages/auth/Logout.vue

@@ -0,0 +1,10 @@
+<template></template>
+  
+<script lang="ts" setup>
+    import { useRouter } from "vue-router";
+
+    const { push } = useRouter();
+    localStorage.clear();
+    useRouter().push({ name: "login" });
+</script>
+  

src/pages/preferences/modals/ResetPasswordModal.vue

@@ -7,57 +7,27 @@
     close-button
     @update:modelValue="emits('cancel')"
   >
-    <h1 class="va-h5 mb-4">Reset password</h1>
+    <h1 class="va-h5 mb-4">Сброс пароля</h1>
     <VaForm ref="form" class="space-y-6" @submit.prevent="submit">
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <VaInput
-          v-model="oldPassowrd"
-          :rules="oldPasswordRules"
-          label="Old password"
-          placeholder="Old password"
-          required-mark
-          type="password"
-        />
-        <div class="hidden md:block" />
         <VaInput
           v-model="newPassword"
           :rules="newPasswordRules"
-          label="New password"
+          label="Новый пароль"
-          placeholder="New password"
+          placeholder="Новый пароль"
           required-mark
           type="password"
         />
         <VaInput
           v-model="repeatNewPassword"
           :rules="repeatNewPasswordRules"
-          label="Repeat new password"
+          label="Повторите новый пароль"
-          placeholder="Repeat new password"
+          placeholder="Повторите новый пароль"
           required-mark
           type="password"
         />
       </div>
-      <div class="flex flex-col space-y-2">
+      
-        <div class="flex space-x-2 items-center">
-          <div>
-            <VaIcon
-              :name="newPassword?.length! >= 8 ? 'mso-check' : 'mso-close'"
-              color="secondary"
-              size="20px"
-            />
-          </div>
-          <p>Must be at least 8 characters long</p>
-        </div>
-        <div class="flex space-x-2 items-center">
-          <div>
-            <VaIcon
-              :name="new Set(newPassword).size >= 6 ? 'mso-check' : 'mso-close'"
-              color="secondary"
-              size="20px"
-            />
-          </div>
-          <p>Must contain at least 6 unique characters</p>
-        </div>
-      </div>
       <div
         class="flex flex-col-reverse md:justify-end md:flex-row md:space-x-4"
       >
@@ -75,53 +45,64 @@
           type="submit"
           @click="submit"
         >
-          Update Password</VaButton
+          Обновить пароль</VaButton
         >
       </div>
     </VaForm>
   </VaModal>
 </template>
 <script lang="ts" setup>
+import axios from "axios";
+import { inject } from 'vue'
 import { ref } from "vue";
 import { useForm, useToast } from "vuestic-ui";
 
 import { buttonStyles } from "../styles";
 
-const oldPassowrd = ref<string>();
 const newPassword = ref<string>();
 const repeatNewPassword = ref<string>();
+const HOST = inject('HOST');
 
 const { validate } = useForm("form");
 const { init } = useToast();
 
 const emits = defineEmits(["cancel"]);
+const config = {
+    headers: { Authorization: `Bearer ${localStorage.getItem("token")}` }
+};
 
 const submit = () => {
   if (validate()) {
+    axios
+        .put(`${HOST}/api/v0/profiles/passwords`, {
+          "password": newPassword.value,
+        }, config)
+        .then((response) => {
           init({
-      message: "You've successfully changed your password",
+            message: "Вы успешно обновили пароль!",
             color: "success",
           });
           emits("cancel");
+        })
+        .catch((error) => {
+            init({
+              message: "Что-то пошло не так.",
+              color: "error",
+            });
+
+        });
     }
 };
 
-const oldPasswordRules = [
-  (v: string) => !!v || "Old password field is required",
-];
 
 const newPasswordRules = [
-  (v: string) => !!v || "New password field is required",
+  (v: string) => !!v || "Поле обязательно для заполнения!"
-  (v: string) => v?.length >= 8 || "Must be at least 8 characters long",
-  (v: string) =>
-    new Set(v).size >= 6 || "Must contain at least 6 unique characters",
-  (v: string) => v !== oldPassowrd.value || "New password cannot be the same",
 ];
 
 const repeatNewPasswordRules = [
-  (v: string) => !!v || "Repeat new password field is required",
+  (v: string) => !!v || "Поле обязательно для заполнения!",
   (v: string) =>
-    v === newPassword.value || "Confirm password does not match new password",
+    v === newPassword.value || "Пароли не совпадают",
 ];
 </script>
 

src/router/index.ts

@@ -74,6 +74,11 @@ const routes: Array<RouteRecordRaw> = [
     path: "/auth",
     component: AuthLayout,
     children: [
+      {
+        name: "logout",
+        path: "logout",
+        component: () => import("../pages/auth/Logout.vue"),
+      },
       {
         name: "login",
         path: "login",

src/stores/user-store.ts

@@ -14,12 +14,25 @@ export const useUserStore = defineStore("user", {
     }
     const dataProfile = JSON.parse(localStorage.getItem("profile")!);
     const dataUser = JSON.parse(localStorage.getItem("user")!);
+    const dateCreate = new Date(Date.parse(dataProfile.created_at));
+    const yyyy = dateCreate.getFullYear().toString();
+    const mm = dateCreate.getMonth() + 1;
+    const dd = dateCreate.getDate();
+    let stringDD = dd.toString();
+    let strinMM = mm.toString();
+    if (dd < 10) {
+      stringDD = '0' + stringDD
+    };
+    if (mm < 10) {
+      strinMM = '0' + strinMM;
+    }
+    const formattedToday = stringDD + '/' + strinMM + '/' + yyyy;
     return {
       profileID: dataProfile.id || "",
       userName: dataProfile.first_name || "",
       userSurname: dataProfile.surname || "",
       email: dataUser.email || "",
-      memberSince: "8/12/2020",
+      memberSince: formattedToday,
       pfp: "https://picsum.photos/id/22/200/300",
       is2FAEnabled: false,
     };