Move TOTP modal trigger logic to FormCard component (#1040)

intuitem · Nov 13, 2024 · 9d3c9c2 · 9d3c9c2
2 parents 4ac512b + 31b8c8d
commit 9d3c9c2
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 35 deletions.
diff --git a/enterprise/frontend/src/routes/(authentication)/login/+page.svelte b/enterprise/frontend/src/routes/(authentication)/login/+page.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-	import type { PageData } from './$types';
+	import type { PageData, ActionData } from './$types';
 	import Logo from '$lib/components/Logo/Logo.svelte';
 	import Greetings from './Greetings.svelte';
 	import FormCard from './FormCard.svelte';
 
 	export let data: PageData;
+	export let form: ActionData;
 </script>
 
 <div class="relative h-screen w-screen bg-slate-200">
@@ -19,7 +20,7 @@
 		<div class="flex flex-row w-full pr-8">
 			<Greetings />
 			<div class="flex justify-center pr-5 items-center space-y-4 w-2/5">
-				<FormCard {data} />
+				<FormCard {data} {form} />
 			</div>
 		</div>
 	</div>

diff --git a/frontend/src/routes/(authentication)/login/+page.svelte b/frontend/src/routes/(authentication)/login/+page.svelte
@@ -3,40 +3,9 @@
 	import Logo from '$lib/components/Logo/Logo.svelte';
 	import Greetings from './Greetings.svelte';
 	import FormCard from './FormCard.svelte';
-	import MfaAuthenticateModal from './mfa/components/MFAAuthenticateModal.svelte';
-	import {
-		getModalStore,
-		type ModalComponent,
-		type ModalSettings,
-		type ModalStore
-	} from '@skeletonlabs/skeleton';
-
-	import * as m from '$paraglide/messages';
 
 	export let data: PageData;
 	export let form: ActionData;
-
-	const modalStore: ModalStore = getModalStore();
-
-	function modalMFAAuthenticate(): void {
-		const modalComponent: ModalComponent = {
-			ref: MfaAuthenticateModal,
-			props: {
-				_form: data.mfaAuthenticateForm,
-				formAction: '?/mfaAuthenticate'
-			}
-		};
-		const modal: ModalSettings = {
-			type: 'component',
-			component: modalComponent,
-			// Data
-			title: m.mfaAuthenticateTitle(),
-			body: m.enterCodeGeneratedByApp()
-		};
-		modalStore.trigger(modal);
-	}
-
-	$: form && form.mfaFlow ? modalMFAAuthenticate() : null;
 </script>
 
 <div class="relative h-screen w-screen bg-slate-200">
@@ -49,7 +18,7 @@
 		<div class="flex flex-row w-full pr-8">
 			<Greetings />
 			<div class="flex justify-center pr-5 items-center space-y-4 w-2/5">
-				<FormCard {data} />
+				<FormCard {data} {form} />
 			</div>
 		</div>
 	</div>

diff --git a/frontend/src/routes/(authentication)/login/FormCard.svelte b/frontend/src/routes/(authentication)/login/FormCard.svelte
@@ -5,10 +5,41 @@
 
 	import { page } from '$app/stores';
 	import { redirectToProvider } from '$lib/allauth.js';
-	import * as m from '$paraglide/messages.js';
 	import { zod } from 'sveltekit-superforms/adapters';
+	import MfaAuthenticateModal from './mfa/components/MFAAuthenticateModal.svelte';
+	import {
+		getModalStore,
+		type ModalComponent,
+		type ModalSettings,
+		type ModalStore
+	} from '@skeletonlabs/skeleton';
+
+	import * as m from '$paraglide/messages';
 
 	export let data: any;
+	export let form: any;
+
+	const modalStore: ModalStore = getModalStore();
+
+	function modalMFAAuthenticate(): void {
+		const modalComponent: ModalComponent = {
+			ref: MfaAuthenticateModal,
+			props: {
+				_form: data.mfaAuthenticateForm,
+				formAction: '?/mfaAuthenticate'
+			}
+		};
+		const modal: ModalSettings = {
+			type: 'component',
+			component: modalComponent,
+			// Data
+			title: m.mfaAuthenticateTitle(),
+			body: m.enterCodeGeneratedByApp()
+		};
+		modalStore.trigger(modal);
+	}
+
+	$: form && form.mfaFlow ? modalMFAAuthenticate() : null;
 </script>
 
 <div class="flex flex-col w-3/4 p-10 rounded-lg shadow-lg bg-white bg-opacity-[.90]">