- 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
246
resources/js/Components/PersonalTotpSettings.vue
Normal file
246
resources/js/Components/PersonalTotpSettings.vue
Normal file
|
|
@ -0,0 +1,246 @@
|
|||
<template>
|
||||
<!-- <div id="twofactor-totp-settings">
|
||||
<template v-if="loading">
|
||||
<span class="icon-loading-small totp-loading" />
|
||||
<span> {{ t('twofactor_totp', 'Enable TOTP') }} </span>
|
||||
</template>
|
||||
<div v-else>
|
||||
<input id="totp-enabled" v-model="enabled" type="checkbox" class="checkbox" :disabled="loading"
|
||||
@change="toggleEnabled">
|
||||
<label for="totp-enabled">{{
|
||||
t('twofactor_totp', 'Enable TOTP')
|
||||
}}</label>
|
||||
</div>
|
||||
|
||||
<SetupConfirmation v-if="secret" :secret="secret" :qr-url="qrUrl" :loading="loadingConfirmation"
|
||||
:confirmation.sync="confirmation" @confirm="enableTOTP" />
|
||||
</div> -->
|
||||
<CardBox :icon="mdiTwoFactorAuthentication" id="twofactor-totp-settings" title="Two-Factor Authentication" form>
|
||||
<template v-if="loading">
|
||||
<!-- <span class="icon-loading-small totp-loading" /> -->
|
||||
<div class="relative inline-flex">
|
||||
<div class="w-6 h-6 bg-blue-500 rounded-full"></div>
|
||||
<div class="w-6 h-6 bg-blue-500 rounded-full absolute top-0 left-0 animate-ping"></div>
|
||||
<div class="w-6 h-6 bg-blue-500 rounded-full absolute top-0 left-0 animate-pulse"></div>
|
||||
<span class="ml-4 max-w-xl text-sm text-gray-600">Enabling TOTP...</span>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else>
|
||||
<!-- <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> -->
|
||||
<input id="totp-enabled" v-model="enabled" type="checkbox" class="checkbox" :disabled="loading"
|
||||
@change="toggleEnabled" />
|
||||
<!-- <label for="totp-enabled"> Enable TOTP </label> -->
|
||||
<label for="totp-enabled">{{ checkboxLabel }}</label>
|
||||
</div>
|
||||
|
||||
<!-- <SetupConfirmation v-if="secret" :secret="secret" :qr-url="qrUrl" :loading="loadingConfirmation"
|
||||
:confirmation.sync="confirmation" @confirm="enableTOTP" /> -->
|
||||
<div v-if="qrSecret != ''">
|
||||
<div class="mt-4 max-w-xl text-sm text-gray-600">
|
||||
<!-- <p class="font-semibold">
|
||||
Two factor authentication is now enabled.
|
||||
</p> -->
|
||||
<p>Your new TOTP secret is: {{ qrSecret }}</p>
|
||||
<p>For quick setup, scan this QR code with your phone's authenticator application (TOTP):</p>
|
||||
<div class="mt-4">
|
||||
<img :src="qrSvg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="mt-4 max-w-xl text-sm text-gray-600">
|
||||
<p>
|
||||
After you configured your app, enter a test code below to ensure everything works correctly:
|
||||
</p>
|
||||
|
||||
</div> -->
|
||||
|
||||
<div class="mt-4 max-w-xl text-sm text-gray-600">
|
||||
<p>After you configured your app, enter a test code below to ensure everything works correctly:</p>
|
||||
<!-- :disabled="loading" -->
|
||||
<input id="totp-confirmation" :disabled="loadingConfirmation" v-model="confirmationCode" type="tel"
|
||||
minlength="6" maxlength="10" autocomplete="off" autocapitalize="off"
|
||||
:placeholder="'Authentication code'" @keydown="onConfirmKeyDown" />
|
||||
|
||||
<!-- <input id="totp-confirmation-submit" type="button" :disabled="loading" :value="'Verify'"
|
||||
@click="enableTOTP"> -->
|
||||
|
||||
<!-- <BaseButtons>
|
||||
<BaseButton :icon="mdiContentSaveCheck" type="button" :disabled="loadingConfirmation" color="info"
|
||||
label="Verify" @click="enableTOTP" />
|
||||
</BaseButtons> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<BaseButtons v-if="qrSecret != ''">
|
||||
<BaseButton :icon="mdiContentSaveCheck" type="button" :disabled="loadingConfirmation" color="info"
|
||||
label="Verify" @click="enableTOTP" />
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import CardBox from '@/Components/CardBox.vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { MainService, State } from '@/Stores/main';
|
||||
import BaseButton from '@/Components/BaseButton.vue';
|
||||
import BaseButtons from '@/Components/BaseButtons.vue';
|
||||
import Notification from '@/utils/toast';
|
||||
import { mdiContentSaveCheck, mdiTwoFactorAuthentication } from '@mdi/js';
|
||||
|
||||
const mainService = MainService();
|
||||
const emit = defineEmits(['confirm', 'update:confirmation']);
|
||||
|
||||
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: () => ({}),
|
||||
// // },
|
||||
});
|
||||
let loading = ref(false);
|
||||
let loadingConfirmation = ref(false);
|
||||
let test;
|
||||
if (props.twoFactorEnabled) {
|
||||
test = State.STATE_ENABLED;
|
||||
} else {
|
||||
test = State.STATE_DISABLED;
|
||||
}
|
||||
mainService.setState(test);
|
||||
|
||||
const enabled = ref(mainService.totpState == State.STATE_ENABLED);
|
||||
|
||||
let qrSecret = ref('');
|
||||
let qrUrl = ref('');
|
||||
let qrSvg = ref('');
|
||||
|
||||
const confirmationCode = ref('');
|
||||
|
||||
const confirm = () => {
|
||||
emit('update:confirmation', confirmationCode.value);
|
||||
emit('confirm');
|
||||
};
|
||||
|
||||
const onConfirmKeyDown = (e) => {
|
||||
if (e.which === 13) {
|
||||
confirm();
|
||||
}
|
||||
};
|
||||
|
||||
const state = computed(() => mainService.totpState);
|
||||
const checkboxLabel = computed(() => {
|
||||
if (enabled.value == true) {
|
||||
return ' Disable TOTP';
|
||||
} else {
|
||||
return ' Enable TOTP';
|
||||
}
|
||||
});
|
||||
|
||||
const toggleEnabled = async () => {
|
||||
if (loading.value == true) {
|
||||
// Ignore event
|
||||
// Logger.debug('still loading -> ignoring event')
|
||||
return;
|
||||
}
|
||||
|
||||
if (enabled.value) {
|
||||
return await createTOTP();
|
||||
} else {
|
||||
return await disableTOTP();
|
||||
}
|
||||
};
|
||||
|
||||
const createTOTP = async () => {
|
||||
// Show loading spinner
|
||||
loading.value = true;
|
||||
// Logger.debug('starting setup')
|
||||
|
||||
try {
|
||||
const { url, secret, svg } = await mainService.create();
|
||||
qrSecret.value = secret;
|
||||
qrUrl.value = url;
|
||||
qrSvg.value = svg;
|
||||
// If the stat could be changed, keep showing the loading
|
||||
// spinner until the user has finished the registration
|
||||
// if state isCretaed, show loading:
|
||||
loading.value = state.value === State.STATE_CREATED;
|
||||
} catch (e) {
|
||||
Notification.showWarning('Could not enable TOTP');
|
||||
// Logger.error('Could not enable TOTP', e)
|
||||
console.log('Could not create TOTP', e.message);
|
||||
|
||||
// Restore on error
|
||||
loading.value = false;
|
||||
enabled.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const disableTOTP = async () => {
|
||||
loading.value = false;
|
||||
// Logger.debug('starting disable');
|
||||
|
||||
await mainService.disable();
|
||||
enabled.value = false;
|
||||
loading.value = false;
|
||||
Notification.showSuccess('TOTP disabled!');
|
||||
};
|
||||
|
||||
const enableTOTP = async () => {
|
||||
loading.value = true;
|
||||
loadingConfirmation.value = true;
|
||||
|
||||
try {
|
||||
await mainService.confirm(confirmationCode.value);
|
||||
if (mainService.totpState === State.STATE_ENABLED) {
|
||||
// Success
|
||||
loading.value = false;
|
||||
enabled.value = true;
|
||||
qrUrl.value = '';
|
||||
qrSecret.value = '';
|
||||
Notification.showSuccess('two factor authentication enabled');
|
||||
} else {
|
||||
Notification.showWarning('Could not verify your key. Please try again');
|
||||
console.log('Could not verify your key. Please try again');
|
||||
}
|
||||
confirmationCode.value = '';
|
||||
loadingConfirmation.value = false;
|
||||
} catch (e) {
|
||||
console.log('Could not enable TOTP', e.message);
|
||||
Notification.showWarning('Could not enable TOTP ' + e.message);
|
||||
confirmationCode.value = '';
|
||||
loadingConfirmation.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.totp-loading {
|
||||
display: inline-block;
|
||||
vertical-align: sub;
|
||||
margin-left: -2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
editor.link_modal.header
Reference in a new issue