init git
This commit is contained in:
mohadese namavar
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<dialog class="panel-password-change">
|
||||
<img src="/images/password-change.svg" />
|
||||
<div>
|
||||
<Button v-bind="btns.close.props" @click="dialogRef.close()" />
|
||||
<h2>{{ $t("changePassword") }}</h2>
|
||||
<p>{{ $t("enterCurrentAndNewPassword") }}</p>
|
||||
<ul>
|
||||
<li v-for="(item, key) in fields.changePassword" :key="key">
|
||||
<Password v-model="form[key]" v-bind="item.props" :inputId="key" />
|
||||
<label :for="key"> {{ $t(key) }} </label>
|
||||
<small v-if="errors[key]">{{ errors[key] }}</small>
|
||||
</li>
|
||||
</ul>
|
||||
<Button v-bind="btns.save.props" :loading="loading" @click="save()" />
|
||||
<div>
|
||||
<p>{{ $t("forgetPassword") }}</p>
|
||||
<Button v-bind="btns.recovery.props" @click="recovery()" />
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { meta } = useRoute()
|
||||
const { btns, fields } = meta.init;
|
||||
const { device, dialog, toast, t } = inject('service')
|
||||
const dialogRef = inject('dialogRef')
|
||||
|
||||
const form = reactive({});
|
||||
const errors = ref({});
|
||||
|
||||
const loading = ref(false);
|
||||
btns.save.props.disabled = computed(() => Object.keys(errors.value).length > 1)
|
||||
|
||||
const save = async () => {
|
||||
loading.value = true
|
||||
|
||||
const { status, data, error } = await useFetch('/api/users/setpass', {
|
||||
headers: { Authorization: useCookie('token') }, method: 'post', body: Object.assign({}, form)
|
||||
})
|
||||
|
||||
if (status.value == 'success') {
|
||||
const token = useCookie('token')
|
||||
token.value = data.value.accessToken
|
||||
toast.add({
|
||||
life: 3000, severity: 'success', summary: t('success'), detail: t('updatePasswordSuccessfull')
|
||||
})
|
||||
dialogRef.value.close()
|
||||
} else {
|
||||
if (error.value.statusCode == 422)
|
||||
errors.value = error.value.data
|
||||
else
|
||||
toast.add({
|
||||
life: 3000, severity: 'error', summary: t('error'), detail: error.value.message
|
||||
})
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
const recovery = () => {
|
||||
if (device.value == 'desktop')
|
||||
dialogRef.value.close()
|
||||
|
||||
dialog.show('PanelDialogPasswordRestore')
|
||||
}
|
||||
|
||||
watch(computed(() => form), (value, old) => {
|
||||
Object.keys(errors.value).forEach(key => {
|
||||
if (value[key] != old[key]) delete errors.value[key]
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.panel-password-change {
|
||||
@apply w-full lg:w-[61.6rem] lg:h-[36.9rem] bg-white rounded-t-2xl lg:rounded-2xl flex p-6 lg:p-4 lg:pl-6 relative;
|
||||
|
||||
&::after {
|
||||
@apply content-['_'] absolute inset-x-0 bottom-28 h-3 shadow-[0px_-2px_5px_#0000000a] lg:shadow-none;
|
||||
}
|
||||
|
||||
&>img {
|
||||
@apply hidden lg:block w-[27.2rem];
|
||||
}
|
||||
|
||||
&>div {
|
||||
@apply flex flex-col gap-4 lg:pt-2 items-center w-full;
|
||||
|
||||
&>h2 {
|
||||
@apply self-start -mt-[3.4rem] text-[#333333] text-sm font-bold font-vazir leading-[1.7rem];
|
||||
@apply lg:text-white lg:text-xl lg:-mt-10 lg:-mr-[25.3rem];
|
||||
}
|
||||
|
||||
&>p {
|
||||
@apply self-start w-[17.8rem] -mt-2 text-[#7F7F7F] text-[0.7em] font-vazir mb-5;
|
||||
@apply lg:w-[22.9rem] lg:text-[#E5E5E5] lg:text-base lg:leading-[1.7rem] lg:-mr-[25.3rem];
|
||||
}
|
||||
|
||||
&>button:nth-of-type(1) {
|
||||
@apply self-end -mt-2 -ml-2;
|
||||
|
||||
.p-button-icon {
|
||||
@apply text-sm text-[#333333];
|
||||
@apply lg:text-[2em] lg:text-[#b2b2b29b];
|
||||
}
|
||||
}
|
||||
|
||||
&>ul {
|
||||
@apply flex flex-col items-center gap-6 mt-auto w-full sm:w-auto lg:-mt-16;
|
||||
|
||||
li {
|
||||
@apply w-[21.4rem] lg:w-[23.3rem] h-[3.4rem] lg:h-14 relative;
|
||||
|
||||
label {
|
||||
@apply w-max absolute right-3 top-4 px-1 bg-white transition-['top'] pointer-events-none;
|
||||
@apply text-neutral-400 text-sm lg:text-base font-medium cursor-text font-vazir;
|
||||
}
|
||||
|
||||
.p-password {
|
||||
input {
|
||||
@apply w-full rounded-[0.6rem] border text-sm lg:text-base shadow-none border-[#CCCCCC] text-zinc-800 font-vazir;
|
||||
}
|
||||
|
||||
svg {
|
||||
@apply text-[#CCCCCC] w-5 h-5 -mt-2.5;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(input:focus),
|
||||
&:has(input:not(:placeholder-shown)) {
|
||||
label {
|
||||
@apply -top-2 h-4;
|
||||
@apply text-zinc-800 text-xs font-normal font-vazir;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
@apply text-red-500 font-vazir float-left;
|
||||
}
|
||||
|
||||
&:has(small) * {
|
||||
@apply border-red-500 #{!important};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>button:nth-of-type(2) {
|
||||
@apply w-[21.4rem] lg:w-[23.3rem] h-[2.9rem] mt-4 lg:h-14 lg:mt-16 #{!important};
|
||||
|
||||
.p-button-label {
|
||||
@apply font-bold font-vazir leading-tight text-sm lg:text-base;
|
||||
}
|
||||
}
|
||||
|
||||
&>div {
|
||||
@apply flex items-center justify-center -my-4 hidden;
|
||||
|
||||
p {
|
||||
@apply text-[#999999] text-xs lg:text-sm font-medium font-vazir;
|
||||
}
|
||||
|
||||
button {
|
||||
@apply px-2;
|
||||
|
||||
.p-button-label {
|
||||
@apply text-xs lg:text-sm font-bold font-vazir text-primary-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<dialog class="panel-password-renewal">
|
||||
<Button v-bind="btns.close.props" @click="$emit('close')" />
|
||||
<h2>
|
||||
<i class="isax isax-lock-1"></i>
|
||||
<span>{{ $t("newPassword") }}</span>
|
||||
</h2>
|
||||
<p>{{ $t("passwordMustBeCombination") }}</p>
|
||||
<ul>
|
||||
<li v-for="(item, key) in fields" :key="key">
|
||||
<Password v-model="form[key]" v-bind="item.props" :inputId="key" />
|
||||
<label :for="key"> {{ $t(key) }} </label>
|
||||
</li>
|
||||
</ul>
|
||||
<Button v-bind="btns.save.props" @click="save()" />
|
||||
</dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { btns, fields } = inject('init');
|
||||
|
||||
const form = reactive({});
|
||||
const userStore = useUserStore();
|
||||
|
||||
const save = async () => {
|
||||
const result = await userStore.resetPassword(form);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.panel-password-renewal {
|
||||
@apply w-full lg:w-[47.9rem] lg:h-[31.2rem] bg-white rounded-t-2xl lg:rounded-2xl flex flex-col items-center p-6 lg:p-8;
|
||||
|
||||
&::after {
|
||||
@apply content-['_'] absolute inset-x-0 bottom-[4.5rem] h-3 shadow-[0px_-2px_5px_#0000000a] lg:shadow-none;
|
||||
}
|
||||
|
||||
&>button:nth-of-type(1) {
|
||||
@apply self-end -mt-2 -ml-2;
|
||||
|
||||
.p-button-icon {
|
||||
@apply text-sm text-[#333333] before:content-['\e90b'];
|
||||
@apply lg:text-[2em] lg:text-[#b2b2b29b] lg:before:content-['\e90c'];
|
||||
}
|
||||
}
|
||||
|
||||
&>h2 {
|
||||
@apply flex items-center gap-4 -mt-12 lg:mt-0.5 max-lg:self-start;
|
||||
|
||||
i {
|
||||
@apply max-lg:hidden text-[2em];
|
||||
}
|
||||
|
||||
span {
|
||||
@apply text-[#333333] text-sm lg:text-xl font-bold font-vazir leading-[2.8rem];
|
||||
}
|
||||
}
|
||||
|
||||
&>p {
|
||||
@apply self-start w-[18.1rem] text-[#B2B2B2] text-[0.7em] font-vazir mb-5;
|
||||
@apply lg:w-[23.2rem] lg:text-base lg:mt-2 lg:mb-0 lg:leading-snug lg:self-center lg:text-center;
|
||||
}
|
||||
|
||||
&>ul {
|
||||
@apply flex flex-col gap-6 mt-4 lg:mt-10 w-full items-center;
|
||||
|
||||
li {
|
||||
@apply w-[21.4rem] lg:w-[23.3rem] lg:h-14 relative;
|
||||
|
||||
label {
|
||||
@apply w-max absolute right-3 top-4 px-1 bg-white transition-['top'] pointer-events-none;
|
||||
@apply text-neutral-400 text-sm lg:text-base font-medium cursor-text font-vazir;
|
||||
}
|
||||
|
||||
.p-password {
|
||||
input {
|
||||
@apply rounded-[0.6rem] border shadow-none border-[#CCCCCC] text-zinc-800 font-vazir;
|
||||
}
|
||||
|
||||
svg {
|
||||
@apply text-[#CCCCCC] w-5 h-5 -mt-2.5;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(input:focus),
|
||||
&:has(input:not(:placeholder-shown)) {
|
||||
label {
|
||||
@apply -top-2 h-4;
|
||||
@apply text-zinc-800 text-xs font-normal font-vazir;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>button:nth-of-type(2) {
|
||||
@apply w-[21.4rem] lg:w-[23.3rem] h-[2.9rem] lg:h-14 mt-8 lg:mt-10;
|
||||
|
||||
.p-button-label {
|
||||
@apply text-sm lg:text-base font-bold font-vazir leading-tight;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<dialog class="pamel-password-restore">
|
||||
<Button v-bind="closeBtn.props" @click="$emit('close')" />
|
||||
<h2>
|
||||
<i class="isax isax-shield-search"></i>
|
||||
<span>{{ $t("passwordRecovery") }}</span>
|
||||
</h2>
|
||||
<p>
|
||||
{{ $t("recoverPasswordByEmailOrMobile") }} <br />
|
||||
{{ $t("pleaseSelectMethod") }}
|
||||
</p>
|
||||
<SelectButton v-model="way" :options="ways">
|
||||
<template #option="{ option }">
|
||||
<span>{{ $t(option.replace("number", "sms")) }}</span>
|
||||
</template>
|
||||
</SelectButton>
|
||||
<div>
|
||||
<InputText v-model="form[way]" id="input" placeholder />
|
||||
<label for="input">{{ $t(labels[way]) }}</label>
|
||||
</div>
|
||||
<Button v-bind="recoveryBtn.props" @click="events.recovery()" />
|
||||
</dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import init from "../../../../initialize/panelPasswordRestore";
|
||||
const { closeBtn, ways, labels, fields, recoveryBtn } = init();
|
||||
const emit = defineEmits(["dialog"]);
|
||||
const way = ref("email");
|
||||
const form = reactive({});
|
||||
const validator = useValidator();
|
||||
const optCode = useOtpCodeStore();
|
||||
const events = reactive({
|
||||
recovery: async () => {
|
||||
if (validator.isValid(fields, form)) {
|
||||
const { status } = await optCode.send(way.value, form);
|
||||
if (status == "success") emit("dialog", "PanelOTPCodeEnter");
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pamel-password-restore {
|
||||
@apply w-full lg:w-[47.9rem] lg:h-[31.2rem] bg-white rounded-t-2xl lg:rounded-2xl flex flex-col items-center p-6 lg:p-8 relative;
|
||||
|
||||
&::after {
|
||||
@apply content-['_'] absolute inset-x-0 bottom-[4.5rem] h-3 shadow-[0px_-2px_5px_#0000000a] lg:shadow-none;
|
||||
}
|
||||
|
||||
& > button:nth-of-type(1) {
|
||||
@apply self-end -mt-2 -ml-2;
|
||||
|
||||
.p-button-icon {
|
||||
@apply text-sm text-[#333333] before:content-['\e90b'];
|
||||
@apply lg:text-[2em] lg:text-[#b2b2b29b] lg:before:content-['\e90c'];
|
||||
}
|
||||
}
|
||||
|
||||
& > h2 {
|
||||
@apply flex items-center gap-4 -mt-12 lg:mt-0.5 max-lg:self-start;
|
||||
|
||||
i {
|
||||
@apply max-lg:hidden text-[2em];
|
||||
}
|
||||
|
||||
span {
|
||||
@apply text-[#333333] text-sm lg:text-xl font-bold font-vazir leading-[2.8rem];
|
||||
}
|
||||
}
|
||||
|
||||
& > p {
|
||||
@apply self-start w-[18.1rem] text-[#B2B2B2] text-[0.7em] font-vazir mb-5;
|
||||
@apply lg:w-[23.2rem] lg:text-base lg:mt-2 lg:mb-0 lg:leading-snug lg:self-center lg:text-center;
|
||||
}
|
||||
|
||||
& > div:nth-of-type(1) {
|
||||
@apply w-[21.4rem] lg:w-[23.3rem] h-[3.4rem] rounded-lg border border-[#E5E5E5] mt-1.5 flex items-center p-1 gap-1;
|
||||
|
||||
& > div {
|
||||
@apply flex justify-center items-center p-0 text-sm lg:text-base;
|
||||
@apply w-[11.4rem] h-[2.9rem] rounded-[0.4rem] border-none text-neutral-400 hover:text-neutral-400;
|
||||
|
||||
&.p-highlight {
|
||||
@apply bg-neutral-200 text-zinc-800 hover:bg-neutral-200 hover:text-zinc-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > div:nth-of-type(2) {
|
||||
@apply w-[21.4rem] lg:w-[23.3rem] h-[3.4rem] lg:h-14 relative mt-[1.9rem] lg:mt-10;
|
||||
|
||||
label {
|
||||
@apply w-max absolute right-3 top-4 px-1 bg-white transition-['top'] pointer-events-none;
|
||||
@apply text-neutral-400 text-sm lg:text-base font-medium font-vazir cursor-text;
|
||||
}
|
||||
|
||||
input {
|
||||
@apply w-full rounded-[0.6rem] border shadow-none border-[#CCCCCC] text-zinc-800 font-vazir;
|
||||
}
|
||||
|
||||
&:has(input:focus),
|
||||
&:has(input:not(:placeholder-shown)) {
|
||||
label {
|
||||
@apply -top-2 h-4;
|
||||
@apply text-zinc-800 text-xs font-normal font-vazir;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > button:nth-of-type(2) {
|
||||
@apply w-[21.4rem] lg:w-[23.3rem] h-12 lg:h-14 mt-8 lg:mt-6;
|
||||
|
||||
.p-button-label {
|
||||
@apply font-bold font-vazir leading-tight text-sm lg:text-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user