From 6bcff5adaa528d29ac41b7db797a554c4f06ddad Mon Sep 17 00:00:00 2001
From: madsab <mads.barnes@hotmail.com>
Date: Mon, 5 Aug 2024 14:41:08 +0200
Subject: [PATCH 1/7] add PhoneInput component + validatePhoneNumber method

---
 packages/ui/package.json                      |  3 +-
 .../PhoneInput/PhoneInput.stories.tsx         | 10 +++
 .../src/components/PhoneInput/PhoneInput.tsx  | 61 +++++++++++++++++++
 .../ui/src/components/PhoneInput/index.tsx    |  2 +
 packages/ui/src/index.ts                      | 16 ++---
 5 files changed, 83 insertions(+), 9 deletions(-)
 create mode 100644 packages/ui/src/components/PhoneInput/PhoneInput.stories.tsx
 create mode 100644 packages/ui/src/components/PhoneInput/PhoneInput.tsx
 create mode 100644 packages/ui/src/components/PhoneInput/index.tsx

diff --git a/packages/ui/package.json b/packages/ui/package.json
index b542c3258..582b9402c 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -22,13 +22,14 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-select": "^1.2.2",
     "clsx": "^2.0.0",
     "cva": "npm:class-variance-authority@^0.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-phone-number-input": "^3.4.5",
     "tailwind-merge": "^2.0.0"
   },
   "devDependencies": {
diff --git a/packages/ui/src/components/PhoneInput/PhoneInput.stories.tsx b/packages/ui/src/components/PhoneInput/PhoneInput.stories.tsx
new file mode 100644
index 000000000..b431cea11
--- /dev/null
+++ b/packages/ui/src/components/PhoneInput/PhoneInput.stories.tsx
@@ -0,0 +1,10 @@
+import { useState } from "react";
+import { PhoneInput } from "./PhoneInput";
+
+export default {
+  title: "PhoneInput",
+};
+export const Default = () => {
+  const [phoneValue, setPhoneValue] = useState();
+  return <PhoneInput onChange={() => setPhoneValue} value={phoneValue} />;
+};
diff --git a/packages/ui/src/components/PhoneInput/PhoneInput.tsx b/packages/ui/src/components/PhoneInput/PhoneInput.tsx
new file mode 100644
index 000000000..d205f6891
--- /dev/null
+++ b/packages/ui/src/components/PhoneInput/PhoneInput.tsx
@@ -0,0 +1,61 @@
+"use client"
+import { Component, FC, forwardRef, LegacyRef } from "react"
+import PhoneInputWithCountry, {
+  DefaultInputComponentProps,
+  Props,
+  isValidPhoneNumber as isValidPhoneNumberOrigin,
+} from "react-phone-number-input"
+import { cn } from "../../utils"
+import "react-phone-number-input/style.css"
+import { Label } from "@radix-ui/react-label"
+import { cva } from "cva"
+
+export interface CustomPhoneInputProps extends Props<DefaultInputComponentProps> {
+  defaultValue?: string
+  label?: string
+  width?: string
+  error?: string
+}
+
+const PhoneInput = forwardRef<CustomPhoneInputProps, DefaultInputComponentProps>(
+  ({ defaultValue, label, width, error, ...props }, ref) => (
+    <div className={cn("flex flex-col", width)}>
+      {label && (
+        <Label htmlFor={props.id} className="mb-2">
+          {label} {props.required && <span className="text-red-11">*</span>}
+        </Label>
+      )}
+      <PhoneInputWithCountry
+        onChange={props.onChange}
+        value={defaultValue}
+        className={cn("flex w-full space-x-2")}
+        numberInputProps={{ className: input({ error: Boolean(error), disabled: props.disabled }) }}
+        limitMaxLength
+        defaultCountry="NO"
+        {...props}
+      />
+      {typeof error === "string" && <span className="text-red-11 mt-1 text-xs ml-12">{error}</span>}
+    </div>
+  )
+)
+
+const input = cva(
+  "border-solid border outline-none focus:border-blue-7 bg-white-3 hover:bg-white-4 active:bg-white-5 rounded-md p-2 focus:ring-2 focus:ring-brand",
+  {
+    variants: {
+      error: {
+        true: "text-red-11 border-red-7",
+        false: "text-slate-12 border-slate-6",
+      },
+      disabled: {
+        true: "cursor-not-allowed text-slate-10",
+      },
+    },
+  }
+)
+
+const isValidPhoneNumber = (phoneNumber: string) => {
+  return isValidPhoneNumberOrigin(phoneNumber)
+}
+
+export { PhoneInput, isValidPhoneNumber }
diff --git a/packages/ui/src/components/PhoneInput/index.tsx b/packages/ui/src/components/PhoneInput/index.tsx
new file mode 100644
index 000000000..0d88c6e3a
--- /dev/null
+++ b/packages/ui/src/components/PhoneInput/index.tsx
@@ -0,0 +1,2 @@
+export { PhoneInput, isValidPhoneNumber } from "./PhoneInput"
+export type { CustomPhoneInputProps } from "./PhoneInput"
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 73cdec2ed..664037e00 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,20 +1,20 @@
 export * from "./components/Accordion"
 export * from "./components/Alert"
+export * from "./components/Avatar"
 export * from "./components/Badge"
 export * from "./components/Button"
 export * from "./components/Card"
+export * from "./components/Circle"
 export * from "./components/Checkbox"
 export * from "./components/Dialog"
-export * from "./components/Textarea"
-export * from "./components/Toggle"
+export * from "./components/DropdownMenu"
+export * from "./components/Icon"
 export * from "./components/Input"
 export * from "./components/Label"
-export * from "./components/Icon"
-export * from "./components/Avatar"
-export * from "./components/Circle"
-export * from "./components/Text"
-export * from "./components/DropdownMenu"
-export * from "./components/Accordion"
+export * from "./components/PhoneInput"
 export * from "./components/Select"
+export * from "./components/Text"
+export * from "./components/Textarea"
+export * from "./components/Toggle"
 
 export * from "./utils"

From 9241ba510d08582d7e13d9351e3e5909ec318e25 Mon Sep 17 00:00:00 2001
From: madsab <mads.barnes@hotmail.com>
Date: Tue, 13 Aug 2024 19:56:19 +0200
Subject: [PATCH 2/7] set User-properties middlename and phonenumber to
 optional

---
 packages/db/src/db.generated.d.ts | 2 +-
 packages/types/src/user.ts        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/db/src/db.generated.d.ts b/packages/db/src/db.generated.d.ts
index 750c48a21..1682617f4 100644
--- a/packages/db/src/db.generated.d.ts
+++ b/packages/db/src/db.generated.d.ts
@@ -221,7 +221,7 @@ export interface OwUser {
   givenName: string
   id: Generated<string>
   lastSyncedAt: Generated<Timestamp>
-  middleName: string
+  middleName: string | null
   name: string
   phone: string | null
   picture: string | null
diff --git a/packages/types/src/user.ts b/packages/types/src/user.ts
index 286a3263f..be1bd4bbb 100644
--- a/packages/types/src/user.ts
+++ b/packages/types/src/user.ts
@@ -6,10 +6,10 @@ export const UserSchema = z.object({
   email: z.string().email(),
   givenName: z.string(),
   familyName: z.string(),
-  middleName: z.string(),
+  middleName: z.string().nullable().optional(),
   gender: z.enum(["male", "female", "other"]),
   name: z.string(),
-  phone: z.string().nullable(),
+  phone: z.string().nullable().optional(),
   studyYear: z.number().int().min(-1).max(6),
   allergies: z.array(z.string()),
   picture: z.string().nullable(),

From d97a83a62e2ab04f7774524bd14d951b9630fce0 Mon Sep 17 00:00:00 2001
From: madsab <mads.barnes@hotmail.com>
Date: Tue, 13 Aug 2024 20:05:34 +0200
Subject: [PATCH 3/7] fix(button): prevent `loading` prop from being passed as
 an HTML attribute

---
 packages/ui/src/components/Button/Button.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index e5c1dc7fd..23a6ad338 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -15,10 +15,10 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   loading?: boolean
 }
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => (
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ loading, icon, ...props }, ref) => (
   <button
     {...props}
-    disabled={props.disabled || props.loading}
+    disabled={props.disabled || loading}
     className={cn(
       buttonStyles({ variant: props.variant, size: props.size }),
       props.color && getColorStyles(props.variant, props.color),
@@ -30,9 +30,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     ref={ref}
   >
     <div className="flex items-center justify-center">
-      {(props.loading || props.icon) && (
+      {(loading || icon) && (
         <i className="mr-1 flex">
-          {props.loading ? <Icon width={16} icon="tabler:loader-2" className="animate-spin" /> : props.icon}
+          {loading ? <Icon width={16} icon="tabler:loader-2" className="animate-spin" /> : icon}
         </i>
       )}
       <span className="text-inherit">{props.children}</span>

From f200520249e43a2025e22941f541ef83a542b01d Mon Sep 17 00:00:00 2001
From: madsab <mads.barnes@hotmail.com>
Date: Wed, 14 Aug 2024 18:13:22 +0200
Subject: [PATCH 4/7] feat: update user-info in settings (not image)

---
 apps/web/package.json                         |   1 +
 .../profile/ProfileMenu/SettingsMenuItem.tsx  |   2 +-
 .../components/SettingsLanding.tsx            | 205 ++++++++++++++----
 packages/config/tailwind-preset.js            |  31 +++
 4 files changed, 201 insertions(+), 38 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 1f3ffce2e..ce1d2b392 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -22,6 +22,7 @@
     "@dotkomonline/types": "workspace:*",
     "@dotkomonline/ui": "workspace:*",
     "@fadi-ui/react-country-flag": "^1.0.7",
+    "@hookform/resolvers": "^3.3.4",
     "@next/env": "^14.0.3",
     "@portabletext/react": "^3.0.11",
     "@radix-ui/colors": "^3.0.0",
diff --git a/apps/web/src/components/organisms/Navbar/components/profile/ProfileMenu/SettingsMenuItem.tsx b/apps/web/src/components/organisms/Navbar/components/profile/ProfileMenu/SettingsMenuItem.tsx
index 4c0cc8110..e9f7dbf70 100644
--- a/apps/web/src/components/organisms/Navbar/components/profile/ProfileMenu/SettingsMenuItem.tsx
+++ b/apps/web/src/components/organisms/Navbar/components/profile/ProfileMenu/SettingsMenuItem.tsx
@@ -32,7 +32,7 @@ const SettingsMenuItem: React.FC<SettingsMenuItemProps> = ({ menuItem }) => {
       )}
     >
       <div className={cn("mr-4 h-7 w-7")}>
-        <Icon icon={icon} width="w-7" />
+        <Icon icon={icon} width={24} />
       </div>
       <p className="font-medium">{title}</p>
     </Link>
diff --git a/apps/web/src/components/views/SettingsView/components/SettingsLanding.tsx b/apps/web/src/components/views/SettingsView/components/SettingsLanding.tsx
index fa9dfc007..2bbb3d511 100644
--- a/apps/web/src/components/views/SettingsView/components/SettingsLanding.tsx
+++ b/apps/web/src/components/views/SettingsView/components/SettingsLanding.tsx
@@ -1,50 +1,181 @@
+"use client"
 import AvatarImgChange from "@/app/settings/components/ChangeAvatar"
-import { CountryCodeSelect } from "@/app/settings/components/CountryCodeSelect"
-import { TextInput, Textarea } from "@dotkomonline/ui"
+import { trpc } from "@/utils/trpc/client"
+import type { UserWrite } from "@dotkomonline/types"
+import { User } from "next-auth"
+import { Button, PhoneInput, TextInput, Textarea, isValidPhoneNumber } from "@dotkomonline/ui"
+import { zodResolver } from "@hookform/resolvers/zod"
 import type { NextPage } from "next"
-import type { User } from "next-auth"
+import { useState } from "react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { revalidatePath } from "next/cache"
 
-interface FormInputProps {
-  title: string
-  children?: JSX.Element
-}
+const nameSchema = z
+  .string()
+  .min(2, "Navn må være minst 2 bokstaver")
+  .max(50, "Navn kan maks være 50 bokstaver")
+  .regex(/^[a-zA-ZæøåÆØÅ\s'-]+$/, "Navn kan ikke inneholde tall eller spesialtegn bortsett fra - og '")
+  .toLowerCase()
+  .trim()
+  .transform((v) =>
+    v
+      .split(" ")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" ")
+  )
 
-const FormInput: React.FC<FormInputProps> = ({ title, children }) => (
-  <div className="w-full border-t-[1px] border-slate-7 flex py-8 justify-between px-4">
-    <div className="w-1/4">{title}:</div>
-    <div className="flex-1 flex justify-center">{children}</div>
-  </div>
-)
+const updateUserSchema = z.object({
+  givenName: nameSchema,
+  familyName: nameSchema,
+  email: z.string().email("Ikke en gyldig epost"),
+  phone: z
+    .string()
+    .refine((v) => isValidPhoneNumber(v), "Ikke et gyldig telefonnummer")
+    .optional(),
+  allergies: z.array(z.string()).optional(),
+  picture: z.string().optional(),
+})
 
 const Landing: NextPage<{ user: User }> = ({ user }) => {
+  const [allergies, setAllergies] = useState<string>()
+  const updateUser = trpc.user.update.useMutation()
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    trigger,
+    formState: { errors, dirtyFields, isSubmitting },
+  } = useForm<UserWrite>({
+    resolver: zodResolver(updateUserSchema),
+    defaultValues: {
+      ...user,
+    },
+  })
+
+  const formatAllergies = (allergies: string) => {
+    setAllergies(
+      allergies
+        .toLowerCase()
+        .replace(/[\s,]+/g, ",")
+        .replace(/(^\w|,\w)/g, (match) => match.toUpperCase())
+    )
+  }
+
+  const onSubmit = async (data: UserWrite) => {
+    const [firstName, ...rest] = data.givenName.split(" ")
+    const middleName = rest.join(" ") || null
+    data = {
+      ...data,
+      givenName: firstName,
+      middleName: middleName,
+      name: data.givenName + " " + data.familyName,
+
+      /* Add fake data as the session token does not currently give a full user */
+      phone: data.phone || null,
+      auth0Id: "auth0|c75f2ffa-4b07-41c2-b173-273a2b443c6d",
+      gender: "male",
+      studyYear: 2,
+      picture: "https://example.com/image.jpg",
+      lastSyncedAt: new Date(),
+    }
+    await updateUser.mutateAsync(
+      { data },
+      {
+        onSuccess: (data) => {
+          // change to toast when toast-functionality is implemented and remove console.log and alert
+          console.log("Success:", data)
+          alert("Endringer lagret")
+        },
+        onError: (error) => {
+          // change to toast when toast-functionality is implemented and remove console.log and alert
+          console.log("Error:", error)
+          alert("Noe gikk galt, prøv igjen")
+        },
+      }
+    )
+  }
+
   return (
-    <div className="flex w-full flex-col space-y-4">
-      <div className="flex flex-col items-center justify-evenly space-y-4 mb-4">
-        <AvatarImgChange {...user} />
-      </div>
-      <FormInput title="Navn">
-        <div className="w-full flex flex-wrap justify-center ">
-          <TextInput width="flex-1 mb-2 mx-1" placeholder="Fornavn" defaultValue={user.givenName} />
-          <TextInput width="flex-1 mx-1" placeholder="Etternavn" defaultValue={user.familyName} />
-        </div>
-      </FormInput>
-      <FormInput title="Epost">
-        <TextInput width="flex-1" placeholder="Epost" defaultValue={user.email} />
-      </FormInput>
-      <FormInput title="Telefon">
-        <div className="w-full flex space-x-2">
-          <CountryCodeSelect />
-          <TextInput width="w-full" maxLength={8} />
+    <div className="flex w-full flex-col space-y-4 py-2">
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="flex flex-col items-center justify-evenly mb-4">
+          <AvatarImgChange {...user} />
         </div>
-      </FormInput>
-      <FormInput title="Bio">
-        <Textarea placeholder="Din råkule bio" />
-      </FormInput>
-      <FormInput title="Allergier">
-        <Textarea placeholder="Dine allergier" />
-      </FormInput>
+        <FormInputContainer title="Navn" required>
+          <div className="w-full flex flex-wrap justify-center h-full ">
+            <TextInput
+              width="flex-1 mb-2 mx-1"
+              placeholder="Fornavn"
+              defaultValue={user.givenName}
+              {...register("givenName")}
+              error={errors.givenName && errors.givenName.message}
+            />
+            <TextInput
+              width="flex-1 mx-1"
+              placeholder="Etternavn"
+              defaultValue={user.familyName}
+              {...register("familyName")}
+              error={errors.familyName && errors.familyName.message}
+            />
+          </div>
+        </FormInputContainer>
+        <FormInputContainer title="Epost" required>
+          <TextInput
+            width="flex-1"
+            placeholder="Epost"
+            defaultValue={user.email}
+            {...register("email")}
+            error={errors.email && errors.email.message}
+          />
+        </FormInputContainer>
+        <FormInputContainer title="Telefon">
+          <PhoneInput
+            width="w-full"
+            placeholder="Telefonnummer"
+            defaultValue={user.phone || undefined}
+            onChange={(value: string) => {
+              setValue("phone", value, { shouldDirty: true }), trigger("phone")
+            }}
+            error={errors.phone && errors.phone.message}
+          />
+        </FormInputContainer>
+        <FormInputContainer title="Allergier">
+          <Textarea
+            spellCheck="false"
+            placeholder="Dine allergier"
+            defaultValue={user.allergies?.join(",")}
+            value={allergies}
+            {...register("allergies", {
+              onChange: (e) => {
+                formatAllergies(e.target.value)
+              },
+              setValueAs: (v: string) => (v ? v.split(",").filter((a) => a.length > 0) : []),
+            })}
+          />
+        </FormInputContainer>
+        {Object.keys(dirtyFields).length > 0 && (
+          <Button type="submit" className="w-full my-2 fade-in-25" loading={isSubmitting}>
+            Lagre
+          </Button>
+        )}
+      </form>
     </div>
   )
 }
+interface FormInputContainerProps {
+  title: string
+  children?: JSX.Element
+  required?: boolean
+}
+
+const FormInputContainer: React.FC<FormInputContainerProps> = ({ title, children, required }) => (
+  <div className="w-full border-t-[1px] border-slate-7 flex pt-12 justify-between px-4">
+    <div className="w-1/4">
+      {title}:{required && "*"}
+    </div>
+    <div className="flex-1 flex min-h-24 justify-center">{children}</div>
+  </div>
+)
 
 export default Landing
diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js
index fb96f3891..7445c6c6e 100644
--- a/packages/config/tailwind-preset.js
+++ b/packages/config/tailwind-preset.js
@@ -68,6 +68,37 @@ module.exports = {
       borderRadius: {
         md: "4px",
       },
+      minHeight: {
+        "1": "0.25rem",
+        "2": "0.5rem",
+        "3": "0.75rem",
+        "4": "1rem",
+        "5": "1.25rem",
+        "6": "1.5rem",
+        "7": "1.75rem",
+        "8": "2rem",
+        "9": "2.25rem",
+        "10": "2.5rem",
+        "11": "2.75rem",
+        "12": "3rem",
+        "14": "3.5rem",
+        "16": "4rem",
+        "20": "5rem",
+        "24": "6rem",
+        "28": "7rem",
+        "32": "8rem",
+        "36": "9rem",
+        "40": "10rem",
+        "44": "11rem",
+        "48": "12rem",
+        "52": "13rem",
+        "56": "14rem",
+        "60": "15rem",
+        "64": "16rem",
+        "72": "18rem",
+        "80": "20rem",
+        "96": "24rem",
+      },
       typography: ({ theme }) => ({
         DEFAULT: {
           "--tw-prose-invert-bullets": theme("colors.amber.12"),

From 1f8d6cb37054c13450a51ad94c9419fd6df2060a Mon Sep 17 00:00:00 2001
From: madsab <mads.barnes@hotmail.com>
Date: Thu, 15 Aug 2024 14:36:28 +0200
Subject: [PATCH 5/7] fix: eslint

---
 .../molecules/ComingEvent/ComingEvent.tsx     |  2 +-
 .../organisms/Navbar/ProfileMenu.tsx          |  2 +-
 .../components/SettingsLanding.tsx            | 22 +++----
 packages/auth/src/auth-options.ts             |  7 +++
 packages/config/tailwind-preset.js            | 58 +++++++++----------
 .../PhoneInput/PhoneInput.stories.tsx         | 12 ++--
 .../src/components/PhoneInput/PhoneInput.tsx  | 12 ++--
 packages/ui/vite.config.ts                    |  4 +-
 8 files changed, 63 insertions(+), 56 deletions(-)

diff --git a/apps/web/src/components/molecules/ComingEvent/ComingEvent.tsx b/apps/web/src/components/molecules/ComingEvent/ComingEvent.tsx
index fad0c24f3..dd7b270b3 100644
--- a/apps/web/src/components/molecules/ComingEvent/ComingEvent.tsx
+++ b/apps/web/src/components/molecules/ComingEvent/ComingEvent.tsx
@@ -1,8 +1,8 @@
+import EventImagePlaceholder from "@/assets/EventImagePlaceholder.svg"
 import { Badge } from "@dotkomonline/ui"
 import Image from "next/image"
 import Link from "next/link"
 import type React from "react"
-import EventImagePlaceholder from "@/assets/EventImagePlaceholder.svg"
 
 interface ComingEventProps {
   img: string | null
diff --git a/apps/web/src/components/organisms/Navbar/ProfileMenu.tsx b/apps/web/src/components/organisms/Navbar/ProfileMenu.tsx
index 399495101..36fad3427 100644
--- a/apps/web/src/components/organisms/Navbar/ProfileMenu.tsx
+++ b/apps/web/src/components/organisms/Navbar/ProfileMenu.tsx
@@ -27,8 +27,8 @@ import { SessionProvider, signIn, signOut, useSession } from "next-auth/react"
 import { useTheme } from "next-themes"
 import Link from "next/link"
 import type { FC, PropsWithChildren } from "react"
-import { navigationMenuTriggerStyle } from "./NavigationMenu"
 import React from "react"
+import { navigationMenuTriggerStyle } from "./NavigationMenu"
 
 export const ProfileMenu = ({
   initialData,
diff --git a/apps/web/src/components/views/SettingsView/components/SettingsLanding.tsx b/apps/web/src/components/views/SettingsView/components/SettingsLanding.tsx
index 2bbb3d511..06454c295 100644
--- a/apps/web/src/components/views/SettingsView/components/SettingsLanding.tsx
+++ b/apps/web/src/components/views/SettingsView/components/SettingsLanding.tsx
@@ -2,14 +2,13 @@
 import AvatarImgChange from "@/app/settings/components/ChangeAvatar"
 import { trpc } from "@/utils/trpc/client"
 import type { UserWrite } from "@dotkomonline/types"
-import { User } from "next-auth"
 import { Button, PhoneInput, TextInput, Textarea, isValidPhoneNumber } from "@dotkomonline/ui"
 import { zodResolver } from "@hookform/resolvers/zod"
 import type { NextPage } from "next"
+import type { User } from "next-auth"
 import { useState } from "react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
-import { revalidatePath } from "next/cache"
 
 const nameSchema = z
   .string()
@@ -65,22 +64,22 @@ const Landing: NextPage<{ user: User }> = ({ user }) => {
   const onSubmit = async (data: UserWrite) => {
     const [firstName, ...rest] = data.givenName.split(" ")
     const middleName = rest.join(" ") || null
-    data = {
+    const fakePopulatedData = {
       ...data,
       givenName: firstName,
       middleName: middleName,
-      name: data.givenName + " " + data.familyName,
+      name: `${data.givenName} ${data.familyName}`,
 
       /* Add fake data as the session token does not currently give a full user */
       phone: data.phone || null,
       auth0Id: "auth0|c75f2ffa-4b07-41c2-b173-273a2b443c6d",
-      gender: "male",
+      gender: "male" as const,
       studyYear: 2,
       picture: "https://example.com/image.jpg",
       lastSyncedAt: new Date(),
     }
     await updateUser.mutateAsync(
-      { data },
+      { data: fakePopulatedData },
       {
         onSuccess: (data) => {
           // change to toast when toast-functionality is implemented and remove console.log and alert
@@ -109,14 +108,14 @@ const Landing: NextPage<{ user: User }> = ({ user }) => {
               placeholder="Fornavn"
               defaultValue={user.givenName}
               {...register("givenName")}
-              error={errors.givenName && errors.givenName.message}
+              error={errors.givenName?.message}
             />
             <TextInput
               width="flex-1 mx-1"
               placeholder="Etternavn"
               defaultValue={user.familyName}
               {...register("familyName")}
-              error={errors.familyName && errors.familyName.message}
+              error={errors.familyName?.message}
             />
           </div>
         </FormInputContainer>
@@ -126,7 +125,7 @@ const Landing: NextPage<{ user: User }> = ({ user }) => {
             placeholder="Epost"
             defaultValue={user.email}
             {...register("email")}
-            error={errors.email && errors.email.message}
+            error={errors.email?.message}
           />
         </FormInputContainer>
         <FormInputContainer title="Telefon">
@@ -135,9 +134,10 @@ const Landing: NextPage<{ user: User }> = ({ user }) => {
             placeholder="Telefonnummer"
             defaultValue={user.phone || undefined}
             onChange={(value: string) => {
-              setValue("phone", value, { shouldDirty: true }), trigger("phone")
+              setValue("phone", value, { shouldDirty: true })
+              trigger("phone")
             }}
-            error={errors.phone && errors.phone.message}
+            error={errors.phone?.message}
           />
         </FormInputContainer>
         <FormInputContainer title="Allergier">
diff --git a/packages/auth/src/auth-options.ts b/packages/auth/src/auth-options.ts
index 5c5f0bde9..9bc152d9b 100644
--- a/packages/auth/src/auth-options.ts
+++ b/packages/auth/src/auth-options.ts
@@ -12,6 +12,13 @@ interface Auth0IdTokenClaims {
   updated_at: string
   email: string
   email_verified: boolean
+  updated_at: string
+
+  studyYear: number
+  allergies: string[]
+  phone: string
+  lastSyncedAt: Date
+
   iss: string
   aud: string
   iat: number
diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js
index 7445c6c6e..b7deb7edc 100644
--- a/packages/config/tailwind-preset.js
+++ b/packages/config/tailwind-preset.js
@@ -69,35 +69,35 @@ module.exports = {
         md: "4px",
       },
       minHeight: {
-        "1": "0.25rem",
-        "2": "0.5rem",
-        "3": "0.75rem",
-        "4": "1rem",
-        "5": "1.25rem",
-        "6": "1.5rem",
-        "7": "1.75rem",
-        "8": "2rem",
-        "9": "2.25rem",
-        "10": "2.5rem",
-        "11": "2.75rem",
-        "12": "3rem",
-        "14": "3.5rem",
-        "16": "4rem",
-        "20": "5rem",
-        "24": "6rem",
-        "28": "7rem",
-        "32": "8rem",
-        "36": "9rem",
-        "40": "10rem",
-        "44": "11rem",
-        "48": "12rem",
-        "52": "13rem",
-        "56": "14rem",
-        "60": "15rem",
-        "64": "16rem",
-        "72": "18rem",
-        "80": "20rem",
-        "96": "24rem",
+        1: "0.25rem",
+        2: "0.5rem",
+        3: "0.75rem",
+        4: "1rem",
+        5: "1.25rem",
+        6: "1.5rem",
+        7: "1.75rem",
+        8: "2rem",
+        9: "2.25rem",
+        10: "2.5rem",
+        11: "2.75rem",
+        12: "3rem",
+        14: "3.5rem",
+        16: "4rem",
+        20: "5rem",
+        24: "6rem",
+        28: "7rem",
+        32: "8rem",
+        36: "9rem",
+        40: "10rem",
+        44: "11rem",
+        48: "12rem",
+        52: "13rem",
+        56: "14rem",
+        60: "15rem",
+        64: "16rem",
+        72: "18rem",
+        80: "20rem",
+        96: "24rem",
       },
       typography: ({ theme }) => ({
         DEFAULT: {
diff --git a/packages/ui/src/components/PhoneInput/PhoneInput.stories.tsx b/packages/ui/src/components/PhoneInput/PhoneInput.stories.tsx
index b431cea11..8b95bd1a3 100644
--- a/packages/ui/src/components/PhoneInput/PhoneInput.stories.tsx
+++ b/packages/ui/src/components/PhoneInput/PhoneInput.stories.tsx
@@ -1,10 +1,10 @@
-import { useState } from "react";
-import { PhoneInput } from "./PhoneInput";
+import { useState } from "react"
+import { PhoneInput } from "./PhoneInput"
 
 export default {
   title: "PhoneInput",
-};
+}
 export const Default = () => {
-  const [phoneValue, setPhoneValue] = useState();
-  return <PhoneInput onChange={() => setPhoneValue} value={phoneValue} />;
-};
+  const [phoneValue, setPhoneValue] = useState()
+  return <PhoneInput onChange={() => setPhoneValue} value={phoneValue} />
+}
diff --git a/packages/ui/src/components/PhoneInput/PhoneInput.tsx b/packages/ui/src/components/PhoneInput/PhoneInput.tsx
index d205f6891..1be422680 100644
--- a/packages/ui/src/components/PhoneInput/PhoneInput.tsx
+++ b/packages/ui/src/components/PhoneInput/PhoneInput.tsx
@@ -1,14 +1,14 @@
 "use client"
-import { Component, FC, forwardRef, LegacyRef } from "react"
+import { Label } from "@radix-ui/react-label"
+import { cva } from "cva"
+import { forwardRef } from "react"
 import PhoneInputWithCountry, {
-  DefaultInputComponentProps,
-  Props,
+  type DefaultInputComponentProps,
+  type Props,
   isValidPhoneNumber as isValidPhoneNumberOrigin,
 } from "react-phone-number-input"
-import { cn } from "../../utils"
 import "react-phone-number-input/style.css"
-import { Label } from "@radix-ui/react-label"
-import { cva } from "cva"
+import { cn } from "../../utils"
 
 export interface CustomPhoneInputProps extends Props<DefaultInputComponentProps> {
   defaultValue?: string
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index 5bfb541dc..92dc75d6e 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -1,5 +1,5 @@
 export default {
   server: {
     open: false,
-  }
-}
\ No newline at end of file
+  },
+}

From 9bc792fefbe51be07125e6fc6a1c58b9fecde723 Mon Sep 17 00:00:00 2001
From: madsab <mads.barnes@hotmail.com>
Date: Thu, 15 Aug 2024 14:56:40 +0200
Subject: [PATCH 6/7] fix: missing peer dependency @types/node@* +
 postcss@^8.3.3

---
 package.json   |  10 ++-
 pnpm-lock.yaml | 168 ++++++++++++++++++++++++++++++-------------------
 2 files changed, 112 insertions(+), 66 deletions(-)

diff --git a/package.json b/package.json
index 6e2ee79e0..0cf363ec4 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,11 @@
   "name": "monorepo",
   "version": "1.0.0",
   "description": "Monoweb is the next-generation web application for Online. This is the monorepo source.",
-  "keywords": ["online", "ntnu", "student-association"],
+  "keywords": [
+    "online",
+    "ntnu",
+    "student-association"
+  ],
   "homepage": "https://online.ntnu.no",
   "author": "Dotkom <dotkom@online.ntnu> (https://online.ntnu.no)",
   "bugs": {
@@ -52,5 +56,9 @@
     "turbo": "^1.10.16",
     "turbo-ignore": "^1.10.16",
     "typescript": "^5.4.5"
+  },
+  "dependencies": {
+    "@types/node": "^20.12.7",
+    "postcss": "^8.3.3"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8d5934d58..7f93023de 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,13 @@ settings:
 importers:
 
   .:
+    dependencies:
+      '@types/node':
+        specifier: ^20.12.7
+        version: 20.12.7
+      postcss:
+        specifier: ^8.3.3
+        version: 8.4.38
     devDependencies:
       dotenv-cli:
         specifier: ^7.3.0
@@ -44,7 +51,7 @@ importers:
         version: 20.12.7
       tsup:
         specifier: ^7.2.0
-        version: 7.2.0(@swc/core@1.4.17(@swc/helpers@0.5.2))(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))(typescript@5.4.5)
+        version: 7.2.0(@swc/core@1.4.17)(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.17)(@types/node@20.12.7)(typescript@5.4.5))(typescript@5.4.5)
       typescript:
         specifier: ^5.4.5
         version: 5.4.5
@@ -177,7 +184,7 @@ importers:
         version: 7.0.1(postcss@8.4.31)
       tailwindcss:
         specifier: ^3.3.5
-        version: 3.3.5(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))
+        version: 3.3.5(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5))
       tslib:
         specifier: ^2.6.2
         version: 2.6.2
@@ -247,7 +254,7 @@ importers:
         version: 8.4.33
       tailwindcss:
         specifier: ^3.3.5
-        version: 3.3.5(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))
+        version: 3.3.5(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5))
       tslib:
         specifier: ^2.6.2
         version: 2.6.2
@@ -329,7 +336,7 @@ importers:
         version: 8.4.31
       tailwindcss:
         specifier: ^3.3.5
-        version: 3.3.5(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))
+        version: 3.3.5(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5))
       tslib:
         specifier: ^2.6.2
         version: 2.6.2
@@ -363,6 +370,9 @@ importers:
       '@fadi-ui/react-country-flag':
         specifier: ^1.0.7
         version: 1.0.7
+      '@hookform/resolvers':
+        specifier: ^3.3.4
+        version: 3.3.4(react-hook-form@7.49.3(react@18.2.0))
       '@next/env':
         specifier: ^14.0.3
         version: 14.0.4
@@ -395,7 +405,7 @@ importers:
         version: 6.11.1
       '@tailwindcss/typography':
         specifier: ^0.5.10
-        version: 0.5.10(tailwindcss@3.3.5(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5)))
+        version: 0.5.10(tailwindcss@3.3.5(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5)))
       '@tanstack/react-query':
         specifier: ^4.36.1
         version: 4.36.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -498,7 +508,7 @@ importers:
         version: 8.4.31
       tailwindcss:
         specifier: ^3.3.5
-        version: 3.3.5(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))
+        version: 3.3.5(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5))
       trpc-playground:
         specifier: ^1.0.4
         version: 1.0.4(@trpc/server@10.45.0)(@types/node@20.12.7)(koa@2.15.3)(sugarss@4.0.1(postcss@8.4.31))(typescript@5.4.5)(zod@3.22.4)
@@ -553,7 +563,7 @@ importers:
         version: 3.0.0
       '@tailwindcss/typography':
         specifier: ^0.5.10
-        version: 0.5.10(tailwindcss@3.3.5(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5)))
+        version: 0.5.10(tailwindcss@3.3.5(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5)))
       postcss:
         specifier: ^8.4.31
         version: 8.4.31
@@ -562,10 +572,10 @@ importers:
         version: 15.1.0(postcss@8.4.31)
       tailwindcss:
         specifier: ^3.3.5
-        version: 3.3.5(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))
+        version: 3.3.5(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5))
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.3.5(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5)))
+        version: 1.0.7(tailwindcss@3.3.5(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5)))
       tailwindcss-radix:
         specifier: ^2.8.0
         version: 2.8.0
@@ -669,13 +679,13 @@ importers:
     dependencies:
       '@react-email/components':
         specifier: ^0.0.11
-        version: 0.0.11(@types/react@18.2.48)(react@18.2.0)(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))
+        version: 0.0.11(@types/react@18.2.48)(react@18.2.0)(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5))
       '@react-email/render':
         specifier: ^0.0.9
         version: 0.0.9
       '@react-email/tailwind':
         specifier: ^0.0.12
-        version: 0.0.12(react@18.2.0)(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))
+        version: 0.0.12(react@18.2.0)(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5))
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -885,6 +895,9 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
+      react-phone-number-input:
+        specifier: ^3.4.5
+        version: 3.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       tailwind-merge:
         specifier: ^2.0.0
         version: 2.2.0
@@ -909,7 +922,7 @@ importers:
         version: 8.4.31
       tailwindcss:
         specifier: ^3.3.5
-        version: 3.3.5(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))
+        version: 3.3.5(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5))
       typescript:
         specifier: ^5.4.5
         version: 5.4.5
@@ -4098,6 +4111,9 @@ packages:
     resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
     engines: {node: '>= 0.10'}
 
+  country-flag-icons@1.5.13:
+    resolution: {integrity: sha512-4JwHNqaKZ19doQoNcBjsoYA+I7NqCH/mC/6f5cBWvdKzcK5TMmzLpq3Z/syVHMHJuDGFwJ+rPpGizvrqJybJow==}
+
   cpu-features@0.0.9:
     resolution: {integrity: sha512-AKjgn2rP2yJyfbepsmLfiYcmtNn/2eUvocUyM/09yB0YDiz39HteK/5/T4Onf0pmdYDMgkBoGvRLvEguzyL7wQ==}
     engines: {node: '>=10.0.0'}
@@ -4529,6 +4545,7 @@ packages:
   fstream@1.0.12:
     resolution: {integrity: sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==}
     engines: {node: '>=0.6'}
+    deprecated: This package is no longer supported.
 
   function-bind@1.1.1:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
@@ -4602,17 +4619,21 @@ packages:
 
   glob@7.1.6:
     resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
+    deprecated: Glob versions prior to v9 are no longer supported
 
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
 
   glob@8.0.3:
     resolution: {integrity: sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==}
     engines: {node: '>=12'}
+    deprecated: Glob versions prior to v9 are no longer supported
 
   glob@8.1.0:
     resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
     engines: {node: '>=12'}
+    deprecated: Glob versions prior to v9 are no longer supported
 
   globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
@@ -4819,6 +4840,7 @@ packages:
 
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
 
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
@@ -4832,6 +4854,9 @@ packages:
   inline-style-parser@0.2.2:
     resolution: {integrity: sha512-EcKzdTHVe8wFVOGEYXiW9WmJXPjqi1T+234YpJr98RiFYKHV3cdy1+3mkTE+KHTHxFFLH51SfaGOoUdW+v7ViQ==}
 
+  input-format@0.3.10:
+    resolution: {integrity: sha512-5cFv/kOZD7Ch0viprVkuYPDkAU7HBZYBx8QrIpQ6yXUWbAQ0+RQ8IIojDJOf/RO6FDJLL099HDSK2KoVZ2zevg==}
+
   interpret@1.4.0:
     resolution: {integrity: sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==}
     engines: {node: '>= 0.10'}
@@ -5098,6 +5123,9 @@ packages:
   leac@0.6.0:
     resolution: {integrity: sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg==}
 
+  libphonenumber-js@1.11.7:
+    resolution: {integrity: sha512-x2xON4/Qg2bRIS11KIN9yCNYUjhtiEjNyptjX0mX+pyKHecxuJVLIpfX1lq9ZD6CrC/rB+y4GBi18c6CEcUR+A==}
+
   lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
@@ -6024,6 +6052,12 @@ packages:
       react: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
       react-dom: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
 
+  react-phone-number-input@3.4.5:
+    resolution: {integrity: sha512-IlLTG0F/2P+72drqGNiYaguV3KOD4EVxQWGJ7YSofbOb6vyCWWLJqQIQsFFNpfrMrXzYtB3G+aHL9tprGfisFw==}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
   react-refresh@0.14.0:
     resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
     engines: {node: '>=0.10.0'}
@@ -6183,10 +6217,12 @@ packages:
 
   rimraf@2.7.1:
     resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
   rimraf@3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
   rollup@3.29.2:
@@ -9396,7 +9432,7 @@ snapshots:
     dependencies:
       react: 18.2.0
 
-  '@react-email/components@0.0.11(@types/react@18.2.48)(react@18.2.0)(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))':
+  '@react-email/components@0.0.11(@types/react@18.2.48)(react@18.2.0)(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5))':
     dependencies:
       '@react-email/body': 0.0.4(react@18.2.0)
       '@react-email/button': 0.0.11(react@18.2.0)
@@ -9413,7 +9449,7 @@ snapshots:
       '@react-email/render': 0.0.9
       '@react-email/row': 0.0.6(react@18.2.0)
       '@react-email/section': 0.0.10(react@18.2.0)
-      '@react-email/tailwind': 0.0.12(react@18.2.0)(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))
+      '@react-email/tailwind': 0.0.12(react@18.2.0)(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5))
       '@react-email/text': 0.0.6(react@18.2.0)
       react: 18.2.0
     transitivePeerDependencies:
@@ -9481,11 +9517,11 @@ snapshots:
     dependencies:
       react: 18.2.0
 
-  '@react-email/tailwind@0.0.12(react@18.2.0)(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))':
+  '@react-email/tailwind@0.0.12(react@18.2.0)(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5))':
     dependencies:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      tw-to-css: 0.0.12(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))
+      tw-to-css: 0.0.12(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5))
     transitivePeerDependencies:
       - ts-node
 
@@ -9985,13 +10021,13 @@ snapshots:
     optionalDependencies:
       typescript: 5.4.5
 
-  '@tailwindcss/typography@0.5.10(tailwindcss@3.3.5(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5)))':
+  '@tailwindcss/typography@0.5.10(tailwindcss@3.3.5(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5)))':
     dependencies:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.3.5(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))
+      tailwindcss: 3.3.5(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5))
 
   '@tanstack/query-core@4.36.1': {}
 
@@ -10271,7 +10307,7 @@ snapshots:
       pathe: 1.1.2
       picocolors: 1.0.0
       sirv: 2.0.4
-      vitest: 1.3.1(@types/node@20.12.7)(@vitest/ui@1.3.1)(jsdom@22.1.0)(sugarss@4.0.1(postcss@8.4.38))
+      vitest: 1.3.1(@types/node@20.12.7)(@vitest/ui@1.3.1)(jsdom@22.1.0)(sugarss@4.0.1(postcss@8.4.31))
 
   '@vitest/utils@1.3.1':
     dependencies:
@@ -10762,6 +10798,8 @@ snapshots:
       object-assign: 4.1.1
       vary: 1.1.2
 
+  country-flag-icons@1.5.13: {}
+
   cpu-features@0.0.9:
     dependencies:
       buildcheck: 0.0.6
@@ -11681,6 +11719,10 @@ snapshots:
 
   inline-style-parser@0.2.2: {}
 
+  input-format@0.3.10:
+    dependencies:
+      prop-types: 15.8.1
+
   interpret@1.4.0: {}
 
   into-stream@6.0.0:
@@ -11952,6 +11994,8 @@ snapshots:
 
   leac@0.6.0: {}
 
+  libphonenumber-js@1.11.7: {}
+
   lilconfig@2.1.0: {}
 
   lines-and-columns@1.2.4: {}
@@ -12894,9 +12938,9 @@ snapshots:
       read-cache: 1.0.0
       resolve: 1.22.2
 
-  postcss-import@15.1.0(postcss@8.4.33):
+  postcss-import@15.1.0(postcss@8.4.38):
     dependencies:
-      postcss: 8.4.33
+      postcss: 8.4.38
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.2
@@ -12906,34 +12950,18 @@ snapshots:
       camelcase-css: 2.0.1
       postcss: 8.4.31
 
-  postcss-js@4.0.1(postcss@8.4.33):
+  postcss-js@4.0.1(postcss@8.4.38):
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.33
-
-  postcss-load-config@4.0.1(postcss@8.4.31)(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5)):
-    dependencies:
-      lilconfig: 2.1.0
-      yaml: 2.3.1
-    optionalDependencies:
-      postcss: 8.4.31
-      ts-node: 10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5)
-
-  postcss-load-config@4.0.1(postcss@8.4.33)(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5)):
-    dependencies:
-      lilconfig: 2.1.0
-      yaml: 2.3.1
-    optionalDependencies:
-      postcss: 8.4.33
-      ts-node: 10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5)
+      postcss: 8.4.38
 
-  postcss-load-config@4.0.1(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5)):
+  postcss-load-config@4.0.1(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.17)(@types/node@20.12.7)(typescript@5.4.5)):
     dependencies:
       lilconfig: 2.1.0
       yaml: 2.3.1
     optionalDependencies:
       postcss: 8.4.38
-      ts-node: 10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5)
+      ts-node: 10.9.2(@swc/core@1.4.17)(@types/node@20.12.7)(typescript@5.4.5)
 
   postcss-mixins@9.0.4(postcss@8.4.31):
     dependencies:
@@ -12948,9 +12976,9 @@ snapshots:
       postcss: 8.4.31
       postcss-selector-parser: 6.0.13
 
-  postcss-nested@6.0.1(postcss@8.4.33):
+  postcss-nested@6.0.1(postcss@8.4.38):
     dependencies:
-      postcss: 8.4.33
+      postcss: 8.4.38
       postcss-selector-parser: 6.0.13
 
   postcss-preset-mantine@1.12.3(postcss@8.4.31):
@@ -13156,6 +13184,16 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
+  react-phone-number-input@3.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+    dependencies:
+      classnames: 2.5.1
+      country-flag-icons: 1.5.13
+      input-format: 0.3.10
+      libphonenumber-js: 1.11.7
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
   react-refresh@0.14.0: {}
 
   react-remove-scroll-bar@2.3.4(@types/react@18.2.48)(react@18.2.0):
@@ -13678,13 +13716,13 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.23.8
 
-  tailwindcss-animate@1.0.7(tailwindcss@3.3.5(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))):
+  tailwindcss-animate@1.0.7(tailwindcss@3.3.5(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5))):
     dependencies:
-      tailwindcss: 3.3.5(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))
+      tailwindcss: 3.3.5(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5))
 
   tailwindcss-radix@2.8.0: {}
 
-  tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5)):
+  tailwindcss@3.3.2(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -13700,11 +13738,11 @@ snapshots:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.0.0
-      postcss: 8.4.33
-      postcss-import: 15.1.0(postcss@8.4.33)
-      postcss-js: 4.0.1(postcss@8.4.33)
-      postcss-load-config: 4.0.1(postcss@8.4.33)(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))
-      postcss-nested: 6.0.1(postcss@8.4.33)
+      postcss: 8.4.38
+      postcss-import: 15.1.0(postcss@8.4.38)
+      postcss-js: 4.0.1(postcss@8.4.38)
+      postcss-load-config: 4.0.1(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.17)(@types/node@20.12.7)(typescript@5.4.5))
+      postcss-nested: 6.0.1(postcss@8.4.38)
       postcss-selector-parser: 6.0.13
       postcss-value-parser: 4.2.0
       resolve: 1.22.3
@@ -13712,7 +13750,7 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.3.5(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5)):
+  tailwindcss@3.3.5(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -13728,11 +13766,11 @@ snapshots:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.0.0
-      postcss: 8.4.31
-      postcss-import: 15.1.0(postcss@8.4.31)
-      postcss-js: 4.0.1(postcss@8.4.31)
-      postcss-load-config: 4.0.1(postcss@8.4.31)(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))
-      postcss-nested: 6.0.1(postcss@8.4.31)
+      postcss: 8.4.38
+      postcss-import: 15.1.0(postcss@8.4.38)
+      postcss-js: 4.0.1(postcss@8.4.38)
+      postcss-load-config: 4.0.1(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.17)(@types/node@20.12.7)(typescript@5.4.5))
+      postcss-nested: 6.0.1(postcss@8.4.38)
       postcss-selector-parser: 6.0.13
       resolve: 1.22.3
       sucrase: 3.34.0
@@ -13886,7 +13924,7 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
-  ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5):
+  ts-node@10.9.2(@swc/core@1.4.17)(@types/node@20.12.7)(typescript@5.4.5):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.9
@@ -13917,7 +13955,7 @@ snapshots:
 
   tsscmp@1.0.6: {}
 
-  tsup@7.2.0(@swc/core@1.4.17(@swc/helpers@0.5.2))(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))(typescript@5.4.5):
+  tsup@7.2.0(@swc/core@1.4.17)(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.17)(@types/node@20.12.7)(typescript@5.4.5))(typescript@5.4.5):
     dependencies:
       bundle-require: 4.0.2(esbuild@0.18.20)
       cac: 6.7.14
@@ -13927,7 +13965,7 @@ snapshots:
       execa: 5.1.1
       globby: 11.1.0
       joycon: 3.1.1
-      postcss-load-config: 4.0.1(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))
+      postcss-load-config: 4.0.1(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.17)(@types/node@20.12.7)(typescript@5.4.5))
       resolve-from: 5.0.0
       rollup: 3.29.2
       source-map: 0.8.0-beta.0
@@ -13982,11 +14020,11 @@ snapshots:
       turbo-windows-64: 1.11.3
       turbo-windows-arm64: 1.11.3
 
-  tw-to-css@0.0.12(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5)):
+  tw-to-css@0.0.12(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5)):
     dependencies:
       postcss: 8.4.31
       postcss-css-variables: 0.18.0(postcss@8.4.31)
-      tailwindcss: 3.3.2(ts-node@10.9.2(@swc/core@1.4.17(@swc/helpers@0.5.2))(@types/node@20.12.7)(typescript@5.4.5))
+      tailwindcss: 3.3.2(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5))
     transitivePeerDependencies:
       - ts-node
 
@@ -14247,7 +14285,7 @@ snapshots:
   vite@4.5.0(@types/node@20.12.7)(sugarss@4.0.1(postcss@8.4.31)):
     dependencies:
       esbuild: 0.18.20
-      postcss: 8.4.33
+      postcss: 8.4.38
       rollup: 3.29.2
     optionalDependencies:
       '@types/node': 20.12.7
@@ -14257,7 +14295,7 @@ snapshots:
   vite@5.0.11(@types/node@20.12.7)(sugarss@4.0.1(postcss@8.4.31)):
     dependencies:
       esbuild: 0.19.11
-      postcss: 8.4.33
+      postcss: 8.4.38
       rollup: 4.9.5
     optionalDependencies:
       '@types/node': 20.12.7
@@ -14267,7 +14305,7 @@ snapshots:
   vite@5.0.11(@types/node@20.12.7)(sugarss@4.0.1(postcss@8.4.38)):
     dependencies:
       esbuild: 0.19.11
-      postcss: 8.4.33
+      postcss: 8.4.38
       rollup: 4.9.5
     optionalDependencies:
       '@types/node': 20.12.7

From b78041aa95f25ce7ed17d30153ed333d7eaf87ef Mon Sep 17 00:00:00 2001
From: madsab <mads.barnes@hotmail.com>
Date: Thu, 15 Aug 2024 19:43:05 +0200
Subject: [PATCH 7/7] add owUser properties to next-auth User

---
 packages/auth/src/auth-options.ts | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/auth/src/auth-options.ts b/packages/auth/src/auth-options.ts
index 9bc152d9b..02e84aede 100644
--- a/packages/auth/src/auth-options.ts
+++ b/packages/auth/src/auth-options.ts
@@ -1,15 +1,17 @@
 import type { ServiceLayer } from "@dotkomonline/core"
 import type { DefaultSession, DefaultUser, NextAuthOptions, User } from "next-auth"
+import type { User as Auth0User } from "@dotkomonline/types"
 import Auth0Provider from "next-auth/providers/auth0"
 
 interface Auth0IdTokenClaims {
   given_name: string
+  middle_name: string
   family_name: string
-  nickname: string
   name: string
+  nickname: string
+
   picture: string
-  gender: string
-  updated_at: string
+  gender: "male" | "female" | "other"
   email: string
   email_verified: boolean
   updated_at: string
@@ -19,6 +21,7 @@ interface Auth0IdTokenClaims {
   phone: string
   lastSyncedAt: Date
 
+
   iss: string
   aud: string
   iat: number
@@ -34,7 +37,7 @@ declare module "next-auth" {
     id: string
   }
 
-  interface User extends DefaultUser {
+  interface User extends Auth0User, DefaultUser {
     id: string
     name: string
     email: string
@@ -69,9 +72,16 @@ export const getAuthOptions = ({
         id: profile.sub,
         name: profile.name,
         email: profile.email,
-        image: profile.picture ?? undefined,
-        // givenName: profile.given_name,
-        // familyName: profile.family_name,
+        picture: profile.picture ?? undefined,
+        givenName: profile.given_name,
+        familyName: profile.family_name,
+        auth0Id: profile.sub,
+        middleName: profile.middle_name,
+        allergies: profile.allergies,
+        phone: profile.phone,
+        studyYear: profile.studyYear,
+        gender: profile.gender,
+        lastSyncedAt: profile.lastSyncedAt,
       }),
     }),
   ],