include email signup

codercatdev · codercatdev · commit 3bf09ece07db · 2023-04-19T19:20:06.000-04:00
diff --git a/apps/codingcatdev/src/lib/client/firebase.ts b/apps/codingcatdev/src/lib/client/firebase.ts
@@ -1,6 +1,6 @@
 import { toastStore } from '@codingcatdev/blackcatui';
 import { initializeApp, getApps, FirebaseError } from 'firebase/app';
-import { getAuth, setPersistence, browserSessionPersistence, signInWithEmailAndPassword, signInWithPopup, type AuthProvider, type Auth } from 'firebase/auth';
+import { getAuth, setPersistence, browserSessionPersistence, signInWithEmailAndPassword, signInWithPopup, type AuthProvider, type Auth, createUserWithEmailAndPassword } from 'firebase/auth';
 import { getFirestore, collection, doc, addDoc, onSnapshot, Firestore } from 'firebase/firestore';
 import { httpsCallable, getFunctions, type Functions } from 'firebase/functions';
 
@@ -51,6 +51,12 @@ export const ccdSignInWithEmailAndPassword = async ({ email, password }: { email
 	setCookie(idToken);
 }
 
+export const ccdSignUpWithEmailAndPassword = async ({ email, password }: { email: string, password: string }) => {
+	const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+	const idToken = await userCredential.user.getIdToken();
+	setCookie(idToken);
+}
+
 export const ccdSignInWithPopUp = async (provider: AuthProvider) => {
 	try {
 		const result = await signInWithPopup(auth, provider)
diff --git a/apps/codingcatdev/src/routes/login/+page.svelte b/apps/codingcatdev/src/routes/login/+page.svelte
@@ -16,6 +16,7 @@
 <LayoutWrapper>
 	<section class="bcu-card flex flex-col gap-4 p-4">
 		<EmailAuth {action} />
+		<a href={`/signup${action.replace('/login&', '')}`}>Sign Up</a>
 		<hr />
 
 		<GoogleAuth {action} />
diff --git a/apps/codingcatdev/src/routes/signup/+page.server.ts b/apps/codingcatdev/src/routes/signup/+page.server.ts
@@ -0,0 +1,34 @@
+import { ccdCreateSessionCookie } from '$lib/server/firebase';
+import type { Actions } from './$types';
+import { fail, redirect } from '@sveltejs/kit'
+
+export const actions = {
+    signup: async ({ cookies, url }) => {
+        const ccdLoginIdToken = cookies.get('__ccdlogin');
+
+        if (!ccdLoginIdToken) {
+            return fail(400, { missing: true });
+        }
+
+        const sessionCookie = await ccdCreateSessionCookie(ccdLoginIdToken);
+        if (!sessionCookie) {
+            return fail(400, { incorrect: true });
+        }
+        cookies.set(sessionCookie.name, sessionCookie.sessionCookie, sessionCookie.options);
+        cookies.set('__ccdlogin', '', { expires: new Date(Date.now() - 3600) });
+
+        if (url.searchParams.has('redirectTo')) {
+            throw redirect(303, url.searchParams.get('redirectTo') || '/');
+        }
+        throw redirect(303, '/');
+    },
+} satisfies Actions;
+
+export const load = (async ({ parent, url }) => {
+    const { user } = await parent();
+    if (user) throw redirect(303, '/account');
+
+    return {
+        redirectTo: url.searchParams.get('redirectTo') || ''
+    }
+});
diff --git a/apps/codingcatdev/src/routes/signup/+page.svelte b/apps/codingcatdev/src/routes/signup/+page.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import LayoutWrapper from '../(layout-partials)/LayoutWrapper.svelte';
+
+	// TODO: More actions
+	// export let form: ActionData;
+
+	import type { PageData } from './$types';
+	import SignupAuth from './SignupAuth.svelte';
+	export let data: PageData;
+	$: action = `?/signup&redirectTo=${data.redirectTo ? data.redirectTo : '/dashboard'}`;
+</script>
+
+<LayoutWrapper>
+	<section class="bcu-card flex flex-col gap-4 p-4">
+		<SignupAuth {action} />
+	</section>
+</LayoutWrapper>
diff --git a/apps/codingcatdev/src/routes/signup/SignupAuth.svelte b/apps/codingcatdev/src/routes/signup/SignupAuth.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+
+	import { ccdSignUpWithEmailAndPassword } from '$lib/client/firebase';
+
+	import { toastStore } from '@codingcatdev/blackcatui';
+
+	export let action: string;
+</script>
+
+<form
+	class="flex justify-center w-full"
+	method="POST"
+	{action}
+	use:enhance={async ({ action, cancel, controller, data, form }) => {
+		// `form` is the `<form>` element
+		// `data` is its `FormData` object
+		// `action` is the URL to which the form is posted
+		// `cancel()` will prevent the submission
+
+		const email = `${data.get('email')}`;
+		const password = `${data.get('password')}`;
+
+		if (!email || !password) {
+			toastStore.trigger({
+				message: 'Please Provide Username and Password.'
+			});
+			cancel();
+		} else {
+			try {
+				await ccdSignUpWithEmailAndPassword({ email, password });
+			} catch (err) {
+				if (err instanceof Error) {
+					toastStore.trigger({
+						message: err.message,
+						background: 'variant-filled-error'
+					});
+				}
+			}
+		}
+
+		return async ({ result, update }) => {
+			// `result` is an `ActionResult` object
+			// `update` is a function which triggers the logic that would be triggered if this callback wasn't set
+
+			update();
+		};
+	}}
+>
+	<div class="flex flex-col gap-4 text-token">
+		<label class="label">
+			<span>Email</span>
+			<input class="input" name="email" type="email" placeholder="alex@codingcat.dev" />
+		</label>
+		<label class="label">
+			<span>Password</span>
+			<input class="input" name="password" type="password" />
+		</label>
+		<button class="bcu-button variant-filled-primary" type="submit">Sign Up</button>
+	</div>
+</form>
