101 lines
4.5 KiB
Vue
101 lines
4.5 KiB
Vue
<script setup lang="ts">
|
|
import { useForm } from '@inertiajs/vue3'
|
|
import type { HTMLAttributes } from "vue"
|
|
import { toast } from 'vue-sonner'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
import {
|
|
Field, FieldError,
|
|
FieldGroup,
|
|
FieldLabel
|
|
} from '@/components/ui/field'
|
|
import { Input } from '@/components/ui/input'
|
|
import { cn } from "@/lib/utils"
|
|
import FieldSeparator from './ui/field/FieldSeparator.vue'
|
|
|
|
const props = defineProps<{
|
|
class?: HTMLAttributes["class"]
|
|
}>()
|
|
|
|
const form = useForm({
|
|
login: '',
|
|
password: '',
|
|
})
|
|
|
|
function submit() {
|
|
form.post('/auth/login', {
|
|
onError: (errors) => {
|
|
const message = errors.login
|
|
?? errors.password
|
|
?? 'Gagal masuk. Periksa kembali data Anda.';
|
|
|
|
toast.error(message);
|
|
},
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="cn('flex flex-col gap-6', props.class)">
|
|
<Card class="overflow-hidden p-0">
|
|
<CardContent class="grid p-0 md:grid-cols-2">
|
|
<form class="p-6 md:p-8" @submit.prevent="submit">
|
|
<FieldGroup>
|
|
<div class="flex flex-col items-center gap-2 text-center">
|
|
<h1 class="text-2xl font-bold">
|
|
Selamat Datang
|
|
</h1>
|
|
<p class="text-muted-foreground text-balance">
|
|
Silakan masukkan email dan username untuk akses dasbor.
|
|
</p>
|
|
</div>
|
|
<Field>
|
|
<FieldLabel for="login" required>
|
|
Email/Username
|
|
</FieldLabel>
|
|
<Input id="login" v-model="form.login" type="text" placeholder="m@example.com" required />
|
|
<FieldError :errors="form.errors.login ? [form.errors.login] : []" />
|
|
</Field>
|
|
<Field>
|
|
<div class="flex items-center">
|
|
<FieldLabel for="password" required>
|
|
Kata Sandi
|
|
</FieldLabel>
|
|
<a href="#" class="ml-auto text-sm underline-offset-2 hover:underline">
|
|
Lupa kata sandi?
|
|
</a>
|
|
</div>
|
|
<Input id="password" v-model="form.password" type="password" placeholder="********"
|
|
required />
|
|
<FieldError :errors="form.errors.password ? [form.errors.password] : []" />
|
|
</Field>
|
|
<Field>
|
|
<Button type="submit" :disabled="form.processing">
|
|
{{ form.processing ? 'Memuat...' : 'Masuk' }}
|
|
</Button>
|
|
</Field>
|
|
|
|
<FieldSeparator class="*:data-[slot=field-separator-content]:bg-card">
|
|
Atau lanjutkan dengan
|
|
</FieldSeparator>
|
|
<Field class="grid gap-4">
|
|
<Button variant="outline" type="button">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<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>
|
|
<span>Google</span>
|
|
</Button>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
<div class="bg-muted relative hidden md:block">
|
|
<img src="https://images.pexels.com/photos/37080685/pexels-photo-37080685.jpeg" alt="Image"
|
|
class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale">
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</template>
|