feat: add confirmation page

Author: brage-andreas

apps/rpc/src/modules/group/group-service.ts

@@ -335,7 +335,7 @@ export function getGroupService(
       const membershipsByGroup = new Map<string, GroupMembership[]>()
 
       for (const membership of memberships) {
-        // @ts-ignore: getOrInsert is a function
+        // @ts-expect-error: getOrInsert is a function
         const groupMemberships = membershipsByGroup.getOrInsert(membership.groupId, [])
         groupMemberships.push(membership)
       }

apps/web/src/app/innstillinger/bruker/link/ConfirmIdentityLinkButton.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { Button } from "@dotkomonline/ui"
+import { useRouter } from "next/navigation"
+import { useTransition } from "react"
+import { confirmIdentityLinkAction } from "./actions"
+
+export function ConfirmIdentityLinkButton() {
+  const router = useRouter()
+  const [isPending, startTransition] = useTransition()
+
+  const onConfirm = () => {
+    startTransition(async () => {
+      try {
+        await confirmIdentityLinkAction()
+
+        router.replace("/innstillinger/bruker?link_status=ok")
+      } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : null
+        const query = errorMessage ? `&error=${encodeURIComponent(errorMessage)}` : ""
+
+        router.replace(`/innstillinger/bruker?link_status=failed${query}`)
+      }
+    })
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-wrap gap-3">
+        <Button color="brand" onClick={onConfirm} disabled={isPending}>
+          {isPending ? "Kobler brukere..." : "Bekreft og koble brukere"}
+        </Button>
+        <Button element="a" href="/innstillinger/bruker" variant="outline" disabled={isPending}>
+          Avbryt
+        </Button>
+      </div>
+    </div>
+  )
+}

apps/web/src/app/innstillinger/bruker/link/actions.ts

@@ -7,15 +7,24 @@ import { cookies } from "next/headers"
 const isHttps = env.NEXT_PUBLIC_ORIGIN.startsWith("https://")
 const cookiePrefix = isHttps ? "__Secure-" : ""
 
-export async function confirmIdentityLinkAction() {
+export async function getIdentityLinkCookies() {
   const cookieHandle = await cookies()
+
   const secondaryUserId = cookieHandle.get(`${cookiePrefix}monoweb-pending-link-user-id`)?.value
   const secondaryIdToken = cookieHandle.get(`${cookiePrefix}monoweb-pending-link-id-token`)?.value
 
   if (!secondaryUserId || !secondaryIdToken) {
     throw new Error("No pending identity link found. Please start the linking process again.")
   }
 
+  return { secondaryUserId, secondaryIdToken }
+}
+
+export async function confirmIdentityLinkAction() {
+  const cookieHandle = await cookies()
+
+  const { secondaryUserId, secondaryIdToken } = await getIdentityLinkCookies()
+
   const mergedUser = await server.user.confirmIdentityLink.mutate({ secondaryIdToken, secondaryUserId })
 
   cookieHandle.delete(`${cookiePrefix}monoweb-pending-link-user-id`)

apps/web/src/app/innstillinger/bruker/link/page.tsx

@@ -1,23 +1,138 @@
-"use client"
-
-import { useEffect } from "react"
-import { useRouter } from "next/navigation"
-import { confirmIdentityLinkAction } from "./actions"
-import { Text } from "@dotkomonline/ui"
-
-export default function LinkIdentityPage() {
-  const router = useRouter()
-
-  useEffect(() => {
-    confirmIdentityLinkAction()
-      .then(() => {
-        router.replace("/innstillinger/profil")
-      })
-      .catch((error) => {
-        console.error("Failed to link identity:", error)
-        router.replace("/innstillinger/profil?error=link_failed")
-      })
-  }, [router])
-
-  return <Text>Kobler sammen kontoer...</Text>
+import { auth } from "@/auth"
+import { createAuthorizeUrl, getStudyGrade } from "@dotkomonline/utils"
+import { Avatar, AvatarFallback, AvatarImage, cn, Text, Title } from "@dotkomonline/ui"
+import { redirect } from "next/navigation"
+import { ConfirmIdentityLinkButton } from "./ConfirmIdentityLinkButton"
+import { getIdentityLinkCookies } from "./actions"
+import { server } from "@/utils/trpc/server"
+import { findActiveMembership, getMembershipTypeName, type User } from "@dotkomonline/types"
+import { IconArrowNarrowLeft, IconUser, IconUserFilled } from "@tabler/icons-react"
+
+export default async function LinkIdentityPage() {
+  const session = await auth.getServerSession()
+
+  if (!session) {
+    redirect(createAuthorizeUrl({ redirectAfter: "/innstillinger/bruker/link" }))
+  }
+
+  const { secondaryUserId } = await getIdentityLinkCookies().catch(() => {
+    redirect("/innstillinger/bruker")
+  })
+
+  const primaryUser = await server.user.getMe.query()
+  const secondaryUser = await server.user.get.query(secondaryUserId)
+
+  return (
+    <div className="flex max-w-3xl flex-col gap-6">
+      <div className="flex flex-col gap-2">
+        <Title size="xl">Bekreft kobling av brukere</Title>
+        <Text className="text-sm">
+          Du er i ferd med å koble en ekstra innloggingsmetode til den eksisterende brukeren din. Brukerprofilen som
+          hører til denne innloggingsmetoden blir samtidig koblet til kontoen din. Kontroller at informasjonen under
+          stemmer før du fortsetter.
+        </Text>
+      </div>
+
+      <div className="flex flex-col md:grid md:grid-cols-[1fr_auto_1fr] gap-4 items-center">
+        <UserColumn type="primary" user={primaryUser} />
+
+        <div className="flex flex-col items-center gap-2 md:gap-0">
+          <IconArrowNarrowLeft className="size-8 rotate-90 self-center md:rotate-0" strokeWidth={2} />
+          <Text className="text-[0.55rem] font-bold">Sammenslås</Text>
+        </div>
+
+        <UserColumn type="secondary" user={secondaryUser} />
+      </div>
+
+      <Text className="text-xs text-gray-500 dark:text-stone-500">
+        Denne handlingen slår sammen de to brukerene til én bruker. All data og historikk overføres til primærbruker.
+        Hvis både primærbruker og sekundærbruker har verdi i samme felt, beholdes verdien til primærbruker, og verdien
+        til sekundærbruker går tapt. Sammenslåingen kan ikke angres.
+      </Text>
+
+      <ConfirmIdentityLinkButton />
+    </div>
+  )
+}
+
+type UserColumnProps = {
+  user: User
+  type: "primary" | "secondary"
+}
+
+function UserColumn({ user, type }: UserColumnProps) {
+  const name = user.name ?? "<Ingen navn oppgitt>"
+  const email = user.email ?? "<Ingen e-post oppgitt>"
+
+  const membership = findActiveMembership(user)
+  const membershipType = membership && getMembershipTypeName(membership.type)
+  const grade = membership?.semester != null ? getStudyGrade(membership.semester) : null
+
+  const title = type === "primary" ? "Primærbruker" : "Sekundærbruker"
+  const caption = type === "primary" ? "Primærbrukeren beholdes." : "Sekundærbrukeren vil bli slått sammen."
+
+  const cardColor = cn(
+    type === "primary" && "bg-violet-100 border-violet-200 dark:bg-violet-900/60 dark:border-white/10",
+    type === "secondary" && "bg-yellow-100 border-yellow-200 dark:bg-yellow-900/60 dark:border-white/10"
+  )
+
+  const titleColor = cn(
+    type === "primary" && "text-violet-700 dark:text-violet-300",
+    type === "secondary" && "text-yellow-700 dark:text-yellow-300"
+  )
+
+  const cardHeaderColor = cn(
+    type === "primary" && "bg-violet-200 dark:bg-violet-900/75 border-violet-200 dark:border-white/10",
+    type === "secondary" && "bg-yellow-200 dark:bg-yellow-900/75 border-yellow-200 dark:border-white/10"
+  )
+
+  const icon =
+    type === "primary" ? (
+      <IconUserFilled className={cn("size-3.5", titleColor)} />
+    ) : (
+      <IconUser className={cn("size-3.5", titleColor)} strokeWidth={2.5} />
+    )
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div
+        className={cn(
+          "flex flex-col gap-1 rounded-xl border border-gray-200 bg-gray-50 dark:border-stone-700 dark:bg-stone-900",
+          cardColor
+        )}
+      >
+        <div className={cn("flex gap-2 items-center p-2 pb-1.5 rounded-t-xl", cardHeaderColor)}>
+          {icon}
+          <Title element="h3" size="sm" className={cn("text-sm", titleColor)}>
+            {title}
+          </Title>
+        </div>
+
+        <div className="flex gap-3 items-center p-3 pt-1.5">
+          <Avatar className="size-12">
+            <AvatarImage className="object-cover" src={user.imageUrl ?? undefined} />
+            <AvatarFallback className="bg-gray-500 dark:bg-stone-500">
+              <IconUser className="size-[1.5em]" />
+            </AvatarFallback>
+          </Avatar>
+
+          <div className="flex flex-col gap-1">
+            <Text className="font-medium text-sm truncate" title={name}>
+              {name}
+            </Text>
+
+            <Text className="text-xs truncate" title={email}>
+              {email}
+            </Text>
+
+            <Text className={cn("text-xs", membershipType === null && "text-gray-500 dark:text-stone-500")}>
+              {membershipType ? `${membershipType} ${grade ? `(${grade}. klasse)` : ""}` : "Ingen medlemskap"}
+            </Text>
+          </div>
+        </div>
+      </div>
+
+      <Text className="text-xs">{caption}</Text>
+    </div>
+  )
 }

apps/web/src/app/innstillinger/bruker/page.tsx

@@ -6,17 +6,23 @@ import { useFullPathname } from "@/utils/use-full-pathname"
 import { useSession } from "@dotkomonline/oauth2/react"
 import { Button, Text, Title } from "@dotkomonline/ui"
 import { createAbsoluteLinkIdentityAuthorizeUrl, createAuthorizeUrl } from "@dotkomonline/utils"
-import { IconCheck, IconLink, IconPassword } from "@tabler/icons-react"
+import { IconCheck, IconLink, IconPassword, IconX } from "@tabler/icons-react"
 import { useQuery } from "@tanstack/react-query"
-import { redirect } from "next/navigation"
+import { redirect, useSearchParams } from "next/navigation"
 
 export default function MinBrukerPage() {
-  const session = useSession()
   const fullPathname = useFullPathname()
+  const searchParams = useSearchParams()
+  const session = useSession()
+
+  const linkErrorMessage = searchParams.get("error") ?? null
+  const linkStatus = searchParams.get("link_status")
+  const isLinkStatusOk = linkStatus === "ok"
+  const isLinkStatusFailed = linkStatus === "failed"
 
   const trpc = useTRPC()
 
-  const { data: auth0Connections } = useQuery({
+  const { data: auth0Connections, isLoading: auth0ConnectionsIsLoading } = useQuery({
     ...trpc.user.getAuth0Connections.queryOptions({ userId: session?.sub ?? "" }),
     enabled: session !== null,
   })
@@ -25,8 +31,8 @@ export default function MinBrukerPage() {
     redirect(createAuthorizeUrl({ redirectAfter: fullPathname }))
   }
 
-  const isFeideLinked = auth0Connections?.hasFeide ?? false
-  const isUsernamePasswordLinked = auth0Connections?.hasUsernamePassword ?? false
+  const isFeideLinked = auth0Connections?.hasFeide === true
+  const isUsernamePasswordLinked = auth0Connections?.hasUsernamePassword === true
 
   const linkFeideUrl = createAbsoluteLinkIdentityAuthorizeUrl(window.location.origin, {
     connection: "FEIDE",
@@ -38,14 +44,41 @@ export default function MinBrukerPage() {
     redirectAfter: `${fullPathname}/link`,
   })
 
-  const usernamePasswordLinkButtonProps = isUsernamePasswordLinked
-    ? { disabled: true }
-    : { element: "a", href: linkUsernamePasswordUrl }
+  const usernamePasswordLinkButtonProps =
+    isUsernamePasswordLinked || auth0ConnectionsIsLoading
+      ? { disabled: true }
+      : { element: "a", href: linkUsernamePasswordUrl }
 
-  const feideLinkButtonProps = isFeideLinked ? { disabled: true } : { element: "a", href: linkFeideUrl }
+  const feideLinkButtonProps =
+    isFeideLinked || auth0ConnectionsIsLoading ? { disabled: true } : { element: "a", href: linkFeideUrl }
 
   return (
     <div className="flex flex-col gap-6">
+      {isLinkStatusFailed ? (
+        <div className="flex flex-row gap-3 items-center bg-red-100 dark:bg-red-900 p-3 rounded-lg">
+          <IconX size="1.25em" className="text-red-600 dark:text-red-400" />
+          <div className="flex flex-col">
+            <Title size="sm" className="text-sm">
+              Koblingen feilet
+            </Title>
+            <Text className="text-xs">Kunne ikke koble sammen kontoene. Kontakt dotkom dersom problemet vedvarer.</Text>
+            {linkErrorMessage ? (
+              <Text className="text-xs">Feilmelding: {decodeURIComponent(linkErrorMessage)}</Text>
+            ) : null}
+          </div>
+        </div>
+      ) : isLinkStatusOk ? (
+        <div className="flex flex-row gap-3 items-center bg-green-100 dark:bg-green-900 p-3 rounded-lg">
+          <IconCheck size="1.25em" className="text-green-600 dark:text-green-400" />
+          <div className="flex flex-col">
+            <Title size="sm" className="text-sm">
+              Koblingen er vellykket
+            </Title>
+            <Text className="text-xs">Du kan nå bruke denne kontoen til å logge inn.</Text>
+          </div>
+        </div>
+      ) : null}
+
       <Title size="xl">Min bruker</Title>
 
       <div className="flex flex-col gap-3">

apps/web/src/app/innstillinger/components/settings-menu-item.tsx

@@ -12,7 +12,7 @@ export type SettingsMenuItemProps = {
 
 export const SettingsMenuItem: FC<SettingsMenuItemProps> = ({ title, slug, icon: Icon }) => {
   const path = usePathname()
-  const isCurrent = path === slug
+  const isCurrent = path.startsWith(slug)
 
   return (
     <Button