Feat/login page

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/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,96 @@
+"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";
+import { cn } from "@/lib/utils/utils";
+
+import ButtonStyles from "@/lib/components/Button/Button.module.css";
+
+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." }),
+});
+
+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>) => {
+		router.push(LOGIN_PATH);
+	};
+
+	return (
+		<div className="flex flex-col justify-center items-center min-h-screen">
+			<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-white
+                        py-10 px-10 rounded-md drop-shadow-lg"
+					>
+						<FormField
+							control={form.control}
+							name="email"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xl md:text-3xl text-slate-800 underline underline-offset-4">
+										Email Address
+									</FormLabel>
+									<FormControl>
+										<Input
+											className="text-black text-xs sm:text-base -translate-x-1 bg-slate-200"
+											placeholder="[email protected]"
+											{...field}
+										/>
+									</FormControl>
+									<FormDescription className="text-xs">
+										UCI students will log in with UCI SSO.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<Button
+							type="submit"
+							className={cn(
+								"h-14 text-2xl shadow-lg hover:scale-105 transition ease-in",
+								ButtonStyles.button,
+							)}
+						>
+							Submit
+						</Button>
+					</form>
+				</Form>
+			</section>
+		</div>
+	);
+}