logout + change password
This commit is contained in:
parent
8dfa070ac1
commit
d48945604a
|
|
@ -108,7 +108,7 @@ withDefaults(
|
|||
list: [
|
||||
{
|
||||
name: "logout",
|
||||
to: "login",
|
||||
to: "logout",
|
||||
icon: "mso-logout",
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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"
|
||||
placeholder="New password"
|
||||
label="Новый пароль"
|
||||
placeholder="Новый пароль"
|
||||
required-mark
|
||||
type="password"
|
||||
/>
|
||||
<VaInput
|
||||
v-model="repeatNewPassword"
|
||||
:rules="repeatNewPasswordRules"
|
||||
label="Repeat new password"
|
||||
placeholder="Repeat new password"
|
||||
label="Повторите новый пароль"
|
||||
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()) {
|
||||
init({
|
||||
message: "You've successfully changed your password",
|
||||
color: "success",
|
||||
});
|
||||
emits("cancel");
|
||||
}
|
||||
axios
|
||||
.put(`${HOST}/api/v0/profiles/passwords`, {
|
||||
"password": newPassword.value,
|
||||
}, config)
|
||||
.then((response) => {
|
||||
init({
|
||||
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?.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",
|
||||
(v: string) => !!v || "Поле обязательно для заполнения!"
|
||||
];
|
||||
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue