banu-front/src/features/auth/components/LoginForm.vue

<template>
  <form class="auth-form" @submit.prevent="onSubmit">
    <div class="auth-form__body">
      <AuthHeading title="ورود" subtitle="در این قسمت اطلاعات خود را وارد کنید." />

      <TextField
        v-model="form.phoneNumber"
        name="phoneNumber"
        label="شماره تلفن همراه"
        inputmode="numeric"
        :convert-digits="true"
        :error="errors.phoneNumber"
        @blur="validateAt('phoneNumber', form.phoneNumber)"
      >
        <template #appendIcon>
          <SvgIcon name="phone" :size="22" color="var(--color-thd-gray)" />
        </template>
      </TextField>

      <div class="login-form__password-wrap">
        <button type="button" class="login-form__forgot" @click="goForgotPassword">
          رمز عبور خودم را فراموش کرده ام
        </button>
        <PasswordField
          v-model="form.password"
          name="password"
          label="رمز عبور"
          :error="errors.password"
          @blur="validateAt('password', form.password)"
        />
      </div>

      <BaseButton
        type="submit"
        text="تایید اطلاعات"
        :loading="loginMutation.isPending.value"
        custom-class="login-form__submit"
      >
        <template #appendIcon>
          <SvgIcon name="arrow-left" :size="22" color="#fff" />
        </template>
      </BaseButton>

      <div class="login-form__links">
        <div class="login-form__link">
          <SvgIcon name="user" :size="12" color="#A7A7A7" />
          <span>حساب کاربری ندارم</span>
          <RouterLink :to="{ name: 'signup' }">ثبت نام</RouterLink>
        </div>
        <div class="login-form__link">
          <SvgIcon name="check" :size="12" color="#A7A7A7" />
          <button type="button" class="login-form__link-btn" @click="goLoginWithCode">
            ورود با کد تایید
          </button>
        </div>
      </div>
    </div>

    <div class="auth-form__footer">
      <AuthCopyright />
    </div>
  </form>
</template>

<script setup>
import { ref } from 'vue'
import { RouterLink } from 'vue-router'
import useYup from '@/composables/useYup'
import useAuth from '@/composables/useAuth'
import BaseButton from '@/components/BaseButton.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import { loginSchema } from '@/features/auth/schema'
import TextField from '@/components/form/TextField.vue'
import { useLoginMutation } from '@/services/query/auth'
import PasswordField from '@/components/form/PasswordField.vue'
import AuthHeading from '@/features/auth/components/AuthHeading.vue'
import AuthCopyright from '@/features/auth/components/AuthCopyright.vue'
import { useRedirectAfterLogin } from '@/features/auth/composables/useRedirectAfterLogin'

const emit = defineEmits(['next'])

const schema = loginSchema

const form = ref({ phoneNumber: '', password: '' })
const { validate, validateAt, errors } = useYup(schema)

const loginMutation = useLoginMutation()
const { applySession } = useAuth()
const redirectAfterLogin = useRedirectAfterLogin()

const onSubmit = async () => {
  const { isValid, payload } = await validate(form.value)
  if (!isValid) return
  const response = await loginMutation.mutateAsync(payload)
  applySession(response?.data ?? response)
  redirectAfterLogin()
}

const goLoginWithCode = () => emit('next', { mode: 'loginWithCode' })
const goForgotPassword = () => emit('next', { mode: 'forgotPassword' })
</script>

<style lang="scss" scoped>
.auth-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;

  &__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    width: 100%;
    padding: 1rem 0;

    @media (min-width: 768px) {
      justify-content: center;
    }
  }

  &__footer {
    margin-bottom: 1rem;
    text-align: center;
    width: 100%;
  }
}

.login-form__password-wrap {
  position: relative;
  width: 100%;
}

.login-form__forgot {
  position: absolute;
  inset-inline-start: 0;
  top: -0.25rem;
  z-index: 10;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-family-fa);
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--color-prim-gray);

  &:hover {
    text-decoration: underline;
    color: var(--color-sec-gray);
  }
}

.login-form__submit {
  margin-top: 1.5rem;
  width: 100%;
}

.login-form__links {
  margin-top: 1.5rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.login-form__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-family-fa);
  font-size: 0.75rem;
  color: #a7a7a7;

  a {
    color: var(--color-sec-gray);
    text-decoration: underline;
    text-underline-offset: 4px;
    margin-inline-start: 0.5rem;
  }
}

.login-form__link-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-family-fa);
  font-size: 0.75rem;
  color: #a7a7a7;
  padding: 0;

  &:hover {
    text-decoration: underline;
    color: var(--color-sec-gray);
  }
}
</style>