AUTH-14 Created basic UI components for Login Page

src/app/globals.css

@@ -24,3 +24,17 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+h1 {
+  color: #C8102E;
+}
+
+button {
+  background-color: #C8102E;
+  color: white;
+  text-align: center;
+}
+
+button:hover {
+  background-color: #a8001e;
+}

src/app/login/EmailForm.tsx

@@ -0,0 +1,34 @@
+"use client";
+import { useState } from "react";
+
+interface Props {
+    onNext: () => void;
+}
+
+export function EmailForm({ onNext }: Props) {
+    const [email, setEmail] = useState("");
+
+    function handleSubmit(e: React.SubmitEvent) {
+    e.preventDefault();
+    onNext();
+    }
+
+    return (
+    <form onSubmit={handleSubmit} className="w-125 bg-white flex flex-col items-center justify-center p-8 text-xl rounded-4xl shadow-lg">
+        <input
+        className="w-full p-4 m-4 bg-gray-200 rounded-lg"
+        type="email"
+        placeholder="you@example.com"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        required
+        />
+        <button
+        className="w-80 p-2 pl-4 pr-4 m-4 rounded-4xl"
+        type="submit"
+        >
+        Send Code
+        </button>
+    </form>
+    );
+}

src/app/login/OtpForm.tsx

@@ -0,0 +1,54 @@
+"use client";
+import { useState, useEffect } from "react";
+
+interface Props {
+onResend: () => void;
+}
+
+export function OtpForm({ onResend }: Props) {
+    const [otp, setOtp] = useState("");
+    const [cooldown, setCooldown] = useState(15);
+
+    useEffect(() => {
+    if (cooldown <= 0) return;
+    const t = setTimeout(() => setCooldown((c) => c - 1), 1000);
+    return () => clearTimeout(t);
+    }, [cooldown]);
+
+    function handleSubmit(e: React.SubmitEvent) {
+    e.preventDefault();
+    }
+
+    function handleResend() {
+    onResend();
+    setCooldown(15);
+    }
+
+    return (
+    <form onSubmit={handleSubmit} className="w-125 bg-white flex flex-col items-center justify-center p-8 text-xl rounded-4xl shadow-lg">
+        <input
+        className="w-full p-4 m-4 bg-gray-200 rounded-lg tracking-widest text-center"
+        type="text"
+        placeholder="XXXXXX"
+        maxLength={6}
+        value={otp}
+        onChange={(e) => setOtp(e.target.value)}
+        required
+        />
+        <button
+        className="w-80 p-2 pl-4 pr-4 m-4 rounded-4xl"
+        type="submit"
+        >
+        Verify Code
+        </button>
+        <button
+        type="button"
+        onClick={handleResend}
+        disabled={cooldown > 0}
+        className="text-sm text-gray-400 disabled:opacity-50"
+        >
+        {cooldown > 0 ? `Resend code in ${cooldown}s` : "Resend code"}
+        </button>
+    </form>
+    );
+}

src/app/login/page.tsx

@@ -0,0 +1,27 @@
+"use client";
+import Image from "next/image";
+import { useState } from "react";
+import { EmailForm } from "./EmailForm";
+import { OtpForm } from "./OtpForm";
+
+type Step = "email" | "otp";
+
+export default function LoginPage() {
+  const [step, setStep] = useState<Step>("email");
+
+  return (
+    <main className="min-h-screen bg-gradient-to-b from-white to-red-200">
+      <div className="flex flex-col items-center justify-center">
+        <Image className="m-8" src="/SGA_logo.png" alt="Logo" width={350} height={150} style={{ height: "auto" }} loading="eager" />
+        <div className="flex flex-col items-center justify-center pt-4">
+          <h1 className="font-bold text-4xl m-8">Login</h1>
+          {step === "email" ? (
+            <EmailForm onNext={() => setStep("otp")} />
+          ) : (
+            <OtpForm onResend={() => {}} />
+          )}
+        </div>
+      </div>
+    </main>
+  );
+}