From cc0fbd8e07c3d85400eaecbb2d4498d7108d3119 Mon Sep 17 00:00:00 2001
From: Sam Nystrom <sam@samnystrom.dev>
Date: Wed, 13 Mar 2024 12:43:43 +0000
Subject: feat: use different header actions for each page

---
 src/pages/SignUp.tsx | 64 ++++++++++++++++++++++++++++------------------------
 1 file changed, 35 insertions(+), 29 deletions(-)

(limited to 'src/pages/SignUp.tsx')

diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
index 8bdf35b..15b9f95 100644
--- a/src/pages/SignUp.tsx
+++ b/src/pages/SignUp.tsx
@@ -2,7 +2,7 @@ import { useContext } from 'preact/hooks';
 import { useSignal } from '@preact/signals';
 import { route } from 'preact-router';
 import { Pb } from '../context.ts';
-import { TextInput, ArrowButton, Form, FormLabel, Content } from '../components';
+import { Header, Content, Form, FormLabel, TextInput, Button, ArrowButton } from '../components';
 
 const SignUp = () => {
 	const pb = useContext(Pb);
@@ -14,7 +14,7 @@ const SignUp = () => {
 
 	const onSubmit = async (event: SubmitEvent) => {
 		event.preventDefault();
-		const user = await pb.collection('users').create({
+		await pb.collection('users').create({
 			username: username.value,
 			email: email.value,
 			emailVisibility: true,
@@ -22,37 +22,43 @@ const SignUp = () => {
 			passwordConfirm: confirm.value,
 		});
 		if (pb.authStore.isValid) {
-			route('/' + user.username);
+			route('/' + pb.authStore.model.username);
 		}
 	};
 
 	return (
-		<Content>
-			<Form onSubmit={onSubmit}>
-				<h1>Sign Up</h1>
-				<p>
-					Already have an account? <a href="/login">Log in</a>
-				</p>
-				<hr />
-				<FormLabel>
-					Username
-					<TextInput placeholder="Username" signal={username} />
-				</FormLabel>
-				<FormLabel>
-					Email
-					<TextInput placeholder="Email" signal={email} />
-				</FormLabel>
-				<FormLabel>
-					Password
-					<TextInput type="password" placeholder="Password" signal={password} />
-				</FormLabel>
-				<FormLabel>
-					Confirm password
-					<TextInput type="password" placeholder="Confirm password" signal={confirm} />
-				</FormLabel>
-				<ArrowButton>Continue</ArrowButton>
-			</Form>
-		</Content>
+		<>
+			<Header>
+				<Button kind="ghost" href="/play">Try Now</Button>
+				<Button kind="ghost" href="/login">Log In</Button>
+			</Header>
+			<Content>
+				<Form onSubmit={onSubmit}>
+					<h1>Sign Up</h1>
+					<p>
+						Already have an account? <a href="/login">Log in</a>
+					</p>
+					<hr />
+					<FormLabel>
+						Username
+						<TextInput placeholder="Username" signal={username} />
+					</FormLabel>
+					<FormLabel>
+						Email
+						<TextInput placeholder="Email" signal={email} />
+					</FormLabel>
+					<FormLabel>
+						Password
+						<TextInput type="password" placeholder="Password" signal={password} />
+					</FormLabel>
+					<FormLabel>
+						Confirm password
+						<TextInput type="password" placeholder="Confirm password" signal={confirm} />
+					</FormLabel>
+					<ArrowButton>Continue</ArrowButton>
+				</Form>
+			</Content>
+		</>
 	);
 };
 
-- 
cgit v1.2.3