- aded npm packages @types/qrcode, qrcode and node-f2a

- corrected UsersController.ts and RoleController.ts with correct routes for settings
- added migration script and ui and Controller for 2 Factor Authentication
- npm updates

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

@@ -40,7 +40,7 @@ const formDelete = useForm({})
 
 function destroy(id) {
   if (confirm("Are you sure you want to delete?")) {
-    formDelete.delete(route("permission.destroy", id))
+    formDelete.delete(route("settings.permission.destroy", id))
   }
 }
 </script>

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

@@ -54,7 +54,7 @@ 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('user.destroy', [id]));
+        await formDelete.delete(stardust.route('settings.user.destroy', [id]));
     }
 };
 </script>

resources/js/Pages/Auth/AccountInfo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
-import { useForm } from '@inertiajs/vue3';
+import { useForm, router } from '@inertiajs/vue3';
 // import { reactive } from 'vue';
 import {
     mdiAccount,
@@ -10,7 +10,8 @@ import {
     mdiAsterisk,
     mdiFormTextboxPassword,
     mdiArrowLeftBoldOutline,
-    // mdiAlertBoxOutline,
+    mdiAlertBoxOutline,
+    mdiInformation
 } from '@mdi/js';
 import SectionMain from '@/Components/SectionMain.vue';
 import CardBox from '@/Components/CardBox.vue';
@@ -19,7 +20,7 @@ import FormField from '@/Components/FormField.vue';
 import FormControl from '@/Components/FormControl.vue';
 import BaseButton from '@/Components/BaseButton.vue';
 import BaseButtons from '@/Components/BaseButtons.vue';
-// import NotificationBar from '@/Components/NotificationBar.vue';
+import NotificationBar from '@/Components/NotificationBar.vue';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
 import { stardust } from '@eidellev/adonis-stardust/client';
@@ -27,27 +28,43 @@ 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';
 
 
-defineProps({
+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: () => ({}),
     },
 });
 
-// const profileForm = useForm({
+// const factorForm = useForm({
 //     login: props.user.login,
 //     email: props.user.email,
 // });
-// const profileSubmit = async () => {
-//     await profileForm.post(stardust.route('admin.account.info.store', [props.user.id]));
-// };
+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({
     old_password: '',
@@ -55,7 +72,7 @@ const passwordForm = useForm({
     confirm_password: '',
 });
 const passwordSubmit = async () => {
-    await passwordForm.post(stardust.route('account.info.store'), {
+    await passwordForm.post(stardust.route('account.password.store'), {
         preserveScroll: true,
         onSuccess: () => {
             // console.log(resp);
@@ -77,6 +94,9 @@ const flash: Ref<any> = computed(() => {
                     color="white" rounded-full small />
             </SectionTitleLineWithButton>
 
+            <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
+                {{ flash.message }}
+            </NotificationBar>
             <!-- <NotificationBar v-if="$page.props.flash.message" color="success" :icon="mdiAlertBoxOutline">
         {{ $page.props.flash.message }}
       </NotificationBar> -->
@@ -148,11 +168,11 @@ const flash: Ref<any> = computed(() => {
                         </FormControl>
                     </FormField>
 
-                    
-                    <div v-if="flash && flash.message" class="flex flex-col mt-6 animate-fade-in">
+
+                    <div v-if="flash && flash.warning" class="flex flex-col mt-6 animate-fade-in">
                         <div class="bg-yellow-500 border-l-4 border-orange-400 text-white p-4" role="alert">
                             <p class="font-bold">Be Warned</p>
-                            <p>{{ flash.message }}</p>
+                            <p>{{ flash.warning }}</p>
                         </div>
                     </div>
                     <BaseDivider />
@@ -163,6 +183,106 @@ const flash: Ref<any> = computed(() => {
                         </BaseButtons>
                     </template>
                 </CardBox>
+
+
+
+                <!-- <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> -->
+
+                    <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>
+
+                    <template #footer>
+                        <BaseButtons>
+                            <BaseButton color="info" type="submit" label="Enable" />
+                        </BaseButtons>
+                    </template>
+                </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>
     </LayoutAuthenticated>