- 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/PersonalTotpSettings.vue

@@ -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(() => {

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>

resources/js/Pages/Admin/Role/Edit.vue

@@ -58,7 +58,7 @@ const submit = async () => {
             <!-- <CardBox form @submit.prevent="form.put(stardust.route('role.update', [props.role.id]))"> -->
             <CardBox form @submit.prevent="submit()">
                 <FormField label="Name" :class="{ 'text-red-400': form.errors.name }">
-                    <FormControl v-model="form.name" type="text" placeholder="Enter Name" required :error="form.errors.name">
+                    <FormControl v-model="form.name" type="text" placeholder="Enter Name" required :error="form.errors.name" is-read-only="true">
                         <div class="text-red-400 text-sm" v-if="form.errors.name">
                             {{ form.errors.name }}
                         </div>

resources/js/Pages/Admin/Role/Index.vue

@@ -43,14 +43,6 @@ const form = useForm({
 });
 
 const formDelete = useForm({});
-
-// function destroy(id) {
-// const destroy = async (id) => {
-// 	if (confirm('Are you sure you want to delete?')) {
-// 		await formDelete.delete(stardust.route('settings.role.destroy', [id]));
-// 	}
-// };
-
 const destroy = (id, e) => {
     // console.log(id);
     deleteId.value = id;
@@ -157,14 +149,13 @@ const onCancel = (id) => {
                                         :icon="mdiSquareEditOutline"
                                         small
                                     />
-                                    <BaseButton
+                                    <!-- <BaseButton
                                         v-if="can.delete"
                                         color="danger"
                                         :icon="mdiTrashCan"
                                         small
                                         @click="($event) => destroy(role.id, $event)"
-                                    />
-                                    <!-- <BaseButton v-if="can.delete" color="danger" :icon="mdiTrashCan" small @click="isModalDangerActive = true" /> -->
+                                    /> -->                                   
                                 </BaseButtons>
                             </td>
                         </tr>

resources/js/Pages/Admin/User/Index.vue

@@ -49,14 +49,13 @@ const form = useForm({
     search: props.filters.search,
 });
 
-const formDelete = useForm({});
-
+// const formDelete = useForm({});
 // async function destroy(id) {
-const destroy = async (id) => {
-    if (confirm('Are you sure you want to delete?')) {
-        await formDelete.delete(stardust.route('settings.user.destroy', [id]));
-    }
-};
+// const destroy = async (id) => {
+//     if (confirm('Are you sure you want to delete?')) {
+//         await formDelete.delete(stardust.route('settings.user.destroy', [id]));
+//     }
+// };
 </script>
 
 <template>
@@ -132,7 +131,7 @@ const destroy = async (id) => {
                                         :icon="mdiSquareEditOutline"
                                         small
                                     />
-                                    <BaseButton v-if="can.delete" color="danger" :icon="mdiTrashCan" small @click="destroy(user.id)" />
+                                    <!-- <BaseButton v-if="can.delete" color="danger" :icon="mdiTrashCan" small @click="destroy(user.id)" /> -->
                                 </BaseButtons>
                             </td>
                         </tr>