tp/main_dc/yalarba/yalarba-nuxt/app/pages/auth/login.vue

<template>
  <div class="login">
    <h2 class="login__title">Вход</h2>
    <p class="small-text login__subtitle">Войдите в свой аккаунт</p>

    <form @submit.prevent="handleLogin" class="login__form">
      <div class="form-group">
        <label class="form-label">Email</label>
        <input
          v-model="email"
          type="email"
          class="form-input"
          :class="{ 'form-input--error': errors.email }"
          placeholder="example@mail.com"
          required
        />
        <span v-if="errors.email" class="form-error">{{ errors.email }}</span>
      </div>

      <div class="form-group">
        <label class="form-label">Пароль</label>
        <input
          v-model="password"
          type="password"
          class="form-input"
          :class="{ 'form-input--error': errors.password }"
          placeholder="Ваш пароль"
          required
        />
        <span v-if="errors.password" class="form-error">{{ errors.password }}</span>
      </div>

      <div class="login__actions">
        <NuxtLink to="/auth/reset-password" class="login__forgot">
          Забыли пароль?
        </NuxtLink>
      </div>

      <button
        type="submit"
        class="btn btn--primary btn--lg btn--full"
        :disabled="loading"
      >
        {{ loading ? 'Вход...' : 'Войти' }}
      </button>

      <p v-if="apiError" class="login__error">{{ apiError }}</p>
    </form>

    <p class="login__register">
      Нет аккаунта?
      <NuxtLink to="/auth/register">Зарегистрироваться</NuxtLink>
    </p>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'auth',
  title: 'Вход',
  middleware: 'guest',
})

const email = ref('')
const password = ref('')
const errors = reactive({ email: '', password: '' })
const apiError = ref('')
const loading = ref(false)

const { login } = useAuth()

async function handleLogin() {
  errors.email = ''
  errors.password = ''
  apiError.value = ''

  if (!email.value) {
    errors.email = 'Введите email'
    return
  }
  if (!password.value) {
    errors.password = 'Введите пароль'
    return
  }

  loading.value = true
  try {
    await login(email.value, password.value)
    navigateTo('/')
  } catch (e: any) {
    apiError.value = e.message || 'Ошибка входа'
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login__title {
  text-align: center;
  margin-bottom: 8px;
}

.login__subtitle {
  text-align: center;
  margin-bottom: 24px;
}

.login__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.login__actions {
  display: flex;
  justify-content: flex-end;
}

.login__forgot {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: var(--color-primary);
}

.login__forgot:hover {
  text-decoration: underline;
}

.login__error {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: var(--color-red);
  text-align: center;
  padding: 8px;
  background: var(--color-bg-error);
  border-radius: var(--radius-sm);
}

.login__register {
  text-align: center;
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: var(--color-text-gray);
}

.login__register a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.login__register a:hover {
  text-decoration: underline;
}
</style>