My-KOPKB/fe/src/modules/auth/pages/Register.vue

<script lang="ts" setup>
import { ref } from 'vue'
import { RouterLink, useRouter } from 'vue-router'
import { Box } from '@/components/ui/box'
import { Button } from '@/components/ui/button'
import { CheckboxRoot, CheckboxControl, CheckboxLabel } from '@/components/ui/checkbox'
import { Input } from '@/components/ui/input'
import { AlertRoot, AlertTitle, AlertDescription } from '@/components/ui/alert'
import { PasswordInput } from '@/components/ui/password-input'
import { getRegisterErrorMessage, register } from '@/modules/auth'
import illustrationUrl from '@/assets/images/logo.svg'

const router = useRouter()

const name = ref('')
const email = ref('')
const icNumber = ref('')
const password = ref('')
const passwordConfirmation = ref('')
const termsAccepted = ref(false)
const loading = ref(false)
const errorMessage = ref('')

const handleRegister = async () => {
  if (!termsAccepted.value) {
    errorMessage.value = 'Sila bersetuju dengan Dasar Privasi dan Terma dan Syarat.'
    return
  }

  errorMessage.value = ''
  loading.value = true

  try {
    const response = await register({
      name: name.value,
      email: email.value,
      ic_number: icNumber.value,
      password: password.value,
      password_confirmation: passwordConfirmation.value,
    })

    await router.push({
      name: 'verify-email',
      query: { email: response.data.email },
    })
  } catch (error) {
    errorMessage.value = getRegisterErrorMessage(error)
  } finally {
    loading.value = false
  }
} 
</script>

<template>
  <div :class="[
    'relative h-screen lg:overflow-hidden bg-primary bg-noise xl:bg-background xl:bg-none',
    'before:hidden before:xl:block before:content-[\'\'] before:w-[57%] before:mt-[-28%] before:mb-[-16%] before:ml-[-12%] before:absolute before:inset-y-0 before:left-0 before:transform before:rotate-6 before:bg-primary/95 before:bg-noise before:rounded-[35%]',
    'after:hidden after:xl:block after:content-[\'\'] after:w-[57%] after:mt-[-28%] after:mb-[-16%] after:ml-[-12%] after:absolute after:inset-y-0 after:left-0 after:transform after:rotate-6 after:border after:bg-accent after:bg-cover after:blur-xl after:rounded-[35%] after:border-primary',
  ]">
    <div :class="[
      'p-3 sm:px-8 relative h-full',
      'before:hidden before:xl:block before:w-[57%] before:mt-[-20%] before:mb-[-13%] before:ml-[-12%] before:absolute before:inset-y-0 before:left-0 before:transform before:-rotate-6 before:bg-primary/40 before:bg-noise before:border before:border-primary/50 before:opacity-60 before:rounded-[20%]',
    ]">
      <div class="container relative z-10 mx-auto sm:px-20">
        <div class="block grid-cols-2 gap-4 xl:grid">
          <div class="hidden min-h-screen flex-col xl:flex">
            <div class="my-auto">
              <img class="-mt-16 w-1/2" :src="illustrationUrl" alt="logo-RAJD" />
              <div class="mt-10 text-4xl font-medium leading-tight text-white">
                Selamat Datang
              </div>
              <div class="mt-5 text-lg text-white opacity-60">
                Sistem Informasi Koperasi Online (MyKOPKB) 1.0
              </div>
            </div>
          </div>

          <div class="my-10 flex h-screen py-5 xl:my-0 xl:h-auto xl:py-0">
            <Box raised="double"
              class="mx-auto my-auto w-full px-5 py-8 sm:w-3/4 sm:px-8 lg:w-2/4 xl:ml-24 xl:w-auto xl:p-0 xl:before:hidden xl:after:hidden xl:shadow-none xl:border-none xl:bg-none">
              <h2 class="text-center text-2xl font-semibold xl:text-left xl:text-3xl">Daftar Akaun</h2>
              <div class="mt-2 text-center opacity-70 xl:hidden">
                Daftar Akaun
              </div>

              <AlertRoot v-if="errorMessage" class="mt-6" variant="danger">
                <AlertTitle>Daftar gagal</AlertTitle>
                <AlertDescription>{{ errorMessage }}</AlertDescription>
              </AlertRoot>

              <form class="mt-8 flex flex-col gap-5" @submit.prevent="handleRegister">
                <Input v-model="name" class="box block min-w-full px-5 py-6 xl:min-w-md" type="text"
                  placeholder="Nama Penuh" autocomplete="name" required />
                <Input v-model="email" class="box block min-w-full px-5 py-6 xl:min-w-md" type="email"
                  placeholder="Email" autocomplete="email" required />
                <Input v-model="icNumber" class="box block min-w-full px-5 py-6 xl:min-w-md" type="text"
                  placeholder="No. Kad Pengenalan" required />
                <PasswordInput v-model="password" class="box block min-w-full px-5 py-6 xl:min-w-md" type="password"
                  placeholder="Password" autocomplete="new-password" minlength="8" required />
                <PasswordInput v-model="passwordConfirmation" class="box block min-w-full px-5 py-6 xl:min-w-md"
                  placeholder="Sahkan Password" autocomplete="new-password" minlength="8" required />

                <div class="flex text-xs sm:text-sm">
                  <CheckboxRoot :checked="termsAccepted"
                    @checked-change="({ checked }) => (termsAccepted = checked === true)">
                    <CheckboxControl />
                    <CheckboxLabel>
                      Dengan mendaftar, anda bersetuju dengan
                      <RouterLink class="text-primary ml-1" to="/privacy-policy">
                        Dasar Privasi
                      </RouterLink>
                      &amp;
                      <RouterLink class="text-primary ml-1" to="/terms">
                        Terma dan Syarat
                      </RouterLink>
                      .
                    </CheckboxLabel>
                  </CheckboxRoot>
                </div>

                <div class="mt-5 text-center xl:mt-10 xl:text-left">
                  <Button class="box w-full px-4 py-5" variant="primary" type="submit"
                    :disabled="loading || !termsAccepted">
                    {{ loading ? 'Mendaftar...' : 'Daftar' }}
                  </Button>
                  <Button class="box mt-4 w-full px-4 py-5" look="outline" type="button"
                    @click="router.push({ name: 'login' })">
                    Log masuk
                  </Button>
                </div>
              </form>
            </Box>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>