fix: whitelist server action proxies

2024-06-24 12:40:55 +02:00
parent 788bfd3568
commit be47e42163
9 changed files with 66 additions and 49 deletions
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@profile/layout.module.css
+++ b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/layout.module.css
@@ -1,7 +1,6 @@
 .container {
-  background-color: var(--Scandic-Brand-Pale-Peach);
+  background-color: var(--Main-Grey-White);
  border-radius: var(--Corner-radius-Large);
  display: grid;
  gap: var(--Spacing-x3);
-  padding: var(--Spacing-x3);
 }
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.module.css
+++ b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.module.css
@@ -7,10 +7,12 @@
 .info {
  display: grid;
  gap: var(--Spacing-x-one-and-half) var(--Spacing-x7);
-  grid-template-columns: auto auto;
+  grid-template-columns: repeat(3, auto);
+  justify-items: flex-start;
 }

 .item {
+  align-items: center;
  display: grid;
  gap: var(--Spacing-x1);
  grid-template-columns: auto auto 1fr;
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx
@@ -1,7 +1,9 @@
+import { languageSelect } from "@/constants/languages"
 import { profileEdit } from "@/constants/routes/myPages"
 import { serverClient } from "@/lib/trpc/server"

 import {
+  CalendarIcon,
  EmailIcon,
  GlobeIcon,
  LocationIcon,
@@ -10,7 +12,6 @@ import {
 } from "@/components/Icons"
 import Header from "@/components/Profile/Header"
 import Button from "@/components/TempDesignSystem/Button"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
@@ -26,26 +27,54 @@ export default async function Profile({ params }: PageArgs<LangParams>) {
  if (!user) {
    return null
  }
+  const language = languageSelect.find((l) => l.value === user.language)
  return (
    <>
      <Header>
        <hgroup>
-          <Title as="h4" color="peach80" level="h1">
+          <Title as="h4" color="red" level="h1">
            {formatMessage({ id: "Welcome" })}
          </Title>
          <Title as="h4" color="burgundy" level="h2">
            {user.name}
          </Title>
        </hgroup>
-        <Button asChild intent="secondary" size="small" theme="base">
+        <Button asChild intent="primary" size="small" theme="base">
          <Link color="none" href={profileEdit[params.lang]}>
            {formatMessage({ id: "Edit profile" })}
          </Link>
        </Button>
      </Header>
-      <Divider color="burgundy" opacity={8} />
      <section className={styles.profile}>
        <article className={styles.info}>
+          <div className={styles.item}>
+            <CalendarIcon color="burgundy" />
+            <Body color="burgundy" textTransform="bold">
+              {formatMessage({ id: "Date of birth" })}
+            </Body>
+            <Body color="burgundy">{user.dateOfBirth}</Body>
+          </div>
+          <div className={styles.item}>
+            <PhoneIcon color="burgundy" />
+            <Body color="burgundy" textTransform="bold">
+              {formatMessage({ id: "Phone number" })}
+            </Body>
+            <Body color="burgundy">{user.phoneNumber}</Body>
+          </div>
+          <div className={styles.item}>
+            <GlobeIcon color="burgundy" />
+            <Body color="burgundy" textTransform="bold">
+              {formatMessage({ id: "Language" })}
+            </Body>
+            <Body color="burgundy">{language?.label ?? "N/A"}</Body>
+          </div>
+          <div className={styles.item}>
+            <EmailIcon color="burgundy" />
+            <Body color="burgundy" textTransform="bold">
+              {formatMessage({ id: "Email" })}
+            </Body>
+            <Body color="burgundy">{user.email}</Body>
+          </div>
          <div className={styles.item}>
            <LocationIcon color="burgundy" />
            <Body color="burgundy" textTransform="bold">
@@ -64,29 +93,6 @@ export default async function Profile({ params }: PageArgs<LangParams>) {
                : null}
            </Body>
          </div>
-          <div className={styles.item}>
-            <EmailIcon color="burgundy" />
-            <Body color="burgundy" textTransform="bold">
-              {formatMessage({ id: "Email" })}
-            </Body>
-            <Body color="burgundy">{user.email}</Body>
-          </div>
-          <div className={styles.item}>
-            <PhoneIcon color="burgundy" />
-            <Body color="burgundy" textTransform="bold">
-              {formatMessage({ id: "Phone number" })}
-            </Body>
-            <Body color="burgundy">{user.phoneNumber}</Body>
-          </div>
-          <div className={styles.item}>
-            <GlobeIcon color="burgundy" />
-            <Body color="burgundy" textTransform="bold">
-              {formatMessage({ id: "Language" })}
-            </Body>
-            <Body color="burgundy">{user.language}</Body>
-          </div>
-        </article>
-        <aside>
          <div className={styles.item}>
            <LockIcon color="burgundy" />
            <Body color="burgundy" textTransform="bold">
@@ -94,7 +100,7 @@ export default async function Profile({ params }: PageArgs<LangParams>) {
            </Body>
            <Body color="burgundy">**********</Body>
          </div>
-        </aside>
+        </article>
      </section>
    </>
  )
--- a/app/[lang]/(live)/(protected)/my-pages/profile/layout.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/profile/layout.tsx
@@ -6,7 +6,6 @@ export default function ProfileLayout({
  children,
  communication,
  creditCards,
-  membershipCards,
  profile,
 }: React.PropsWithChildren<ProfileLayoutProps>) {
  return (
@@ -14,9 +13,8 @@ export default function ProfileLayout({
      {children}
      <section className="profile-layout">
        {profile}
-        {creditCards}
-        {membershipCards}
        <Divider color="burgundy" opacity={8} />
+        {creditCards}
        {communication}
      </section>
    </main>
--- a/app/[lang]/(live)/(protected)/my-pages/profile/profileLayout.css
+++ b/app/[lang]/(live)/(protected)/my-pages/profile/profileLayout.css
@@ -7,5 +7,5 @@
  border-radius: var(--Corner-radius-xLarge);
  display: grid;
  gap: var(--Spacing-x4);
-  padding: var(--Spacing-x3);
+  padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x4);
 }
--- a/components/Forms/Edit/Profile/FormContent/index.tsx
+++ b/components/Forms/Edit/Profile/FormContent/index.tsx
@@ -2,6 +2,8 @@
 // import { useFormStatus } from "react-dom"
 import { useIntl } from "react-intl"

+import { languageSelect } from "@/constants/languages"
+
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import DateSelect from "@/components/TempDesignSystem/Form/Date"
 import Input from "@/components/TempDesignSystem/Form/Input"
@@ -11,15 +13,6 @@ import Body from "@/components/TempDesignSystem/Text/Body"

 import styles from "./formContent.module.css"

-const languages = [
-  { label: "Danish", value: "Da" },
-  { label: "German", value: "De" },
-  { label: "English", value: "En" },
-  { label: "Finnish", value: "Fi" },
-  { label: "Norwegian", value: "No" },
-  { label: "Swedish", value: "Sv" },
-]
-
 export default function FormContent() {
  const { formatMessage } = useIntl()
  // const { pending } = useFormStatus()
@@ -70,7 +63,7 @@ export default function FormContent() {
          registerOptions={{ required: true }}
        />
        <Select
-          items={languages}
+          items={languageSelect}
          label={formatMessage({ id: "Language" })}
          name="language"
          placeholder={formatMessage({ id: "Select language" })}
--- a/components/Forms/Edit/Profile/index.tsx
+++ b/components/Forms/Edit/Profile/index.tsx
@@ -56,7 +56,7 @@ export default function Form({ user }: EditFormProps) {
    <FormProvider {...form}>
      <Header>
        <hgroup>
-          <Title as="h4" color="peach80" level="h1">
+          <Title as="h4" color="red" level="h1">
            {formatMessage({ id: "Edit" })}
          </Title>
          <Title as="h4" color="burgundy" level="h2">
@@ -66,9 +66,9 @@ export default function Form({ user }: EditFormProps) {
        <div className={styles.btns}>
          <Button
            form={formId}
-            intent="primary"
+            intent="secondary"
            size="small"
-            theme="primaryDark"
+            theme="base"
            type="reset"
          >
            {formatMessage({ id: "Discard changes" })}
@@ -76,7 +76,7 @@ export default function Form({ user }: EditFormProps) {
          <Button
            disabled={!form.formState.isValid || form.formState.isSubmitting}
            form={formId}
-            intent="secondary"
+            intent="primary"
            size="small"
            theme="base"
            type="submit"
--- a/constants/languages.ts
+++ b/constants/languages.ts
@@ -61,3 +61,12 @@ export function findLang(pathname: string) {
    (l) => pathname.startsWith(`/${l}/`) || pathname === `/${l}`
  )
 }
+
+export const languageSelect = [
+  { label: "Danish", value: "Da" },
+  { label: "German", value: "De" },
+  { label: "English", value: "En" },
+  { label: "Finnish", value: "Fi" },
+  { label: "Norwegian", value: "No" },
+  { label: "Swedish", value: "Sv" },
+]
--- a/next.config.js
+++ b/next.config.js
@@ -11,6 +11,16 @@ jiti("./env/client")
 const nextConfig = {
  poweredByHeader: false,
  eslint: { ignoreDuringBuilds: true },
+  experimental: {
+    serverActions: {
+      allowedOrigins: [
+        "*--web-scandic-hotels.netlify.app",
+        "develop--web-scandic-hotels.netlify.app",
+        "stage--web-scandic-hotels.netlify.app",
+        "test--web-scandic-hotels.netlify.app",
+      ],
+    },
+  },
  images: {
    remotePatterns: [
      {