Feature/sign in page (#46)

* Wire Sign in buttons directly to Keycloak, remove /sign-in placeholder

Sign in buttons in LandingTopBar and the landing page hero now call
signIn("keycloak") directly, bypassing the redundant /sign-in page.
The /sign-in route is removed; hero CTAs are extracted to a client
component so the server-side session check in page.tsx is preserved.

Closes #43

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Fix sign-in buttons breaking after back navigation from Keycloak

signIn() from next-auth/react uses window.location.href to redirect,
which bypasses Next.js's router. On back navigation the router is left
in a stale navigating state, silently swallowing subsequent onClick
calls. Switching to a server action invoked via native form submission
issues the OAuth redirect as an HTTP response, keeping the router
untouched so the page remains fully interactive after pressing back.

Also replaces the TopBar Sign up router.push with a Link for the same
reason.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: dcl10

frontend/app/_LandingCTA.tsx

@@ -0,0 +1,29 @@
+import Link from "next/link";
+
+import { signInWithKeycloak } from "./actions";
+
+/**
+ * Hero call-to-action buttons for the landing page.
+ * Sign in uses a server action so the OAuth redirect is issued as an HTTP
+ * response, avoiding client-side router state corruption on back navigation.
+ */
+export function LandingCTA() {
+  return (
+    <div className="flex items-center gap-3">
+      <form action={signInWithKeycloak}>
+        <button
+          type="submit"
+          className="inline-flex items-center gap-2 font-sans font-medium tracking-[-0.005em] rounded-sm px-[16px] py-[9px] text-[14px] bg-paper text-ink border border-[var(--border-strong)] hover:bg-portland-stone transition-colors duration-[120ms] cursor-pointer"
+        >
+          Sign in
+        </button>
+      </form>
+      <Link
+        href="/sign-up"
+        className="inline-flex items-center gap-2 font-sans font-medium tracking-[-0.005em] rounded-sm px-[16px] py-[9px] text-[14px] bg-nottingham-blue text-paper border border-nottingham-blue hover:bg-[var(--color-primary-deep)] transition-colors duration-[120ms]"
+      >
+        Sign up
+      </Link>
+    </div>
+  );
+}

frontend/app/actions.ts

@@ -0,0 +1,13 @@
+"use server";
+
+import { signIn } from "@/auth";
+
+/**
+ * Initiates the Keycloak OAuth flow via a server action.
+ * Using a server action (rather than signIn from next-auth/react) ensures
+ * the redirect to Keycloak is issued as an HTTP response, keeping the
+ * Next.js router state intact so the back button works correctly.
+ */
+export async function signInWithKeycloak() {
+  await signIn("keycloak", { redirectTo: "/dashboard" });
+}

frontend/app/page.tsx

@@ -1,9 +1,10 @@
-import Link from "next/link";
 import { redirect } from "next/navigation";
 
 import { LandingTopBar } from "@/components/shared";
 import { getSession } from "@/lib/auth";
 
+import { LandingCTA } from "./_LandingCTA";
+
 export default async function HomePage() {
   const session = await getSession();
   if (session) redirect("/dashboard");
@@ -19,20 +20,7 @@ export default async function HomePage() {
           The Digital Research Service skills-matching platform. Connect
           researchers with the expertise your project needs.
         </p>
-        <div className="flex items-center gap-3">
-          <Link
-            href="/sign-in"
-            className="inline-flex items-center gap-2 font-sans font-medium tracking-[-0.005em] rounded-sm px-[16px] py-[9px] text-[14px] bg-paper text-ink border border-[var(--border-strong)] hover:bg-portland-stone transition-colors duration-[120ms]"
-          >
-            Sign in
-          </Link>
-          <Link
-            href="/sign-up"
-            className="inline-flex items-center gap-2 font-sans font-medium tracking-[-0.005em] rounded-sm px-[16px] py-[9px] text-[14px] bg-nottingham-blue text-paper border border-nottingham-blue hover:bg-[var(--color-primary-deep)] transition-colors duration-[120ms]"
-          >
-            Sign up
-          </Link>
-        </div>
+        <LandingCTA />
       </main>
     </>
   );

frontend/app/sign-in/page.tsx

@@ -1,17 +1,18 @@
 "use client";
 
-import { useRouter } from "next/navigation";
+import Link from "next/link";
 
+import { signInWithKeycloak } from "@/app/actions";
 import { Button } from "@/components/core";
 import { useViewport } from "@/lib/hooks/useViewport";
+import { cn } from "@/lib/utils";
 
 /**
  * Sticky navigation bar for unauthenticated visitors.
  * Shows the UoN logo and Matchboard branding with Sign in / Sign up buttons.
  * Excludes search, notifications, and user-specific controls.
  */
 export function LandingTopBar() {
-  const router = useRouter();
   const { isMobile } = useViewport();
 
   return (
@@ -57,20 +58,28 @@ export function LandingTopBar() {
       <div className="flex-1" />
 
       <div className="flex items-center gap-2">
-        <Button
-          variant="secondary"
-          size={isMobile ? "sm" : "md"}
-          onClick={() => router.push("/sign-in")}
-        >
-          Sign in
-        </Button>
-        <Button
-          variant="primary"
-          size={isMobile ? "sm" : "md"}
-          onClick={() => router.push("/sign-up")}
+        <form action={signInWithKeycloak}>
+          <Button
+            variant="secondary"
+            size={isMobile ? "sm" : "md"}
+            type="submit"
+          >
+            Sign in
+          </Button>
+        </form>
+        <Link
+          href="/sign-up"
+          className={cn(
+            "inline-flex items-center gap-2 font-sans font-medium tracking-[-0.005em] rounded-sm",
+            "transition-[background-color,transform,border-color] duration-[120ms] ease-[cubic-bezier(0.2,0,0,1)]",
+            "bg-nottingham-blue text-paper border border-nottingham-blue hover:bg-[var(--color-primary-deep)]",
+            isMobile
+              ? "px-[10px] py-[5px] text-[12px]"
+              : "px-[16px] py-[9px] text-[14px]",
+          )}
         >
           Sign up
-        </Button>
+        </Link>
       </div>
     </header>
   );