mirror of
https://github.com/PhaseII-eAmusement-Network/PhaseWeb3-Vue.git
synced 2026-04-26 07:47:23 -05:00
564087f658
Some checks are pending
Build / build (push) Waiting to run
Initial move to tailwind V4. breaks a couple things visually, a few animations are off, mostly working though.
116 lines
3.1 KiB
Vue
116 lines
3.1 KiB
Vue
<script setup>
|
|
import { useForm, Head, Link } from "@inertiajs/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";
|
|
|
|
const props = defineProps({
|
|
canResetPassword: Boolean,
|
|
status: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const form = useForm({
|
|
email: "",
|
|
password: "",
|
|
remember: [],
|
|
});
|
|
|
|
const submit = () => {
|
|
form
|
|
.transform((data) => ({
|
|
...data,
|
|
remember: form.remember && form.remember.length ? "on" : "",
|
|
}))
|
|
.post(route("login"), {
|
|
onFinish: () => form.reset("password"),
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<LayoutGuest>
|
|
<Head title="Login" />
|
|
|
|
<SectionFullScreen v-slot="{ cardClass }" bg="purplePink">
|
|
<CardBox :class="cardClass" is-form @submit.prevent="submit">
|
|
<FormValidationErrors />
|
|
|
|
<NotificationBarInCard v-if="status" color="info">
|
|
{{ status }}
|
|
</NotificationBarInCard>
|
|
|
|
<FormField
|
|
label="Email"
|
|
label-for="email"
|
|
help="Please enter your email"
|
|
>
|
|
<FormControl
|
|
id="email"
|
|
v-model="form.email"
|
|
:icon="mdiAccount"
|
|
autocomplete="email"
|
|
type="email"
|
|
required
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField
|
|
label="Password"
|
|
label-for="password"
|
|
help="Please enter your password"
|
|
>
|
|
<FormControl
|
|
id="password"
|
|
v-model="form.password"
|
|
:icon="mdiAsterisk"
|
|
type="password"
|
|
autocomplete="current-password"
|
|
required
|
|
/>
|
|
</FormField>
|
|
|
|
<FormCheckRadioGroup
|
|
v-model="form.remember"
|
|
name="remember"
|
|
:options="{ remember: 'Remember' }"
|
|
/>
|
|
|
|
<BaseDivider />
|
|
|
|
<BaseLevel>
|
|
<BaseButtons>
|
|
<BaseButton
|
|
type="submit"
|
|
color="info"
|
|
label="Login"
|
|
:class="{ 'opacity-25': form.processing }"
|
|
:disabled="form.processing"
|
|
/>
|
|
<BaseButton
|
|
v-if="canResetPassword"
|
|
route-name="password.request"
|
|
color="info"
|
|
outline
|
|
label="Remind"
|
|
/>
|
|
</BaseButtons>
|
|
<Link :href="route('register')"> Register </Link>
|
|
</BaseLevel>
|
|
</CardBox>
|
|
</SectionFullScreen>
|
|
</LayoutGuest>
|
|
</template>
|