216 lines
8.1 KiB
Vue
216 lines
8.1 KiB
Vue
<script setup lang="ts">
|
|
import { toast } from 'vue-sonner'
|
|
import * as z from 'zod'
|
|
|
|
useSeoMeta({
|
|
title: 'Daftar Akun',
|
|
ogTitle: 'Daftar Akun',
|
|
description: 'Ayo daftar dan nikmati layanan kami!',
|
|
ogDescription: 'Ayo daftar dan nikmati layanan kami!',
|
|
})
|
|
|
|
const config = useRuntimeConfig()
|
|
const router = useRouter()
|
|
const loading = ref(false)
|
|
const { signInWithGoogle, loading: googleLoading } = useGoogleAuth()
|
|
|
|
const fullName = ref('')
|
|
const email = ref('')
|
|
const username = ref('')
|
|
const password = ref('')
|
|
const passwordConfirmation = ref('')
|
|
const errors = ref<Record<string, string>>({})
|
|
|
|
const schema = z.object({
|
|
full_name: z.string().min(1, 'Nama lengkap wajib diisi').max(200, 'Nama lengkap maksimal 200 karakter'),
|
|
email: z.string().min(1, 'Email wajib diisi').email('Format email tidak valid').max(100, 'Email maksimal 100 karakter'),
|
|
username: z.string().min(1, 'Username wajib diisi').max(20, 'Username maksimal 20 karakter'),
|
|
password: z.string().min(8, 'Kata sandi minimal 8 karakter'),
|
|
password_confirmation: z.string().min(1, 'Konfirmasi kata sandi wajib diisi'),
|
|
}).refine(data => data.password === data.password_confirmation, {
|
|
message: 'Kata sandi tidak cocok',
|
|
path: ['password_confirmation'],
|
|
})
|
|
|
|
async function onSubmit() {
|
|
errors.value = {}
|
|
|
|
const result = schema.safeParse({
|
|
full_name: fullName.value,
|
|
email: email.value,
|
|
username: username.value,
|
|
password: password.value,
|
|
password_confirmation: passwordConfirmation.value,
|
|
})
|
|
|
|
if (!result.success) {
|
|
for (const issue of result.error.issues) {
|
|
const field = issue.path[0] as string
|
|
errors.value[field] = issue.message
|
|
}
|
|
return
|
|
}
|
|
|
|
loading.value = true
|
|
try {
|
|
await $fetch(`${config.public.apiBase}/auth/register`, {
|
|
method: 'POST',
|
|
body: {
|
|
full_name: fullName.value,
|
|
email: email.value,
|
|
username: username.value,
|
|
password: password.value,
|
|
password_confirmation: passwordConfirmation.value,
|
|
}
|
|
})
|
|
toast.success('Akun berhasil dibuat!', {
|
|
description: `Selamat datang, ${fullName.value}!`,
|
|
})
|
|
router.push('/')
|
|
} catch (error: any) {
|
|
const detail = error?.data?.detail
|
|
if (detail && Array.isArray(detail)) {
|
|
const fieldErrors = detail
|
|
.filter((e: any) => e.loc?.length >= 2)
|
|
.map((e: any) => ({
|
|
path: e.loc[e.loc.length - 1],
|
|
message: e.msg
|
|
}))
|
|
for (const fe of fieldErrors) {
|
|
errors.value[fe.path] = fe.message
|
|
}
|
|
} else {
|
|
toast.error('Gagal mendaftar', {
|
|
description: error?.data?.message || 'Ups, terjadi kesalahan. Silakan coba lagi beberapa saat.',
|
|
})
|
|
}
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
async function handleGoogleRegister() {
|
|
await signInWithGoogle(
|
|
(result) => {
|
|
toast.success('Berhasil mendaftar!', {
|
|
description: `Selamat datang, ${result.user.email}!`,
|
|
})
|
|
router.push('/')
|
|
},
|
|
(errorMsg) => {
|
|
toast.error('Gagal mendaftar', {
|
|
description: errorMsg,
|
|
})
|
|
}
|
|
)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-6">
|
|
<Card>
|
|
<CardHeader class="text-center">
|
|
<CardTitle class="text-xl">
|
|
Buat akun baru
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Kelola bisnis Anda dengan mudah dan efisien bersama platform kami.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form @submit.prevent="onSubmit">
|
|
<FieldGroup>
|
|
<Field :class="{ 'text-destructive': errors.full_name }">
|
|
<FieldLabel for="full_name">
|
|
Nama Lengkap <span class="text-destructive">*</span>
|
|
</FieldLabel>
|
|
<Input id="full_name" v-model="fullName" type="text" placeholder="Masukkan nama lengkap"
|
|
:class="{ 'border-destructive': errors.full_name }" required />
|
|
<p v-if="errors.full_name" class="text-sm text-destructive mt-1">
|
|
{{ errors.full_name }}
|
|
</p>
|
|
</Field>
|
|
<Field :class="{ 'text-destructive': errors.email }">
|
|
<FieldLabel for="email">
|
|
Email <span class="text-destructive">*</span>
|
|
</FieldLabel>
|
|
<Input id="email" v-model="email" type="email" placeholder="Masukkan email"
|
|
:class="{ 'border-destructive': errors.email }" required />
|
|
<p v-if="errors.email" class="text-sm text-destructive mt-1">
|
|
{{ errors.email }}
|
|
</p>
|
|
</Field>
|
|
<Field :class="{ 'text-destructive': errors.username }">
|
|
<FieldLabel for="username">
|
|
Username <span class="text-destructive">*</span>
|
|
</FieldLabel>
|
|
<Input id="username" v-model="username" type="text" placeholder="Masukkan username"
|
|
:class="{ 'border-destructive': errors.username }" required />
|
|
<p v-if="errors.username" class="text-sm text-destructive mt-1">
|
|
{{ errors.username }}
|
|
</p>
|
|
</Field>
|
|
<Field :class="{ 'text-destructive': errors.password }">
|
|
<FieldLabel for="password">
|
|
Kata Sandi <span class="text-destructive">*</span>
|
|
</FieldLabel>
|
|
<Input id="password" v-model="password" type="password" placeholder="Buat kata sandi"
|
|
:class="{ 'border-destructive': errors.password }" required />
|
|
<p v-if="errors.password" class="text-sm text-destructive mt-1">
|
|
{{ errors.password }}
|
|
</p>
|
|
</Field>
|
|
<Field :class="{ 'text-destructive': errors.password_confirmation }">
|
|
<FieldLabel for="password_confirmation">
|
|
Konfirmasi Kata Sandi <span class="text-destructive">*</span>
|
|
</FieldLabel>
|
|
<Input id="password_confirmation" v-model="passwordConfirmation" type="password"
|
|
placeholder="Konfirmasi kata sandi"
|
|
:class="{ 'border-destructive': errors.password_confirmation }" required />
|
|
<p v-if="errors.password_confirmation" class="text-sm text-destructive mt-1">
|
|
{{ errors.password_confirmation }}
|
|
</p>
|
|
</Field>
|
|
<Field>
|
|
<Button type="submit" :disabled="loading">
|
|
<span v-if="loading" class="i-lucide-loader-2 h-4 w-4 animate-spin mr-2" />
|
|
Daftar
|
|
</Button>
|
|
<FieldDescription class="text-center">
|
|
Sudah punya akun?
|
|
<NuxtLink to="/auth/login" class="text-primary hover:underline">
|
|
Masuk
|
|
</NuxtLink>
|
|
</FieldDescription>
|
|
</Field>
|
|
<FieldSeparator class="*:data-[slot=field-separator-content]:bg-card">
|
|
Atau daftar dengan
|
|
</FieldSeparator>
|
|
<Field>
|
|
<Button variant="outline" type="button" :disabled="googleLoading" @click="handleGoogleRegister">
|
|
<span v-if="googleLoading" class="i-lucide-loader-2 h-4 w-4 animate-spin mr-2" />
|
|
<svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-4 w-4 mr-2">
|
|
<path
|
|
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
|
|
fill="currentColor" />
|
|
</svg>
|
|
Daftar dengan Google
|
|
</Button>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
<FieldDescription class="px-6 text-center">
|
|
Dengan mendaftar, Anda menyetujui
|
|
<NuxtLink to="/terms" class="text-primary hover:underline">
|
|
Ketentuan Layanan
|
|
</NuxtLink>
|
|
dan
|
|
<NuxtLink to="/privacy" class="text-primary hover:underline">
|
|
Kebijakan Privasi
|
|
</NuxtLink>.
|
|
</FieldDescription>
|
|
</div>
|
|
</template>
|