# Register Form Functionality - Session 1

**Tanggal:** 2026-07-23
**Status:** Selesai

## Tujuan

Menambahkan fungsionalitas register pada `web2/app/components/RegisterForm.vue` dengan referensi dari `web/app/pages/auth/register.vue`, menggunakan UI dari `web2/app/components/LoginForm.vue`.

## Yang Dikerjakan

### 1. Buat `app/components/RegisterForm.vue`
- Validasi form dengan Zod (`full_name`, `email`, `username`, `password`, `password_confirmation`).
- Validasi `password_confirmation` harus cocok dengan `password` menggunakan `.refine()`.
- Submit handler: `POST /auth/register` via `$fetch`.
- Google register handler: `useGoogleAuth().signInWithGoogle()`.
- Loading state pada tombol Daftar dan tombol Google.
- Error handling: field-level errors + toast notification (success/error).
- Navigasi: `<NuxtLink>` untuk "Masuk", "Ketentuan Layanan", "Kebijakan Privasi".

### 2. Buat `app/pages/auth/register/index.vue`
- Page wrapper yang merender `<RegisterForm />`.
- Layout mirip dengan login page.

## File yang Dibuat

| File | Aksi |
|------|------|
| `app/components/RegisterForm.vue` | Dibuat |
| `app/pages/auth/register/index.vue` | Dibuat |

## API yang Digunakan

- `POST /v1/auth/register` - Body: `{ full_name, email, username, password, password_confirmation }`
- `POST /v1/auth/google-login` - Body: `{ credential }` (Google JWT)

## Fields Form

| Field | Type | Validasi |
|-------|------|----------|
| `full_name` | text | wajib, max 200 karakter |
| `email` | email | wajib, format email, max 100 karakter |
| `username` | text | wajib, max 20 karakter |
| `password` | password | wajib, min 8 karakter |
| `password_confirmation` | password | wajib, harus cocok dengan password |

## Error Handling

- Field-level errors dari API response (`error.data.detail`)
- Toast notification untuk error umum
- Validasi client-side sebelum submit
