145 lines
4.3 KiB
Vue
145 lines
4.3 KiB
Vue
<!-- <template>
|
|
<div>
|
|
<Link href="/app">Home</Link>
|
|
<br />
|
|
<h1>Login</h1>
|
|
<Head>
|
|
<title>About - My app</title>
|
|
<meta
|
|
head-key="description"
|
|
name="description"
|
|
content="This is a page specific description"
|
|
/>
|
|
</Head>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import AuthLayout from '@/Layouts/Auth.vue';
|
|
import LayoutGuest from '@/Layouts/LayoutGuest.vue';
|
|
export default {
|
|
layout: AuthLayout,
|
|
};
|
|
</script>
|
|
|
|
<script setup>
|
|
// import { Head, Link } from '@inertiajs/vue3';
|
|
import { Head, Link } from '@inertiajs/inertia-vue3'
|
|
import FormField from '@/Components/FormField.vue';
|
|
import FormControl from '@/Components/FormControl.vue';
|
|
</script> -->
|
|
|
|
<template>
|
|
<LayoutGuest>
|
|
|
|
<Head title="Login" />
|
|
|
|
<SectionFullScreen v-slot="{ cardClass }" :bg="'greenBlue'">
|
|
<CardBox :class="cardClass" form @submit.prevent="submit">
|
|
<FormValidationErrors v-bind:errors="errors" />
|
|
|
|
<NotificationBarInCard v-if="status" color="info">
|
|
{{ status }}
|
|
</NotificationBarInCard>
|
|
|
|
<FormField label="Email" label-for="email" help="Please enter your email">
|
|
<FormControl v-model="form.email" :icon="mdiAccount" id="email" autocomplete="email" type="email"
|
|
required />
|
|
</FormField>
|
|
|
|
<FormField label="Password" label-for="password" help="Please enter your password">
|
|
<FormControl v-model="form.password" :icon="mdiAsterisk" type="password" id="password"
|
|
autocomplete="current-password" required />
|
|
</FormField>
|
|
|
|
<FormCheckRadioGroup v-model="form.remember" name="remember" :options="{ remember: 'Remember' }" />
|
|
|
|
<!-- <NotificationBar v-if="flash && flash.message" color="warning" :icon="mdiAlertBoxOutline">
|
|
{{ flash.message }}
|
|
class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4"
|
|
</NotificationBar> -->
|
|
<div v-if="flash && flash.message" class="flex flex-col mt-6 animate-fade-in">
|
|
<div class="bg-yellow-500 border-l-4 border-orange-400 text-white p-4" role="alert">
|
|
<p class="font-bold">Be Warned</p>
|
|
<p>{{ flash.message }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<BaseDivider />
|
|
|
|
<!-- buttons -->
|
|
<BaseLevel>
|
|
<BaseButtons>
|
|
<BaseButton type="submit" color="info" label="Login" :class="{ 'opacity-25': form.processing }"
|
|
v-bind:disabled="form.processing" />
|
|
<!-- <BaseButton v-if="canResetPassword" :route-name="route('password.request')" color="info" outline
|
|
label="Remind" /> -->
|
|
</BaseButtons>
|
|
<Link :href="stardust.route('app.register.show')"> Register </Link>
|
|
</BaseLevel>
|
|
</CardBox>
|
|
</SectionFullScreen>
|
|
</LayoutGuest>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useForm, Head, Link } from '@inertiajs/vue3';
|
|
// import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
|
|
import { mdiAccount, mdiAsterisk } from '@mdi/js';
|
|
import LayoutGuest from '@/Layouts/LayoutGuest.vue';
|
|
import SectionFullScreen from '@/Components/SectionFullScreen.vue';
|
|
import CardBox from '@/Components/CardBox.vue';
|
|
import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue';
|
|
import FormField from '@/Components/FormField.vue';
|
|
import FormControl from '@/Components/FormControl.vue';
|
|
import BaseDivider from '@/Components/BaseDivider.vue';
|
|
import BaseButton from '@/Components/BaseButton.vue';
|
|
import BaseButtons from '@/Components/BaseButtons.vue';
|
|
import FormValidationErrors from '@/Components/FormValidationErrors.vue';
|
|
import NotificationBarInCard from '@/Components/NotificationBarInCard.vue';
|
|
import BaseLevel from '@/Components/BaseLevel.vue';
|
|
|
|
import { stardust } from '@eidellev/adonis-stardust/client';
|
|
import NotificationBar from '@/Components/NotificationBar.vue';
|
|
import { computed } from 'vue';
|
|
import { usePage } from '@inertiajs/vue3';
|
|
|
|
// interface IErrorMessage {
|
|
// [key: string]: Array<string>;
|
|
// }
|
|
const flash = computed(() => {
|
|
return usePage().props.flash;
|
|
});
|
|
|
|
const props = defineProps({
|
|
canResetPassword: Boolean,
|
|
status: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
errors: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
|
|
const form = useForm({
|
|
email: '',
|
|
password: '',
|
|
remember: [],
|
|
});
|
|
|
|
const submit = async() => {
|
|
await form
|
|
.transform((data) => ({
|
|
...data,
|
|
remember: form.remember && form.remember.length ? 'on' : '',
|
|
}))
|
|
.post(stardust.route('login.store'), {
|
|
// onFinish: () => {
|
|
// form.reset('password');
|
|
// }
|
|
});
|
|
};
|
|
</script>
|