Its been a while

2026-07-23 10:38:20 -04:00
parent 77f294c972
commit 8b3bb209b3
50 changed files with 4147 additions and 1452 deletions
@@ -0,0 +1,94 @@
+// /app/login/page.tsx
+'use test' // Marks this component as a client component
+'use client'
+
+import classnames from 'classnames';
+
+import { useActionState } from 'react'
+import { signInAndFetchUser } from '@/app/actions/signin'
+
+import { Schibsted_Grotesk } from 'next/font/google'
+import Link from 'next/link';
+import Button from '@/components/Button';
+const font = Schibsted_Grotesk({ subsets: ['latin'] })
+
+export default function SignInPage() {
+  // useActionState manages the server state (errors, loading) and form binding
+  const [state, formAction, isPending] = useActionState(signInAndFetchUser, null)
+
+  return (
+    <div
+      className="h-full flex flex-col items-center justify-center py-6 mt-10 px-4 sm:px-6 lg:px-8"
+    >
+        <div className="flex w-full items-center justify-center text-7xl font-bold text-atmosphere">
+            Britton Benefits
+            {/* <p>Britton</p>
+            <p>Benefits</p> */}
+        </div>
+        <div className={classnames("w-md space-y-4", font.className)}>
+            <div className="mt-10 text-center text-3xl font-extrabold text-light-bronze border-b-2 border-light-bronze">
+                Sign In
+            </div>
+        <form action={formAction}>
+          {/* Error Message Display */}
+          {state?.error && (
+            <div className="rounded-lg bg-red-50 p-3 text-sm text-red-600">
+              {state.error}
+            </div>
+          )}
+
+          <div className="mt-2">
+            <div className="rounded-md shadow-sm -space-y-px">
+                <label className="block text-md font-bold text-platinum">Email</label>
+                <input
+                type="email"
+                name="email"
+                required
+                className="appearance-none rounded-none relative block w-full px-3 py-2 bg-platinum border border-gray-300 placeholder-bluetang text-deepcove rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+                placeholder="you@example.com"
+                />
+            </div>
+          </div>
+
+          <div className="mt-1">
+            <div className="rounded-md shadow-sm -space-y-px">
+                <label className="block text-md font-bold text-platinum">Password</label>
+                <input
+                type="password"
+                name="password"
+                required
+                className="appearance-none rounded-none relative block w-full px-3 py-2 bg-platinum border border-gray-300 placeholder-bluetang text-deepcove rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+                placeholder=""
+                />
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            disabled={isPending}
+            className="relative w-full flex justify-center py-2 px-4 mt-6 border-4 border-cobalt font-bold rounded-lg text-lg text-platinum hover:text-light-bronze bg-cobalt hover:bg-deepcove hover:cursor-pointer"
+          >
+            {isPending ? 'Signing In...' : 'Submit'}
+          </button>
+        </form>
+        {/* <div className="text-bluemana">
+          Not signed up? 
+          <Link 
+          href="/account/signin"
+          >
+          <span className="hover:text-light-bronze">Click here.</span>
+          </Link>
+          </div> */}
+      </div>
+      <div className="text-bluemana mt-4 z-20">
+        Not signed up?{' '}
+        <Link 
+          href="/account/signup"
+          className="underline text-atmosphere hover:text-light-bronze z-10"
+        >
+          Click here.
+        </Link>
+      </div>
+    </div>
+  )
+}