[L] Add membership page

app/app.css

@@ -1,17 +1,54 @@
 @import "tailwindcss";
 
 @theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans:
+    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --color-primary: #be2361;
   --color-secondary: #cf276a;
+  --color-button-active: #d23876;
 }
 
 html,
 body {
-  @apply bg-white dark:bg-gray-950;
-
   @media (prefers-color-scheme: light) {
     color-scheme: light;
   }
 }
+a {
+  color: #337ab7;
+}
+a:hover {
+  color: #23527c;
+  text-decoration: underline;
+}
+a.navbar {
+  color: white;
+}
+a.navbar:hover {
+  color: rgb(245, 209, 209);
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #000;
+  font-family: "Bree Serif", sans-serif;
+  font-weight: 800;
+  a {
+    color: black;
+  }
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+h1 {
+  font-size: 30px;
+}
+h2 {
+  font-size: 24px;
+}
+h4 {
+  font-size: 20px;
+}

app/root.tsx

@@ -1,16 +1,29 @@
 import {
+  data,
   isRouteErrorResponse,
   Links,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
+  redirect,
+  matchPath,
+  useLoaderData,
 } from "react-router";
 
 import type { Route } from "./+types/root";
-import { MainNavbar } from "../components/main-navbar";
+import { MainNavbar, type NavigationItem } from "../components/main-navbar";
 import "./app.css";
 
+import { supabaseClientFromRequest } from "components/auth/client";
+import {
+  Role,
+  RoleContext,
+  type RoleData,
+  type SerializedRole,
+} from "components/auth/roles";
+import { ToastContainer, ToastProvider } from "components/core/toast";
+
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
   {
@@ -20,7 +33,7 @@ export const links: Route.LinksFunction = () => [
   },
   {
     rel: "stylesheet",
-    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+    href: "https://fonts.googleapis.com/css2?family=Bree+Serif&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
   },
 ];
 
@@ -42,20 +55,95 @@ export function Layout({ children }: { children: React.ReactNode }) {
   );
 }
 
-export default function App() {
+export default function App({ params }: Route.ComponentProps) {
+  let roleJSON = useLoaderData<SerializedRole | null>();
+  let role =
+    roleJSON != null ? new Role(roleJSON.userId, roleJSON.roles) : null;
+
+  var navigationItems: NavigationItem[] = [];
+  if (role != null && role.isMember()) {
+    navigationItems = [
+      { name: "Home", href: "/members" },
+      { name: "Applications", href: "/members/applications" },
+      { name: "Edit Profile", href: "/members/profile" },
+      { name: "Manage Membership", href: "/members/membership" },
+    ];
+  } else if (role != null && role.isProspectiveMember()) {
+    navigationItems = [{ name: "Application", href: `/members/applications` }];
+  }
+
   return (
-    <div className="min-h-screen bg-[#ebebeb]">
-      <div className="mx-auto">
-        <MainNavbar />
-        <main className="px-4 sm:px-6 lg:px-8 py-8">
+    <div className="min-h-screen bg-[#ebebeb] mx-auto">
+      <ToastProvider>
+        <MainNavbar navigationItems={navigationItems} />
+        <main className="px-4 sm:px-6 lg:px-8 py-8 max-w-4xl mx-auto">
+          <ToastContainer />
           <Outlet />
         </main>
-      </div>
+      </ToastProvider>
     </div>
   );
 }
 
-export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+export async function loader({
+  request,
+  context,
+}: Route.LoaderArgs): Promise<SerializedRole | null> {
+  let role: Role | null = context.get(RoleContext);
+  return role != null
+    ? {
+        userId: role.userId,
+        roles: role.roles,
+      }
+    : null;
+}
+
+async function authMiddleware({ request, context }, next) {
+  const requestURL = new URL(request.url);
+  var { supabaseClient, headers } = supabaseClientFromRequest(request);
+
+  var userId: string | null = null;
+  var criticalAuthPath: boolean = false;
+  if (supabaseClient) {
+    const { data, error } = await supabaseClient.auth.getUser();
+    userId = data?.user?.id ?? null;
+  }
+  criticalAuthPath =
+    requestURL.pathname == "/signin" ||
+    requestURL.pathname == "/auth-callback" ||
+    requestURL.pathname == "/logout";
+
+  if (!criticalAuthPath) {
+    if (!userId) {
+      return redirect("/signin");
+    }
+
+    const { data: roleData, error: roleError } = await supabaseClient
+      .from("user_role_view")
+      .select();
+    let role: Role | null = null;
+    if (roleData && userId) {
+      role = new Role(userId, roleData as RoleData[]);
+      context.set(RoleContext, role);
+    }
+    if (!role) {
+      throw new Response(null, { status: 404, statusText: "Not Found" });
+    }
+  }
+  const response = await next();
+  for (const [key, value] of headers.entries()) {
+    response.headers.set(key, value);
+  }
+  return response;
+}
+
+export const middleware = [authMiddleware];
+
+export function HydrateFallback() {
+  return <div>Loading...</div>;
+}
+
+export function ErrorBoundary({ params, error }: Route.ErrorBoundaryProps) {
   let message = "Oops!";
   let details = "An unexpected error occurred.";
   let stack: string | undefined;
@@ -72,7 +160,7 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
   }
 
   return (
-    <main className="pt-16 p-4 container mx-auto">
+    <main className="pt-16 p-4 container mx-auto bg-white">
       <h1>{message}</h1>
       <p>{details}</p>
       {stack && (

app/routes.ts

@@ -1,13 +1,32 @@
-import { type RouteConfig, index, route, layout, prefix } from "@react-router/dev/routes";
+import {
+  type RouteConfig,
+  index,
+  route,
+  layout,
+  prefix,
+} from "@react-router/dev/routes";
 
 export default [
   index("routes/redirect.tsx"),
   ...prefix("members", [
     layout("routes/members.tsx", [
       index("routes/members.home.tsx"),
       route("applications", "routes/members.applications.tsx"),
+      route(
+        "applications/:application_id",
+        "routes/members.applications.detail.tsx"
+      ),
+      route(
+        "applications/:application_id/edit",
+        "routes/members.applications.edit.tsx"
+      ),
       route("profile", "routes/members.profile.tsx"),
+      route("/:profile_id", "routes/members.profile.detail.tsx"),
       route("membership", "routes/members.membership.tsx"),
     ]),
   ]),
+  route("auth-callback", "routes/auth-callback.tsx"),
+  route("link-identity", "routes/link-identity.tsx"),
+  route("signin", "routes/signin.tsx"),
+  route("logout", "routes/logout.tsx"),
 ] satisfies RouteConfig;

app/routes/auth-callback.tsx

@@ -0,0 +1,21 @@
+import type { Route } from "./+types/auth-callback";
+
+import { redirectDocument } from "react-router";
+
+import { supabaseClientFromRequest } from "components/auth/client";
+
+export async function loader({ request, params, context }: Route.LoaderArgs) {
+  const requestUrl = new URL(request.url);
+  const code = requestUrl.searchParams.get("code");
+  const next = requestUrl.searchParams.get("next") || "/";
+
+  if (code) {
+    const { supabaseClient, headers } = supabaseClientFromRequest(request);
+    const { error } = await supabaseClient.auth.exchangeCodeForSession(code);
+    if (error) {
+      console.log("authError: ", error);
+    }
+    return redirectDocument(next, { headers });
+  }
+  return redirectDocument(next);
+}

app/routes/home.tsx

@@ -2,6 +2,8 @@ import { Welcome } from "../welcome/welcome";
 import { Link } from "../../components/ui-toolkit/link";
 import { Button } from "../../components/ui-toolkit/button";
 
+import { MembersLink } from "components/core/links";
+
 export function meta() {
   return [
     { title: "New React Router App" },
@@ -14,11 +16,9 @@ export default function Home() {
     <div>
       <Welcome />
       <div className="mt-8 flex justify-center">
-        <Link href="/members">
-          <Button color="blue">
-            Enter Members Area
-          </Button>
-        </Link>
+        <MembersLink>
+          <Button color="blue">Enter Members Area</Button>
+        </MembersLink>
       </div>
     </div>
   );

app/routes/link-identity.tsx

@@ -0,0 +1,43 @@
+import { redirectDocument } from "react-router";
+
+import { supabaseClientFromRequest } from "components/auth/client";
+import { LinkIdentityAuth } from "components/core/auth";
+
+import type { Route as Route } from "./+types/link-identity";
+
+type SupportedProvider = "google" | "github";
+
+const SupportedProviders = ["google", "github"];
+
+function isSupported(provider: string): provider is SupportedProvider {
+  return provider.length > 0 && SupportedProviders.includes(provider);
+}
+
+export async function action({ request, params, context }: Route.ActionArgs) {
+  const formData = await request.formData();
+  const provider = String(formData.get("oauth_provider"));
+
+  if (!provider || !isSupported(provider)) {
+    console.log("does not have oauthProvider");
+    return null;
+  }
+
+  const { supabaseClient, headers } = supabaseClientFromRequest(request);
+
+  const { data, error } = await supabaseClient.auth.getUser();
+  if (!data?.user) {
+    console.log("not logged in!");
+    return null;
+  }
+
+  const { data: oAuthData, error: oAuthError } =
+    await supabaseClient.auth.linkIdentity({ provider });
+
+  if (oAuthData?.url) {
+    return redirectDocument(oAuthData.url, { headers });
+  }
+}
+
+export default function Component() {
+  return <LinkIdentityAuth />;
+}

app/routes/logout.tsx

@@ -0,0 +1,13 @@
+import type { Route as Route } from "./+types/logout";
+import { redirectDocument } from "react-router";
+
+import { supabaseClientFromRequest } from "components/auth/client";
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const { supabaseClient, headers } = supabaseClientFromRequest(request);
+  let { error } = await supabaseClient.auth.signOut();
+  if (error) {
+    console.error("logoutError: ", error);
+  }
+  return redirectDocument("/members/profile", { headers });
+}