diff --git a/src/pages/board/[slug]/customize.tsx b/src/pages/board/[slug]/customize.tsx index 6463a1f42..50c131c2a 100644 --- a/src/pages/board/[slug]/customize.tsx +++ b/src/pages/board/[slug]/customize.tsx @@ -1,4 +1,16 @@ -import { Button, Container, Group, Paper, Stack, Text, Title } from '@mantine/core'; +import { + Affix, + Button, + Card, + Container, + Group, + Paper, + Stack, + Text, + Title, + Transition, + rem, +} from '@mantine/core'; import { showNotification, updateNotification } from '@mantine/notifications'; import { IconArrowLeft, @@ -15,7 +27,7 @@ import { useTranslation } from 'next-i18next'; import Head from 'next/head'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { ReactNode } from 'react'; +import { ReactNode, useRef } from 'react'; import { z } from 'zod'; import { AppearanceCustomization } from '~/components/Board/Customize/Appearance/AppearanceCustomization'; import { GridstackCustomization } from '~/components/Board/Customize/Gridstack/GridstackCustomization'; @@ -29,7 +41,6 @@ import { MainLayout } from '~/components/layout/Templates/MainLayout'; import { createTrpcServersideHelpers } from '~/server/api/helper'; import { getServerAuthSession } from '~/server/auth'; import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations'; -import { boardNamespaces } from '~/tools/server/translation-namespaces'; import { firstUpperCase } from '~/tools/shared/strings'; import { api } from '~/utils/api'; import { useI18nZodResolver } from '~/utils/i18n-zod-resolver'; @@ -72,6 +83,8 @@ export default function CustomizationPage() { }, }, validate: i18nZodResolver(boardCustomizationSchema), + validateInputOnChange: true, + validateInputOnBlur: true, }); const handleSubmit = async (values: z.infer) => { @@ -122,6 +135,51 @@ export default function CustomizationPage() { {metaTitle} + + + {(transitionStyles) => ( + ({ + background: + theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[1], + })} + shadow="md" + withBorder + > + + Careful, you have unsaved changes! + + + + + + + )} + + @@ -141,29 +199,24 @@ export default function CustomizationPage() { -
- - - - - - - - - - - - - - - - - - + + + + - + + + + + + + + + + + + +
diff --git a/src/validations/boards.ts b/src/validations/boards.ts index 12b5af96c..35c7e707c 100644 --- a/src/validations/boards.ts +++ b/src/validations/boards.ts @@ -17,7 +17,7 @@ export const boardCustomizationSchema = z.object({ lg: z.number().min(5).max(20), }), pageMetadata: z.object({ - pageTitle: z.string(), + pageTitle: z.string().min(1), metaTitle: z.string(), logoSrc: z.string(), faviconSrc: z.string(),