frontend init

front/src/views/SignupView.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter, RouterLink } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const router = useRouter()
+const auth = useAuthStore()
+
+const username = ref('')
+const email = ref('')
+const password = ref('')
+const error = ref('')
+const loading = ref(false)
+
+async function onSubmit() {
+  error.value = ''
+  loading.value = true
+  try {
+    await auth.signup({ username: username.value, email: email.value, password: password.value })
+    router.push('/')
+  } catch (e: any) {
+    error.value = e.message || 'Signup failed'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="auth-card card">
+    <div class="card-body p-4">
+      <h2 class="card-title text-center mb-4">Sign Up</h2>
+
+      <div v-if="error" class="alert alert-danger">{{ error }}</div>
+
+      <form @submit.prevent="onSubmit">
+        <div class="mb-3">
+          <label for="username" class="form-label">Username</label>
+          <input
+            id="username"
+            v-model="username"
+            type="text"
+            class="form-control"
+            required
+            autocomplete="username"
+          />
+        </div>
+
+        <div class="mb-3">
+          <label for="email" class="form-label">Email</label>
+          <input
+            id="email"
+            v-model="email"
+            type="email"
+            class="form-control"
+            required
+            autocomplete="email"
+          />
+        </div>
+
+        <div class="mb-3">
+          <label for="password" class="form-label">Password</label>
+          <input
+            id="password"
+            v-model="password"
+            type="password"
+            class="form-control"
+            required
+            autocomplete="new-password"
+          />
+        </div>
+
+        <button type="submit" class="btn btn-primary w-100" :disabled="loading">
+          {{ loading ? 'Signing up...' : 'Sign Up' }}
+        </button>
+      </form>
+
+      <p class="text-center mt-3 mb-0">
+        Already have an account?
+        <RouterLink to="/login">Log in</RouterLink>
+      </p>
+    </div>
+  </div>
+</template>