Redirect in SPA mode cancelled normal redirects, preventing applyAction.

Author: ciscoheat

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fixed types for constraints, tainted and errors when using intersections and unions in schemas.
 - Fixed SuperDebug collapsed height by preventing global css leak.
+- Redirect in SPA mode cancelled normal redirects, preventing applyAction.
 
 ## [2.8.1] - 2024-03-07
 

package.json

@@ -171,6 +171,7 @@
 		"sass": "^1.71.1",
 		"svelte": "5.0.0-next.70",
 		"svelte-check": "^3.6.6",
+		"svelte-french-toast": "^1.2.0",
 		"sveltekit-flash-message": "^2.4.4",
 		"sveltekit-rate-limiter": "^0.4.3",
 		"throttle-debounce": "^5.0.0",

pnpm-lock.yaml

@@ -1819,13 +1819,14 @@ export function superForm<
 						cancel
 					};
 
-					const unsubCheckforNav = STORYBOOK_MODE
-						? () => {}
-						: navigating.subscribe(($nav) => {
-								// Check for goto to a different route in the events
-								if (!$nav || $nav.from?.route.id === $nav.to?.route.id) return;
-								cancel();
-							});
+					const unsubCheckforNav =
+						STORYBOOK_MODE || !options.SPA
+							? () => {}
+							: navigating.subscribe(($nav) => {
+									// Check for goto to a different route in the events
+									if (!$nav || $nav.from?.route.id === $nav.to?.route.id) return;
+									cancel();
+								});
 
 					for (const event of formEvents.onResult) {
 						await event(data);

src/lib/client/superForm.ts

@@ -45,7 +45,8 @@
 		'issue-366',
 		'issue-368',
 		'zod-discriminated',
-		'syncflash'
+		'syncflash',
+		'redirect-login'
 	].sort();
 </script>
 

src/routes/(v2)/v2/Navigation.svelte

@@ -0,0 +1,31 @@
+<script>
+	import { page } from '$app/stores';
+	import { getFlash } from 'sveltekit-flash-message/client';
+
+	const flash = getFlash(page);
+
+	console.log('Flash in layout', JSON.stringify($flash));
+
+	// https://svelte-french-toast.com/
+	import toast, { Toaster } from 'svelte-french-toast';
+
+	// Simple Toasts TODO: style and integrate in theme
+	$: if ($flash) {
+		switch ($flash.type) {
+			case 'ok':
+				toast.success($flash.message);
+				break;
+			case 'error':
+				toast.error($flash.message);
+				break;
+		}
+
+		// Clear the flash message to avoid double-toasting.
+		//$flash = undefined;
+	}
+</script>
+
+<p>{JSON.stringify($flash)}</p>
+
+<Toaster />
+<slot />

src/routes/(v2)/v2/redirect-login/+layout.svelte

@@ -0,0 +1 @@
+<p>Please <a href="/v2/redirect-login/login">login here</a>.</p>

src/routes/(v2)/v2/redirect-login/+page.svelte

@@ -0,0 +1,39 @@
+import { redirect } from 'sveltekit-flash-message/server';
+import { message, superValidate } from '$lib/index.js';
+import { zod } from '$lib/adapters/zod.js';
+import { login_schema } from './schema.js';
+
+export async function load() {
+	return {
+		form: await superValidate(zod(login_schema))
+	};
+}
+
+/**
+ * Page form actions handlers
+ */
+export const actions = {
+	/**
+	 * default() form handler
+	 * can be used only if other named actions not defined
+	 * better use named actions to keep it clear
+	 */
+	// default: async ({locals, request}) => {},
+
+	/**
+	 * handle signup form login
+	 */
+	login: async ({ request, cookies }) => {
+		const form = await superValidate(request, zod(login_schema));
+
+		// Clientside validation failed
+		if (!form.valid) {
+			return message(form, { type: 'error', message: 'Login input wrong' }, { status: 400 });
+		}
+
+		console.log('Login successful');
+
+		// Redirect to home and send login succesfully message
+		return redirect(303, '/v2/redirect-login', { type: 'ok', message: 'Login success' }, cookies);
+	}
+};

src/routes/(v2)/v2/redirect-login/login/+page.server.ts

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import * as flashModule from 'sveltekit-flash-message/client';
+	import { superForm } from '$lib/index.js';
+
+	export let data;
+
+	const { form, errors, enhance } = superForm(data.form, {
+		syncFlashMessage: true,
+		flashMessage: {
+			module: flashModule
+		},
+		onError: 'apply',
+		resetForm: false
+	});
+</script>
+
+<span class="page page-login">
+	<main>
+		<div class="page-container container-xxl">
+			<div class="d-flex">
+				<div class="w-lg-500px p-4 p-sm-10 p-lg-15 mx-auto">
+					<form class="form w-100" method="POST" action="?/login" use:enhance>
+						<div class="text-center mb-10">
+							<div class="fv-row mb-10">
+								<label class="form-label fs-6 fw-bold text-dark" for="emailInput">Email</label>
+								<input
+									class="form-control form-control-lg form-control-solid"
+									type="text"
+									name="email"
+									id="emailInput"
+									autocomplete="email"
+									aria-invalid={$errors.email ? 'true' : undefined}
+									bind:value={$form.email}
+								/>
+								{#if $errors.email}<div class="invalid-feedback">{$errors.email}</div>{/if}
+							</div>
+
+							<div class="fv-row mb-10">
+								<div class="d-flex flex-stack mb-2">
+									<label class="form-label fw-bold text-dark fs-6 mb-0" for="passwordInput"
+										>Password</label
+									>
+								</div>
+
+								<input
+									class="form-control form-control-lg form-control-solid"
+									type="password"
+									name="password"
+									id="passwordInput"
+									autocomplete="off"
+									aria-invalid={$errors.password ? 'true' : undefined}
+									bind:value={$form.password}
+								/>
+								{#if $errors.password}<div class="invalid-feedback">{$errors.password}</div>{/if}
+							</div>
+
+							<div class="text-center">
+								<button type="submit" id="kt_sign_in_submit" class="btn btn-lg btn-apb w-100 mb-5">
+									<span class="indicator-label">Continue</span>
+									<!-- <span class="indicator-progress"
+                                  >Please wait...
+                                  <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span
+                              > -->
+								</button>
+							</div>
+						</div>
+					</form>
+				</div>
+			</div>
+		</div>
+		<!-- /.post-container -->
+	</main>
+</span>

src/routes/(v2)/v2/redirect-login/login/+page.svelte

@@ -0,0 +1,6 @@
+import z from 'zod';
+
+export const login_schema = z.object({
+	email: z.string().email(),
+	password: z.string()
+});