- aded npm packages @types/qrcode, qrcode and node-f2a
Some checks failed
CI Pipeline / japa-tests (push) Failing after 53s
Some checks failed
CI Pipeline / japa-tests (push) Failing after 53s
- corrected UsersController.ts and RoleController.ts with correct routes for settings - added migration script and ui and Controller for 2 Factor Authentication - npm updates
This commit is contained in:
parent
87e9314b00
commit
c70fa4a0d8
16 changed files with 1098 additions and 417 deletions
289
resources/js/Pages/Auth/AccountInfo.vue
Normal file
289
resources/js/Pages/Auth/AccountInfo.vue
Normal file
|
|
@ -0,0 +1,289 @@
|
|||
<script setup lang="ts">
|
||||
// import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
|
||||
import { useForm, router } from '@inertiajs/vue3';
|
||||
// import { reactive } from 'vue';
|
||||
import {
|
||||
mdiAccount,
|
||||
// mdiAccountCircle,
|
||||
mdiLock,
|
||||
// mdiMail,
|
||||
mdiAsterisk,
|
||||
mdiFormTextboxPassword,
|
||||
mdiArrowLeftBoldOutline,
|
||||
mdiAlertBoxOutline,
|
||||
mdiInformation
|
||||
} from '@mdi/js';
|
||||
import SectionMain from '@/Components/SectionMain.vue';
|
||||
import CardBox from '@/Components/CardBox.vue';
|
||||
import BaseDivider from '@/Components/BaseDivider.vue';
|
||||
import FormField from '@/Components/FormField.vue';
|
||||
import FormControl from '@/Components/FormControl.vue';
|
||||
import BaseButton from '@/Components/BaseButton.vue';
|
||||
import BaseButtons from '@/Components/BaseButtons.vue';
|
||||
import NotificationBar from '@/Components/NotificationBar.vue';
|
||||
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
||||
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
// import { Inertia } from '@inertiajs/inertia';
|
||||
import { computed, Ref } from 'vue';
|
||||
import { usePage } from '@inertiajs/vue3';
|
||||
import FormValidationErrors from '@/Components/FormValidationErrors.vue';
|
||||
// import { Inertia } from '@inertiajs/inertia';
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
// user will be returned from controller action
|
||||
user: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
twoFactorEnabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
code: {
|
||||
type: Object,
|
||||
},
|
||||
recoveryCodes: {
|
||||
type: Array<string>,
|
||||
default: () => [],
|
||||
},
|
||||
errors: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
// const factorForm = useForm({
|
||||
// login: props.user.login,
|
||||
// email: props.user.email,
|
||||
// });
|
||||
const enableTwoFactorAuthentication = async () => {
|
||||
await router.post(stardust.route('account.password.enable2fa'));
|
||||
};
|
||||
const disableTwoFactorAuthentication = async () => {
|
||||
await router.post(stardust.route('account.password.disable2fa'));
|
||||
};
|
||||
|
||||
|
||||
const passwordForm = useForm({
|
||||
old_password: '',
|
||||
new_password: '',
|
||||
confirm_password: '',
|
||||
});
|
||||
const passwordSubmit = async () => {
|
||||
await passwordForm.post(stardust.route('account.password.store'), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
// console.log(resp);
|
||||
passwordForm.reset();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const flash: Ref<any> = computed(() => {
|
||||
return usePage().props.flash;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccount" title="Profile" main>
|
||||
<BaseButton :route-name="stardust.route('dashboard')" :icon="mdiArrowLeftBoldOutline" label="Back"
|
||||
color="white" rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
|
||||
<NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
|
||||
{{ flash.message }}
|
||||
</NotificationBar>
|
||||
<!-- <NotificationBar v-if="$page.props.flash.message" color="success" :icon="mdiAlertBoxOutline">
|
||||
{{ $page.props.flash.message }}
|
||||
</NotificationBar> -->
|
||||
|
||||
<!-- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-1 gap-6">
|
||||
|
||||
<!-- password form -->
|
||||
<!-- <CardBox title="Edit Profile" :icon="mdiAccountCircle" form @submit.prevent="profileForm.post(route('admin.account.info.store'))"> -->
|
||||
<!-- <CardBox title="Edit Profile" :icon="mdiAccountCircle" form @submit.prevent="profileSubmit()">
|
||||
<FormField label="Login" help="Required. Your login name" :class="{ 'text-red-400': errors.login }">
|
||||
<FormControl v-model="profileForm.login" v-bind:icon="mdiAccount" name="login" required :error="errors.login">
|
||||
<div class="text-red-400 text-sm" v-if="errors.login">
|
||||
{{ errors.login }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<FormField label="Email" help="Required. Your e-mail" :class="{ 'text-red-400': errors.email }">
|
||||
<FormControl v-model="profileForm.email" :icon="mdiMail" type="email" name="email" required :error="errors.email">
|
||||
<div class="text-red-400 text-sm" v-if="errors.email">
|
||||
{{ errors.email }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton color="info" type="submit" label="Submit" />
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox> -->
|
||||
|
||||
<!-- password form -->
|
||||
<!-- <CardBox title="Change Password" :icon="mdiLock" form @submit.prevent="passwordForm.post(route('admin.account.password.store'), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => passwordForm.reset(),
|
||||
}) "> -->
|
||||
<CardBox id="passwordForm" title="Change Password" :icon="mdiLock" form @submit.prevent="passwordSubmit()">
|
||||
<FormValidationErrors v-bind:errors="errors" />
|
||||
|
||||
<FormField label="Current password" help="Required. Your current password"
|
||||
:class="{ 'text-red-400': passwordForm.errors.old_password }">
|
||||
<FormControl v-model="passwordForm.old_password" :icon="mdiAsterisk" name="old_password"
|
||||
type="password" required :error="passwordForm.errors.old_password">
|
||||
<div class="text-red-400 text-sm" v-if="passwordForm.errors.old_password">
|
||||
{{ passwordForm.errors.old_password }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<BaseDivider />
|
||||
|
||||
<FormField label="New password" help="Required. New password"
|
||||
:class="{ 'text-red-400': passwordForm.errors.new_password }">
|
||||
<FormControl v-model="passwordForm.new_password" :icon="mdiFormTextboxPassword" name="new_password"
|
||||
type="password" required :error="passwordForm.errors.new_password">
|
||||
<div class="text-red-400 text-sm" v-if="passwordForm.errors.new_password">
|
||||
{{ passwordForm.errors.new_password }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Confirm password" help="Required. New password one more time"
|
||||
:class="{ 'text-red-400': passwordForm.errors.confirm_password }">
|
||||
<FormControl v-model="passwordForm.confirm_password" :icon="mdiFormTextboxPassword"
|
||||
name="confirm_password" type="password" required :error="passwordForm.errors.confirm_password">
|
||||
<div class="text-red-400 text-sm" v-if="passwordForm.errors.confirm_password">
|
||||
{{ passwordForm.errors.confirm_password }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
|
||||
<div v-if="flash && flash.warning" 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.warning }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<BaseDivider />
|
||||
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton type="submit" color="info" label="Change password" />
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
|
||||
|
||||
|
||||
<!-- <CardBox title="Edit Profile" :icon="mdiAccountCircle" form @submit.prevent="profileForm.post(route('admin.account.info.store'))"> -->
|
||||
<CardBox v-if="!props.twoFactorEnabled" title="Two-Factor Authentication" :icon="mdiInformation" form
|
||||
@submit.prevent="enableTwoFactorAuthentication()">
|
||||
<!-- <FormField label="Login" help="Required. Your login name" :class="{ 'text-red-400': errors.login }">
|
||||
<FormControl v-model="factorForm.login" v-bind:icon="mdiAccount" name="login" required :error="errors.login">
|
||||
<div class="text-red-400 text-sm" v-if="errors.login">
|
||||
{{ errors.login }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<FormField label="Email" help="Required. Your e-mail" :class="{ 'text-red-400': errors.email }">
|
||||
<FormControl v-model="factorForm.email" :icon="mdiMail" type="email" name="email" required :error="errors.email">
|
||||
<div class="text-red-400 text-sm" v-if="errors.email">
|
||||
{{ errors.email }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField> -->
|
||||
|
||||
<div class="text-lg font-medium text-gray-900">
|
||||
You have not enabled two factor authentication.
|
||||
</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
When two factor authentication is enabled, you will be prompted for a secure,
|
||||
random token during authentication. You may retrieve this token from your phone's
|
||||
Google Authenticator application.
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton color="info" type="submit" label="Enable" />
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
|
||||
<CardBox v-else-if="props.twoFactorEnabled" title="Two-Factor Authentication" :icon="mdiInformation" form @submit.prevent="disableTwoFactorAuthentication()">
|
||||
<!-- <div class="w-1/2 space-y-4 bg-gray-100 p-8"> -->
|
||||
<h3 class="text-lg font-medium text-gray-900">
|
||||
You have enabled two factor authentication.
|
||||
</h3>
|
||||
<div class="mt-3 max-w-xl text-sm text-gray-600">
|
||||
<p>
|
||||
When two factor authentication is enabled, you will be prompted for a secure, random
|
||||
token during authentication. You may retrieve this token from your phone's Google
|
||||
Authenticator application.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="code">
|
||||
<div class="mt-4 max-w-xl text-sm text-gray-600">
|
||||
<p class="font-semibold">
|
||||
Two factor authentication is now enabled. Scan the following QR code using your
|
||||
phone's authenticator application.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<img :src="code?.svg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- @if(recoveryCodes) -->
|
||||
<div v-if="recoveryCodes" class="mt-4 max-w-xl text-sm text-gray-600">
|
||||
<p class="font-semibold">
|
||||
Store these recovery codes in a secure password manager. They can be used to recover
|
||||
access to your account if your two factor authentication device is lost.
|
||||
</p>
|
||||
</div>
|
||||
<!-- <div class="mt-4 grid max-w-xl gap-1 rounded-lg bg-gray-100 px-4 py-4 font-mono text-sm">
|
||||
@each(code in recoveryCodes)
|
||||
<div>
|
||||
{{ code }}
|
||||
</div>
|
||||
@endeach
|
||||
</div> -->
|
||||
<!-- @endif -->
|
||||
|
||||
<div class="flex justify-between">
|
||||
<!-- <form action="{{ route('UserController.fetchRecoveryCodes') }}" method="GET">
|
||||
<button type="submit" class="px-auto items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs
|
||||
font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none
|
||||
">
|
||||
Show Recovery Codes
|
||||
</button>
|
||||
</form>
|
||||
<form action="{{ route('UserController.disableTwoFactorAuthentication') }}" method="POST">
|
||||
<button type="submit" class="px-auto items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs
|
||||
font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none
|
||||
">
|
||||
Disable
|
||||
</button>
|
||||
</form> -->
|
||||
<BaseButton color="info" type="submit" label="Disable" />
|
||||
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</CardBox>
|
||||
|
||||
</div>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
Loading…
Add table
editor.link_modal.header
Reference in a new issue