✨ Add allow anonymous switch

src/components/Board/Customize/Access/AccessCustomization.tsx

@@ -0,0 +1,13 @@
+import { Stack, Switch } from '@mantine/core';
+import { useTranslation } from 'next-i18next';
+import { useBoardCustomizationFormContext } from '~/components/Board/Customize/form';
+
+export const AccessCustomization = () => {
+  const { t } = useTranslation('settings/customization/access');
+  const form = useBoardCustomizationFormContext();
+  return (
+    <Stack>
+      <Switch label={t('allowGuests.label')} description={t('allowGuests.description')} {...form.getInputProps('access.allowGuests', { type: 'checkbox' })} />
+    </Stack>
+  )
+}

src/components/Board/Customize/Appearance/AppearanceCustomization.tsx

@@ -15,7 +15,6 @@ import {
 import { useTranslation } from 'next-i18next';
 import { highlight, languages } from 'prismjs';
 import Editor from 'react-simple-code-editor';
-import { useColorScheme } from '~/hooks/use-colorscheme';
 import { useColorTheme } from '~/tools/color';
 
 import { useBoardCustomizationFormContext } from '../form';

src/components/Board/Customize/form.ts

@@ -1,4 +1,3 @@
-import { DEFAULT_THEME, MANTINE_COLORS, MantineColor } from '@mantine/core';
 import { createFormContext } from '@mantine/form';
 import { z } from 'zod';
 import { boardCustomizationSchema } from '~/validations/boards';

src/pages/board/[slug].tsx

@@ -10,6 +10,7 @@ import { getFrontendConfig } from '~/tools/config/getFrontendConfig';
 import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
 import { boardNamespaces } from '~/tools/server/translation-namespaces';
 import { ConfigType } from '~/types/config';
+import { getServerAuthSession } from '~/server/auth';
 
 export default function BoardPage({
   config: initialConfig,
@@ -57,14 +58,36 @@ export const getServerSideProps: GetServerSideProps<BoardGetServerSideProps> = a
   const config = await getFrontendConfig(routeParams.data.slug);
   const translations = await getServerSideTranslations(boardNamespaces, locale, req, res);
 
-  return {
-    props: {
-      config,
-      primaryColor: config.settings.customization.colors.primary,
-      secondaryColor: config.settings.customization.colors.secondary,
-      primaryShade: config.settings.customization.colors.shade,
-      dockerEnabled: !!env.DOCKER_HOST && !!env.DOCKER_PORT,
-      ...translations,
-    },
-  };
+  const getSuccessResponse = () => {
+    return {
+      props: {
+        config,
+        primaryColor: config.settings.customization.colors.primary,
+        secondaryColor: config.settings.customization.colors.secondary,
+        primaryShade: config.settings.customization.colors.shade,
+        dockerEnabled: !!env.DOCKER_HOST && !!env.DOCKER_PORT,
+        ...translations,
+      },
+    };
+  }
+
+
+  if (!config.settings.access.allowGuests) {
+    const session = await getServerAuthSession({ req, res });
+
+    if (session?.user) {
+      return getSuccessResponse();
+    }
+
+    return {
+      notFound: true,
+      props: {
+        primaryColor: config.settings.customization.colors.primary,
+        secondaryColor: config.settings.customization.colors.secondary,
+        primaryShade: config.settings.customization.colors.shade,
+      }
+    };
+  }
+
+  return getSuccessResponse();
 };

src/pages/board/[slug]/customize.tsx

@@ -18,7 +18,7 @@ import {
   IconChartCandle,
   IconCheck,
   IconDragDrop,
-  IconLayout,
+  IconLayout, IconLock,
   IconX,
   TablerIconsProps,
 } from '@tabler/icons-react';
@@ -46,6 +46,7 @@ import { firstUpperCase } from '~/tools/shared/strings';
 import { api } from '~/utils/api';
 import { useI18nZodResolver } from '~/utils/i18n-zod-resolver';
 import { boardCustomizationSchema } from '~/validations/boards';
+import { AccessCustomization } from '~/components/Board/Customize/Access/AccessCustomization';
 
 const notificationId = 'board-customization-notification';
 
@@ -58,6 +59,9 @@ export default function CustomizationPage() {
   const { t } = useTranslation('boards/customize');
   const form = useBoardCustomizationForm({
     initialValues: {
+      access: {
+        allowGuests: config?.settings.access.allowGuests ?? false
+      },
       layout: {
         leftSidebarEnabled: config?.settings.customization.layout.enabledLeftSidebar ?? false,
         rightSidebarEnabled: config?.settings.customization.layout.enabledRightSidebar ?? false,
@@ -210,6 +214,10 @@ export default function CustomizationPage() {
                   <SectionTitle type="layout" icon={IconLayout} />
                   <LayoutCustomization />
                 </Stack>
+                <Stack spacing="xs">
+                  <SectionTitle type="access" icon={IconLock} />
+                  <AccessCustomization />
+                </Stack>
                 <Stack spacing="xs">
                   <SectionTitle type="gridstack" icon={IconDragDrop} />
                   <GridstackCustomization />
@@ -232,7 +240,7 @@ export default function CustomizationPage() {
 }
 
 type SectionTitleProps = {
-  type: 'layout' | 'gridstack' | 'pageMetadata' | 'appereance';
+  type: 'layout' | 'gridstack' | 'pageMetadata' | 'appereance' | 'access';
   icon: (props: TablerIconsProps) => ReactNode;
 };
 
@@ -282,6 +290,7 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, locale,
       'settings/customization/shade-selector',
       'settings/customization/opacity-selector',
       'settings/customization/gridstack',
+      'settings/customization/access'
     ],
     locale,
     req,

src/pages/board/index.tsx

@@ -47,6 +47,17 @@ export const getServerSideProps: GetServerSideProps<BoardGetServerSideProps> = a
   const boardName = currentUserSettings?.defaultBoard ?? 'default';
   const config = await getFrontendConfig(boardName);
 
+  if (!config.settings.access.allowGuests && !session?.user) {
+    return {
+      notFound: true,
+      props: {
+        primaryColor: config.settings.customization.colors.primary,
+        secondaryColor: config.settings.customization.colors.secondary,
+        primaryShade: config.settings.customization.colors.shade,
+      }
+    };
+  }
+
   return {
     props: {
       config,

src/server/api/routers/config.ts

@@ -191,6 +191,10 @@ export const configRouter = createTRPCRouter({
         ...previousConfig,
         settings: {
           ...previousConfig.settings,
+          access: {
+            ...previousConfig.settings.access,
+            allowGuests: input.access.allowGuests,
+          },
           customization: {
             ...previousConfig.settings.customization,
             appOpacity: input.appearance.opacity,

src/tools/config/getConfig.ts

@@ -36,5 +36,11 @@ export const getConfig = (name: string): BackendConfigType => {
     writeConfig(backendConfig);
   }
 
+  if (!backendConfig.settings.access) {
+    backendConfig.settings.access = {
+      allowGuests: false,
+    };
+  }
+
   return backendConfig;
 };

src/tools/config/getFallbackConfig.ts

@@ -11,7 +11,7 @@ export const getFallbackConfig = (name?: string) => ({
 export const getStaticFallbackConfig = (name: string): ConfigType => ({
   schemaVersion: 1,
   configProperties: {
-    name: name,
+    name: name
   },
   categories: [
     {
@@ -33,6 +33,9 @@ export const getStaticFallbackConfig = (name: string): ConfigType => ({
   apps: [],
   widgets: [],
   settings: {
+    access: {
+      allowGuests: false,
+    },
     common: {
       searchEngine: {
         type: 'google',

src/types/settings.ts

@@ -3,6 +3,11 @@ import { MantineTheme } from '@mantine/core';
 export interface SettingsType {
   common: CommonSettingsType;
   customization: CustomizationSettingsType;
+  access: BoardAccessSettingsType;
+}
+
+export interface BoardAccessSettingsType {
+  allowGuests: boolean;
 }
 
 export interface CommonSettingsType {

src/validations/boards.ts

@@ -6,6 +6,9 @@ export const createBoardSchemaValidation = z.object({
 });
 
 export const boardCustomizationSchema = z.object({
+  access: z.object({
+    allowGuests: z.boolean()
+  }),
   layout: z.object({
     leftSidebarEnabled: z.boolean(),
     rightSidebarEnabled: z.boolean(),