84 lines
4.1 KiB
Vue
84 lines
4.1 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-noctune-cream flex items-center justify-center p-8">
|
|
<div class="w-full max-w-5xl bg-noctune-teal rounded-3xl border-4 border-black overflow-hidden flex shadow-2xl">
|
|
<div class="w-1/2 p-12 relative">
|
|
<div class="absolute top-8 right-12 grid grid-cols-4 gap-1">
|
|
<span v-for="i in 16" :key="i" class="w-2 h-2 bg-black/40 rounded-full"></span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center h-full">
|
|
<div class="relative">
|
|
<div class="w-48 h-48 flex items-center justify-center">
|
|
<svg viewBox="0 0 120 120" class="w-full h-full">
|
|
<polygon points="40,35 80,35 90,50 50,50" fill="#ff6b35"/>
|
|
<polygon points="40,35 50,50 50,90 40,75" fill="#e85a2a"/>
|
|
<polygon points="50,50 90,50 90,90 50,90" fill="#ff8c5a"/>
|
|
<polygon points="40,75 50,90 50,70 40,55" fill="#1a1a1a"/>
|
|
<polygon points="70,50 90,50 90,70 70,70" fill="#1a1a1a"/>
|
|
<polygon points="50,70 70,70 70,90 50,90" fill="#1a1a1a"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<h1 class="text-4xl font-mono font-bold text-noctune-dark tracking-wider mt-4">noctune</h1>
|
|
</div>
|
|
</div>
|
|
<div class="w-1/2 bg-white rounded-3xl m-4 p-10">
|
|
<h2 class="text-4xl font-black text-black mb-2">JOIN US!</h2>
|
|
<p class="text-gray-600 mb-6">Create your account</p>
|
|
<p v-if="error" class="text-red-500 text-sm mb-4 font-medium">{{ error }}</p>
|
|
<div class="mb-4">
|
|
<label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">NAME</label>
|
|
<input type="text" v-model="name" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Your name" />
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">USERNAME</label>
|
|
<input type="text" v-model="username" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Choose a username" />
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">EMAIL</label>
|
|
<input type="email" v-model="email" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Enter your email" />
|
|
</div>
|
|
<div class="mb-6">
|
|
<label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">PASSWORD</label>
|
|
<input type="password" v-model="password" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Create a password" />
|
|
</div>
|
|
<button @click="handleRegister" :disabled="loading" class="w-full bg-noctune-orange border-2 border-black rounded-lg py-4 font-bold text-white text-xl flex items-center justify-center gap-3 hover:bg-orange-600 transition-colors disabled:opacity-50">
|
|
<span v-if="loading" class="inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
|
|
<span v-else>REGISTER</span>
|
|
</button>
|
|
<p class="text-center mt-6 text-gray-600">
|
|
Already have an account?
|
|
<router-link to="/" class="text-noctune-orange font-bold hover:underline">Login</router-link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useAuthStore } from '../stores/authStore.js'
|
|
|
|
const router = useRouter()
|
|
const authStore = useAuthStore()
|
|
|
|
const name = ref('')
|
|
const username = ref('')
|
|
const email = ref('')
|
|
const password = ref('')
|
|
const loading = ref(false)
|
|
const error = ref('')
|
|
|
|
async function handleRegister() {
|
|
error.value = ''
|
|
loading.value = true
|
|
const result = await authStore.register({ name: name.value, username: username.value, email: email.value, password: password.value })
|
|
loading.value = false
|
|
if (result.success) {
|
|
router.push('/home')
|
|
} else {
|
|
error.value = result.message
|
|
}
|
|
}
|
|
</script>
|