rag/resources/js/Pages/Auth/Login.vue

<script setup lang="ts">
import type {HTMLAttributes} from "vue"
import {Rocket, CircleCheckBig, ArrowUpIcon, Loader2} from "lucide-vue-next"
import {cn} from '@/Packages/Shadcn/Lib/utils'
import {Button} from '@/Packages/Shadcn/Components/ui/button'
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/Packages/Shadcn/Components/ui/card'
import {Input} from '@/Packages/Shadcn/Components/ui/input'
import {Label} from '@/Packages/Shadcn/Components/ui/label'
import {Alert, AlertDescription} from "@/Packages/Shadcn/Components/ui/alert"
import {Form} from '@inertiajs/vue3'

const props = defineProps<{
    class?: HTMLAttributes["class"],
    status?: String
}>()
</script>

<template>
    <div class="flex h-screen w-full items-center justify-center px-4">
        <div class="min-w-[400px]" :class="cn('flex flex-col gap-6', props.class)">

            <Alert variant="positive" v-if="status">
                <CircleCheckBig class="h-4 w-4"/>
                <AlertDescription>{{ status }}</AlertDescription>
            </Alert>

            <Card>
                <CardHeader>
                    <CardTitle>Вход в аккаунт</CardTitle>
                    <CardDescription>Введите Ваш Email, чтобы войти в аккаунт</CardDescription>
                </CardHeader>
                <CardContent>
                    <Form :action="route('login')" method="post" :show-progress="false" disable-while-processing
                          :resetOnError="['password']" #default="{ errors, processing, isDirty }">
                        <div class="flex flex-col gap-6">
                            <div class="grid gap-3">
                                <Label for="email" class="cursor-pointer">Email</Label>
                                <Input
                                    id="email"
                                    name="email"
                                    type="email"
                                    placeholder="email@example.com"
                                    required
                                />
                                <div class="text-destructive/90 text-sm" v-if="errors.email">
                                    {{ errors.email }}
                                </div>
                            </div>
                            <div class="grid gap-3">
                                <div class="flex items-center">
                                    <Label for="password" class="cursor-pointer">Пароль</Label>
                                </div>
                                <Input id="password" type="password" name="password" required/>
                                <div class="text-destructive/90 text-sm" v-if="errors.password">
                                    {{ errors.password }}
                                </div>
                            </div>
                            <div class="flex flex-col gap-3">
                                <Button type="submit" class="w-full cursor-pointer" :disabled="!isDirty || processing">
                                    <template v-if="!processing">
                                        <span>Войти</span>
                                    </template>
                                    <template v-else>
                                        <Loader2 class="w-4 h-4 animate-spin"/>
                                        Авторизация
                                    </template>
                                </Button>
                            </div>
                        </div>
                    </Form>
                </CardContent>
            </Card>
        </div>
    </div>
</template>