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

src/modals/create-dashboard/create-dashboard.modal.tsx

@@ -8,7 +8,7 @@ import { createDashboardSchemaValidation } from '~/validations/dashboards';
 
 export const CreateDashboardModal = ({ context, id, innerProps }: ContextModalProps<{}>) => {
   const apiContext = api.useContext();
-  const { isLoading, mutateAsync } = api.config.save.useMutation({
+  const { isLoading, mutate } = api.config.save.useMutation({
     onSuccess: async () => {
       await apiContext.config.all.invalidate();
       modals.close(id);
@@ -24,37 +24,43 @@ export const CreateDashboardModal = ({ context, id, innerProps }: ContextModalPr
     validate: i18nZodResolver(createDashboardSchemaValidation),
   });
 
+  const handleSubmit = () => {
+    const fallbackConfig = getStaticFallbackConfig(form.values.name);
+    mutate({
+      name: form.values.name,
+      config: fallbackConfig,
+    });
+  };
+
   return (
-    <Stack>
-      <Text>A name cannot be changed after a dashboard has been created.</Text>
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <Stack>
+        <Text>A name cannot be changed after a dashboard has been created.</Text>
 
-      <TextInput label="Name" withAsterisk {...form.getInputProps('name')} />
+        <TextInput label="Name" withAsterisk {...form.getInputProps('name')} />
 
-      <Group grow>
-        <Button
-          onClick={() => {
-            modals.close(id);
-          }}
-          variant="light"
-          color="gray"
-        >
-          Cancel
-        </Button>
-        <Button
-          onClick={async () => {
-            const fallbackConfig = getStaticFallbackConfig(form.values.name);
-            await mutateAsync({
-              name: form.values.name,
-              config: fallbackConfig,
-            });
-          }}
-          disabled={isLoading}
-          variant="light"
-          color="green"
-        >
-          Create
-        </Button>
-      </Group>
-    </Stack>
+        <Group grow>
+          <Button
+            onClick={() => {
+              modals.close(id);
+            }}
+            variant="light"
+            color="gray"
+            type="button"
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            onClick={async () => {}}
+            disabled={isLoading}
+            variant="light"
+            color="green"
+          >
+            Create
+          </Button>
+        </Group>
+      </Stack>
+    </form>
   );
 };

src/modals/delete-board/delete-board.modal.tsx

@@ -0,0 +1,52 @@
+import { Button, Group, Stack, Text } from '@mantine/core';
+import { ContextModalProps, modals } from '@mantine/modals';
+import { api } from '~/utils/api';
+
+export const DeleteBoardModal = ({
+  context,
+  id,
+  innerProps,
+}: ContextModalProps<{ boardName: string; onConfirm: () => Promise<void> }>) => {
+  const apiContext = api.useContext();
+  const { isLoading, mutateAsync } = api.config.delete.useMutation({
+    onSuccess: async () => {
+      await apiContext.config.all.invalidate();
+      modals.close(id);
+    },
+  });
+
+  return (
+    <Stack>
+      <Text>
+        Are you sure, that you want to delete this board? This action cannot be undone and your data
+        will be lost permanently.
+      </Text>
+
+      <Group grow>
+        <Button
+          onClick={() => {
+            modals.close(id);
+          }}
+          variant="light"
+          color="gray"
+        >
+          Cancel
+        </Button>
+        <Button
+          onClick={async () => {
+            modals.close(id);
+            await innerProps.onConfirm();
+            await mutateAsync({
+              name: innerProps.boardName,
+            });
+          }}
+          disabled={isLoading}
+          variant="light"
+          color="red"
+        >
+          Delete
+        </Button>
+      </Group>
+    </Stack>
+  );
+};

src/modals/modals.ts

@@ -11,6 +11,7 @@ import { CreateRegistrationTokenModal } from './create-registration-token/create
 import { DeleteRegistrationTokenModal } from './delete-registration-token/delete-registration-token.modal';
 import { CreateDashboardModal } from './create-dashboard/create-dashboard.modal';
 import { CopyRegistrationToken } from './copy-regristration-token/copy-registration-token.modal';
+import { DeleteBoardModal } from './delete-board/delete-board.modal';
 
 export const modals = {
   editApp: EditAppModal,
@@ -25,6 +26,7 @@ export const modals = {
   deleteRegistrationTokenModal: DeleteRegistrationTokenModal,
   createDashboardModal: CreateDashboardModal,
   copyRegistrationTokenModal: CopyRegistrationToken,
+  deleteBoardModal: DeleteBoardModal
 };
 
 declare module '@mantine/modals' {

src/pages/manage/boards/index.tsx

@@ -14,7 +14,13 @@ import {
 } from '@mantine/core';
 import { useListState } from '@mantine/hooks';
 import { modals } from '@mantine/modals';
-import { IconDotsVertical, IconPlus, IconTrash } from '@tabler/icons-react';
+import {
+  IconDotsVertical,
+  IconFile,
+  IconFolderFilled,
+  IconPlus,
+  IconTrash,
+} from '@tabler/icons-react';
 import Link from 'next/link';
 import { MainLayout } from '~/components/layout/admin/main-admin.layout';
 import { CommonHeader } from '~/components/layout/common-header';
@@ -45,14 +51,14 @@ const BoardsPage = () => {
           onClick={() => {
             modals.openContextModal({
               modal: 'createDashboardModal',
-              title: <Text>Create new dashboard</Text>,
+              title: <Text>Create new board</Text>,
               innerProps: {},
             });
           }}
           leftIcon={<IconPlus size="1rem" />}
           variant="default"
         >
-          Create new dashboard
+          Create new board
         </Button>
       </Flex>
 
@@ -68,9 +74,13 @@ const BoardsPage = () => {
           {data.map((board, index) => (
             <Card key={index} shadow="sm" padding="lg" radius="md" pos="relative" withBorder>
               <LoadingOverlay visible={deletingDashboards.includes(board)} />
-              <Group position="apart" mb="xs">
-                <Text weight={500}>{board}</Text>
-                <Badge color="pink" variant="light">
+
+              <Text weight={500} mb="xs">
+                {board}
+              </Text>
+
+              <Group mb="xl">
+                <Badge leftSection={<IconFolderFilled size=".7rem" />} color="pink" variant="light">
                   Filesystem
                 </Badge>
               </Group>
@@ -100,14 +110,18 @@ const BoardsPage = () => {
                   <Menu.Dropdown>
                     <Menu.Item
                       onClick={async () => {
-                        append(board);
-                        // give user feedback, that it's being deleted
-                        await sleep(500);
-                        deletionMutationAsync({
-                          name: board,
-                        }).finally(async () => {
-                          await sleep(500);
-                          filter((item, _) => item !== board);
+                        modals.openContextModal({
+                          modal: 'deleteBoardModal',
+                          title: <Text weight={500}>Delete board</Text>,
+                          innerProps: {
+                            boardName: board,
+                            onConfirm: async () => {
+                              append(board);
+                              // give user feedback, that it's being deleted
+                              await sleep(500);
+                              filter((item, _) => item !== board);
+                            },
+                          },
                         });
                       }}
                       icon={<IconTrash size="1rem" />}