feat(#29): Replace external magic link component

src/lib/components/MagicLink.svelte

@@ -1,19 +1,66 @@
 <script lang="ts">
-import { Auth } from '@supabase/auth-ui-svelte'
-import { ThemeSupa } from '@supabase/auth-ui-shared'
+	export let supabase: any;
 
-export let supabase: any;
-export let url: string;
+	let error = '',
+		message = '',
+		loading = false,
+		email = '';
 
+	async function submit() {
+		error = '';
+		message = '';
+		loading = true;
+
+		const { error: err } = await supabase.auth.signInWithOtp({ email });
+
+		if (err) error = err.message;
+		else message = 'Check your email for the magic link.';
+
+		loading = false;
+	}
 </script>
 
 <div class="p-4">
-  <Auth
-      supabaseClient={supabase}
-      view="magic_link"
-      redirectTo={`${url}/auth/callback`}
-      showLinks={false}
-      appearance={{ theme: ThemeSupa, style: { input: 'color: #fff' } }}
-      additionalData={{}}
-    />
-</div>
+	<div class="component">
+		<div class="container">
+			<form on:submit|preventDefault={submit}>
+				<label class="input input-bordered flex items-center gap-2">
+					Email
+					<input
+						type="text"
+						name="email"
+						class="grow"
+						placeholder="Your email address"
+						bind:value={email}
+					/>
+				</label>
+				<button class="btn btn-active btn-primary w-full" on:click disabled={loading}
+					>Send magic link</button
+				>
+
+				{#if message}
+					<div class="text-success">
+						{message}
+					</div>
+				{/if}
+
+				{#if error}
+					<div class="text-error">
+						{error}
+					</div>
+				{/if}
+			</form>
+		</div>
+	</div>
+</div>
+
+<style>
+	.component {
+		width: 100%;
+	}
+
+	.container {
+		display: flex;
+		flex-direction: column;
+	}
+</style>

src/routes/+layout.svelte

@@ -147,7 +147,7 @@
 					<div
 						class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 text-base-content rounded-box min-w-[13rem] w-auto"
 					>
-						<MagicLink {supabase} {url} />
+						<MagicLink {supabase} />
 					</div>
 				{/if}
 			</details>

src/routes/+page.svelte

@@ -19,7 +19,7 @@
 				</h1>
 			</div>
 			<div id="sign-up" class="card shrink-0 w-full max-w-sm shadow-2xl">
-				<MagicLink {supabase} {url} />
+				<MagicLink {supabase} />
 			</div>
 		</div>
 	</div>

src/routes/login/+page.svelte

@@ -6,4 +6,4 @@
 	$: ({ supabase, session, url } = data);
 </script>
 
-<MagicLink {supabase} {url} />
+<MagicLink {supabase} />