- 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

app/Controllers/Http/Admin/RoleController.ts

@@ -129,7 +129,7 @@ export default class RoleController {
         }
 
         session.flash('message', 'Role has been updated successfully');
-        return response.redirect().toRoute('role.index');
+        return response.redirect().toRoute('settings.role.index');
     }
 
     public async destroy({ request, response, session }: HttpContextContract) {

app/Controllers/Http/Admin/UsersController.ts

@@ -151,7 +151,7 @@ export default class UsersController {
         }
 
         session.flash('message', 'User has been updated successfully');
-        return response.redirect().toRoute('user.index');
+        return response.redirect().toRoute('settings.user.index');
     }
 
     public async destroy({ request, response, session }: HttpContextContract) {
@@ -222,13 +222,13 @@ export default class UsersController {
             const { old_password, new_password } = request.only(['old_password', 'new_password']);
 
             // if (!(old_password && new_password && confirm_password)) {
-            //     return response.status(400).send({ message: 'Old password and new password are required.' });
+            //     return response.status(400).send({ warning: 'Old password and new password are required.' });
             // }
 
             // Verify if the provided old password matches the user's current password
             const isSame = await Hash.verify(user.password, old_password);
             if (!isSame) {
-                return response.flash({ message: 'Old password is incorrect.' }).redirect().back();
+                return response.flash({ warning: 'Old password is incorrect.' }).redirect().back();
             }
 
             // Hash the new password before updating the user's password
@@ -237,7 +237,7 @@ export default class UsersController {
 
             // return response.status(200).send({ message: 'Password updated successfully.' });
             session.flash('Password updated successfully.');
-            return response.redirect().toRoute('settings.user');
+            return response.redirect().toRoute('settings.user.index');
         } catch (error) {
             // return response.status(500).send({ message: 'Internal server error.' });
             return response.flash('warning', `Invalid server state. Internal server error.`).redirect().back();

app/Controllers/Http/Auth/UserController.ts

@@ -0,0 +1,78 @@
+import type { HttpContextContract } from '@ioc:Adonis/Core/HttpContext';
+import User from 'App/Models/User';
+// import Hash from '@ioc:Adonis/Core/Hash';
+// import InvalidCredentialException from 'App/Exceptions/InvalidCredentialException';
+// import AuthValidator from 'App/Validators/AuthValidator';
+import { RenderResponse } from '@ioc:EidelLev/Inertia';
+import TwoFactorAuthProvider from 'App/Services/TwoFactorAuthProvider';
+
+// Here we are generating secret and recovery codes for the user that’s enabling 2FA and storing them to our database.
+export default class UserController {
+    /**
+     * Show the user a form to change their personal information & password.
+     *
+     * @return — \Inertia\Response
+     */
+    public async accountInfo({ inertia, auth }: HttpContextContract): RenderResponse {
+        // const user = auth.user;
+        const user = (await User.find(auth.user?.id)) as User;
+        // const id = request.param('id');
+        // const user = await User.query().where('id', id).firstOrFail();
+
+        return inertia.render('Auth/AccountInfo', {
+            user: user,
+            twoFactorEnabled: user.isTwoFactorEnabled,
+            code: await TwoFactorAuthProvider.generateQrCode(user),
+        });
+    }
+
+    public async enableTwoFactorAuthentication({ auth, response, session }: HttpContextContract): Promise<void> {
+        // const user: User | undefined = auth?.user;
+        const user = (await User.find(auth.user?.id)) as User;
+
+        user.twoFactorSecret = TwoFactorAuthProvider.generateSecret(user);
+        user.twoFactorRecoveryCodes = await TwoFactorAuthProvider.generateRecoveryCodes();
+        await user.save();
+
+        session.flash('message', 'Two factor authentication enabled.');
+        return response.redirect().back();
+        // return inertia.render('Auth/AccountInfo', {
+        //     // status: {
+        //     //     type: 'success',
+        //     //     message: 'Two factor authentication enabled.',
+        //     // },
+        //     user: user,
+        //     twoFactorEnabled: user.isTwoFactorEnabled,
+        //     code: await TwoFactorAuthProvider.generateQrCode(user),
+        //     recoveryCodes: user.twoFactorRecoveryCodes,
+        // });
+    }
+
+    public async disableTwoFactorAuthentication({ auth, response, session }): Promise<void> {
+        const user = auth?.user;
+
+        user.twoFactorSecret = null;
+        user.twoFactorRecoveryCodes = null;
+        await user.save();
+
+        session.flash('message', 'Two factor authentication disabled.');
+        return response.redirect().back();
+        // return inertia.render('Auth/AccountInfo', {
+        //     // status: {
+        //     //     type: 'success',
+        //     //     message: 'Two factor authentication disabled.',
+        //     // },
+        //     user: user,
+        //     twoFactorEnabled: user.isTwoFactorEnabled,
+        // });
+    }
+
+    // public async fetchRecoveryCodes({ auth, view }) {
+    //     const user = auth?.user;
+
+    //     return view.render('pages/settings', {
+    //         twoFactorEnabled: user.isTwoFactorEnabled,
+    //         recoveryCodes: user.twoFactorRecoveryCodes,
+    //     });
+    // }
+}

app/Models/User.ts

@@ -6,6 +6,7 @@ import Database from '@ioc:Adonis/Lucid/Database';
 import Config from '@ioc:Adonis/Core/Config';
 import Dataset from './Dataset';
 import BaseModel from './BaseModel';
+import Encryption from '@ioc:Adonis/Core/Encryption';
 
 // export default interface IUser {
 // 	id: number;
@@ -44,6 +45,22 @@ export default class User extends BaseModel {
     @column.dateTime({ autoCreate: true, autoUpdate: true })
     public updatedAt: DateTime;
 
+    // serializeAs: null removes the model properties from the serialized output.
+    @column({
+        serializeAs: null,
+        consume: (value: string) => (value ? JSON.parse(Encryption.decrypt(value) ?? '{}') : null),
+        prepare: (value: string) => Encryption.encrypt(JSON.stringify(value)),
+    })
+    public twoFactorSecret?: string;
+
+    // serializeAs: null removes the model properties from the serialized output.
+    @column({
+        serializeAs: null,
+        consume: (value: string) => (value ? JSON.parse(Encryption.decrypt(value) ?? '[]') : []),
+        prepare: (value: string[]) => Encryption.encrypt(JSON.stringify(value)),
+    })
+    public twoFactorRecoveryCodes?: string[];
+
     @beforeSave()
     public static async hashPassword(user) {
         if (user.$dirty.password) {
@@ -51,6 +68,10 @@ export default class User extends BaseModel {
         }
     }
 
+    public get isTwoFactorEnabled() {
+        return Boolean(this?.twoFactorSecret);
+    }
+
     @manyToMany(() => Role, {
         pivotForeignKey: 'account_id',
         pivotRelatedForeignKey: 'role_id',

app/Services/TwoFactorAuthProvider.ts

@@ -0,0 +1,89 @@
+import Config from '@ioc:Adonis/Core/Config';
+import User from 'App/Models/User';
+import { generateSecret  } from 'node-2fa/dist/index';
+// import cryptoRandomString from 'crypto-random-string';
+import QRCode from 'qrcode';
+import crypto from 'crypto';
+
+// npm install node-2fa --save
+// npm install crypto-random-string --save
+// import { cryptoRandomStringAsync } from 'crypto-random-string/index';
+// npm install qrcode --save
+// npm i --save-dev @types/qrcode
+
+class TwoFactorAuthProvider {
+    private issuer = Config.get('twoFactorAuthConfig.app.name') || 'TethysCloud';
+
+    /**
+     * generateSecret will generate a user-specific 32-character secret.
+     * We’re providing the name of the app and the user’s email as parameters for the function.
+     * This secret key will be used to verify whether the token provided by the user during authentication is valid or not.
+     *
+     * Return the default global focus trap stack     *
+     * @param {User} user user for the secrect
+     * @return {string}
+     */
+    public generateSecret(user: User) {
+        const secret = generateSecret({
+            name: this.issuer,
+            account: user.email,
+        });
+        return secret.secret;
+    }
+
+    /**
+     * We also generated recovery codes which can be used in case we’re unable to retrieve tokens from 2FA applications.
+     * We assign the user a list of recovery codes and each code can be used only once during the authentication process.
+     *   The recovery codes are random strings generated using the cryptoRandomString library.
+     *
+     * Return recovery codes
+     * @return {string[]}
+     */
+    public generateRecoveryCodes() {
+        const recoveryCodeLimit: number = 8;
+        const codes: string[] = [];
+        for (let i = 0; i < recoveryCodeLimit; i++) {
+            const recoveryCode: string = `${this.secureRandomString()}-${this.secureRandomString()}`;
+            codes.push(recoveryCode);
+        }
+        return codes;
+    }
+
+    private secureRandomString() {
+        // return await cryptoRandomString.async({ length: 10, type: 'hex' });
+        return this.generateRandomString(10, 'hex');
+    }
+
+    private generateRandomString(length: number, type: 'hex' | 'base64' | 'numeric' = 'hex'): string {
+        const byteLength = Math.ceil(length * 0.5); // For hex encoding, each byte generates 2 characters
+        const randomBytes = crypto.randomBytes(byteLength);
+    
+        switch (type) {
+            case 'hex':
+                return randomBytes.toString('hex').slice(0, length);
+            case 'base64':
+                return randomBytes.toString('base64').slice(0, length);
+            case 'numeric':
+                return randomBytes
+                    .toString('hex')
+                    .replace(/[a-fA-F]/g, '') // Remove non-numeric characters
+                    .slice(0, length);
+            default:
+                throw new Error('Invalid type specified');
+        }
+    }
+
+    public async generateQrCode(user: User) : Promise<{svg: string; url: string; }> {
+        const issuer = encodeURIComponent(this.issuer); // 'TethysCloud'
+        // const userName = encodeURIComponent(user.email); // 'rrqx9472%40tethys.at'
+        const label = `${this.issuer}:${user.email}`;
+        
+        const algorithm = encodeURIComponent("SHA256");
+        const query = `?secret=${user.twoFactorSecret}&issuer=${issuer}&algorithm=${algorithm}&digits=6`; // '?secret=FEYCLOSO627CB7SMLX6QQ7BP75L7SJ54&issuer=TethysCloud'
+        const url = `otpauth://totp/${label}${query}`; // 'otpauth://totp/rrqx9472%40tethys.at?secret=FEYCLOSO627CB7SMLX6QQ7BP75L7SJ54&issuer=TethysCloud'
+        const svg = await QRCode.toDataURL(url);
+        return { svg, url };
+    }
+}
+
+export default new TwoFactorAuthProvider();

database/migrations/acl_4_accounts.ts

@@ -14,6 +14,8 @@ export default class Accounts extends BaseSchema {
             table.string('remember_token');
             table.timestamp('created_at');
             table.timestamp('updated_at');
+            table.text("two_factor_secret").nullable();
+            table.text("two_factor_recovery_codes").nullable();
         });
     }
 
@@ -35,4 +37,10 @@ export default class Accounts extends BaseSchema {
 //     updated_at timestamp(0) without time zone,
 //     CONSTRAINT accounts_pkey PRIMARY KEY (id),
 //     CONSTRAINT accounts_email_unique UNIQUE (email)
+//     two_factor_secret text COLLATE pg_catalog."default",
+//     two_factor_recovery_codes text COLLATE pg_catalog."default",
 // )
+
+// ALTER TABLE gba.accounts
+// ADD COLUMN two_factor_secret text COLLATE pg_catalog."default",
+// ADD COLUMN two_factor_recovery_codes text COLLATE pg_catalog."default";

package.json

@@ -37,6 +37,7 @@
         "@types/leaflet": "^1.9.3",
         "@types/node": "^20.1.1",
         "@types/proxy-addr": "^2.0.0",
+        "@types/qrcode": "^1.5.5",
         "@types/source-map-support": "^0.5.6",
         "@vue/tsconfig": "^0.4.0",
         "adonis-preset-ts": "^2.1.0",
@@ -89,9 +90,11 @@
         "http-status-codes": "^2.2.0",
         "leaflet": "^1.9.3",
         "luxon": "^3.2.1",
+        "node-2fa": "^2.0.3",
         "notiwind": "^2.0.0",
         "pg": "^8.9.0",
         "proxy-addr": "^2.0.7",
+        "qrcode": "^1.5.3",
         "redis": "^4.6.10",
         "reflect-metadata": "^0.2.1",
         "saxon-js": "^2.5.0",

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>

resources/views/settings.edge

@@ -0,0 +1,98 @@
+@layout('layouts/app')
+@set('title', 'Settings')
+
+@section('body')
+<div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
+    <div class="space-y-4">
+        <div class="my-12 text-center text-3xl font-bold tracking-tight text-gray-900">
+            SETTINGS
+        </div>
+        @if(status)
+        @!component('components/alert', {
+        status
+        })
+        @endif
+
+        @if(twoFactorEnabled)
+        <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>
+            @if(code)
+            <div>
+                <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>
+            @endif
+            @if(recoveryCodes)
+            <div 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>
+
+            </div>
+        </div>
+        @elseif(!twoFactorEnabled)
+        <div class="w-1/2 space-y-4">
+            <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>
+            <div>
+                <form action="{{ route('UserController.enableTwoFactorAuthentication') }}" 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
+                ">
+                        Enable
+                    </button>
+                </form>
+            </div>
+        </div>
+        @endif
+    </div>
+</div>
+@endsection

start/routes.ts

@@ -144,17 +144,28 @@ Route.group(() => {
     // .middleware(['auth', 'can:dataset-list,dataset-publish']);
     .middleware(['auth', 'is:administrator,moderator']);
 
-Route.get('/settings/user/security', 'UsersController.accountInfo')
+
+Route.get('/settings/user/security', 'UserController.accountInfo')
     .as('settings.user')
-    .namespace('App/Controllers/Http/Admin')
+    .namespace('App/Controllers/Http/Auth')
     .middleware(['auth']);
 
 Route.post('/settings/user/store', 'UsersController.accountInfoStore')
-    .as('account.info.store')   
+    .as('account.password.store')   
     .namespace('App/Controllers/Http/Admin')
     .middleware(['auth']);
 // Route::post('change-password', 'UserController@changePasswordStore')->name('admin.account.password.store');
 
+Route.post('/settings/user/enable2fa', 'UserController.enableTwoFactorAuthentication')
+    .as('account.password.enable2fa')   
+    .namespace('App/Controllers/Http/Auth')
+    .middleware(['auth']);
+
+Route.post('/settings/user/disable2fa', 'UserController.disableTwoFactorAuthentication')
+    .as('account.password.disable2fa')   
+    .namespace('App/Controllers/Http/Auth')
+    .middleware(['auth']);
+
 // submitter:
 Route.group(() => {
     // Route.get('/user', 'UsersController.index').as('user.index');