- second commit

This commit is contained in:
Kaimbacher 2023-03-17 16:13:37 +01:00
parent 4fc3bb0a01
commit 59a99ff3c8
61 changed files with 2625 additions and 1182 deletions

View file

@ -31,60 +31,70 @@ import FormControl from '@/Components/FormControl.vue';
</script> -->
<template>
<LayoutGuest>
<LayoutGuest>
<Head title="Login" />
<Head title="Login" />
<SectionFullScreen v-slot="{ cardClass }" :bg="'greenBlue'">
<CardBox :class="cardClass" form @submit.prevent="submit">
<FormValidationErrors v-bind:errors="errors" />
<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>
<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="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>
<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' }" />
<FormCheckRadioGroup v-model="form.remember" name="remember" :options="{ remember: 'Remember' }" />
<!-- <NotificationBar v-if="flash && flash.message" color="warning" :icon="mdiAlertBoxOutline">
<!-- <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>
<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 />
<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
<!-- 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>
</BaseButtons>
<!-- <Link :href="stardust.route('app.register.show')"> Register </Link> -->
</BaseLevel>
</CardBox>
</SectionFullScreen>
</LayoutGuest>
</template>
<script setup>
import { useForm, Head, Link } from '@inertiajs/vue3';
<script setup lang="ts">
import { useForm, Head } from '@inertiajs/vue3';
import { Ref } from 'vue';
// import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
import { mdiAccount, mdiAsterisk } from '@mdi/js';
import LayoutGuest from '@/Layouts/LayoutGuest.vue';
@ -101,45 +111,45 @@ 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 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 flash: Ref<any> = computed(() => {
return usePage().props.flash;
});
const props = defineProps({
canResetPassword: Boolean,
status: {
type: String,
default: null,
},
errors: {
type: Object,
default: () => ({}),
},
defineProps({
canResetPassword: Boolean,
status: {
type: String,
default: null,
},
errors: {
type: Object,
default: () => ({}),
},
});
const form = useForm({
email: '',
password: '',
remember: [],
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');
// }
});
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>