Eclipse-Expos · realTristan · Apr 24, 2024 · Apr 24, 2024 · Apr 24, 2024 · Jun 14, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "@trpc/next": "^11.0.0-next-beta.289",
     "@trpc/server": "^11.0.0-next-beta.289",
     "bcrypt": "^5.1.1",
-    "eclipse-components": "^0.0.141",
+    "eclipse-components": "^0.0.163",
     "next": "14.1.0",
     "next-auth": "^4.24.5",
     "react": "^18",

diff --git a/src/app/Providers.tsx b/src/app/Providers.tsx
@@ -1,5 +1,5 @@
 "use client";
-// 
+
 import { SessionProvider } from "next-auth/react";
 
 type ProvidersProps = {

diff --git a/src/app/_app.tsx b/src/app/_app.tsx
diff --git a/src/app/api/auth/_trpc/client.ts b/src/app/api/auth/_trpc/client.ts
@@ -1,8 +1,9 @@
-import { createTRPCRouter } from "@/server/api/trpc";
-import { exampleRouter } from "@/server/routers/procedures";
+import { createTRPCRouter } from "@/app/server/api/trpc";
+import { exampleRouter } from "@/app/server/routers/procedures";
 
 export const appRouter = createTRPCRouter({
-    example: exampleRouter,
-    // add other routers
+  example: exampleRouter,
+  // add other routers
 });
-export type AppRouter = typeof appRouter;
+
+export type AppRouter = typeof appRouter;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import "./globals.css";
-import Providers from "./Providers";
+import "@/styles/globals.css";
+import Providers from "@/app/Providers";
 
 const inter = Inter({ subsets: ["latin"] });
 

diff --git a/src/app/logout/layout.tsx b/src/app/logout/layout.tsx
@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "@/styles/globals.css";
+import Providers from "@/app/Providers";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Logout | Eclipse Expos",
+  description: "Dashboard for Eclipse Expos",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${inter.className} text-white`}>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -11,6 +11,7 @@ import Link from "next/link";
 export default async function Home() {
   const user = await getSessionUser();
   const preRegistered = await isRegistered();
+
   return (
     <main className="p-4 text-left">
       <h1 className="text-3xl">
@@ -27,15 +28,19 @@ export default async function Home() {
             Settings
           </Link>
           <br />
-          {preRegistered ? ('You are preregistered!') : ("You are not yet preregistered. ")}
-
+          {preRegistered
+            ? "You are preregistered!"
+            : "You are not yet preregistered. "}
         </div>
       ) : (
-        <Link href={`${process.env.AUTH_DOMAIN}/login?callbackUrl=${process.env.DASH_DOMAIN}`} className="underline">
+        <Link
+          href={`${process.env.AUTH_DOMAIN}/login?callbackUrl=${process.env.DASH_DOMAIN}`}
+          className="underline"
+        >
           Login
         </Link>
       )}
-      
+
       <br />
     </main>
   );

diff --git a/src/app/register/[userId]/layout.tsx b/src/app/register/[userId]/layout.tsx
@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "@/styles/globals.css";
+import Providers from "@/app/Providers";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Registration | Eclipse Expos",
+  description: "Dashboard for Eclipse Expos",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${inter.className} text-white`}>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/register/[userId]/page.tsx b/src/app/register/[userId]/page.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+import { useParams, useRouter } from "next/navigation";
+import {
+  Button,
+  EclipseLogoTextOrbGlow,
+  Input,
+  SpinnerCenter,
+  StarBackground,
+} from "eclipse-components";
+import Link from "next/link";
+
+export default function Register({
+  params,
+}: Readonly<{ params: { userId: string } }>) {
+  const { data: session, status: sessionStatus } = useSession();
+
+  // can also do this to get url params
+  // const params = useParams<{ userId: string }>();
+
+  const router = useRouter();
+
+  if (sessionStatus === "loading") {
+    return <SpinnerCenter />;
+  }
+
+  if (sessionStatus === "unauthenticated" || !session?.user) {
+    router.push(
+      `https://auth.eclipseexpos.org/signup?callbackUrl=${encodeURIComponent(
+        `https://dash.eclipseexpos.org/register/${params.userId}`
+      )}`
+    );
+
+    return <SpinnerCenter />;
+  }
+
+  // else the user is authenticated
+  return (
+    <>
+      <StarBackground />
+
+      <main className="flex flex-col justify-start items-center min-h-screen w-screen p-24">
+        <EclipseLogoTextOrbGlow />
+
+        <div className="flex flex-col w-full max-w-lg gap-8">
+          <div className="flex flex-col gap-1">
+            <h1 className="text-xl font-normal">
+              Welcome, {session.user.name}!
+            </h1>
+            <p className="text-muted-foreground text-sm tracking-wide">
+              {/** Note that 'text-muted-foreground' is from the component library */}
+              Register as: <u>{session.user.email}</u>
+            </p>
+            or
+            <Button asChild>
+              <Link href="/logout">Logout</Link>
+            </Button>
+          </div>
+
+          <Input
+            label="First Name"
+            name="firstName"
+            type="text"
+            placeholder="Please enter your first name"
+            className="w-full bg-background" /** Note that 'bg-background' is from the component library */
+          />
+          <Input
+            label="Last Name"
+            name="lastName"
+            type="text"
+            placeholder="Please enter your last name"
+            className="w-full bg-background" /** Note that 'bg-background' is from the component library */
+          />
+        </div>
+      </main>
+    </>
+  );
+}
diff --git a/src/app/server/api/root.ts b/src/app/server/api/root.ts
@@ -0,0 +1,11 @@
+import { createTRPCRouter } from "./trpc";
+import { exampleRouter } from "../routers/procedures";
+
+/**
+ * primary router
+ */
+export const appRouter = createTRPCRouter({
+  example: exampleRouter,
+});
+
+export type AppRouter = typeof appRouter;
diff --git a/src/server/api/trpc.ts → src/app/server/api/trpc.ts b/src/server/api/trpc.ts → src/app/server/api/trpc.ts
@@ -1,25 +1,26 @@
 import { type CreateNextContextOptions } from "@trpc/server/adapters/next";
 import { type Session } from "next-auth";
-import { prisma } from "../db";
-import { getServerAuthSession } from '@/app/api/auth/[...nextauth]/options';
+import { prisma } from "@/lib/prisma";
+import { getServerAuthSession } from "@/app/api/auth/[...nextauth]/options";
 
 type CreateContextOptions = {
-    session: Session | null;
+  session: Session | null;
 };
 
 const createInnerTRPCContext = (opts: CreateContextOptions) => {
-    return {
-        session: opts.session,
-        prisma,
-    };
+  return {
+    session: opts.session,
+    prisma,
+  };
 };
+
 export const createTRPCContext = async (opts: CreateNextContextOptions) => {
-    const { req, res } = opts;
-    const session = await getServerAuthSession({ req, res });
+  const { req, res } = opts;
+  const session = await getServerAuthSession({ req, res });
 
-    return createInnerTRPCContext({
-        session,
-    });
+  return createInnerTRPCContext({
+    session,
+  });
 };
 
 /**
@@ -29,10 +30,10 @@ import { initTRPC, TRPCError } from "@trpc/server";
 import superjson from "superjson";
 
 const t = initTRPC.context<typeof createTRPCContext>().create({
-    transformer: superjson,
-    errorFormatter({ shape }) {
-        return shape;
-    },
+  transformer: superjson,
+  errorFormatter({ shape }) {
+    return shape;
+  },
 });
 
 /**
@@ -44,15 +45,15 @@ export const createTRPCRouter = t.router;
  * middleware that ensures that users are logged in before running the procedure
  */
 const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
-    if (!ctx.session || !ctx.session.user) {
-        throw new TRPCError({ code: "UNAUTHORIZED" });
-    }
-    return next({
-        ctx: {
-            // infers the `session` as non-nullable
-            session: { ...ctx.session, user: ctx.session.user },
-        },
-    });
+  if (!ctx.session || !ctx.session.user) {
+    throw new TRPCError({ code: "UNAUTHORIZED" });
+  }
+  return next({
+    ctx: {
+      // infers the `session` as non-nullable
+      session: { ...ctx.session, user: ctx.session.user },
+    },
+  });
 });
 
 /**

diff --git a/src/utils/api.ts → src/app/server/api/utils.ts b/src/utils/api.ts → src/app/server/api/utils.ts
@@ -4,7 +4,7 @@ import { createTRPCNext } from "@trpc/next";
 import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
 import superjson from "superjson";
 
-import { type AppRouter } from "../server/api/root";
+import { type AppRouter } from "./root";
 
 const getBaseUrl = () => {
   if (typeof window !== "undefined") return ""; // browser should use relative url
@@ -35,8 +35,6 @@ export const api = createTRPCNext<AppRouter>({
   ssr: false,
 });
 
-
-
 /**
  * Inference helper for inputs.
  *
@@ -49,4 +47,4 @@ export type RouterInputs = inferRouterInputs<AppRouter>;
  *
  * @example type HelloOutput = RouterOutputs['example']['hello']
  **/
-export type RouterOutputs = inferRouterOutputs<AppRouter>;
+export type RouterOutputs = inferRouterOutputs<AppRouter>;
diff --git a/src/app/server/routers/procedures.ts b/src/app/server/routers/procedures.ts
@@ -0,0 +1,17 @@
+import {
+  createTRPCRouter,
+  publicProcedure,
+  protectedProcedure,
+} from "../api/trpc";
+
+export const exampleRouter = createTRPCRouter({
+  sampleMessage: protectedProcedure.query(() => {
+    return "sample protected procedure";
+  }),
+});
+
+export const authRouter = createTRPCRouter({
+  validateUser: protectedProcedure.query(() => {
+    // todo - would incorporate nextauth
+  }),
+});