Merge branch 'feature/add-basic-authentication' of https://github.com/ajnart/homarr into feature/add-basic-authentication

src/components/Manage/User/Create/create-account-step.tsx

@@ -5,13 +5,15 @@ import { z } from 'zod';
 
 interface CreateAccountStepProps {
   nextStep: ({ eMail, username }: { username: string; eMail: string }) => void;
+  defaultUsername: string;
+  defaultEmail: string;
 }
 
-export const CreateAccountStep = ({ nextStep }: CreateAccountStepProps) => {
+export const CreateAccountStep = ({ defaultEmail, defaultUsername, nextStep }: CreateAccountStepProps) => {
   const form = useForm({
     initialValues: {
-      username: '',
-      eMail: '',
+      username: defaultUsername,
+      eMail: defaultEmail,
     },
     validateInputOnBlur: true,
     validateInputOnChange: true,

src/components/Manage/User/Create/security-step.tsx

@@ -43,17 +43,19 @@ function getStrength(password: string) {
 }
 
 interface CreateAccountSecurityStepProps {
+  defaultPassword: string;
   nextStep: ({ password }: { password: string }) => void;
   prevStep: () => void;
 }
 
 export const CreateAccountSecurityStep = ({
+  defaultPassword,
   nextStep,
   prevStep,
 }: CreateAccountSecurityStepProps) => {
   const form = useForm({
     initialValues: {
-      password: '',
+      password: defaultPassword,
     },
     validateInputOnBlur: true,
     validateInputOnChange: true,

src/components/layout/Templates/ManageLayout.tsx

@@ -26,6 +26,7 @@ import {
   IconUser,
   IconUsers,
 } from '@tabler/icons-react';
+import { useSession } from 'next-auth/react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { ReactNode } from 'react';
@@ -47,6 +48,9 @@ export const ManageLayout = ({ children }: ManageLayoutProps) => {
   const [burgerMenuOpen, { toggle: toggleBurgerMenu, close: closeBurgerMenu }] =
     useDisclosure(false);
 
+  const data = useSession();
+  const isAdmin = data.data?.user.isAdmin ?? false;
+
   const navigationLinks = (
     <>
       <NavLink
@@ -69,6 +73,9 @@ export const ManageLayout = ({ children }: ManageLayoutProps) => {
         component={Link}
         href="/manage/boards"
       />
+
+      {isAdmin && (
+        <>
           <NavLink
             label="Users"
             icon={
@@ -100,6 +107,9 @@ export const ManageLayout = ({ children }: ManageLayoutProps) => {
             component={Link}
             href="/manage/settings"
           />
+        </>
+      )}
+
       <NavLink
         label="Help"
         icon={

src/components/layout/header/AvatarMenu.tsx

@@ -2,6 +2,7 @@ import { Avatar, Badge, Menu, UnstyledButton, useMantineTheme } from '@mantine/c
 import { useDisclosure } from '@mantine/hooks';
 import {
   IconDashboard,
+  IconHomeShare,
   IconInfoCircle,
   IconLogin,
   IconLogout,
@@ -53,6 +54,9 @@ export const AvatarMenu = () => {
                 <Menu.Item component={Link} href="/board" icon={<IconDashboard size="1rem" />}>
                   {t('actions.avatar.defaultBoard')}
                 </Menu.Item>
+                <Menu.Item component={Link} href="/manage" icon={<IconHomeShare size="1rem" />}>
+                  Manage
+                </Menu.Item>
                 <Menu.Divider />
               </>
             )}

src/pages/manage/boards/index.tsx

@@ -25,10 +25,13 @@ import {
   IconStarFilled,
   IconTrash,
 } from '@tabler/icons-react';
+import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import Link from 'next/link';
 import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
+import { getServerAuthSession } from '~/server/auth';
 import { sleep } from '~/tools/client/time';
+import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
 import { api } from '~/utils/api';
 
 const BoardsPage = () => {
@@ -196,4 +199,26 @@ const BoardsPage = () => {
   );
 };
 
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const session = await getServerAuthSession(ctx);
+
+  if (!session?.user) {
+    return {
+      notFound: true,
+    };
+  }
+
+  const translations = await getServerSideTranslations(
+    ['common'],
+    ctx.locale,
+    undefined,
+    undefined
+  );
+  return {
+    props: {
+      ...translations,
+    },
+  };
+};
+
 export default BoardsPage;

src/pages/manage/index.tsx

@@ -10,12 +10,15 @@ import {
   createStyles,
 } from '@mantine/core';
 import { IconArrowRight } from '@tabler/icons-react';
+import { GetServerSideProps } from 'next';
 import { useSession } from 'next-auth/react';
 import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
 import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
 import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
+import { getServerAuthSession } from '~/server/auth';
+import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
 
 const ManagementPage = () => {
   const { classes } = useStyles();
@@ -102,6 +105,28 @@ const ManagementPage = () => {
   );
 };
 
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const session = await getServerAuthSession(ctx);
+
+  if (!session?.user) {
+    return {
+      notFound: true,
+    };
+  }
+
+  const translations = await getServerSideTranslations(
+    ['common'],
+    ctx.locale,
+    undefined,
+    undefined
+  );
+  return {
+    props: {
+      ...translations,
+    },
+  };
+};
+
 export default ManagementPage;
 
 const useStyles = createStyles((theme) => ({

src/pages/manage/settings/index.tsx

@@ -1,6 +1,9 @@
 import { Text, Title } from '@mantine/core';
+import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
+import { getServerAuthSession } from '~/server/auth';
+import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
 
 const SettingsPage = () => {
   return (
@@ -15,4 +18,26 @@ const SettingsPage = () => {
   );
 };
 
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const session = await getServerAuthSession(ctx);
+
+  if (!session?.user.isAdmin) {
+    return {
+      notFound: true,
+    };
+  }
+
+  const translations = await getServerSideTranslations(
+    ['common'],
+    ctx.locale,
+    undefined,
+    undefined
+  );
+  return {
+    props: {
+      ...translations,
+    },
+  };
+};
+
 export default SettingsPage;

src/pages/manage/users/create.tsx

@@ -10,6 +10,7 @@ import {
   IconUser,
   IconUserPlus,
 } from '@tabler/icons-react';
+import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useState } from 'react';
@@ -23,6 +24,8 @@ import {
   createAccountSecurityStepValidationSchema,
 } from '~/components/Manage/User/Create/security-step';
 import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
+import { getServerAuthSession } from '~/server/auth';
+import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
 import { api } from '~/utils/api';
 
 const CreateNewUserPage = () => {
@@ -73,6 +76,8 @@ const CreateNewUserPage = () => {
           description="Create account"
         >
           <CreateAccountStep
+            defaultUsername={form.values.account.username}
+            defaultEmail={form.values.account.eMail}
             nextStep={(value) => {
               form.setFieldValue('account', value);
               nextStep();
@@ -87,6 +92,7 @@ const CreateNewUserPage = () => {
           description="Password"
         >
           <CreateAccountSecurityStep
+            defaultPassword={form.values.security.password}
             nextStep={(value) => {
               form.setFieldValue('security', value);
               nextStep();
@@ -160,7 +166,15 @@ const CreateNewUserPage = () => {
               </tbody>
             </Table>
 
-            <Flex justify="end" wrap="nowrap">
+            <Group position="apart" noWrap>
+              <Button
+                leftIcon={<IconArrowLeft size="1rem" />}
+                onClick={prevStep}
+                variant="light"
+                px="xl"
+              >
+                Previous
+              </Button>
               <Button
                 onClick={async () => {
                   await mutateAsync({
@@ -176,7 +190,7 @@ const CreateNewUserPage = () => {
               >
                 Confirm
               </Button>
-            </Flex>
+            </Group>
           </Card>
         </Stepper.Step>
         <Stepper.Completed>
@@ -210,4 +224,26 @@ const CreateNewUserPage = () => {
   );
 };
 
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const session = await getServerAuthSession(ctx);
+
+  if (!session?.user.isAdmin) {
+    return {
+      notFound: true,
+    };
+  }
+
+  const translations = await getServerSideTranslations(
+    ['common'],
+    ctx.locale,
+    undefined,
+    undefined
+  );
+  return {
+    props: {
+      ...translations,
+    },
+  };
+};
+
 export default CreateNewUserPage;

src/pages/manage/users/index.tsx

@@ -14,10 +14,13 @@ import {
 import { useDebouncedValue } from '@mantine/hooks';
 import { openContextModal } from '@mantine/modals';
 import { IconPlus, IconTrash } from '@tabler/icons-react';
+import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useState } from 'react';
 import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
+import { getServerAuthSession } from '~/server/auth';
+import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
 import { api } from '~/utils/api';
 
 const ManageUsersPage = () => {
@@ -134,4 +137,26 @@ const ManageUsersPage = () => {
   );
 };
 
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const session = await getServerAuthSession(ctx);
+
+  if (!session?.user.isAdmin) {
+    return {
+      notFound: true,
+    };
+  }
+
+  const translations = await getServerSideTranslations(
+    ['common'],
+    ctx.locale,
+    undefined,
+    undefined
+  );
+  return {
+    props: {
+      ...translations,
+    },
+  };
+};
+
 export default ManageUsersPage;

src/pages/manage/users/invites.tsx

@@ -12,10 +12,13 @@ import {
 import { modals } from '@mantine/modals';
 import { IconPlus, IconTrash } from '@tabler/icons-react';
 import dayjs from 'dayjs';
+import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
+import { getServerAuthSession } from '~/server/auth';
+import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
 import { api } from '~/utils/api';
 
 const ManageUserInvitesPage = () => {
@@ -151,4 +154,26 @@ const useStyles = createStyles(() => ({
   },
 }));
 
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const session = await getServerAuthSession(ctx);
+
+  if (!session?.user.isAdmin) {
+    return {
+      notFound: true,
+    };
+  }
+
+  const translations = await getServerSideTranslations(
+    ['common'],
+    ctx.locale,
+    undefined,
+    undefined
+  );
+  return {
+    props: {
+      ...translations,
+    },
+  };
+};
+
 export default ManageUserInvitesPage;

src/server/api/routers/board.ts

@@ -1,11 +1,11 @@
 import fs from 'fs';
 
-import { createTRPCRouter, publicProcedure } from '../trpc';
+import { createTRPCRouter, protectedProcedure, publicProcedure } from '../trpc';
 
 import { getFrontendConfig } from '~/tools/config/getFrontendConfig';
 
 export const boardRouter = createTRPCRouter({
-  all: publicProcedure.query(async ({ ctx }) => {
+  all: protectedProcedure.query(async ({ ctx }) => {
     const files = fs.readdirSync('./data/configs').filter((file) => file.endsWith('.json'));
 
     const userSettings = await ctx.prisma.userSettings.findUniqueOrThrow({

src/server/api/routers/password.ts

@@ -1,9 +1,9 @@
 import { generate } from 'generate-password';
 
-import { createTRPCRouter, publicProcedure } from "../trpc";
+import { adminProcedure, createTRPCRouter } from '../trpc';
 
 export const passwordRouter = createTRPCRouter({
-  generate: publicProcedure.mutation(() => {
+  generate: adminProcedure.mutation(() => {
     return generate({
       strict: true,
       numbers: true,
@@ -11,7 +11,7 @@ export const passwordRouter = createTRPCRouter({
       uppercase: true,
       symbols: true,
       excludeSimilarCharacters: true,
-      length: 16
-    })
+      length: 16,
+    });
   }),
 });

src/server/api/routers/user.ts

@@ -11,7 +11,13 @@ import {
 } from '~/validations/user';
 
 import { COOKIE_COLOR_SCHEME_KEY, COOKIE_LOCALE_KEY } from '../../../../data/constants';
-import { TRPCContext, createTRPCRouter, protectedProcedure, publicProcedure } from '../trpc';
+import {
+  TRPCContext,
+  adminProcedure,
+  createTRPCRouter,
+  protectedProcedure,
+  publicProcedure,
+} from '../trpc';
 
 export const userRouter = createTRPCRouter({
   createAdminAccount: publicProcedure.input(signUpFormSchema).mutation(async ({ ctx, input }) => {
@@ -182,7 +188,7 @@ export const userRouter = createTRPCRouter({
       });
     }),
 
-  makeDefaultDashboard: publicProcedure
+  makeDefaultDashboard: protectedProcedure
     .input(z.object({ board: z.string() }))
     .mutation(async ({ ctx, input }) => {
       await ctx.prisma.userSettings.update({
@@ -195,7 +201,7 @@ export const userRouter = createTRPCRouter({
       });
     }),
 
-  all: publicProcedure
+  all: adminProcedure
     .input(
       z.object({
         limit: z.number().min(1).max(100).default(10),
@@ -236,11 +242,11 @@ export const userRouter = createTRPCRouter({
         countPages: Math.ceil(countUsers / limit),
       };
     }),
-  create: publicProcedure.input(createNewUserSchema).mutation(async ({ ctx, input }) => {
+  create: adminProcedure.input(createNewUserSchema).mutation(async ({ ctx, input }) => {
     await createUserInNotExist(ctx, input);
   }),
 
-  deleteUser: publicProcedure
+  deleteUser: adminProcedure
     .input(
       z.object({
         userId: z.string(),