From 5f026bd2f313b60f557f468d16ba80f0e2433d0f Mon Sep 17 00:00:00 2001
From: diced <pranaco2@gmail.com>
Date: Sat, 11 Jan 2025 13:22:42 -0800
Subject: [PATCH] feat: loginBackgroundBlur option

---
 .../migration.sql                             |   2 +
 prisma/schema.prisma                          |   1 +
 .../parts/ServerSettingsWebsite.tsx           | 157 +++++++++++-------
 src/lib/config/read.ts                        |   1 +
 src/lib/config/validate.ts                    |   1 +
 src/pages/_app.tsx                            |   2 +-
 src/pages/auth/login.tsx                      |   2 +-
 src/server/routes/api/server/settings.ts      |   1 +
 8 files changed, 102 insertions(+), 65 deletions(-)
 create mode 100644 prisma/migrations/20250110223901_website_login_bg_blur/migration.sql

diff --git a/prisma/migrations/20250110223901_website_login_bg_blur/migration.sql b/prisma/migrations/20250110223901_website_login_bg_blur/migration.sql
new file mode 100644
index 00000000..7e5e9120
--- /dev/null
+++ b/prisma/migrations/20250110223901_website_login_bg_blur/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Zipline" ADD COLUMN     "websiteLoginBackgroundBlur" BOOLEAN NOT NULL DEFAULT true;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index d0285722..c88355a3 100755
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -63,6 +63,7 @@ model Zipline {
   websiteTitleLogo       String?
   websiteExternalLinks   Json    @default("[{ \"name\": \"GitHub\", \"url\": \"https://github.com/diced/zipline\"}, { \"name\": \"Documentation\", \"url\": \"https://zipline.diced.sh/\"}]")
   websiteLoginBackground String?
+  websiteLoginBackgroundBlur Boolean @default(true)
   websiteDefaultAvatar   String?
   websiteTos             String?
 
diff --git a/src/components/pages/serverSettings/parts/ServerSettingsWebsite.tsx b/src/components/pages/serverSettings/parts/ServerSettingsWebsite.tsx
index ffb7ba98..d8867870 100644
--- a/src/components/pages/serverSettings/parts/ServerSettingsWebsite.tsx
+++ b/src/components/pages/serverSettings/parts/ServerSettingsWebsite.tsx
@@ -1,5 +1,5 @@
 import { Response } from '@/lib/api/response';
-import { Button, JsonInput, Paper, SimpleGrid, TextInput, Title } from '@mantine/core';
+import { Button, Grid, JsonInput, Paper, Switch, TextInput, Title } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { IconDeviceFloppy } from '@tabler/icons-react';
 import { useRouter } from 'next/router';
@@ -29,6 +29,7 @@ export default function ServerSettingsWebsite({
       websiteTitleLogo: '',
       websiteExternalLinks: JSON.stringify(defaultExternalLinks),
       websiteLoginBackground: '',
+      websiteLoginBackgroundBlur: true,
       websiteDefaultAvatar: '',
       websiteTos: '',
 
@@ -66,6 +67,8 @@ export default function ServerSettingsWebsite({
     sendValues.websiteThemeLight = values.websiteThemeLight.trim();
     sendValues.websiteTitle = values.websiteTitle.trim();
 
+    sendValues.websiteLoginBackgroundBlur = values.websiteLoginBackgroundBlur;
+
     return settingsOnSubmit(router, form)(sendValues);
   };
 
@@ -77,6 +80,7 @@ export default function ServerSettingsWebsite({
       websiteTitleLogo: data?.websiteTitleLogo ?? '',
       websiteExternalLinks: JSON.stringify(data?.websiteExternalLinks ?? defaultExternalLinks, null, 2),
       websiteLoginBackground: data?.websiteLoginBackground ?? '',
+      websiteLoginBackgroundBlur: data?.websiteLoginBackgroundBlur ?? true,
       websiteDefaultAvatar: data?.websiteDefaultAvatar ?? '',
       websiteTos: data?.websiteTos ?? '',
       websiteThemeDefault: data?.websiteThemeDefault ?? 'system',
@@ -90,76 +94,103 @@ export default function ServerSettingsWebsite({
       <Title order={2}>Website</Title>
 
       <form onSubmit={form.onSubmit(onSubmit)}>
-        <SimpleGrid mt='md' cols={{ base: 1, md: 2 }} spacing='lg'>
-          <TextInput
-            label='Title'
-            description='The title of the website in browser tabs and at the top.'
-            placeholder='Zipline'
-            {...form.getInputProps('websiteTitle')}
-          />
+        {/* <SimpleGrid mt='md' cols={{ base: 1, md: 2 }} spacing='lg'> */}
+        <Grid>
+          <Grid.Col span={{ base: 12, md: 6 }}>
+            <TextInput
+              label='Title'
+              description='The title of the website in browser tabs and at the top.'
+              placeholder='Zipline'
+              {...form.getInputProps('websiteTitle')}
+            />
+          </Grid.Col>
 
-          <TextInput
-            label='Title Logo'
-            description='The URL to use for the title logo. This is placed to the left of the title.'
-            placeholder='https://example.com/logo.png'
-            {...form.getInputProps('websiteTitleLogo')}
-          />
+          <Grid.Col span={{ base: 12, md: 6 }}>
+            <TextInput
+              label='Title Logo'
+              description='The URL to use for the title logo. This is placed to the left of the title.'
+              placeholder='https://example.com/logo.png'
+              {...form.getInputProps('websiteTitleLogo')}
+            />
+          </Grid.Col>
 
-          <JsonInput
-            label='External Links'
-            description='The external links to show in the footer. This must be valid JSON.'
-            formatOnBlur
-            minRows={1}
-            maxRows={7}
-            autosize
-            placeholder={JSON.stringify(defaultExternalLinks, null, 2)}
-            {...form.getInputProps('websiteExternalLinks')}
-          />
+          <Grid.Col span={12}>
+            <JsonInput
+              label='External Links'
+              description='The external links to show in the footer. This must be valid JSON.'
+              formatOnBlur
+              minRows={1}
+              maxRows={7}
+              autosize
+              placeholder={JSON.stringify(defaultExternalLinks, null, 2)}
+              {...form.getInputProps('websiteExternalLinks')}
+            />
+          </Grid.Col>
 
-          <TextInput
-            label='Login Background'
-            description='The URL to use for the login background.'
-            placeholder='https://example.com/background.png'
-            {...form.getInputProps('websiteLoginBackground')}
-          />
+          <Grid.Col span={{ base: 12, md: 6 }}>
+            <TextInput
+              label='Login Background'
+              description='The URL to use for the login background.'
+              placeholder='https://example.com/background.png'
+              {...form.getInputProps('websiteLoginBackground')}
+            />
+          </Grid.Col>
 
-          <TextInput
-            label='Default Avatar'
-            description='The path to use for the default avatar. This must be a path to an image, not a URL.'
-            placeholder='/zipline/avatar.png'
-            {...form.getInputProps('websiteDefaultAvatar')}
-          />
+          <Grid.Col span={{ base: 12, md: 6 }}>
+            <Switch
+              label='Login Background Blur'
+              description='Whether to blur the login background.'
+              {...form.getInputProps('websiteLoginBackgroundBlur', { type: 'checkbox' })}
+            />
+          </Grid.Col>
 
-          <TextInput
-            label='Terms of Service'
-            description='Path to a Markdown (.md) file to use for the terms of service.'
-            placeholder='/zipline/TOS.md'
-            {...form.getInputProps('websiteTos')}
-          />
+          <Grid.Col span={{ base: 12, md: 6 }}>
+            <TextInput
+              label='Default Avatar'
+              description='The path to use for the default avatar. This must be a path to an image, not a URL.'
+              placeholder='/zipline/avatar.png'
+              {...form.getInputProps('websiteDefaultAvatar')}
+            />
+          </Grid.Col>
 
-          <TextInput
-            label='Default Theme'
-            description='The default theme to use for the website.'
-            placeholder='system'
-            {...form.getInputProps('websiteThemeDefault')}
-          />
+          <Grid.Col span={{ base: 12, md: 6 }}>
+            <TextInput
+              label='Terms of Service'
+              description='Path to a Markdown (.md) file to use for the terms of service.'
+              placeholder='/zipline/TOS.md'
+              {...form.getInputProps('websiteTos')}
+            />
+          </Grid.Col>
 
-          <TextInput
-            label='Dark Theme'
-            description='The dark theme to use for the website when the default theme is "system".'
-            placeholder='builtin:dark_gray'
-            disabled={form.values.websiteThemeDefault !== 'system'}
-            {...form.getInputProps('websiteThemeDark')}
-          />
+          <Grid.Col span={12}>
+            <TextInput
+              label='Default Theme'
+              description='The default theme to use for the website.'
+              placeholder='system'
+              {...form.getInputProps('websiteThemeDefault')}
+            />
+          </Grid.Col>
 
-          <TextInput
-            label='Light Theme'
-            description='The light theme to use for the website when the default theme is "system".'
-            placeholder='builtin:light_gray'
-            disabled={form.values.websiteThemeDefault !== 'system'}
-            {...form.getInputProps('websiteThemeLight')}
-          />
-        </SimpleGrid>
+          <Grid.Col span={{ base: 12, md: 6 }}>
+            <TextInput
+              label='Dark Theme'
+              description='The dark theme to use for the website when the default theme is "system".'
+              placeholder='builtin:dark_gray'
+              disabled={form.values.websiteThemeDefault !== 'system'}
+              {...form.getInputProps('websiteThemeDark')}
+            />
+          </Grid.Col>
+
+          <Grid.Col span={{ base: 12, md: 6 }}>
+            <TextInput
+              label='Light Theme'
+              description='The light theme to use for the website when the default theme is "system".'
+              placeholder='builtin:light_gray'
+              disabled={form.values.websiteThemeDefault !== 'system'}
+              {...form.getInputProps('websiteThemeLight')}
+            />
+          </Grid.Col>
+        </Grid>
 
         <Button type='submit' mt='md' loading={isLoading} leftSection={<IconDeviceFloppy size='1rem' />}>
           Save
diff --git a/src/lib/config/read.ts b/src/lib/config/read.ts
index a917cd82..aeefb291 100755
--- a/src/lib/config/read.ts
+++ b/src/lib/config/read.ts
@@ -213,6 +213,7 @@ export const DATABASE_TO_PROP = {
   websiteTitleLogo: 'website.titleLogo',
   websiteExternalLinks: 'website.externalLinks',
   websiteLoginBackground: 'website.loginBackground',
+  websiteLoginBackgroundBlur: 'website.loginBackgroundBlur',
   websiteDefaultAvatar: 'website.defaultAvatar',
   websiteTos: 'website.tos',
 
diff --git a/src/lib/config/validate.ts b/src/lib/config/validate.ts
index 98ee8c53..49011370 100755
--- a/src/lib/config/validate.ts
+++ b/src/lib/config/validate.ts
@@ -182,6 +182,7 @@ export const schema = z.object({
         },
       ]),
     loginBackground: z.string().url().nullable().default(null),
+    loginBackgroundBlur: z.boolean().default(true),
     defaultAvatar: z
       .string()
       .transform((s) => resolve(s))
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 84da9d05..0f9076ec 100755
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -39,7 +39,7 @@ export default function App({
     <>
       <Head>
         <title>
-          {`${pageProps?.config?.website?.title ?? 'Zipline'}${Component.title ? `– ${Component.title}` : ''}`}
+          {`${pageProps?.config?.website?.title ?? 'Zipline'}${Component.title ? ` – ${Component.title}` : ''}`}
         </title>
         <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width' />
         <link rel='manifest' href='/manifest.json' />
diff --git a/src/pages/auth/login.tsx b/src/pages/auth/login.tsx
index 8c8312e5..e38a3fdf 100755
--- a/src/pages/auth/login.tsx
+++ b/src/pages/auth/login.tsx
@@ -229,7 +229,7 @@ export default function Login({ config }: InferGetServerSidePropsType<typeof get
               width: '100%',
               height: '100%',
               objectFit: 'cover',
-              filter: 'blur(10px)',
+              ...(config.website.loginBackgroundBlur && { filter: 'blur(10px)' }),
             }}
           />
         )}
diff --git a/src/server/routes/api/server/settings.ts b/src/server/routes/api/server/settings.ts
index e6c9d93d..32ff559b 100644
--- a/src/server/routes/api/server/settings.ts
+++ b/src/server/routes/api/server/settings.ts
@@ -155,6 +155,7 @@ export default fastifyPlugin(
               ])
               .transform((value) => (typeof value === 'string' ? JSON.parse(value) : value)),
             websiteLoginBackground: z.string().url().nullable(),
+            websiteLoginBackgroundBlur: z.boolean(),
             websiteDefaultAvatar: z
               .string()
               .transform((s) => resolve(s))