Arno Kaimbacher
4c5a8f5a42
All checks were successful
CI / container-job (push) Successful in 43s
- ace.js: use ts-node-maintained - adonisrc.ts: load vite_provider, sett assetBundler to false, addd hooks property - Dockerfile: change to node version 22 - package.json: remove babel depencies; add @swc/wasm, add vitejs/plugin-vue, add hot-hook, add vite, update eslint-config-prettier, tailwindcss, ts-node-maintained - new vite.config.js and config/vite.ts - inertia.js - improved own vinejs_provider.ts - adapted app.css needed for vitejs - adapted app.ts: new resolve method neede for vitejs relocated resources/js/logo.svg - remove Buffer import into FileUpload.vue - Create.vue: improved submit needed for @inertiajs/vue3 form helper - Edit.vue: mproved submit needed for @inertiajs/vue3 form helper - kernel.ts: load vite_middleware - formated rotes.ts file - rewritten allowed_extensions_mimetypes.ts file (removed typescript errors)
288 lines
11 KiB
Vue
288 lines
11 KiB
Vue
<template>
|
|
<LayoutGuest>
|
|
|
|
<Head title="Login" />
|
|
|
|
<!-- <SectionFullScreen v-slot="{ cardClass }" :bg="'greenBlue'"> -->
|
|
<SectionFullScreen v-slot="{ cardClass }">
|
|
<a class="text-2xl font-semibold flex justify-center items-center mb-8 lg:mb-10">
|
|
<img src="../../logo.svg" class="h-10 mr-4" alt="Windster Logo" />
|
|
<!-- <span class="self-center text-2xl font-bold whitespace-nowrap">Tethys</span> -->
|
|
</a>
|
|
|
|
<CardBox v-if="isTwoFactorAuthNeeded == false" :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 -->
|
|
|
|
<BaseButtons>
|
|
<BaseButton type="submit" color="info" label=" Login to your account"
|
|
:class="{ 'opacity-25': form.processing }" v-bind:disabled="form.processing" />
|
|
<!-- <button type="submit" v-bind:disabled="form.processing" :class="{ 'opacity-25': form.processing }"
|
|
class="text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-4 focus:ring-cyan-200 font-medium rounded-lg text-base px-5 py-3 w-full sm:w-auto text-center">
|
|
Login to your account
|
|
</button> -->
|
|
<!-- <BaseButton v-if="canResetPassword" :route-name="route('password.request')" color="info" outline
|
|
label="Remind" /> -->
|
|
</BaseButtons>
|
|
<!-- <Link :href="stardust.route('app.register.show')"> Register </Link> -->
|
|
|
|
<!-- <div class="text-sm font-medium text-gray-500">
|
|
Not registered? <a href="" class="text-teal-500 hover:underline">Create account</a>
|
|
</div> -->
|
|
</CardBox>
|
|
|
|
|
|
<CardBox v-else-if="isTwoFactorAuthNeeded" :icon="mdiTwoFactorAuthentication" :class="cardClass" form
|
|
@submit.prevent="submitFa2Form">
|
|
|
|
<!-- authentication method menu -->
|
|
<div class="lex flex-col md:flex-row mb-3">
|
|
<label for="authmethod-option-one" class="pure-radio">
|
|
<input id="authmethod-option-one" type="radio" v-model="authMethod" value="code" />
|
|
use 2fa app
|
|
</label>
|
|
<label for="authmethod-option-two" class="pure-radio">
|
|
<input id="authmethod-option-two" type="radio" v-model="authMethod" value="backupCode" />
|
|
use backup code
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<FormField v-if="authMethod === 'code'" label="2FA Code" label-for="code" help="Please enter 2factor code">
|
|
<FormControl v-model="fa2Form.code" :icon="mdiAccount" id="code" type="tel" required />
|
|
</FormField>
|
|
|
|
<FormField v-if="authMethod === 'backupCode'" label="Backup Code" label-for="backupCode" help="Please enter backup code">
|
|
<FormControl v-model="fa2Form.backup_code" :icon="mdiAccount" id="backupCode" type="tel" required />
|
|
</FormField>
|
|
|
|
|
|
<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 />
|
|
|
|
|
|
<BaseButtons>
|
|
<!-- <button type="submit" :icon="mdiContentSaveCheck" :disabled="fa2Form.processing"
|
|
:class="{ 'opacity-25': fa2Form.processing }"
|
|
class="text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-4 focus:ring-cyan-200 font-medium rounded-lg text-base px-5 py-3 w-full sm:w-auto text-center">
|
|
Verify
|
|
</button> -->
|
|
<BaseButton type="submit" :icon="mdiContentSaveCheck" color="info" label=" Login to your account"
|
|
:class="{ 'opacity-25': fa2Form.processing }" v-bind:disabled="fa2Form.processing" />
|
|
</BaseButtons>
|
|
<!-- <Link :href="stardust.route('app.register.show')"> Register </Link> -->
|
|
|
|
</CardBox>
|
|
|
|
</SectionFullScreen>
|
|
</LayoutGuest>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useForm, Head, InertiaForm } from '@inertiajs/vue3';
|
|
import { Ref, ref } from 'vue';
|
|
// import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
|
|
import { mdiAccount, mdiAsterisk, mdiTwoFactorAuthentication, mdiContentSaveCheck } 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 { stardust } from '@eidellev/adonis-stardust/client';
|
|
// import NotificationBar from '@/Components/NotificationBar.vue';
|
|
import { computed, watch } from 'vue';
|
|
import { usePage } from '@inertiajs/vue3';
|
|
// import axios from 'axios';
|
|
// import { LoginState } from '@/Dataset';
|
|
|
|
// interface IErrorMessage {
|
|
// [key: string]: Array<string>;
|
|
// }
|
|
const flash: Ref<any> = computed(() => {
|
|
let test = usePage().props;
|
|
return test.flash;
|
|
});
|
|
|
|
const user_id: Ref<any> = computed(() => {
|
|
let test = usePage().props;
|
|
return test.user_id;
|
|
});
|
|
|
|
const isTwoFactorAuthNeeded = ref(false);
|
|
|
|
const authMethod = ref('code');
|
|
watch(authMethod, (currentValue) => {
|
|
if (currentValue == 'code') {
|
|
fa2Form.backup_code = undefined;
|
|
} else if (currentValue == 'backupCode') {
|
|
fa2Form.code = undefined;
|
|
}
|
|
});
|
|
|
|
// const user_id: ComputedRef<number> = computed(() => {
|
|
// return usePage().props.flash.user_id as number;
|
|
// });
|
|
|
|
|
|
// const isTwoFactorAuthNeeded = computed(() => {
|
|
// if (flash.new_user_id) {
|
|
// return true;
|
|
// } else {
|
|
// return false;
|
|
// }
|
|
// });
|
|
|
|
|
|
|
|
watch(user_id, () => {
|
|
if (user_id.value) {
|
|
isTwoFactorAuthNeeded.value = true;
|
|
} else {
|
|
isTwoFactorAuthNeeded.value = false;
|
|
}
|
|
});
|
|
|
|
defineProps({
|
|
canResetPassword: Boolean,
|
|
status: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
errors: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
|
|
// const { version } = usePage();
|
|
|
|
const form: InertiaForm = useForm(() => ({
|
|
email: '',
|
|
password: '',
|
|
remember: [],
|
|
}));
|
|
|
|
// const login = async (data): Promise<any | null> => {
|
|
// try {
|
|
// let resp = await axios.post(stardust.route('login.store'), data, {
|
|
// headers: {
|
|
// 'X-Inertia': true,
|
|
// 'X-Inertia-Partial-Component': 'Users',
|
|
// 'X-Inertia-Partial-Data': 'users',
|
|
// 'X-Inertia-Version': version,
|
|
// }
|
|
// });
|
|
|
|
// // Check if the response contains a redirect status
|
|
// if (resp.data.component && resp.data.url) {
|
|
// // Use Inertia.js to visit the specified component
|
|
// router.visit(resp.data.url, resp.data.props);
|
|
// } else {
|
|
// // If it's not a redirect, reset the password field in the form
|
|
// form.reset('password');
|
|
// return resp.data;
|
|
// }
|
|
|
|
// } catch (error) {
|
|
// // Handle errors if any
|
|
// console.error('Error during login:', error);
|
|
// throw error;
|
|
// }
|
|
// };
|
|
|
|
// const submit = async () => {
|
|
// // Transform the formData object
|
|
// const formData = form.data();
|
|
// const transformedData = {
|
|
// ...formData,
|
|
// remember: formData.remember && formData.remember.length ? 'on' : '',
|
|
// };
|
|
// const resp = await login(transformedData);
|
|
// if (resp) {
|
|
// if (resp.state == LoginState.STATE_VALIDATED) {
|
|
// isTwoFactorAuthNeeded.value = true
|
|
// }
|
|
// fa2Form.login_id = resp.new_user_id;
|
|
// }
|
|
// };
|
|
|
|
const submit = async () => {
|
|
await form
|
|
.transform((data: InertiaForm) => ({
|
|
...data,
|
|
remember: form.remember && form.remember.length ? 'on' : '',
|
|
}))
|
|
.post('/app/login', {
|
|
// .post(stardust.route('login.store'), {
|
|
onFinish: () => {
|
|
form.reset('password');
|
|
},
|
|
});
|
|
};
|
|
|
|
|
|
const fa2Form: InertiaForm = useForm(() => ({
|
|
code: '',
|
|
backup_code: '',
|
|
// remember: [],
|
|
login_id: ''
|
|
}));
|
|
const submitFa2Form = async () => {
|
|
await fa2Form
|
|
.transform((data: InertiaForm) => ({
|
|
...data,
|
|
// remember: fa2Form.remember && fa2Form.remember.length ? 'on' : '',
|
|
login_id: user_id.value
|
|
}))
|
|
.post(stardust.route('login.twoFactorChallenge'), {
|
|
onFinish: () => {
|
|
fa2Form.reset('code');
|
|
fa2Form.reset('login_id');
|
|
// form.reset('password');
|
|
},
|
|
});
|
|
};
|
|
</script>
|