init git

components/panel/dialog/Logout.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="logout">
+        <h2>
+            <i class="isax isax-logout" />
+            <span>{{ $t("logoutUserAccount") }}</span>
+        </h2>
+        <p>{{ $t("logoutUserAccountQuest") }}</p>
+        <div>
+            <Button v-bind="btns.logout.props" @click="logout()" />
+            <Button v-bind="btns.cancel.props" @click="dialog.close()" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import init from '../../../initialize/logout.js'
+const { btns } = init();
+
+const dialog = inject('dialogRef');
+const router = useRouter()
+
+const logout = () => {
+    const token = useCookie('token')
+    token.value = null
+    router.push('/')
+    dialog.value.close()
+}
+
+</script>
+
+<style lang="scss">
+.logout {
+    @apply bg-white w-full lg:w-[32.1rem] h-64 flex flex-col items-center gap-2 rounded-[0.6rem] max-lg:rounded-b-none p-[2.4rem];
+
+    h2 {
+        @apply flex items-center gap-4 text-[#333];
+
+        i {
+            @apply text-[2em];
+        }
+
+        span {
+            @apply text-xl font-bold font-vazir leading-[2.8rem];
+        }
+    }
+
+    p {
+        @apply text-[#B2B2B2] text-base font-medium font-vazir leading-[1.7rem];
+    }
+
+    div {
+        @apply flex items-center gap-4 mt-auto;
+
+        button {
+            @apply w-36 lg:w-[10.4rem] h-11 border-[#AD3434] #{!important};
+
+            .p-button-label {
+                @apply font-medium font-vazir leading-tight #{!important};
+            }
+        }
+
+        button:first-child {
+            @apply bg-[#AD3434];
+        }
+
+        button:last-child .p-button-label {
+            @apply text-[#AD3434];
+        }
+    }
+}
+</style>

components/panel/dialog/OTPCodeEnter.vue

@@ -0,0 +1,160 @@
+<template>
+    <dialog class="panel-otp-code-enter">
+        <Button v-bind="btns.close.props" @click="dialogRef.close()" />
+        <h2>
+            <i class="isax isax-message-notif" />
+            <span>{{ $t("enterReceivedCode") }}</span>
+        </h2>
+        <p>{{ $t("enterReceivedCodeDesc") }}</p>
+        <ul ref="list">
+            <li v-for="(_, i) in 6" :key="i">
+                <InputNumber
+                    v-model="code[i]"
+                    @input="events.input($event, i)"
+                    @keyup="events.keyup($event, i)"
+                    @focus="events.focus($event, i)"
+                    :disabled="inputs.length < 1"
+                />
+            </li>
+        </ul>
+        <span :class="{ invisible: seconds < 1 }">
+            {{ $t("moreSecondReceiveCode", { seconds }) }}
+        </span>
+        <Button v-bind="btns.next.props" @click="events.next()" />
+        <div v-show="seconds < 1">
+            <p>{{ $t("notReceivedCode") }}</p>
+            <Button :label="$t('tryAgain')" link @click="events.try()" />
+        </div>
+    </dialog>
+</template>
+
+<script setup>
+const { btns } = inject('init');
+
+const seconds = ref(0);
+const code = ref([]);
+const form = reactive({});
+const userStore = useUserStore();
+const optCodeStore = useOtpCodeStore();
+
+const list = ref();
+let inputs = reactive([]);
+const events = reactive({
+    next: async () => {
+        if (code.value.length == 6) {
+            if (optCodeStore.type == "email") form.email = optCodeStore.email;
+            else form.phoneNumber = optCodeStore.number;
+            form.code = code.value.join("");
+
+            const { status } = await userStore.forgetPassword(form);
+            // if (status == "success") 
+            emit("dialog", "PanelPasswordRenewal");
+        }
+    },
+    try: async () => {
+        const form = { number: otpCode.number };
+        const { status } = await otpCode.first(form);
+        if (status == "success") seconds.value = 30;
+    },
+    input: (e, i) => {
+        if (e.value != null) inputs[i++].value = e.originalEvent.key;
+        if (i < 6) inputs[i].focus();
+        else {
+            inputs[5].blur();
+            events.next();
+        }
+    },
+    keyup: (e, i) => {
+        if (e.code == "Backspace" && i > 0) {
+            code.value[i - 1] = null;
+            inputs[i - 1].focus();
+        }
+    },
+    focus: (e, i) => {
+        const length = code.value.filter((c) => typeof c == "number").length;
+        if (length < i) inputs[length].focus();
+    },
+});
+
+onMounted(() => {
+    inputs.push(...list.value.querySelectorAll("input"));
+    setTimeout(() => inputs[0].focus(), 1);
+    seconds.value = 30;
+    setInterval(() => {
+        if (seconds.value > 0) seconds.value--;
+    }, 1000);
+});
+</script>
+
+<style lang="scss">
+.panel-otp-code-enter {
+    @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-[7.2rem] 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 gap-2.5 mt-4 lg:mt-10 ltr;
+
+        li {
+            input {
+                @apply w-9 h-9 lg:w-10 lg:h-10 p-0 rounded-lg border border-neutral-200 text-center;
+                @apply focus:text-primary-600 lg:text-xl font-medium font-vazir leading-[1.9rem];
+            }
+        }
+    }
+
+    & > span {
+        @apply text-[#999999] text-[0.7em] lg:text-sm font-medium font-vazir mt-5 lg:mt-4;
+    }
+
+    & > button:nth-of-type(2) {
+        @apply w-[21.4rem] lg:w-[19.5rem] h-[2.9rem] lg:h-14 mt-8 lg:mt-11;
+
+        .p-button-label {
+            @apply text-sm lg:text-base font-bold font-vazir leading-tight;
+        }
+    }
+
+    & > div {
+        @apply flex items-center -mb-3 whitespace-nowrap;
+
+        p {
+            @apply text-[#999999] text-sm font-medium font-vazir;
+        }
+
+        button {
+            .p-button-label {
+                @apply text-sm font-bold font-vazir;
+            }
+        }
+    }
+}
+</style>

components/panel/dialog/password/Change.vue

@@ -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>

components/panel/dialog/password/Renewal.vue

@@ -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>

components/panel/dialog/password/Restore.vue

@@ -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>