Feat/login page

README.md

@@ -16,21 +16,21 @@ This Turborepo includes the following packages/apps:
 
 ### Apps and Packages
 
-- `docs`: a [Next.js](https://nextjs.org/) app
-- `web`: another [Next.js](https://nextjs.org/) app
-- `ui`: a stub React component library shared by both `web` and `docs` applications
-- `eslint-config-custom`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
-- `tsconfig`: `tsconfig.json`s used throughout the monorepo
+-   `docs`: a [Next.js](https://nextjs.org/) app
+-   `web`: another [Next.js](https://nextjs.org/) app
+-   `ui`: a stub React component library shared by both `web` and `docs` applications
+-   `eslint-config-custom`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
+-   `tsconfig`: `tsconfig.json`s used throughout the monorepo
 
 Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
 
 ### Utilities
 
 This Turborepo has some additional tools already setup for you:
 
-- [TypeScript](https://www.typescriptlang.org/) for static type checking
-- [ESLint](https://eslint.org/) for code linting
-- [Prettier](https://prettier.io) for code formatting
+-   [TypeScript](https://www.typescriptlang.org/) for static type checking
+-   [ESLint](https://eslint.org/) for code linting
+-   [Prettier](https://prettier.io) for code formatting
 
 ### Build
 
@@ -73,9 +73,9 @@ npx turbo link
 
 Learn more about the power of Turborepo:
 
-- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks)
-- [Caching](https://turbo.build/repo/docs/core-concepts/caching)
-- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching)
-- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering)
-- [Configuration Options](https://turbo.build/repo/docs/reference/configuration)
-- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference)
+-   [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks)
+-   [Caching](https://turbo.build/repo/docs/core-concepts/caching)
+-   [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching)
+-   [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering)
+-   [Configuration Options](https://turbo.build/repo/docs/reference/configuration)
+-   [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference)

apps/sanity/README.md

@@ -4,6 +4,6 @@ Congratulations, you have now installed the Sanity Content Studio, an open sourc
 
 Now you can do the following things:
 
-- [Read “getting started” in the docs](https://www.sanity.io/docs/introduction/getting-started?utm_source=readme)
-- [Join the community Slack](https://slack.sanity.io/?utm_source=readme)
-- [Extend and build plugins](https://www.sanity.io/docs/content-studio/extending?utm_source=readme)
+-   [Read “getting started” in the docs](https://www.sanity.io/docs/introduction/getting-started?utm_source=readme)
+-   [Join the community Slack](https://slack.sanity.io/?utm_source=readme)
+-   [Extend and build plugins](https://www.sanity.io/docs/content-studio/extending?utm_source=readme)

apps/sanity/sanity.cli.ts

@@ -1,8 +1,8 @@
-import {defineCliConfig} from 'sanity/cli'
+import { defineCliConfig } from "sanity/cli";
 
 export default defineCliConfig({
-  api: {
-    projectId: 'fosuyru0',
-    dataset: 'production'
-  }
-})
+	api: {
+		projectId: "fosuyru0",
+		dataset: "production",
+	},
+});

apps/sanity/sanity.config.ts

@@ -1,19 +1,19 @@
-import {defineConfig} from 'sanity'
-import {deskTool} from 'sanity/desk'
-import {visionTool} from '@sanity/vision'
-import {colorInput} from '@sanity/color-input'
-import {schemaTypes} from './schemas'
+import { defineConfig } from "sanity";
+import { deskTool } from "sanity/desk";
+import { visionTool } from "@sanity/vision";
+import { colorInput } from "@sanity/color-input";
+import { schemaTypes } from "./schemas";
 
 export default defineConfig({
-  name: 'default',
-  title: 'irvinehacks-site-2024',
+	name: "default",
+	title: "irvinehacks-site-2024",
 
-  projectId: 'fosuyru0',
-  dataset: 'production',
+	projectId: "fosuyru0",
+	dataset: "production",
 
-  plugins: [deskTool(), visionTool(), colorInput()],
+	plugins: [deskTool(), visionTool(), colorInput()],
 
-  schema: {
-    types: schemaTypes,
-  },
-})
+	schema: {
+		types: schemaTypes,
+	},
+});

apps/sanity/schemas/faqs.ts

@@ -28,7 +28,9 @@ export default defineType({
 							of: [
 								defineArrayMember({
 									type: "block",
-									styles: [{ title: "Normal", value: "normal" }],
+									styles: [
+										{ title: "Normal", value: "normal" },
+									],
 									lists: [],
 								}),
 							],
@@ -43,7 +45,9 @@ export default defineType({
 						prepare({ title, subtitle }) {
 							return {
 								title,
-								subtitle: subtitle ? toPlainText(subtitle) : undefined,
+								subtitle: subtitle
+									? toPlainText(subtitle)
+									: undefined,
 								media: FileQuestion,
 							};
 						},

apps/site/README.md

@@ -24,8 +24,8 @@ This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-opti
 
 To learn more about Next.js, take a look at the following resources:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+-   [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+-   [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 

apps/site/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "@/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils/utils"
+  }
+}

apps/site/package.json

@@ -10,25 +10,35 @@
 	},
 	"dependencies": {
 		"@fireworks-js/react": "^2.10.7",
+		"@hookform/resolvers": "^3.3.2",
 		"@portabletext/react": "^3.0.11",
 		"@radix-ui/react-accordion": "^1.1.2",
 		"@radix-ui/react-checkbox": "^1.0.4",
+		"@radix-ui/react-collapsible": "^1.0.3",
+		"@radix-ui/react-label": "^2.0.2",
 		"@radix-ui/react-navigation-menu": "^1.1.4",
 		"@radix-ui/react-select": "^2.0.0",
+		"@radix-ui/react-separator": "^1.0.3",
+		"@radix-ui/react-slot": "^1.0.2",
 		"@radix-ui/react-tabs": "^1.0.4",
 		"@radix-ui/react-toast": "^1.1.5",
 		"@react-three/drei": "^9.88.14",
 		"@react-three/fiber": "^8.15.11",
 		"@sanity/image-url": "^1.0.2",
 		"@types/three": "^0.158.2",
 		"axios": "^1.6.2",
+		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.0.0",
+		"date-fns-tz": "^2.0.0",
 		"framer-motion": "^10.16.14",
 		"lucide-react": "^0.292.0",
 		"next": "13.5.6",
 		"next-sanity": "^5.5.4",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-hook-form": "^7.49.2",
+		"tailwind-merge": "^2.1.0",
+		"tailwindcss-animate": "^1.0.7",
 		"three": "^0.158.0",
 		"tunnel-rat": "^0.1.2",
 		"zod": "^3.22.4"

apps/site/src/app/(home)/components/Fireflies.tsx

@@ -56,7 +56,8 @@ const Fireflies = () => {
 						1.4123945236206055, 1.3441721200942993,
 						1.2065531015396118, 4.578973770141602,
 						2.351515769958496, 2.9505105018615723,
-						2.4308571815490723, 2.1237339973449707, 0.5060793161392212, 2.4199981689453125,
+						2.4308571815490723, 2.1237339973449707,
+						0.5060793161392212, 2.4199981689453125,
 						4.7787370681762695, 3.6893203258514404,
 						2.25410532951355, 2.670276403427124, 2.374255418777466,
 						3.4126408100128174, 4.4318952560424805,
@@ -101,7 +102,8 @@ const Fireflies = () => {
 						1.4123945236206055, 1.3441721200942993,
 						1.2065531015396118, 4.578973770141602,
 						2.351515769958496, 2.9505105018615723,
-						2.4308571815490723, 2.1237339973449707,0.5060793161392212, 2.4199981689453125,
+						2.4308571815490723, 2.1237339973449707,
+						0.5060793161392212, 2.4199981689453125,
 						4.7787370681762695, 3.6893203258514404,
 						2.25410532951355, 2.670276403427124, 2.374255418777466,
 						3.4126408100128174, 4.4318952560424805,

apps/site/src/app/(home)/sections/index.ts

@@ -2,4 +2,4 @@ export { default as Landing } from "./Landing/Landing";
 export { default as About } from "./About/About";
 export { default as MentorVolunteer } from "./MentorVolunteer/MentorVolunteer";
 export { default as FAQ } from "./FAQ/FAQ";
-export { default as Sponsors } from "./Sponsors/Sponsors"
+export { default as Sponsors } from "./Sponsors/Sponsors";

apps/site/src/app/globals.css

@@ -5,6 +5,79 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 222.2 84% 4.9%;
+
+		--card: 0 0% 100%;
+		--card-foreground: 222.2 84% 4.9%;
+
+		--popover: 0 0% 100%;
+		--popover-foreground: 222.2 84% 4.9%;
+
+		--primary: 222.2 47.4% 11.2%;
+		--primary-foreground: 210 40% 98%;
+
+		--secondary: 210 40% 96.1%;
+		--secondary-foreground: 222.2 47.4% 11.2%;
+
+		--muted: 210 40% 96.1%;
+		--muted-foreground: 215.4 16.3% 46.9%;
+
+		--accent: 210 40% 96.1%;
+		--accent-foreground: 222.2 47.4% 11.2%;
+
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 210 40% 98%;
+
+		--border: 214.3 31.8% 91.4%;
+		--input: 214.3 31.8% 91.4%;
+		--ring: 222.2 84% 4.9%;
+
+		--radius: 0.5rem;
+	}
+
+	.dark {
+		--background: 222.2 84% 4.9%;
+		--foreground: 210 40% 98%;
+
+		--card: 222.2 84% 4.9%;
+		--card-foreground: 210 40% 98%;
+
+		--popover: 222.2 84% 4.9%;
+		--popover-foreground: 210 40% 98%;
+
+		--primary: 210 40% 98%;
+		--primary-foreground: 222.2 47.4% 11.2%;
+
+		--secondary: 217.2 32.6% 17.5%;
+		--secondary-foreground: 210 40% 98%;
+
+		--muted: 217.2 32.6% 17.5%;
+		--muted-foreground: 215 20.2% 65.1%;
+
+		--accent: 217.2 32.6% 17.5%;
+		--accent-foreground: 210 40% 98%;
+
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 210 40% 98%;
+
+		--border: 217.2 32.6% 17.5%;
+		--input: 217.2 32.6% 17.5%;
+		--ring: 212.7 26.8% 83.9%;
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
+
 :root {
 	--color-cream: #fffce2;
 	--color-brown: #432810;

apps/site/src/app/login/page.tsx

@@ -0,0 +1,98 @@
+"use client";
+import { useRouter } from "next/navigation";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import {
+	Form,
+	FormItem,
+	FormControl,
+	FormDescription,
+	FormLabel,
+	FormField,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+
+export const revalidate = 60;
+
+const LOGIN_PATH = "/api/user/login";
+
+const formSchema = z.object({
+	email: z
+		.string()
+		.email({ message: "Sorry, that email address is invalid." })
+		.refine((email) => email.endsWith(".edu"), {
+			message:
+				"Sorry, only emails that end in '.edu' are allowed to log in.",
+		}),
+});
+
+export default function Home() {
+	const router = useRouter();
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			email: "",
+		},
+	});
+
+	const onSubmit = (e: z.infer<typeof formSchema>) => {
+		console.log("submit", e);
+		router.push(LOGIN_PATH);
+	};
+
+	return (
+		<div className="flex flex-col justify-center items-center">
+			<section className="m-36 w-2/3 xl:w-2/5">
+				<h1 className="mb-10 text-4xl md:text-5xl font-bold text-center">
+					Login
+				</h1>
+				<Separator className="mb-10" />
+				<Form {...form}>
+					<form
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="space-y-8 bg-gradient-radial to-blue-900 from-blue-950
+                        py-10 px-10 rounded-md drop-shadow-lg"
+					>
+						<FormField
+							control={form.control}
+							name="email"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-3xl">
+										Email Address
+									</FormLabel>
+									<FormControl>
+										<Input
+											className="text-black"
+											placeholder="[email protected]"
+											{...field}
+										/>
+									</FormControl>
+									<FormDescription>
+										UCI students will log in with UCI SSO.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<Button
+							type="submit"
+							className="w-1/5 h-14 hover:text-gray-500 active:text-black text-2xl
+                             bg-cyan-400 hover:bg-cyan-300 active:bg-cyan-500
+                             shadow-slate-500/50 shadow-lg hover:shadow-slate-500/80
+                             hover:scale-105 transition ease-in"
+						>
+							Submit
+						</Button>
+					</form>
+				</Form>
+			</section>
+		</div>
+	);
+}