geolba/tethys.backend
geolba/tethys.backend
2
0
Fork 2
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

- npm updates
All checks were successful
CI Pipeline / japa-tests (push) Successful in 1m29s
Details

Browse source 
- Admins can no longer delete any users or roles
- Additionally, the name of a role in edit mode is now read-only
- extra new SetupConfirmation.vue compoenent for verifying qrcode 2FA
- adapted ci.yaml
This commit is contained in:
Kaimbacher 2024-02-14 13:47:10 +01:00
parent 4efa53673f
commit b2dce0259a
9 changed files with 262 additions and 206 deletions
Download patch file Download diff file Expand all files Collapse all files

75
resources/js/Components/PersonalTotpSettings.vue
View file

@ -39,51 +39,12 @@
<!-- <label for="totp-enabled"> Enable TOTP </label> -->
<label for="totp-enabled">{{ checkboxLabel }}</label>
</div>
<SetupConfirmation v-if="qrSecret" :qr-secret="qrSecret" :qr-url="qrUrl" :qr-svg="qrSvg"
:loading="loadingConfirmation" v-model:confirmation="confirmationCode" @confirm="enableTOTP" />
<!-- <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>
@ -91,13 +52,13 @@
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 SetupConfirmation from '@/Components/SetupConfirmation.vue';
import Notification from '@/utils/toast';
import { mdiContentSaveCheck, mdiTwoFactorAuthentication } from '@mdi/js';
import { mdiTwoFactorAuthentication } from '@mdi/js';
const mainService = MainService();
const emit = defineEmits(['confirm', 'update:confirmation']);
// const emit = defineEmits(['confirm', 'update:confirmation']);
const props = defineProps({
// user will be returned from controller action
@ -116,10 +77,6 @@ const props = defineProps({
// // type: Array<string>,
// // default: () => [],
// // },
// // errors: {
// // type: Object,
// // default: () => ({}),
// // },
});
let loading = ref(false);
let loadingConfirmation = ref(false);
@ -139,16 +96,16 @@ let qrSvg = ref('');
const confirmationCode = ref('');
const confirm = () => {
emit('update:confirmation', confirmationCode.value);
emit('confirm');
};
// const confirm = () => {
// emit('update:confirmation', confirmationCode.value);
// emit('confirm');
// };
const onConfirmKeyDown = (e) => {
if (e.which === 13) {
confirm();
}
};
// const onConfirmKeyDown = (e) => {
// if (e.which === 13) {
// confirm();
// }
// };
const state = computed(() => mainService.totpState);
const checkboxLabel = computed(() => {