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,142 @@
+<template>
+  <div class="settings-page">
+    <section class="page-hero">
+      <div class="container">
+        <h1>Настройки профиля</h1>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="container">
+        <form @submit.prevent="handleUpdate" class="settings-page__form">
+          <div class="form-group">
+            <label class="form-label">Имя</label>
+            <input
+              v-model="form.name"
+              type="text"
+              class="form-input"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label class="form-label">Email</label>
+            <input
+              v-model="form.email"
+              type="email"
+              class="form-input"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label class="form-label">Телефон</label>
+            <input
+              v-model="form.phone"
+              type="tel"
+              class="form-input"
+              placeholder="+7 (XXX) XXX-XX-XX"
+            />
+          </div>
+
+          <button type="submit" class="btn btn--primary btn--md" :disabled="saving">
+            {{ saving ? 'Сохранение...' : 'Сохранить' }}
+          </button>
+
+          <p v-if="success" class="settings-page__success">Профиль обновлён</p>
+          <p v-if="error" class="settings-page__error">{{ error }}</p>
+        </form>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  title: 'Настройки',
+  middleware: 'auth',
+})
+
+const { user, fetchUser } = useAuth()
+
+const form = reactive({
+  name: user.value?.name || '',
+  email: user.value?.email || '',
+  phone: user.value?.phone || '',
+})
+const saving = ref(false)
+const success = ref(false)
+const error = ref('')
+
+watch(user, (u) => {
+  if (u) {
+    form.name = u.name
+    form.email = u.email
+    form.phone = u.phone || ''
+  }
+})
+
+async function handleUpdate() {
+  saving.value = true
+  success.value = false
+  error.value = ''
+  try {
+    const api = useApi()
+    await api.put('/me', {
+      name: form.name,
+      email: form.email,
+      phone: form.phone || undefined,
+    })
+    success.value = true
+    await fetchUser()
+  } catch (e: any) {
+    error.value = e.message || 'Ошибка обновления'
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<style scoped>
+.page-hero {
+  background: var(--color-primary);
+  padding: 60px 0;
+  text-align: center;
+  color: var(--color-text-white);
+}
+
+.page-hero h1 {
+  color: var(--color-text-white);
+}
+
+.settings-page__form {
+  max-width: 440px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.settings-page__success {
+  font-family: var(--font-body);
+  font-size: var(--font-size-small);
+  color: var(--color-green-accent);
+  padding: 8px;
+  background: var(--color-bg-success);
+  border-radius: var(--radius-sm);
+}
+
+.settings-page__error {
+  font-family: var(--font-body);
+  font-size: var(--font-size-small);
+  color: var(--color-red);
+  padding: 8px;
+  background: var(--color-bg-error);
+  border-radius: var(--radius-sm);
+}
+</style>