From e5dc2e9329f9027e814394e8799fa1d83883ec0d Mon Sep 17 00:00:00 2001
From: Taesung Hwang <44419552+taesungh@users.noreply.github.com>
Date: Sat, 16 Dec 2023 10:02:44 -0800
Subject: [PATCH] Add temporary unstyled Login and Guest Login forms (#98)

- Temporarily include unstyled versions of the Login and Guest Login
  forms from last year's site to test the login functionality and flow
- Include basic `Portal` showing user identity, similar to previous demo
---
 apps/site/src/app/guest-login/GuestLogin.tsx  | 15 +++++++
 .../components/VerificationForm.tsx           | 39 +++++++++++++++++++
 apps/site/src/app/guest-login/page.tsx        |  6 +++
 apps/site/src/app/login/Login.tsx             | 14 +++++++
 .../src/app/login/components/LoginForm.tsx    | 32 +++++++++++++++
 apps/site/src/app/login/page.tsx              |  7 ++++
 apps/site/src/app/portal/Portal.tsx           | 22 +++++++++++
 apps/site/src/app/portal/page.tsx             |  1 +
 .../ValidatingForm/ValidatingForm.tsx         | 33 ++++++++++++++++
 9 files changed, 169 insertions(+)
 create mode 100644 apps/site/src/app/guest-login/GuestLogin.tsx
 create mode 100644 apps/site/src/app/guest-login/components/VerificationForm.tsx
 create mode 100644 apps/site/src/app/guest-login/page.tsx
 create mode 100644 apps/site/src/app/login/Login.tsx
 create mode 100644 apps/site/src/app/login/components/LoginForm.tsx
 create mode 100644 apps/site/src/app/login/page.tsx
 create mode 100644 apps/site/src/app/portal/Portal.tsx
 create mode 100644 apps/site/src/app/portal/page.tsx
 create mode 100644 apps/site/src/lib/components/ValidatingForm/ValidatingForm.tsx

diff --git a/apps/site/src/app/guest-login/GuestLogin.tsx b/apps/site/src/app/guest-login/GuestLogin.tsx
new file mode 100644
index 00000000..f1cdd8ea
--- /dev/null
+++ b/apps/site/src/app/guest-login/GuestLogin.tsx
@@ -0,0 +1,15 @@
+import VerificationForm from "./components/VerificationForm";
+
+function GuestLogin() {
+	return (
+		<div className="min-h-screen flex flex-col justify-center bg-white text-black">
+			<h1>Log In</h1>
+			<p>
+				A login passphrase was sent to your email. Please enter the passphrase.
+			</p>
+			<VerificationForm />
+		</div>
+	);
+}
+
+export default GuestLogin;
diff --git a/apps/site/src/app/guest-login/components/VerificationForm.tsx b/apps/site/src/app/guest-login/components/VerificationForm.tsx
new file mode 100644
index 00000000..921bd4b6
--- /dev/null
+++ b/apps/site/src/app/guest-login/components/VerificationForm.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+
+import ValidatingForm from "@/lib/components/ValidatingForm/ValidatingForm";
+
+const VERIFICATION_PATH = "/api/guest/verify";
+const PASSPHRASE_REGEX = /\w+-\w+-\w+-\w+/;
+
+function VerificationForm() {
+	const searchParams = useSearchParams();
+	const email = searchParams.get("email");
+
+	if (!email) {
+		return <p>Error: email was not provided</p>;
+	}
+
+	return (
+		<ValidatingForm method="post" action={VERIFICATION_PATH}>
+			<input type="email" name="email" value={email} readOnly hidden />
+			<div>
+				<label>Passphrase</label>
+				<input
+					type="text"
+					pattern={PASSPHRASE_REGEX.source}
+					required
+					name="passphrase"
+					placeholder="Enter passphrase"
+				/>
+				<p className="feedback invalid">
+					Sorry, that passphrase is invalid.
+				</p>
+			</div>
+			<button type="submit">Continue</button>
+		</ValidatingForm>
+	);
+}
+
+export default VerificationForm;
diff --git a/apps/site/src/app/guest-login/page.tsx b/apps/site/src/app/guest-login/page.tsx
new file mode 100644
index 00000000..ebd0556e
--- /dev/null
+++ b/apps/site/src/app/guest-login/page.tsx
@@ -0,0 +1,6 @@
+import { Metadata } from "next";
+export const metadata: Metadata = {
+	title: "Guest Login | IrvineHacks 2024",
+};
+
+export { default as default } from "./GuestLogin";
diff --git a/apps/site/src/app/login/Login.tsx b/apps/site/src/app/login/Login.tsx
new file mode 100644
index 00000000..c13a937c
--- /dev/null
+++ b/apps/site/src/app/login/Login.tsx
@@ -0,0 +1,14 @@
+import LoginForm from "./components/LoginForm";
+
+function Login() {
+	// TODO: check if user is already authenticated
+
+	return (
+		<div className="min-h-screen flex flex-col justify-center bg-white text-black">
+			<h1>Log In</h1>
+			<LoginForm />
+		</div>
+	);
+}
+
+export default Login;
diff --git a/apps/site/src/app/login/components/LoginForm.tsx b/apps/site/src/app/login/components/LoginForm.tsx
new file mode 100644
index 00000000..aa3a7144
--- /dev/null
+++ b/apps/site/src/app/login/components/LoginForm.tsx
@@ -0,0 +1,32 @@
+import ValidatingForm from "@/lib/components/ValidatingForm/ValidatingForm";
+
+const EMAIL_REGEX = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/;
+const LOGIN_PATH = "/api/user/login";
+
+function LoginForm() {
+	return (
+		<ValidatingForm method="post" action={LOGIN_PATH}>
+			<div>
+				<label>Email address</label>
+				<input
+					type="email"
+					pattern={EMAIL_REGEX.source}
+					required
+					name="email"
+					placeholder="Enter email"
+					aria-describedby="email-description"
+				/>
+				<div className="feedback invalid">
+					Sorry, that email address is invalid.
+				</div>
+				<p id="email-description" className="muted">
+					UCI students will log in with UCI SSO. Please make sure to
+					use your school email address if you have one.
+				</p>
+			</div>
+			<button type="submit">Continue</button>
+		</ValidatingForm>
+	);
+}
+
+export default LoginForm;
diff --git a/apps/site/src/app/login/page.tsx b/apps/site/src/app/login/page.tsx
new file mode 100644
index 00000000..b0df624c
--- /dev/null
+++ b/apps/site/src/app/login/page.tsx
@@ -0,0 +1,7 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: "Log In | IrvineHacks 2024",
+};
+
+export { default as default } from "./Login";
diff --git a/apps/site/src/app/portal/Portal.tsx b/apps/site/src/app/portal/Portal.tsx
new file mode 100644
index 00000000..b79a4d2b
--- /dev/null
+++ b/apps/site/src/app/portal/Portal.tsx
@@ -0,0 +1,22 @@
+import api from "@/lib/utils/api";
+
+async function getIdentity(): Promise<string> {
+	const res = await api.get<string>("/user/me");
+	return res.data;
+}
+
+async function Portal() {
+	const identity = await getIdentity();
+	return (
+		<div className="min-h-screen flex flex-col justify-center bg-white text-black">
+			<h1>Hello</h1>
+			{Object.entries(identity).map(([key, value]) => (
+				<p key={key}>
+					{key} - {value}
+				</p>
+			))}
+		</div>
+	);
+}
+
+export default Portal;
diff --git a/apps/site/src/app/portal/page.tsx b/apps/site/src/app/portal/page.tsx
new file mode 100644
index 00000000..d4047cd5
--- /dev/null
+++ b/apps/site/src/app/portal/page.tsx
@@ -0,0 +1 @@
+export { default as default } from "./Portal";
diff --git a/apps/site/src/lib/components/ValidatingForm/ValidatingForm.tsx b/apps/site/src/lib/components/ValidatingForm/ValidatingForm.tsx
new file mode 100644
index 00000000..5c776daa
--- /dev/null
+++ b/apps/site/src/lib/components/ValidatingForm/ValidatingForm.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { FormEvent, PropsWithChildren, useState } from "react";
+
+interface FormProps {
+	action?: string;
+	method?: string;
+}
+
+function ValidatingForm(props: PropsWithChildren<FormProps>) {
+	const [validated, setValidated] = useState<boolean>(false);
+
+	const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+		const form = event.currentTarget;
+		if (!form.checkValidity()) {
+			// prevent submission to display validation feedback
+			event.preventDefault();
+		}
+		setValidated(true);
+	};
+
+	return (
+		<form
+			onSubmit={handleSubmit}
+			noValidate // use custom validation feedback
+			className={validated ? "validated" : ""}
+			// validated={validated}
+			{...props}
+		/>
+	);
+}
+
+export default ValidatingForm;