byntangxyz/noctune-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Bintang Murtifandy
2026-05-26 12:11:14 +07:00
commit 9fdd78e737
117 changed files with 10579 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/RegisterPage.vue
+83
View File
@@ -0,0 +1,83 @@
<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>