feat: create Nuxt 4 SPA for yalarba.ru (yalarba-nuxt)

2026-06-12 00:29:24 +05:00
parent 35ba568d97
commit 60867af69c
51 changed files with 22259 additions and 0 deletions
@@ -0,0 +1,161 @@
+<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>