From a9aa246f58dcb2664c4e7a1bd98e69c19e7d7000 Mon Sep 17 00:00:00 2001
From: Sam Nystrom <sam@samnystrom.dev>
Date: Tue, 12 Mar 2024 14:52:25 +0000
Subject: Add rudimentary backend and auth

---
 src/pages/Home.tsx         |  8 +++++++
 src/pages/LogIn.tsx        | 33 +++++++++++++++++++++++++++++
 src/pages/ProjectsList.tsx | 49 ++++++++++++++++++++++++++++++++++++++++++
 src/pages/SignUp.tsx       | 53 ++++++++++++++++++++++++++++++++++++++++++++++
 src/pages/index.ts         |  4 ++++
 5 files changed, 147 insertions(+)
 create mode 100644 src/pages/Home.tsx
 create mode 100644 src/pages/LogIn.tsx
 create mode 100644 src/pages/ProjectsList.tsx
 create mode 100644 src/pages/SignUp.tsx
 create mode 100644 src/pages/index.ts

(limited to 'src/pages')

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
new file mode 100644
index 0000000..7762636
--- /dev/null
+++ b/src/pages/Home.tsx
@@ -0,0 +1,8 @@
+export const Home = () => {
+	return (
+		<header>
+			<a href="/signup">Sign Up</a>
+			<a href="/login">Log In</a>
+		</header>
+	);
+};
\ No newline at end of file
diff --git a/src/pages/LogIn.tsx b/src/pages/LogIn.tsx
new file mode 100644
index 0000000..c787dce
--- /dev/null
+++ b/src/pages/LogIn.tsx
@@ -0,0 +1,33 @@
+import { useContext } from 'preact/hooks';
+import { useSignal } from '@preact/signals';
+import { route } from 'preact-router';
+import { Pb } from '../pb.ts';
+
+export const LogIn = () => {
+	const pb = useContext(Pb);
+
+	const email = useSignal('');
+	const password = useSignal('');
+
+	const onSubmit = async (event: SubmitEvent) => {
+		event.preventDefault();
+		const user = await pb.collection('users').authWithPassword(email.value, password.value);
+		if (pb.authStore.isValid) {
+			route('/' + user.username);
+		}
+	};
+
+	return (
+		<form onSubmit={onSubmit}>
+			<label>
+				Email:
+				<input type="text" value={email} onInput={e => email.value = e.target.value} />
+			</label>
+			<label>
+				Password:
+				<input type="password" value={password} onInput={e => password.value = e.target.value} />
+			</label>
+			<button>Log In</button>
+		</form>
+	);
+};
\ No newline at end of file
diff --git a/src/pages/ProjectsList.tsx b/src/pages/ProjectsList.tsx
new file mode 100644
index 0000000..b30c73e
--- /dev/null
+++ b/src/pages/ProjectsList.tsx
@@ -0,0 +1,49 @@
+import { useContext, useEffect } from 'preact/hooks';
+import { useSignal } from '@preact/signals';
+import { route } from 'preact-router';
+import { Pb } from '../pb.ts';
+
+export const ProjectsList = ({ user }) => {
+	console.log(user);
+	const pb = useContext(Pb);
+	const projects = useSignal(null);
+	const projectName = useSignal('');
+
+	useEffect(() => {
+		pb.collection('projects')
+			.getList(1, 20, { sort: '-mtime' })
+			.then(p => projects.value = p);
+	}, []);
+
+	const onCreateProject = async (event: FormEvent) => {
+		event.preventDefault();
+		const project = await pb.collection('projects').create({
+			name: projectName.value,
+			owner: pb.authStore.model.id,
+		});
+		route(`/${user}/${project.name}`);
+	};
+
+	if (projects.value === null) {
+		return (
+			<p>Loading...</p>
+		);
+	}
+	return (
+		<main>
+			<h1>{user}</h1>
+			<form onSubmit={onCreateProject}>
+				<label>
+					Name:
+					<input type="text" value={projectName} onInput={e => projectName.value = e.target.value} />
+				</label>
+				<button>Create roject</button>
+			</form>
+			<ul>
+				{projects.value.items.map(p => (
+					<li><a href={`/${user}/${p.name}`}>{p.name}</a></li>
+				))}
+			</ul>
+		</main>
+	);
+};
\ No newline at end of file
diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
new file mode 100644
index 0000000..99cc7d6
--- /dev/null
+++ b/src/pages/SignUp.tsx
@@ -0,0 +1,53 @@
+import { useContext } from 'preact/hooks';
+import { useSignal } from '@preact/signals';
+import { route } from 'preact-router';
+import { Pb } from '../pb.ts';
+
+export const SignUp = () => {
+	const pb = useContext(Pb);
+
+	const username = useSignal('');
+	const email = useSignal('');
+	const password = useSignal('');
+	const confirm = useSignal('');
+
+	const onSubmit = async (event: SubmitEvent) => {
+		event.preventDefault();
+		const user = await pb.collection('users').create({
+			username: username.value,
+			email: email.value,
+			emailVisibility: true,
+			password: password.value,
+			passwordConfirm: confirm.value,
+		});
+		if (pb.authStore.isValid) {
+			route('/' + user.username);
+		}
+	};
+
+	return (
+		<main class="container">
+			<article>
+				<form onSubmit={onSubmit}>
+					<label>
+						Username:
+						<input type="text" value={username} onInput={e => username.value = e.target.value} />
+					</label>
+					<label>
+						Email:
+						<input type="text" value={email} onInput={e => email.value = e.target.value} />
+					</label>
+					<label>
+						Password:
+						<input type="password" value={password} onInput={e => password.value = e.target.value} />
+					</label>
+					<label>
+						Confirm Password:
+						<input type="password" value={confirm} onInput={e => confirm.value = e.target.value} />
+					</label>
+					<button>Sign Up</button>
+				</form>
+			</article>
+		</main>
+	);
+};
\ No newline at end of file
diff --git a/src/pages/index.ts b/src/pages/index.ts
new file mode 100644
index 0000000..8b28ea6
--- /dev/null
+++ b/src/pages/index.ts
@@ -0,0 +1,4 @@
+export { Home } from './Home.tsx';
+export { SignUp } from './SignUp.tsx';
+export { LogIn } from './LogIn.tsx';
+export { ProjectsList } from './ProjectsList.tsx';
\ No newline at end of file
-- 
cgit v1.2.3