scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: whitelist server action proxies

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-24 12:40:55 +02:00
parent 788bfd3568
commit be47e42163
9 changed files with 66 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/[lang]/(live)/(protected)/my-pages/profile/@profile/layout.module.css
View File

@@ -1,7 +1,6 @@
.container { .container {
background-color: var(--Scandic-Brand-Pale-Peach); background-color: var(--Main-Grey-White);
border-radius: var(--Corner-radius-Large); border-radius: var(--Corner-radius-Large);
display: grid; display: grid;
gap: var(--Spacing-x3); gap: var(--Spacing-x3);
padding: var(--Spacing-x3);
} }

4
app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.module.css
View File

@@ -7,10 +7,12 @@
.info { .info {
display: grid; display: grid;
gap: var(--Spacing-x-one-and-half) var(--Spacing-x7); 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 { .item {
align-items: center;
display: grid; display: grid;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
grid-template-columns: auto auto 1fr; grid-template-columns: auto auto 1fr;

62
app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx
View File

@@ -1,7 +1,9 @@
import { languageSelect } from "@/constants/languages"
import { profileEdit } from "@/constants/routes/myPages" import { profileEdit } from "@/constants/routes/myPages"
import { serverClient } from "@/lib/trpc/server" import { serverClient } from "@/lib/trpc/server"
import { import {
CalendarIcon,
EmailIcon, EmailIcon,
GlobeIcon, GlobeIcon,
LocationIcon, LocationIcon,
@@ -10,7 +12,6 @@ import {
} from "@/components/Icons" } from "@/components/Icons"
import Header from "@/components/Profile/Header" import Header from "@/components/Profile/Header"
import Button from "@/components/TempDesignSystem/Button" import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title" import Title from "@/components/TempDesignSystem/Text/Title"
@@ -26,26 +27,54 @@ export default async function Profile({ params }: PageArgs<LangParams>) {
if (!user) { if (!user) {
return null return null
} }
const language = languageSelect.find((l) => l.value === user.language)
return ( return (
<> <>
<Header> <Header>
<hgroup> <hgroup>
<Title as="h4" color="peach80" level="h1"> <Title as="h4" color="red" level="h1">
{formatMessage({ id: "Welcome" })} {formatMessage({ id: "Welcome" })}
</Title> </Title>
<Title as="h4" color="burgundy" level="h2"> <Title as="h4" color="burgundy" level="h2">
{user.name} {user.name}
</Title> </Title>
</hgroup> </hgroup>
<Button asChild intent="secondary" size="small" theme="base"> <Button asChild intent="primary" size="small" theme="base">
<Link color="none" href={profileEdit[params.lang]}> <Link color="none" href={profileEdit[params.lang]}>
{formatMessage({ id: "Edit profile" })} {formatMessage({ id: "Edit profile" })}
</Link> </Link>
</Button> </Button>
</Header> </Header>
<Divider color="burgundy" opacity={8} />
<section className={styles.profile}> <section className={styles.profile}>
<article className={styles.info}> <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}> <div className={styles.item}>
<LocationIcon color="burgundy" /> <LocationIcon color="burgundy" />
<Body color="burgundy" textTransform="bold"> <Body color="burgundy" textTransform="bold">
@@ -64,29 +93,6 @@ export default async function Profile({ params }: PageArgs<LangParams>) {
: null} : null}
</Body> </Body>
</div> </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}> <div className={styles.item}>
<LockIcon color="burgundy" /> <LockIcon color="burgundy" />
<Body color="burgundy" textTransform="bold"> <Body color="burgundy" textTransform="bold">
@@ -94,7 +100,7 @@ export default async function Profile({ params }: PageArgs<LangParams>) {
</Body> </Body>
<Body color="burgundy">**********</Body> <Body color="burgundy">**********</Body>
</div> </div>
</aside> </article>
</section> </section>
</> </>
) )

4
app/[lang]/(live)/(protected)/my-pages/profile/layout.tsx
View File

@@ -6,7 +6,6 @@ export default function ProfileLayout({
children, children,
communication, communication,
creditCards, creditCards,
membershipCards,
profile, profile,
}: React.PropsWithChildren<ProfileLayoutProps>) { }: React.PropsWithChildren<ProfileLayoutProps>) {
return ( return (
@@ -14,9 +13,8 @@ export default function ProfileLayout({
{children} {children}
<section className="profile-layout"> <section className="profile-layout">
{profile} {profile}
{creditCards}
{membershipCards}
<Divider color="burgundy" opacity={8} /> <Divider color="burgundy" opacity={8} />
{creditCards}
{communication} {communication}
</section> </section>
</main> </main>

2
app/[lang]/(live)/(protected)/my-pages/profile/profileLayout.css
View File

@@ -7,5 +7,5 @@
border-radius: var(--Corner-radius-xLarge); border-radius: var(--Corner-radius-xLarge);
display: grid; display: grid;
gap: var(--Spacing-x4); gap: var(--Spacing-x4);
padding: var(--Spacing-x3); padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x4);
} }

13
components/Forms/Edit/Profile/FormContent/index.tsx
View File

@@ -2,6 +2,8 @@
// import { useFormStatus } from "react-dom" // import { useFormStatus } from "react-dom"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { languageSelect } from "@/constants/languages"
import CountrySelect from "@/components/TempDesignSystem/Form/Country" import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DateSelect from "@/components/TempDesignSystem/Form/Date" import DateSelect from "@/components/TempDesignSystem/Form/Date"
import Input from "@/components/TempDesignSystem/Form/Input" import Input from "@/components/TempDesignSystem/Form/Input"
@@ -11,15 +13,6 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./formContent.module.css" 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() { export default function FormContent() {
const { formatMessage } = useIntl() const { formatMessage } = useIntl()
// const { pending } = useFormStatus() // const { pending } = useFormStatus()
@@ -70,7 +63,7 @@ export default function FormContent() {
registerOptions={{ required: true }} registerOptions={{ required: true }}
/> />
<Select <Select
items={languages} items={languageSelect}
label={formatMessage({ id: "Language" })} label={formatMessage({ id: "Language" })}
name="language" name="language"
placeholder={formatMessage({ id: "Select language" })} placeholder={formatMessage({ id: "Select language" })}

8
components/Forms/Edit/Profile/index.tsx
View File

@@ -56,7 +56,7 @@ export default function Form({ user }: EditFormProps) {
<FormProvider {...form}> <FormProvider {...form}>
<Header> <Header>
<hgroup> <hgroup>
<Title as="h4" color="peach80" level="h1"> <Title as="h4" color="red" level="h1">
{formatMessage({ id: "Edit" })} {formatMessage({ id: "Edit" })}
</Title> </Title>
<Title as="h4" color="burgundy" level="h2"> <Title as="h4" color="burgundy" level="h2">
@@ -66,9 +66,9 @@ export default function Form({ user }: EditFormProps) {
<div className={styles.btns}> <div className={styles.btns}>
<Button <Button
form={formId} form={formId}
intent="primary" intent="secondary"
size="small" size="small"
theme="primaryDark" theme="base"
type="reset" type="reset"
> >
{formatMessage({ id: "Discard changes" })} {formatMessage({ id: "Discard changes" })}
@@ -76,7 +76,7 @@ export default function Form({ user }: EditFormProps) {
<Button <Button
disabled={!form.formState.isValid || form.formState.isSubmitting} disabled={!form.formState.isValid || form.formState.isSubmitting}
form={formId} form={formId}
intent="secondary" intent="primary"
size="small" size="small"
theme="base" theme="base"
type="submit" type="submit"

9
constants/languages.ts
View File

@@ -61,3 +61,12 @@ export function findLang(pathname: string) {
(l) => pathname.startsWith(`/${l}/`) || pathname === `/${l}` (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" },
]

10
next.config.js
View File

@@ -11,6 +11,16 @@ jiti("./env/client")
const nextConfig = { const nextConfig = {
poweredByHeader: false, poweredByHeader: false,
eslint: { ignoreDuringBuilds: true }, 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: { images: {
remotePatterns: [ remotePatterns: [
{ {