fix(console): update auth/sign-up

apps/console/package.json

@@ -81,7 +81,7 @@
 		"svelte-ux": "0.57.3",
 		"sveltekit-flash-message": "2.3.1",
 		"sveltekit-rate-limiter": "0.4.2",
-		"sveltekit-superforms": "1.13.2",
+		"sveltekit-superforms": "2.0.0-alpha.18",
 		"sveltekit-view-transition": "0.5.3",
 		"tailwind-merge": "2.2.0",
 		"tailwind-variants": "0.1.20",

apps/console/project.inlang/en.json

@@ -10,6 +10,8 @@
 	"buttons_update": "Update",
 	"buttons_logout": "Logout",
 	"buttons_login_youtube": "Login with YouTube",
+	"labels_menu_home": "Home",
+	"labels_menu_dashboard": "Dashboard",
 	"labels_title": "Title",
 	"labels_description": "Description",
 	"labels_visibility": "Visibility",
@@ -23,6 +25,7 @@
 	"messages_please_wait": "Please wait...",
 	"log": "This log was called from {fileName}!",
 	"auth_labels_signin": "Sign In",
+	"auth_labels_signin_with_email": "Sign In with Email",
 	"auth_labels_signin_problem": "Sign In Problem",
 	"auth_labels_signup": "Sign Up",
 	"auth_labels_signout": "Sign Out",

apps/console/src/app.d.ts

@@ -2,14 +2,13 @@
 // for information about these interfaces
 
 type NhostClient = import('@nhost/nhost-js').NhostClient;
+type ToastSettings = import('@skeletonlabs/skeleton').ToastSettings;
 
 declare global {
 	namespace App {
 		namespace Superforms {
-			type Message = {
-				type: 'error' | 'success';
-				closeDelay?: number;
-				message: string;
+			type Message = Pick<ToastSettings, 'message' | 'hideDismiss' | 'timeout'> & {
+				type: 'error' | 'success' | 'warning';
 			};
 		}
 		// interface Error {}

apps/console/src/hooks.ts

@@ -0,0 +1 @@
+// export { dead_links as reroute } from "$lib/middleware/dead-links";

apps/console/src/lib/components/layout/flash-message-toast.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	// Ref: https://github.com/hansaskov/my-skeleton-app/blob/master/src/lib/components/FlashMessageToast.svelte
+	import { getFlash } from 'sveltekit-flash-message/client';
+	import { Toast, getToastStore } from '@skeletonlabs/skeleton';
+	import { page } from '$app/stores';
+	import { afterNavigate } from '$app/navigation';
+	import { handleMessage } from './toast-manager';
+
+	const toastStore = getToastStore();
+
+	const flash = getFlash(page, {
+		clearOnNavigate: false
+		// flashCookieOptions: { sameSite: 'lax' }
+	});
+
+	let isGotoNavigated = false;
+	afterNavigate(({ type }) => {
+		isGotoNavigated = ['goto'].includes(type as string);
+	});
+
+	flash.subscribe(($flash) => {
+		if (!$flash) return;
+		if (!isGotoNavigated) return;
+
+		handleMessage($flash, toastStore);
+	});
+</script>
+
+<Toast position="b" />
+<!-- <Toast position="br" rounded="rounded-lg" padding="px-3 py-2" /> -->

apps/console/src/lib/components/layout/header.svelte

@@ -110,7 +110,7 @@
 		<!-- Login -->
 		<div class="ml-10 space-x-4">
 			{#if user}
-				<form action="/logout" method="post">
+				<form action="/auth/sign-out" method="post">
 					<button
 						type="submit"
 						class="inline-block rounded-md border border-transparent bg-indigo-500 px-4 py-2 text-base font-medium text-white hover:bg-opacity-75"
@@ -120,13 +120,13 @@
 				</form>
 			{:else}
 				<a
-					href="/login"
+					href="/auth/sign-in"
 					class="inline-block rounded-md border border-transparent bg-indigo-500 px-4 py-2 text-base font-medium text-white hover:bg-opacity-75"
 				>
 					Sign in
 				</a>
 				<a
-					href="/signup"
+					href="/auth/sign-up"
 					class="inline-block rounded-md border border-transparent bg-white px-4 py-2 text-base font-medium text-indigo-600 hover:bg-indigo-50"
 				>
 					Sign up

apps/console/src/lib/components/layout/toast-manager.ts

@@ -0,0 +1,11 @@
+import type { ToastSettings, ToastStore } from '@skeletonlabs/skeleton';
+
+export function handleMessage(message: App.Superforms.Message, toastStore: ToastStore) {
+	let background = 'variant-filled-success';
+	if (message.type === 'error') {
+		background = 'variant-filled-error';
+	} else if (message.type === 'warning') {
+		background = 'variant-filled-warning';
+	}
+	toastStore.trigger({ ...message, background } satisfies ToastSettings);
+}

apps/console/src/lib/links.ts

@@ -35,8 +35,10 @@ export const menuNavLinks: Record<string, Array<{ title: string; list: List }>>
 				{ href: '/docs/contributing', label: 'Contributing', keywords: 'branch, pr' },
 				{ href: '/dashboard/reports', label: 'Reports', keywords: 'reports, graph' },
 				{ href: '/dashboard/customers', label: 'Customers', keywords: 'customers, users' },
-				{ href: '/sign-up', label: 'Signup', keywords: 'login, users' },
-				{ href: '/sign-in', label: 'Signin', keywords: 'login, users' }
+				{ href: '/auth/sign-up', label: 'Signup', keywords: 'signup, users' },
+				{ href: '/auth/sign-in', label: 'Signin', keywords: 'signin, login, users' },
+				{ href: '/auth/sign-out', label: 'Signout', keywords: 'signout, logout, users' },
+				{ href: '/auth/login', label: 'login', keywords: 'login, users' }
 			]
 		}
 	],

apps/console/src/lib/middleware/dead-links.ts

@@ -0,0 +1,28 @@
+import type { Reroute } from '@sveltejs/kit';
+import { Logger } from '@spectacular/utils';
+
+export const log = new Logger('universal:middleware:dead-links');
+
+const dead_links_redirect_to: Record<string, string> = {
+	'/api/fragments': '/api/fragment',
+	'/api/vite': '/api/vite-plugin',
+	'/blog/feed': ' /blog/feed.xml',
+	'/api/cli': '/api/command-line',
+	'/intro/fragments': '/intro/reusing-parts-of-a-query',
+	'/api/graphql': '/api/graphql-magic',
+	'/guides/plugin': '/guides/plugin-directory'
+};
+
+/**
+ * Handle Dead Links
+ * TODO: this is replacemnt for src/lib/server/middleware/links.ts handler.
+ * use it in hooks.ts
+ */
+export const dead_links: Reroute = ({ url }) => {
+	// If we have a value, let's redirect
+	const reroutedPath = dead_links_redirect_to[url.pathname];
+	if (url.pathname in dead_links_redirect_to) {
+		log.debug(`redirecting ${url.pathname} to  ${reroutedPath}`);
+		return dead_links_redirect_to[url.pathname];
+	}
+};

apps/console/src/lib/server/limiter/limiter.ts

@@ -0,0 +1,17 @@
+import { RateLimiter } from 'sveltekit-rate-limiter/server';
+import { RATE_LIMITER_KEY } from '$env/static/private';
+
+export const limiter = new RateLimiter({
+	// A rate is defined as [number, unit]
+	rates: {
+		IP: [10, 'h'], // IP address limiter
+		IPUA: [5, 'm'], // IP + User Agent limiter
+		cookie: {
+			// Cookie limiter
+			name: 'limiterid', // Unique cookie name for this limiter
+			secret: RATE_LIMITER_KEY, // Use $env/static/private
+			rate: [2, 'm'],
+			preflight: true // Require preflight call (see load function)
+		}
+	}
+});

apps/console/src/lib/server/middleware/auth.ts

@@ -2,7 +2,7 @@ import type { Handle } from '@sveltejs/kit';
 import { redirect } from '@sveltejs/kit';
 import { Logger } from '@spectacular/utils';
 import { NHOST_SESSION_KEY, getNhost } from '$lib/nhost';
-export const log = new Logger('middleware:auth');
+export const log = new Logger('server:middleware:auth');
 /**
  * Auth middleware goal is to set `NhostClient` initialized from either session cookie or refreshToken and set it into locals.
  * If either cookie or refreshToken are not present, a dummy `NhostClient` is set into locals.
@@ -27,7 +27,7 @@ export const auth = (async ({ event, resolve }) => {
 			event.cookies.delete(NHOST_SESSION_KEY, { path: '/' });
 			// TODO: should we throw error and desply error to user?
 			log.error('auth error:', error);
-			redirect(303, '/login');
+			redirect(303, 'auth/sign-in');
 		}
 
 		event.cookies.set(NHOST_SESSION_KEY, btoa(JSON.stringify(newSession)), { path: '/' });