Changes for demo purposes

Add login button to login page, demo mode env variable and fix update indicator

src/components/layout/header/AvatarMenu.tsx

@@ -39,7 +39,7 @@ export const AvatarMenu = () => {
         <Menu width={256}>
           <Menu.Target>
             <CurrentUserAvatar
-              newVersionAvailable={newVersionAvailable !== undefined}
+              newVersionAvailable={newVersionAvailable ? true : false}
               user={sessionData?.user ?? null}
             />
           </Menu.Target>
@@ -128,13 +128,21 @@ const CurrentUserAvatar = forwardRef<HTMLDivElement, CurrentUserAvatarProps>(
   ({ user, newVersionAvailable, ...others }, ref) => {
     const { primaryColor } = useMantineTheme();
     if (!user) return <Avatar ref={ref} {...others} />;
+
+    if (!newVersionAvailable)
       return (
-      <Indicator color="blue" processing size={10} hidden={!newVersionAvailable}>
+        <Indicator withBorder offset={2} color="blue" processing size={15}>
           <Avatar ref={ref} color={primaryColor} {...others}>
             {user.name?.slice(0, 2).toUpperCase()}
           </Avatar>
         </Indicator>
       );
+
+    return (
+      <Avatar ref={ref} color={primaryColor} {...others}>
+        {user.name?.slice(0, 2).toUpperCase()}
+      </Avatar>
+    );
   }
 );
 

src/env.js

@@ -26,6 +26,7 @@ const env = createEnv({
     ),
     DOCKER_HOST: z.string().optional(),
     DOCKER_PORT: portSchema,
+    DEMO_MODE: z.string().optional(),
     HOSTNAME: z.string().optional(),
   },
 
@@ -62,6 +63,7 @@ const env = createEnv({
     NEXT_PUBLIC_PORT: process.env.PORT,
     NEXT_PUBLIC_NODE_ENV: process.env.NODE_ENV,
     HOSTNAME: process.env.HOSTNAME,
+    DEMO_MODE: process.env.DEMO_MODE,
   },
   skipValidation: !!process.env.SKIP_ENV_VALIDATION,
 });

src/pages/404.tsx

@@ -27,6 +27,9 @@ export default function Custom404() {
         <Button component={Link} variant="light" href="/b">
           {t('button')}
         </Button>
+        <Button component={Link} variant="light" href="/auth/login">
+          Login
+        </Button>
       </Stack>
     </Center>
   );

src/pages/auth/login.tsx

@@ -22,6 +22,7 @@ import { useState } from 'react';
 import { z } from 'zod';
 import { ThemeSchemeToggle } from '~/components/ThemeSchemeToggle/ThemeSchemeToggle';
 import { FloatingBackground } from '~/components/layout/Background/FloatingBackground';
+import { env } from '~/env';
 import { getServerAuthSession } from '~/server/auth';
 import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
 import { useI18nZodResolver } from '~/utils/i18n-zod-resolver';
@@ -29,6 +30,7 @@ import { signInSchema } from '~/validations/user';
 
 export default function LoginPage({
   redirectAfterLogin,
+  isDemo,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const { t } = useTranslation('authentication/login');
   const { i18nZodResolver } = useI18nZodResolver();
@@ -86,6 +88,12 @@ export default function LoginPage({
               Homarr
             </Text>
           </Stack>
+          {isDemo && (
+            <Alert title="Demo credentials">
+              For demo purposes, you can login with the login <b>demo</b> and password :{' '}
+              <b>demodemo</b>
+            </Alert>
+          )}
           <Card withBorder shadow="md" p="xl" radius="md" w="90%" maw={450}>
             <Title style={{ whiteSpace: 'nowrap' }} align="center" weight={900}>
               {t('title')}
@@ -156,10 +164,13 @@ export const getServerSideProps: GetServerSideProps = async ({ locale, req, res,
     };
   }
 
+  const isDemo = env.DEMO_MODE === 'true';
+
   return {
     props: {
       ...(await getServerSideTranslations(['authentication/login'], locale, req, res)),
       redirectAfterLogin,
+      isDemo,
     },
   };
 };