- 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/Components/FirstrunWizard/components/Page1.vue

@@ -13,11 +13,11 @@
                     :subtitle="'Collaborate and communicate across any platform.'">
                     <BriefcaseCheck :size="20" />
                 </Card> -->
-                <div class="max-w-60 h-fit box-border flex">
+                <div class="h-fit box-border flex">
 
-                    <!-- <div class="card__icon">
+                    <div class="card__icon">
                         <BriefcaseCheck :size="20" />
-                    </div> -->
+                    </div>
 
                     <div>
                         Discover the power of TethysCloud, the cutting-edge web backend solution that revolutionizes the way you
@@ -44,7 +44,8 @@
 import Card from './Card.vue'
 
 import SwapHorizontal from '@/Components/Icons/SwapHorizontal.vue';
-import AccountGroup from '@/Components/Icons/AccountGroup.vue'
+import AccountGroup from '@/Components/Icons/AccountGroup.vue';
+import BriefcaseCheck from '@/Components/Icons/BriefcaseCheck.vue'
 
 
 export default {
@@ -54,6 +55,7 @@ export default {
         Card,       
         SwapHorizontal,
         AccountGroup,
+        BriefcaseCheck
     },
 }
 </script>

resources/js/Components/Map/SearchMap.vue

@@ -108,21 +108,7 @@ const drawControl: Ref<DrawControlComponent | null> = ref(null);
 const southWest = ref(null);
 const northEast = ref(null);
 const mapService = MapService();
-// const coverage = {
-// 	x_min: undefined,
-// 	y_min: undefined,
-// 	x_max: undefined,
-// 	y_max: undefined,
-// 	elevation_min: undefined,
-// 	elevation_max: undefined,
-// 	elevation_absolut: undefined,
-// 	depth_min: undefined,
-// 	depth_max: undefined,
-// 	depth_absolut: undefined,
-// 	time_min: undefined,
-// 	time_max: undefined,
-// 	time_absolut: undefined,
-// };
+
 const filterLayerGroup = new LayerGroup();
 // Replace with your actual data
 // const datasets: Ref<OpensearchDocument[]> = ref([]);
@@ -286,11 +272,33 @@ const handleDrawEventCreated = async (event) => {
 
 <template>
     <SectionMain>
-        <div id="map" class="map-container mapDesktop mt-6 mb-6 rounded-2xl py-12 px-6 text-center">
-            <ZoomControlComponent ref="zoomControl" :mapId="mapId"></ZoomControlComponent>
-            <DrawControlComponent ref="drawControl" :preserve="false" :mapId="mapId" :southWest="southWest" :northEast="northEast">
-            </DrawControlComponent>
-        </div>
+        <!-- <div class="dark:bg-slate-900 bg-white"> -->
+
+            <div id="map" class="map-container mt-6 mb-6 rounded-2xl py-12 px-6 text-center dark:bg-slate-900 bg-white">
+                <ZoomControlComponent ref="zoomControl" :mapId="mapId"></ZoomControlComponent>
+                <DrawControlComponent ref="drawControl" :preserve="false" :mapId="mapId" :southWest="southWest"
+                    :northEast="northEast">
+                </DrawControlComponent>
+            </div>
+        <!-- </div> -->
     </SectionMain>
     <!-- </section> -->
 </template>
+
+
+<style lang="css">
+/* .leaflet-container {
+    height: 600px;
+    width: 100%;
+    background-color: transparent;
+    outline-offset: 1px;
+} */
+.leaflet-container {
+    height: 600px;
+    width: 100%;
+}
+
+.leaflet-container .leaflet-pane {
+    z-index: 30!important;
+}
+</style>

resources/js/Components/Map/map.component.vue

@@ -1,9 +1,11 @@
 <template>
     <div style="position: relative">
         <!-- <Map className="h-36" :center="state.center" :zoom="state.zoom"> // map component content </Map> -->
-        <div :id="mapId" class="map-container mapDesktop rounded">
-            <ZoomControlComponent ref="zoom" :mapId="mapId"></ZoomControlComponent>
-            <DrawControlComponent ref="draw" :mapId="mapId" :southWest="southWest" :northEast="northEast"></DrawControlComponent>
+        <div :id="mapId" class="rounded">
+            <div class="dark:bg-slate-900 bg-slate flex flex-col">
+                <ZoomControlComponent ref="zoom" :mapId="mapId" />
+                <DrawControlComponent ref="draw" :mapId="mapId" :southWest="southWest" :northEast="northEast" />
+            </div>
         </div>
     </div>
 </template>
@@ -242,11 +244,19 @@ export default class MapComponent extends Vue {
 }
 </script>
 
-<style lang="css">
-.leaflet-container {
-    height: 600px; /* <-- map height */
+<style scoped lang="css">
+/* .leaflet-container {
+    height: 600px;
     width: 100%;
+    background-color: transparent;
+    outline-offset: 1px;
+} */
+.leaflet-container {
+    height: 600px;
+    width: 100%;
+    background: none;
 }
+
 .leaflet-pane {
     z-index: 30;
 }

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>