Merge pull request #40 from hackclub-community/17-account-settings-ui

Add account settings UI and some other improvements

Author: ingoau

bun.lock

@@ -55,6 +55,7 @@
 		"convex": "^1.32.0",
 		"convex-svelte": "^0.0.12",
 		"hotkeys-js": "^4.0.2",
-		"mode-watcher": "^1.1.0"
+		"mode-watcher": "^1.1.0",
+		"ua-parser-js": "^2.0.9"
 	}
 }

package.json

@@ -25,6 +25,29 @@ export const createAuthOptions = (ctx: GenericCtx<DataModel>) => {
 		emailAndPassword: {
 			enabled: false
 		},
+		account: {
+			accountLinking: {
+				allowDifferentEmails: true
+			}
+		},
+		user: {
+			changeEmail: {
+				enabled: false
+			},
+			deleteUser: {
+				enabled: true
+			}
+		},
+		socialProviders: {
+			github: {
+				clientId: process.env.GITHUB_CLIENT_ID!,
+				clientSecret: process.env.GITHUB_CLIENT_SECRET!
+			},
+			google: {
+				clientId: process.env.GOOGLE_CLIENT_ID!,
+				clientSecret: process.env.GOOGLE_CLIENT_SECRET!
+			}
+		},
 		plugins: [
 			convex({ authConfig }),
 			genericOAuth({

src/convex/auth.ts

@@ -5,7 +5,7 @@
 	import Button from './ui/button/button.svelte';
 	import { authClient } from '$lib/auth-client';
 	import { useAuth } from '@mmailaender/convex-better-auth-svelte/svelte';
-	import { ArrowRight, ArrowRightIcon } from '@lucide/svelte';
+	import { ArrowRight, ArrowRightIcon, LoaderCircle } from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
 	import Label from './ui/label/label.svelte';
 	import * as InputGroup from '$lib/components/ui/input-group/index.js';
@@ -47,49 +47,51 @@
 				<Card.Title>Log in as an organizer</Card.Title>
 			</Card.Header>
 			<Card.Content class="space-y-8">
-				<Button
-					disabled={loading}
-					onclick={async () => {
-						loading = true;
-						toast.promise(
-							authClient.signIn
-								.oauth2({
+				{#if loading}
+					<div class="flex min-h-32 flex-col items-center justify-center gap-3">
+						<LoaderCircle class="size-5 animate-spin" />
+					</div>
+				{:else}
+					<Button
+						disabled={loading}
+						onclick={async () => {
+							loading = true;
+							try {
+								const { error } = await authClient.signIn.oauth2({
 									providerId: 'hca',
 									callbackURL: '/organizer'
-								})
-								.then(({ data, error }) => {
-									if (error) {
-										loading = false;
-										throw error;
-									}
-									return data;
-								}),
-							{
-								loading: 'Loading...',
-								success: 'Redirecting...',
-								error: 'Something went wrong'
+								});
+								if (error) {
+									loading = false;
+									toast.error('Something went wrong');
+								}
+							} catch {
+								loading = false;
+								toast.error('Something went wrong');
 							}
-						);
-					}}>Continue with Hack Club</Button
-				>
-				<form class="flex w-full flex-col gap-2">
-					<Label for="email-{id}">Email</Label>
-					<InputGroup.Root class="w-full">
-						<InputGroup.Input
-							type="email"
-							name="email"
-							id="email-{id}"
-							required
-							placeholder="iwill@hackthisclub.com"
-						/>
-						<InputGroup.Addon align="inline-end">
-							<InputGroup.Button variant="default" type="submit">
-								<ArrowRightIcon />
-								Send Code
-							</InputGroup.Button>
-						</InputGroup.Addon>
-					</InputGroup.Root>
-				</form>
+						}}
+					>
+						Continue with Hack Club
+					</Button>
+					<form class="flex w-full flex-col gap-2">
+						<Label for="email-{id}">Email</Label>
+						<InputGroup.Root class="w-full">
+							<InputGroup.Input
+								type="email"
+								name="email"
+								id="email-{id}"
+								required
+								placeholder="iwill@hackthisclub.com"
+							/>
+							<InputGroup.Addon align="inline-end">
+								<InputGroup.Button variant="default" type="submit">
+									<ArrowRightIcon />
+									Send Code
+								</InputGroup.Button>
+							</InputGroup.Addon>
+						</InputGroup.Root>
+					</form>
+				{/if}
 			</Card.Content>
 		{/if}
 	</Card.Root>