- npm updates

- 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

resources/js/Components/SetupConfirmation.vue

@@ -0,0 +1,81 @@
+<template>
+    <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>
+            <input id="totp-confirmation" :disabled="loadingConfirmation" v-model="confirmationCode" type="tel"
+                minlength="6" maxlength="10" autocomplete="off" autocapitalize="off" :placeholder="'Authentication code'"
+                @keydown="onConfirmKeyDown" />
+            <BaseButton class="mx-2" :icon="mdiContentSaveCheck" type="button" :disabled="loadingConfirmation" color="info"
+                label="Verify" @click="confirm" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { mdiContentSaveCheck } from '@mdi/js';
+import BaseButton from '@/Components/BaseButton.vue';
+import { computed } from 'vue';
+
+const emit = defineEmits(['confirm', 'update:confirmation']);
+
+const props = defineProps({
+    loadingConfirmation: {
+        type: Boolean,
+        default: false,
+    },
+    qrSecret: {
+        type: String,
+        required: true,
+    },
+    qrUrl: {
+        type: String,
+        required: true,
+    },
+    qrSvg: {
+        type: String,
+        required: true,
+    },
+    confirmation: {
+        type: String,
+        default: '',
+    },
+});
+
+// https://vanoneang.github.io/article/v-model-in-vue3.html#the-challenge-reduce-boilerplate
+const confirmationCode = computed({
+    get() {
+        return props.confirmation;
+    },
+    set(value) {
+        // props.persons.length = 0;
+        // props.persons.push(...value);
+        emit('update:confirmation', value)
+    },
+});
+
+const onConfirmKeyDown = (e) => {
+    if (e.which === 13) {
+        confirm();
+    }
+};
+
+const confirm = () => {
+    // emit('update:confirmation', confirmationCode.value);
+    emit('confirm');
+};
+
+</script>