anahita-front/pages/auth/login.vue

<template>
    <NuxtLayout name="auth" aside="LoginForm">
        <form class="login">
            <h1>{{ $t('loginAndRegister') }}</h1>
            <ul>
                <li v-for="(item, key) in fields" :key="key">
                    <component :is="item.is" v-bind="item.props" v-model="form[key]" />
                    <label :for="key" v-text="$t(key)" />
                </li>
            </ul>
            <div>
                <div>
                    <Checkbox v-model="form.remember" v-bind="checkbox.props" />
                    <label for="remember" v-text="$t('rememberMe')" />
                </div>
                <div>
                    <span>{{ $t('forgetPassword') }}</span>
                    <router-link to="/auth/restore">
                        {{ $t('restorePassword') }}
                    </router-link>
                </div>
            </div>
            <div>
                <Button v-bind="btns.login.props" @click="login()" />
                <router-link to="/auth/register">
                    <Button v-bind="btns.register.props" />
                </router-link>
            </div>
        </form>
    </NuxtLayout>
</template>

<script setup>
import init from '../../initialize/auth/login'
const { fields, checkbox, btns } = init()

const { toast, t } = inject('service')

const form = reactive({})
const route = useRoute()
const router = useRouter()
const store = useUserStore()

const login = async () => {
    btns.login.props.loading = true
    const { status, error } = await store.login(form)
    btns.login.props.loading = false

    if (status.value == 'success')
        router.push(route.query.redirect || '/panel/profile')
    else {
        let detail = error.value.data.msg
        if (error.value.statusCode == 422)
            detail = Object.values(error.value.data).join('\n')

        toast.add({ life: 3000, severity: 'error', summary: t('error'), detail })
    }
}
</script>

<style lang="scss">
.auth .login {
    @apply flex flex-col h-max m-auto;
    @apply gap-6 lg:gap-10;

    &>h1 {
        @apply text-[#CCCCCC] font-black font-vazir text-right leading-[3rem] whitespace-nowrap;
        @apply text-xl lg:text-3xl;
    }

    &>ul {
        @apply flex flex-col gap-6 mt-1.5;

        li {
            @apply h-14 relative;

            label {
                @apply w-max absolute right-3 top-4 px-1 bg-white transition-['top'];
                @apply text-neutral-400 text-base font-medium cursor-text font-vazir;
            }

            input {
                @apply w-full rounded-[0.6rem] border shadow-none border-[#CCCCCC] text-zinc-800 font-vazir;
            }

            .p-password {
                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;
                }
            }
        }
    }

    &>div:nth-of-type(1) {
        @apply flex font-vazir whitespace-nowrap text-[0.7em] items-center justify-between;
        @apply lg:mt-5 lg:text-sm;

        &>div {
            @apply flex items-center gap-1;

            .p-checkbox,
            .p-checkbox-box {
                @apply w-3.5 h-3.5 lg:w-[1.1rem] lg:h-[1.1rem];
            }

            label,
            span {
                @apply text-neutral-400 font-medium;
            }

            label {
                @apply max-lg:ml-12 mr-1 cursor-pointer;
            }

            span {
                @apply mr-auto;
            }

            a {
                @apply text-blue-500 font-bold;
            }
        }
    }

    &>div:last-of-type {
        @apply flex w-full justify-center gap-2 mt-[1.9rem] lg:gap-4 lg:mt-4;

        a {
            @apply w-full flex;
        }

        button {
            @apply w-full h-11 lg:h-14 #{!important};

            .p-button-label {
                @apply text-sm font-medium font-iran-sans;
            }
        }
    }
}
</style>