- added api UserController.ts for 2FA
Some checks failed
CI Pipeline / japa-tests (push) Failing after 56s
Some checks failed
CI Pipeline / japa-tests (push) Failing after 56s
- added PersonalTotpSettings.vue vor enablin/disabling 2FA - changed User.ts: added attributes: state, twoFactorSecret and twoFactorRecoveryCodes - added resources/js/utils/toast.ts for notifications - modified start/routes/api.ts - npm updates
This commit is contained in:
parent
18635f77b3
commit
ebc62d9117
18 changed files with 1151 additions and 315 deletions
|
|
@ -1,6 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
// import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
|
||||
import { useForm, router } from '@inertiajs/vue3';
|
||||
import { useForm } from '@inertiajs/vue3';
|
||||
// import { ref } from 'vue';
|
||||
// import { reactive } from 'vue';
|
||||
import {
|
||||
mdiAccount,
|
||||
|
|
@ -10,8 +11,7 @@ import {
|
|||
mdiAsterisk,
|
||||
mdiFormTextboxPassword,
|
||||
mdiArrowLeftBoldOutline,
|
||||
mdiAlertBoxOutline,
|
||||
mdiInformation
|
||||
mdiAlertBoxOutline,
|
||||
} from '@mdi/js';
|
||||
import SectionMain from '@/Components/SectionMain.vue';
|
||||
import CardBox from '@/Components/CardBox.vue';
|
||||
|
|
@ -28,10 +28,13 @@ import { stardust } from '@eidellev/adonis-stardust/client';
|
|||
import { computed, Ref } from 'vue';
|
||||
import { usePage } from '@inertiajs/vue3';
|
||||
import FormValidationErrors from '@/Components/FormValidationErrors.vue';
|
||||
// import { Inertia } from '@inertiajs/inertia';
|
||||
import PersonalTotpSettings from '@/Components/PersonalTotpSettings.vue';
|
||||
// import { MainService } from '@/Stores/main';
|
||||
// const mainService = MainService();
|
||||
|
||||
const emit = defineEmits(['confirm', 'update:confirmation'])
|
||||
|
||||
const props = defineProps({
|
||||
defineProps({
|
||||
// user will be returned from controller action
|
||||
user: {
|
||||
type: Object,
|
||||
|
|
@ -58,12 +61,12 @@ const props = defineProps({
|
|||
// 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 enableTwoFactorAuthentication = async () => {
|
||||
// await router.post(stardust.route('account.password.enable2fa'));
|
||||
// };
|
||||
// const disableTwoFactorAuthentication = async () => {
|
||||
// await router.post(stardust.route('account.password.disable2fa'));
|
||||
// };
|
||||
|
||||
|
||||
const passwordForm = useForm({
|
||||
|
|
@ -84,6 +87,28 @@ const passwordSubmit = async () => {
|
|||
const flash: Ref<any> = computed(() => {
|
||||
return usePage().props.flash;
|
||||
});
|
||||
|
||||
// const confirmationCode = ref('');
|
||||
|
||||
// const confirm = () => {
|
||||
// emit('update:confirmation', confirmationCode);
|
||||
// emit('confirm');
|
||||
// };
|
||||
|
||||
// const onConfirmKeyDown = (e) => {
|
||||
// if (e.which === 13) {
|
||||
// confirm()
|
||||
// }
|
||||
// };
|
||||
|
||||
// const generateSecretCode = (user) => {
|
||||
// const secret = generateSecret({
|
||||
// name: 'TethysCloud',
|
||||
// account: user.email,
|
||||
// });
|
||||
// return secret.secret;
|
||||
// }
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -101,8 +126,8 @@ const flash: Ref<any> = computed(() => {
|
|||
{{ $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">
|
||||
<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'))"> -->
|
||||
|
|
@ -186,24 +211,9 @@ const flash: Ref<any> = computed(() => {
|
|||
|
||||
|
||||
|
||||
<!-- <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> -->
|
||||
|
||||
<PersonalTotpSettings :twoFactorEnabled="twoFactorEnabled"/>
|
||||
<!-- <CardBox v-if="!props.twoFactorEnabled" title="Two-Factor Authentication" :icon="mdiInformation" form
|
||||
@submit.prevent="enableTwoFactorAuthentication()">
|
||||
<div class="text-lg font-medium text-gray-900">
|
||||
You have not enabled two factor authentication.
|
||||
</div>
|
||||
|
|
@ -218,70 +228,9 @@ const flash: Ref<any> = computed(() => {
|
|||
<BaseButton color="info" type="submit" label="Enable" />
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue