83 lines
3.3 KiB
Vue
83 lines
3.3 KiB
Vue
<template>
|
|
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary-50 via-white to-primary-50">
|
|
<div class="w-full max-w-md">
|
|
<div class="text-center mb-8">
|
|
<div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-primary-500 to-primary-700 rounded-xl mb-4">
|
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-3xl font-bold text-gray-900">{{ t('register.title') }}</h1>
|
|
<p class="text-gray-600 mt-2">{{ t('register.subtitle') }}</p>
|
|
</div>
|
|
<div class="bg-white rounded-2xl shadow-xl p-8">
|
|
<form @submit.prevent="handleRegister" class="space-y-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">{{ t('register.username') }}</label>
|
|
<input v-model="form.login" type="text" required minlength="3" class="input-field" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">{{ t('common.email') }}</label>
|
|
<input v-model="form.email" type="email" required class="input-field" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">{{ t('common.password') }}</label>
|
|
<input v-model="form.password" type="password" required minlength="6" class="input-field" />
|
|
</div>
|
|
<button type="submit" :disabled="loading" class="w-full btn-primary py-3">
|
|
<span v-if="!loading">{{ t('register.register') }}</span>
|
|
<span v-else>Loading...</span>
|
|
</button>
|
|
</form>
|
|
<p v-if="success" class="mt-4 text-green-600 text-center">{{ t('register.success') }}</p>
|
|
<p v-if="error" class="mt-4 text-red-600 text-center">{{ error }}</p>
|
|
<p class="mt-4 text-center text-sm text-gray-600">
|
|
{{ t('register.alreadyHaveAccount') }} <router-link to="/login" class="text-primary-600">{{ t('login.signin') }}</router-link>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Блок версии внизу -->
|
|
<div class="mt-6 text-center text-xs text-gray-500">
|
|
{{ versionStore.getFormattedVersion(t) }}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useVersionStore } from '@/stores/version'
|
|
const { t } = useI18n()
|
|
const versionStore = useVersionStore()
|
|
const form = ref({ login: '', email: '', password: '' })
|
|
const loading = ref(false)
|
|
const error = ref('')
|
|
const success = ref(false)
|
|
|
|
async function handleRegister() {
|
|
loading.value = true
|
|
error.value = ''
|
|
success.value = false
|
|
try {
|
|
const res = await fetch('/api/register', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(form.value)
|
|
})
|
|
if (res.ok) {
|
|
success.value = true
|
|
form.value = { login: '', email: '', password: '' }
|
|
} else {
|
|
const data = await res.json()
|
|
error.value = data.error || 'Registration failed'
|
|
}
|
|
} catch (e) {
|
|
error.value = 'Network error'
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|