From b95766ea4bb16b9c873d6bf19789e7760a3e6e95 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Thu, 22 Feb 2024 09:54:35 +0100
Subject: [PATCH] refactor: support OAuth2Form component

---
 src/routes/(auth)/auth/(components)/index.ts  |  2 +-
 .../auth/(components)/login-form.svelte       |  1 -
 .../{sso-form.svelte => oauth2-form.svelte}   | 81 +++++++------------
 src/routes/(auth)/auth/+page.server.ts        | 31 ++-----
 src/routes/(auth)/auth/+page.svelte           |  4 +-
 5 files changed, 40 insertions(+), 79 deletions(-)
 rename src/routes/(auth)/auth/(components)/{sso-form.svelte => oauth2-form.svelte} (69%)

diff --git a/src/routes/(auth)/auth/(components)/index.ts b/src/routes/(auth)/auth/(components)/index.ts
index 14e9bda..f70a7d6 100644
--- a/src/routes/(auth)/auth/(components)/index.ts
+++ b/src/routes/(auth)/auth/(components)/index.ts
@@ -1,3 +1,3 @@
 export { default as LoginForm } from './login-form.svelte';
 export { default as RegisterForm } from './register-form.svelte';
-export { default as SSOForm } from './sso-form.svelte';
+export { default as Oauth2Form } from './oauth2-form.svelte';
diff --git a/src/routes/(auth)/auth/(components)/login-form.svelte b/src/routes/(auth)/auth/(components)/login-form.svelte
index b244264..012b634 100644
--- a/src/routes/(auth)/auth/(components)/login-form.svelte
+++ b/src/routes/(auth)/auth/(components)/login-form.svelte
@@ -14,7 +14,6 @@
 	import SuperDebug from 'sveltekit-superforms';
 	import { zodClient } from 'sveltekit-superforms/adapters';
 	import { browser, dev } from '$app/environment';
-	// import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
 	import { toast } from 'svelte-sonner';
 	import { Icons } from '$lib/components/site';
 	import { cn } from '$lib/utils';
diff --git a/src/routes/(auth)/auth/(components)/sso-form.svelte b/src/routes/(auth)/auth/(components)/oauth2-form.svelte
similarity index 69%
rename from src/routes/(auth)/auth/(components)/sso-form.svelte
rename to src/routes/(auth)/auth/(components)/oauth2-form.svelte
index 14962dd..293b942 100644
--- a/src/routes/(auth)/auth/(components)/sso-form.svelte
+++ b/src/routes/(auth)/auth/(components)/oauth2-form.svelte
@@ -1,49 +1,14 @@
-<script lang="ts" context="module">
-	import { z } from 'zod';
-	export const ssoFormSchema = z.object({
-		token: z.string()
-	});
-	export type SsoFormSchema = typeof ssoFormSchema;
-</script>
-
 <script lang="ts">
-	import * as Form from '$lib/components/ui/form';
-	import { Input } from '$lib/components/ui/input';
-	import { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
-	import SuperDebug from 'sveltekit-superforms';
-	import { zodClient } from 'sveltekit-superforms/adapters';
-	import { browser, dev } from '$app/environment';
-	import { toast } from 'svelte-sonner';
 	import { Icons } from '$lib/components/site';
 	import PocketBase from 'pocketbase';
 	import { PUBLIC_CLIENT_PB } from '$env/static/public';
+	import { enhance } from '$app/forms';
 	import { Button } from '$lib/components/ui/button';
 	import { Separator } from '$lib/components/ui/separator';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import { ChevronDown } from 'radix-icons-svelte';
-	import { debugForms } from '$lib/config/site';
-
-	export let data: SuperValidated<Infer<SsoFormSchema>>;
-	let isLoading = false;
-
-	const form = superForm(data, {
-		validators: zodClient(ssoFormSchema),
-		onSubmit: () => {
-			isLoading = true;
-			toast.loading('Logging in...');
-		},
-		onUpdated: ({ form: f }) => {
-			isLoading = false;
-			if (f.valid) {
-				toast.success('Succesfully logged in.');
-			} else {
-				toast.error('Please fix the errors.');
-			}
-		}
-	});
-
-	const { form: formData, enhance } = form;
 
+	export let isLoading = false;
 	/* eslint-disable  @typescript-eslint/no-explicit-any */
 	export let providers: { name: string; icon?: any; displayName: string }[];
 	let currentProvider = providers[0];
@@ -52,7 +17,13 @@
 	let oauth2Form: HTMLFormElement;
 	async function loginWithOauth2(provider: string) {
 		try {
-			await pb.collection('users').authWithOAuth2({ provider });
+			let w = window.open();
+			await pb.collection('users').authWithOAuth2({
+				provider: provider,
+				urlCallback: (url) => {
+					if (w) w.location.href = url;
+				}
+			});
 			const input = document.createElement('input');
 			input.type = 'hidden';
 			input.name = 'token';
@@ -65,14 +36,26 @@
 	}
 </script>
 
-<form method="POST" action="?/sso" class="grid gap-2" use:enhance>
-	<Form.Field {form} name="token" class="grid gap-2">
-		<Form.Control let:attrs>
-			<Input {...attrs} bind:value={$formData.token} class="hidden" />
-		</Form.Control>
-		<Form.FieldErrors />
-	</Form.Field>
-
+<form
+	method="POST"
+	action="?/oauth2"
+	bind:this={oauth2Form}
+	use:enhance={() => {
+		isLoading = true;
+		return async ({ update }) => {
+			isLoading = false;
+			update();
+		};
+	}}
+>
+	<div class="relative">
+		<div class="absolute inset-0 flex items-center">
+			<span class="w-full border-t" />
+		</div>
+		<div class="relative flex justify-center text-xs uppercase">
+			<span class="bg-background px-2 py-4 text-muted-foreground"> Or continue with </span>
+		</div>
+	</div>
 	<div
 		class="flex items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
 	>
@@ -137,9 +120,3 @@
 		{/if}
 	</div>
 </form>
-
-{#if dev && debugForms && browser}
-	<div class="pt-4">
-		<SuperDebug data={$formData} />
-	</div>
-{/if}
diff --git a/src/routes/(auth)/auth/+page.server.ts b/src/routes/(auth)/auth/+page.server.ts
index 15f6c76..9e39e50 100644
--- a/src/routes/(auth)/auth/+page.server.ts
+++ b/src/routes/(auth)/auth/+page.server.ts
@@ -3,14 +3,12 @@ import { superValidate } from 'sveltekit-superforms';
 import { zod } from 'sveltekit-superforms/adapters';
 import { loginFormSchema } from './(components)/login-form.svelte';
 import { registerFormSchema } from './(components)/register-form.svelte';
-import { ssoFormSchema } from './(components)/sso-form.svelte';
 import { fail, type Actions, redirect } from '@sveltejs/kit';
 
 export const load: PageServerLoad = async () => {
 	return {
 		loginForm: await superValidate(zod(loginFormSchema)),
-		registerForm: await superValidate(zod(registerFormSchema)),
-		ssoForm: await superValidate(zod(ssoFormSchema))
+		registerForm: await superValidate(zod(registerFormSchema))
 	};
 };
 
@@ -54,26 +52,13 @@ export const actions: Actions = {
 			});
 		}
 	},
-	sso: async ({ request, cookies }) => {
-		const form = await superValidate(request, zod(ssoFormSchema));
-		if (!form.valid) {
-			return fail(400, {
-				form
-			});
-		}
-		const token = form.data.token;
-		try {
-			if (!token || typeof token !== 'string') {
-				throw redirect(303, '/auth');
-			}
-			cookies.set('pb_auth', JSON.stringify({ token: token }), { path: '/' });
-			return {
-				form
-			};
-		} catch (err) {
-			return fail(500, {
-				form
-			});
+	oauth2: async ({ request, cookies }) => {
+		const form = await request.formData();
+		const token = form.get('token');
+		if (!token || typeof token !== 'string') {
+			throw redirect(303, '/auth');
 		}
+		cookies.set('pb_auth', JSON.stringify({ token: token }), { path: '/' });
+		throw redirect(303, '/');
 	}
 };
diff --git a/src/routes/(auth)/auth/+page.svelte b/src/routes/(auth)/auth/+page.svelte
index 19c21ef..71d0fd1 100644
--- a/src/routes/(auth)/auth/+page.svelte
+++ b/src/routes/(auth)/auth/+page.svelte
@@ -3,7 +3,7 @@
 	import { Icons } from '$lib/components/site/index.js';
 	import * as Tabs from '$lib/components/ui/tabs';
 	import type { PageData } from './$types.js';
-	import { LoginForm, RegisterForm, SSOForm } from './(components)';
+	import { LoginForm, RegisterForm, Oauth2Form } from './(components)';
 
 	export let data: PageData;
 
@@ -37,7 +37,7 @@
 			Forgot password? <a class="text-primary underline" href="/reset-password">Reset password.</a>
 		</p>
 		{#if providers.length}
-			<SSOForm data={data.ssoForm} providers={providersWithIcons} />
+			<Oauth2Form providers={providersWithIcons} />
 		{/if}
 	</Tabs.Root>
 </div>