Add feide study confirmation

apps/dashboard/src/app/(dashboard)/event/all-users-table.tsx

@@ -49,9 +49,6 @@ export const AllAttendeesTable = ({ attendanceId }: AllAttendeesTableProps) => {
           return `${attendee.user.name}`
         },
       }),
-      columnHelper.accessor("user.studyYear", {
-        header: () => "Klassetrinn",
-      }),
       columnHelper.accessor((attendee) => attendee, {
         id: "attend",
         header: () => "Møtt",

apps/dashboard/src/app/(dashboard)/membership-applications/page.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import { Icon } from "@iconify/react"
+import { Button, ButtonGroup, Card, Group, Skeleton, Stack } from "@mantine/core"
+import { GenericTable } from "../../../components/GenericTable"
+import { useCreateOfflineModal } from "../../../modules/offline/modals/create-offline-modal"
+import { useOfflineTable } from "../../../modules/offline/use-offline-table"
+import { trpc } from "src/utils/trpc"
+import { useMembershipApplicationTable } from "./use-membership-application-table"
+
+export default function OfflinePage() {
+  const { data, isLoading } = trpc.membershipApplication.all.useQuery({ take: 999 })
+
+  const open = useCreateOfflineModal()
+  const table = useMembershipApplicationTable({ data: data ?? [] })
+
+  return (
+    <Skeleton visible={isLoading}>
+      <Stack>
+        <GenericTable table={table} />
+      </Stack>
+    </Skeleton>
+  )
+}

apps/dashboard/src/app/(dashboard)/membership-applications/use-membership-application-table.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import type { MembershipApplication} from "@dotkomonline/types"
+import { formatDate } from "@dotkomonline/utils"
+import { Anchor, Text } from "@mantine/core"
+import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import Link from "next/link"
+import { useMemo } from "react"
+
+interface Props {
+  data: MembershipApplication[]
+}
+
+export const useMembershipApplicationTable = ({ data }: Props) => {
+  const columnHelper = createColumnHelper<MembershipApplication>()
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor("documentation.fullName", {
+        header: () => "Navn",
+        cell: (info) => info.getValue(),
+      }),
+      columnHelper.accessor("fieldOfStudy", {
+        header: () => "Ønsket studieretning",
+        cell: (info) => <Text>{info.getValue()}</Text>,
+      }),
+      columnHelper.accessor("comment", {
+        header: () => "Kommentar",
+        cell: (info) => <Text>{info.getValue()}</Text>,
+      }),
+    ],
+    [columnHelper]
+  )
+
+  return useReactTable({
+    data,
+    getCoreRowModel: getCoreRowModel(),
+    columns,
+  })
+}

apps/dashboard/src/app/(dashboard)/user/edit-form.tsx

@@ -24,10 +24,6 @@ export const useUserEditForm = ({ defaultValues, onSubmit, label = "Bruker" }: U
         placeholder: "Kari",
         withAsterisk: true,
       }),
-      middleName: createTextInput({
-        label: "Mellomnavn",
-        withAsterisk: false,
-      }),
       familyName: createTextInput({
         label: "Etternavn",
         placeholder: "Dahl",
@@ -45,10 +41,6 @@ export const useUserEditForm = ({ defaultValues, onSubmit, label = "Bruker" }: U
         label: "Allergier",
         placeholder: "Gluten",
       }),
-      studyYear: createNumberInput({
-        label: "Studieår",
-        placeholder: "2",
-      }),
       gender: createTextInput({
         label: "Kjønn",
         placeholder: "Kvinne",

apps/dashboard/src/app/ApplicationShell.tsx

@@ -59,7 +59,7 @@ const navigations = [
     icon: "tabler:users-group",
     children: [
       { label: "Brukere", href: "/user" },
-      { label: "Medlemskap", href: "/membership" },
+      { label: "Søknader om medlemsskap", href: "/membership-applications"},
     ],
   },
 ] as const

apps/web/next-env.d.ts

@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/web/next.config.mjs

@@ -52,4 +52,4 @@ const config = {
   ],
 }
 
-export default config
+export default config;

apps/web/package.json

@@ -23,30 +23,31 @@
     "@dotkomonline/ui": "workspace:*",
     "@dotkomonline/utils": "workspace:*",
     "@fadi-ui/react-country-flag": "^1.0.7",
-    "@next/env": "^14.0.3",
+    "@next/env": "^14.2.14",
     "@portabletext/react": "^3.0.11",
     "@radix-ui/colors": "^3.0.0",
-    "@radix-ui/react-avatar": "^1.0.4",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-navigation-menu": "^1.1.4",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@sanity/client": "^6.8.6",
+    "@radix-ui/react-navigation-menu": "^1.2.1",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@sanity/client": "^6.22.1",
     "@tailwindcss/typography": "^0.5.10",
     "@tanstack/react-query": "^4.36.1",
     "@trpc/client": "^10.45.0",
     "@trpc/next": "^10.45.0",
     "@trpc/react-query": "^10.45.0",
-    "@trpc/server": "^10.45.0",
     "axios": "1.7.7",
     "clsx": "^2.0.0",
     "cors": "^2.8.5",
     "date-fns": "^3.0.0",
-    "next": "^14.0.3",
-    "next-auth": "^4.24.5",
+    "jsonwebtoken": "^9.0.2",
+    "next": "^14.2.14",
+    "next-auth": "^4.24.8",
     "next-superjson-plugin": "^0.6.0",
     "next-themes": "^0.3.0",
+    "openid-client": "^5.7.0",
     "pg": "^8.11.3",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
@@ -57,22 +58,21 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.9.2",
+    "@biomejs/biome": "^1.9.3",
     "@dotkomonline/config": "workspace:*",
     "@dotkomonline/logger": "workspace:*",
     "@dotkomonline/tsconfig": "workspace:*",
     "@types/cors": "^2.8.17",
     "@types/jsdom": "^21.1.6",
-    "@types/node": "^20.12.7",
-    "@types/react": "^18.2.38",
+    "@types/node": "^20.16.10",
+    "@types/react": "^18.3.11",
     "@types/react-dom": "^18.2.17",
     "autoprefixer": "^10.4.16",
     "cva": "npm:class-variance-authority@^0.7.0",
     "jsdom": "^22.1.0",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.5",
-    "trpc-playground": "^1.0.4",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5"
   }
-}
+}

apps/web/src/app/events/components/AttendanceBox/AttendanceBox.tsx

@@ -98,8 +98,8 @@ export const AttendanceBox: FC<Props> = ({ sessionUser, attendance, pools, event
               Meld meg av
             </Button>
           ) : (
-            <Button className="mt-2 w-full" onClick={registerForAttendance}>
-              Meld meg på
+            <Button className="mt-2 w-full" onClick={registerForAttendance} disabled={!myGroups}>
+              {myGroups ? 'Meld meg på' : 'Ikke åpent for ditt årstrinn'}
             </Button>
           ))}
       </div>

apps/web/src/app/feide/callback/route.ts

@@ -0,0 +1,65 @@
+import { getServerClient } from "@/utils/trpc/serverClient"
+import { authOptions } from "@dotkomonline/auth/src/web.app"
+import { env } from "@dotkomonline/env"
+import { getServerSession } from "next-auth"
+import { type NextRequest, NextResponse } from "next/server"
+import { Issuer } from "openid-client"
+import { z } from "zod"
+import jwt from "jsonwebtoken"
+import { FeideDocumentationSchema } from "@dotkomonline/types"
+import { createFeideDocumentationJWT } from "@/utils/feideDocumentationJWT"
+
+export async function GET(request: NextRequest) {
+  const session = await getServerSession(authOptions)
+
+  if (session === null) {
+    return Response.redirect("/", 302)
+  }
+
+  if (!session.user?.email) {
+    return new Response("Missing user email", { status: 400 })
+  }
+
+  const trpc = await getServerClient()
+
+  const code = new URL(request.url).searchParams.get("code")
+
+  if (code === null) {
+    return new Response("Missing code", { status: 400 })
+  }
+
+  const issuer = await Issuer.discover("https://auth.dataporten.no")
+  const client = new issuer.Client({
+    client_id: env.DATAPORTEN_CLIENT_ID,
+    client_secret: env.DATAPORTEN_CLIENT_SECRET,
+    redirect_uris: ["http://localhost:3000/feide/callback"],
+  })
+
+  const tokenSet = await client.grant({
+    code,
+    redirect_uri: "http://localhost:3000/feide/callback",
+    grant_type: "authorization_code",
+  })
+
+  if (!tokenSet || !tokenSet.access_token) {
+    return new Response("Failed to get token", { status: 500 })
+  }
+
+  const membershipDocumentation = await trpc.membership.getDocumentation({accessToken: tokenSet.access_token})
+
+  const user = await trpc.user.getByAuth0Id(session.sub)
+  const userExists = Boolean(user)
+
+  const response = NextResponse.redirect(
+    new URL(userExists ? "/settings" : "/onboarding", request.url).toString(),
+    {
+      status: 302,
+    }
+  )
+
+  response.cookies.set("feideDocumentationJWT", createFeideDocumentationJWT(membershipDocumentation), {
+    expires: new Date(Date.now() + 1000 * 60 * 60 * 24),
+  })
+
+  return response
+}

apps/web/src/app/feide/route.ts

@@ -0,0 +1,22 @@
+import { env } from "@dotkomonline/env"
+import { redirect } from "next/navigation"
+import { NextResponse } from "next/server"
+
+export async function GET(request: Request) {
+  const response = new NextResponse(null, { status: 302 })
+
+  console.log(request.headers)
+
+  const params = new URLSearchParams()
+
+  params.append("client_id", env.DATAPORTEN_CLIENT_ID)
+  params.append("response_type", "code")
+  params.append("scope", "openid userid-feide userid-name profile groups email")
+  params.append("redirect_uri", "http://localhost:3000/feide/callback")
+
+  const url = `https://auth.dataporten.no/oauth/authorization?${params.toString()}`
+
+  response.headers.set("Location", url)
+
+  return response
+}

apps/web/src/app/onboarding/components/OnboardingForm.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import { Button, TextInput, Textarea } from "@dotkomonline/ui"
+import { UserEditableFields } from "@dotkomonline/types";
+import { PropsWithChildren } from "react";
+import { NextPage } from "next";
+import { Controller, useForm } from "react-hook-form";
+import { trpc } from "@/utils/trpc/client";
+import { Session } from "next-auth";
+import { useRouter } from "next/navigation";
+import { EnumSelect } from "@dotkomonline/ui";
+
+const SignupSection = ({ children, label, reason }: PropsWithChildren<{label: string, reason: string}>) => (
+  <div className="flex flex-col py-2">
+    <label htmlFor="phone">{label}:</label>
+    <div className="w-full flex space-x-2 mb-1">
+      {children}
+    </div>
+    <p className="text-xs text-slate-9">{reason}</p>
+  </div>
+)
+
+export const OnboardingForm: NextPage<{ session: Session, feideDocumentationJWT: string }> = ({ feideDocumentationJWT, session }) => {
+  const { register, control, handleSubmit } = useForm<UserEditableFields>({
+    defaultValues: {
+      phone: "",
+      allergies: "",
+      gender: undefined,
+      biography: "",
+    }
+  })
+
+  const router = useRouter();
+
+  const signupMutation = trpc.user.signup.useMutation();
+  const membershipMutation = trpc.membership.updateAutomatically.useMutation();
+
+  const onSubmit = async (data: UserEditableFields) => {
+    await signupMutation.mutateAsync({
+      signupInformation: data,
+      feideDocumentationJWT: feideDocumentationJWT
+    })
+    await membershipMutation.mutateAsync({
+      userId: session.sub,
+      documentationJWT: feideDocumentationJWT
+    })
+    router.push("/");
+  }
+
+  return <div className="flex w-full flex-col space-y-4">
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <SignupSection label="Telefonnummer" reason="Dette vil bli brukt til å kontakte deg om arrangementer og lignende.">
+        <TextInput required width="w-full" maxLength={8} {...register("phone")} />
+      </SignupSection>
+
+      <SignupSection label="Allergier" reason="Dette vil bli brukt til å tilpasse mat på arrangementer.">
+        <TextInput width="w-full" {...register("allergies")} />
+      </SignupSection>
+
+      <SignupSection label="Kjønn" reason="Dette brukes til å føre statistikk. ">
+        <Controller
+          name="gender"
+          control={control}
+          render={({ field }) => (
+            <EnumSelect
+              options={[
+                { label: "Kvinne", value: "female" },
+                { label: "Mann", value: "male"},
+                { label: "Annet", value: "other" },
+              ]}
+              value={field.value}
+              onValueChange={field.onChange}
+              required
+            />
+          )}
+        />
+      </SignupSection>
+
+      <SignupSection label="Bio" reason="Dette vil bli vist på din profil.">
+        <Textarea {...register("biography")} />
+      </SignupSection>
+
+      <Button color="green" variant="solid" className="text-white px-6" loading={signupMutation.isLoading && !signupMutation.isPaused}>
+        Fullfør profil
+      </Button>
+    </form>
+  </div>
+}

apps/web/src/app/onboarding/layout.tsx

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+
+export default function Layout({ children }: PropsWithChildren) {
+  return <div className="lg:px-64 px-18 py-16">
+    {children}
+  </div>
+}