Merge branch 'dev' into feature/add-basic-authentication

src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx

@@ -28,6 +28,9 @@ import { EditAppModalTab } from './Tabs/type';
 const appUrlRegex =
   '(https?://(?:www.|(?!www))\\[?[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\\]?.[^\\s]{2,}|www.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9].[^\\s]{2,}|https?://(?:www.|(?!www))\\[?[a-zA-Z0-9]+\\]?.[^\\s]{2,}|www.[a-zA-Z0-9]+.[^\\s]{2,})';
 
+const appUrlWithAnyProtocolRegex =
+  '([A-z]+://(?:www.|(?!www))\\[?[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\\]?.[^\\s]{2,}|www.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9].[^\\s]{2,}|[A-z]+://(?:www.|(?!www))\\[?[a-zA-Z0-9]+\\]?.[^\\s]{2,}|www.[a-zA-Z0-9]+.[^\\s]{2,})';
+
 export const EditAppModal = ({
   context,
   id,
@@ -71,8 +74,8 @@ export const EditAppModal = ({
             return null;
           }
 
-          if (!url.match(appUrlRegex)) {
-            return 'Uri override is not a valid uri';
+          if (!url.match(appUrlWithAnyProtocolRegex)) {
+            return 'External URI is not a valid uri';
           }
 
           return null;

src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx

@@ -1,4 +1,4 @@
-import { Tabs, TextInput } from '@mantine/core';
+import { Tabs, Text, TextInput } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { IconClick, IconCursorText, IconLink } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
@@ -22,6 +22,7 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => {
         placeholder="My example app"
         variant="default"
         withAsterisk
+        mb="md"
         {...form.getInputProps('name')}
       />
       <TextInput
@@ -31,10 +32,8 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => {
         placeholder="https://google.com"
         variant="default"
         withAsterisk
+        mb="md"
         {...form.getInputProps('url')}
-        onChange={(e) => {
-          form.setFieldValue('url', e.target.value);
-        }}
       />
       <TextInput
         icon={<IconClick size={16} />}
@@ -44,6 +43,13 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => {
         variant="default"
         {...form.getInputProps('behaviour.externalUrl')}
       />
+
+      {!form.values.behaviour.externalUrl.startsWith('https://') &&
+        !form.values.behaviour.externalUrl.startsWith('http://') && (
+          <Text color="red" mt="sm" size="sm">
+            {t('behaviour.customProtocolWarning')}
+          </Text>
+        )}
     </Tabs.Panel>
   );
 };

src/config/provider.tsx

@@ -21,8 +21,16 @@ const ConfigContext = createContext<ConfigContextType>({
   setConfigName: () => {},
 });
 
-export const ConfigProvider = ({ children }: { children: ReactNode }) => {
-  const [configName, setConfigName] = useState<string>();
+export const ConfigProvider = ({
+  children,
+  config: fallbackConfig,
+  configName: initialConfigName,
+}: {
+  children: ReactNode;
+  config?: ConfigType;
+  configName?: string;
+}) => {
+  const [configName, setConfigName] = useState<string>(initialConfigName || 'default');
   const [configVersion, setConfigVersion] = useState(0);
   const { configs } = useConfigStore((s) => ({ configs: s.configs }), shallow);
   const { setPrimaryColor, setSecondaryColor, setPrimaryShade } = useColorTheme();
@@ -39,7 +47,7 @@ export const ConfigProvider = ({ children }: { children: ReactNode }) => {
     <ConfigContext.Provider
       value={{
         name: configName,
-        config: currentConfig,
+        config: currentConfig ?? fallbackConfig,
         configVersion,
         increaseVersion: () => setConfigVersion((v) => v + 1),
         setConfigName: (name: string) => setConfigName(name),

src/pages/_app.tsx

@@ -36,6 +36,7 @@ import {
   getServiceSidePackageAttributes,
 } from '../tools/server/getPackageVersion';
 import { theme } from '../tools/server/theme/theme';
+import { ConfigType } from '~/types/config';
 
 function App(
   this: any,
@@ -44,13 +45,15 @@ function App(
     packageAttributes: ServerSidePackageAttributesType;
     editModeEnabled: boolean;
     defaultColorScheme: ColorScheme;
+    config?: ConfigType;
+    configName?: string;
   }>
 ) {
   const { Component, pageProps } = props;
 
-  const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>('red');
-  const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>('orange');
-  const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(6);
+  const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>(props.pageProps.config?.settings.customization.colors.primary || 'red');
+  const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>(props.pageProps.config?.settings.customization.colors.secondary || 'orange');
+  const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(props.pageProps.config?.settings.customization.colors.shade || 6);
   const colorTheme = {
     primaryColor,
     secondaryColor,
@@ -124,7 +127,7 @@ function App(
               withGlobalStyles
               withNormalizeCSS
             >
-              <ConfigProvider>
+              <ConfigProvider {...props.pageProps}>
                 <Notifications limit={4} position="bottom-left" />
                 <ModalsProvider
                   modals={{