up

frontend/src/views/auth/Register.vue

@@ -0,0 +1,72 @@
+<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">Create Account</h1>
+        <p class="text-gray-600 mt-2">Register and wait for admin approval</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">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">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">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">Register</span>
+            <span v-else>Loading...</span>
+          </button>
+        </form>
+        <p v-if="success" class="mt-4 text-green-600 text-center">Account created! Wait for admin activation.</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">
+          Already have an account? <router-link to="/login" class="text-primary-600">Login</router-link>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+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>