feat: improve config UI (#69)

* add first concept

* completed configuration ui update

* add button for testing email configuration

* improve mobile layout

* add migration

* run formatter

* delete unnecessary modal

* remove unused comment

frontend/src/components/account/showEnableTotpModal.tsx

@@ -47,9 +47,6 @@ const CreateEnableTotpModal = ({
   refreshUser: () => {};
 }) => {
   const modals = useModals();
-  const user = useUser();
-
-  console.log(user.user);
 
   const validationSchema = yup.object().shape({
     code: yup

frontend/src/components/admin/AdminConfigTable.tsx

@@ -1,115 +0,0 @@
-import {
-  ActionIcon,
-  Box,
-  Code,
-  Group,
-  Skeleton,
-  Table,
-  Text,
-} from "@mantine/core";
-import { useModals } from "@mantine/modals";
-import { useEffect, useState } from "react";
-import { TbEdit, TbLock } from "react-icons/tb";
-import configService from "../../services/config.service";
-import { AdminConfig as AdminConfigType } from "../../types/config.type";
-import showUpdateConfigVariableModal from "./showUpdateConfigVariableModal";
-
-const AdminConfigTable = () => {
-  const modals = useModals();
-
-  const [isLoading, setIsLoading] = useState(false);
-
-  const [configVariables, setConfigVariables] = useState<AdminConfigType[]>([]);
-
-  const getConfigVariables = async () => {
-    await configService.listForAdmin().then((configVariables) => {
-      setConfigVariables(configVariables);
-    });
-  };
-
-  useEffect(() => {
-    setIsLoading(true);
-    getConfigVariables().then(() => setIsLoading(false));
-  }, []);
-
-  const skeletonRows = [...Array(9)].map((c, i) => (
-    <tr key={i}>
-      <td>
-        <Skeleton height={18} width={80} mb="sm" />
-        <Skeleton height={30} />
-      </td>
-      <td>
-        <Skeleton height={18} />
-      </td>
-
-      <td>
-        <Group position="right">
-          <Skeleton height={25} width={25} />
-        </Group>
-      </td>
-    </tr>
-  ));
-
-  return (
-    <Box sx={{ display: "block", overflowX: "auto" }}>
-      <Table verticalSpacing="sm" horizontalSpacing="xl" withBorder>
-        <thead>
-          <tr>
-            <th>Key</th>
-            <th>Value</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          {isLoading
-            ? skeletonRows
-            : configVariables.map((configVariable) => (
-                <tr key={configVariable.key}>
-                  <td style={{ maxWidth: "200px" }}>
-                    <Code>{configVariable.key}</Code>{" "}
-                    {configVariable.secret && <TbLock />} <br />
-                    <Text size="xs" color="dimmed">
-                      {configVariable.description}
-                    </Text>
-                  </td>
-                  <td>
-                    <Text
-                      style={{
-                        whiteSpace: "nowrap",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        maxWidth: "40ch",
-                      }}
-                    >
-                      {configVariable.obscured
-                        ? "•".repeat(configVariable.value.length)
-                        : configVariable.value}
-                    </Text>
-                  </td>
-                  <td>
-                    <Group position="right">
-                      <ActionIcon
-                        color="primary"
-                        variant="light"
-                        size={25}
-                        onClick={() =>
-                          showUpdateConfigVariableModal(
-                            modals,
-                            configVariable,
-                            getConfigVariables
-                          )
-                        }
-                      >
-                        <TbEdit />
-                      </ActionIcon>
-                    </Group>
-                  </td>
-                </tr>
-              ))}
-        </tbody>
-      </Table>
-    </Box>
-  );
-};
-
-export default AdminConfigTable;

frontend/src/components/admin/configuration/AdminConfigInput.tsx

@@ -0,0 +1,76 @@
+import {
+  NumberInput,
+  PasswordInput,
+  Stack,
+  Switch,
+  Textarea,
+  TextInput,
+} from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { AdminConfig, UpdateConfig } from "../../../types/config.type";
+
+const AdminConfigInput = ({
+  configVariable,
+  updateConfigVariable,
+}: {
+  configVariable: AdminConfig;
+  updateConfigVariable: (variable: UpdateConfig) => void;
+}) => {
+  const form = useForm({
+    initialValues: {
+      stringValue: configVariable.value,
+      textValue: configVariable.value,
+      numberValue: parseInt(configVariable.value),
+      booleanValue: configVariable.value == "true",
+    },
+  });
+
+  const onValueChange = (configVariable: AdminConfig, value: any) => {
+    form.setFieldValue(`${configVariable.type}Value`, value);
+    updateConfigVariable({ key: configVariable.key, value: value });
+  };
+
+  return (
+    <Stack align="end">
+      {configVariable.type == "string" &&
+        (configVariable.obscured ? (
+          <PasswordInput
+            style={{ width: "100%" }}
+            onChange={(e) => onValueChange(configVariable, e.target.value)}
+            {...form.getInputProps("stringValue")}
+          />
+        ) : (
+          <TextInput
+            style={{ width: "100%" }}
+            {...form.getInputProps("stringValue")}
+            onChange={(e) => onValueChange(configVariable, e.target.value)}
+          />
+        ))}
+
+      {configVariable.type == "text" && (
+        <Textarea
+          style={{ width: "100%" }}
+          autosize
+          {...form.getInputProps("textValue")}
+          onChange={(e) => onValueChange(configVariable, e.target.value)}
+        />
+      )}
+      {configVariable.type == "number" && (
+        <NumberInput
+          {...form.getInputProps("numberValue")}
+          onChange={(number) => onValueChange(configVariable, number)}
+        />
+      )}
+      {configVariable.type == "boolean" && (
+        <>
+          <Switch
+            {...form.getInputProps("booleanValue", { type: "checkbox" })}
+            onChange={(e) => onValueChange(configVariable, e.target.checked)}
+          />
+        </>
+      )}
+    </Stack>
+  );
+};
+
+export default AdminConfigInput;

frontend/src/components/admin/configuration/AdminConfigTable.tsx

@@ -0,0 +1,140 @@
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Space,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import { useEffect, useState } from "react";
+import useConfig from "../../../hooks/config.hook";
+import configService from "../../../services/config.service";
+import {
+  AdminConfigGroupedByCategory,
+  UpdateConfig,
+} from "../../../types/config.type";
+import {
+  capitalizeFirstLetter,
+  configVariableToFriendlyName,
+} from "../../../utils/string.util";
+import toast from "../../../utils/toast.util";
+
+import AdminConfigInput from "./AdminConfigInput";
+import TestEmailButton from "./TestEmailButton";
+
+const AdminConfigTable = () => {
+  const config = useConfig();
+  const isMobile = useMediaQuery("(max-width: 560px)");
+
+  let updatedConfigVariables: UpdateConfig[] = [];
+
+  const updateConfigVariable = (configVariable: UpdateConfig) => {
+    const index = updatedConfigVariables.findIndex(
+      (item) => item.key === configVariable.key
+    );
+    if (index > -1) {
+      updatedConfigVariables[index] = configVariable;
+    } else {
+      updatedConfigVariables.push(configVariable);
+    }
+  };
+
+  const [configVariablesByCategory, setCofigVariablesByCategory] =
+    useState<AdminConfigGroupedByCategory>({});
+
+  const getConfigVariables = async () => {
+    await configService.listForAdmin().then((configVariables) => {
+      const configVariablesByCategory = configVariables.reduce(
+        (categories: any, item) => {
+          const category = categories[item.category] || [];
+          category.push(item);
+          categories[item.category] = category;
+          return categories;
+        },
+        {}
+      );
+      setCofigVariablesByCategory(configVariablesByCategory);
+    });
+  };
+
+  useEffect(() => {
+    getConfigVariables();
+  }, []);
+
+  return (
+    <Box mb="lg">
+      {Object.entries(configVariablesByCategory).map(
+        ([category, configVariables]) => {
+          return (
+            <Paper key={category} withBorder p="lg" mb="xl">
+              <Title mb="xs" order={3}>
+                {capitalizeFirstLetter(category)}
+              </Title>
+              {configVariables.map((configVariable) => (
+                <>
+                  <Group position="apart">
+                    <Stack
+                      style={{ maxWidth: isMobile ? "100%" : "40%" }}
+                      spacing={0}
+                    >
+                      <Title order={6}>
+                        {configVariableToFriendlyName(configVariable.key)}
+                      </Title>
+                      <Text color="dimmed" size="sm" mb="xs">
+                        {configVariable.description}
+                      </Text>
+                    </Stack>
+                    <Stack></Stack>
+                    <Box style={{ width: isMobile ? "100%" : "50%" }}>
+                      <AdminConfigInput
+                        key={configVariable.key}
+                        updateConfigVariable={updateConfigVariable}
+                        configVariable={configVariable}
+                      />
+                    </Box>
+                  </Group>
+
+                  <Space h="lg" />
+                </>
+              ))}
+              {category == "email" && (
+                <Group position="right">
+                  <TestEmailButton />
+                </Group>
+              )}
+            </Paper>
+          );
+        }
+      )}
+      <Group position="right">
+        <Button
+          onClick={() => {
+            if (config.get("SETUP_FINISHED")) {
+              configService
+                .updateMany(updatedConfigVariables)
+                .then(() =>
+                  toast.success("Configurations updated successfully")
+                )
+                .catch(toast.axiosError);
+            } else {
+              configService
+                .updateMany(updatedConfigVariables)
+                .then(async () => {
+                  await configService.finishSetup();
+                  window.location.reload();
+                })
+                .catch(toast.axiosError);
+            }
+          }}
+        >
+          Save
+        </Button>
+      </Group>
+    </Box>
+  );
+};
+
+export default AdminConfigTable;

frontend/src/components/admin/configuration/TestEmailButton.tsx

@@ -0,0 +1,27 @@
+import { Button } from "@mantine/core";
+import useUser from "../../../hooks/user.hook";
+import configService from "../../../services/config.service";
+import toast from "../../../utils/toast.util";
+
+const TestEmailButton = () => {
+  const { user } = useUser();
+
+  return (
+    <Button
+      variant="light"
+      onClick={() =>
+        configService
+          .sendTestEmail(user!.email)
+          .then(() => toast.success("Email sent successfully"))
+          .catch(() =>
+            toast.error(
+              "Failed to send the email. Please check the backend logs for more information."
+            )
+          )
+      }
+    >
+      Send test email
+    </Button>
+  );
+};
+export default TestEmailButton;

frontend/src/components/admin/showUpdateConfigVariableModal.tsx

@@ -1,108 +0,0 @@
-import {
-  Button,
-  Code,
-  NumberInput,
-  PasswordInput,
-  Select,
-  Space,
-  Stack,
-  Text,
-  Textarea,
-  TextInput,
-  Title,
-} from "@mantine/core";
-import { useForm } from "@mantine/form";
-import { useModals } from "@mantine/modals";
-import { ModalsContextProps } from "@mantine/modals/lib/context";
-import configService from "../../services/config.service";
-import { AdminConfig } from "../../types/config.type";
-import toast from "../../utils/toast.util";
-
-const showUpdateConfigVariableModal = (
-  modals: ModalsContextProps,
-  configVariable: AdminConfig,
-  getConfigVariables: () => void
-) => {
-  return modals.openModal({
-    title: <Title order={5}>Update configuration variable</Title>,
-    children: (
-      <Body
-        configVariable={configVariable}
-        getConfigVariables={getConfigVariables}
-      />
-    ),
-  });
-};
-
-const Body = ({
-  configVariable,
-  getConfigVariables,
-}: {
-  configVariable: AdminConfig;
-  getConfigVariables: () => void;
-}) => {
-  const modals = useModals();
-
-  const form = useForm({
-    initialValues: {
-      stringValue: configVariable.value,
-      textValue: configVariable.value,
-      numberValue: parseInt(configVariable.value),
-      booleanValue: configVariable.value,
-    },
-  });
-  return (
-    <Stack align="stretch">
-      <Text>
-        Set <Code>{configVariable.key}</Code> to
-      </Text>
-      {configVariable.type == "string" &&
-        (configVariable.obscured ? (
-          <PasswordInput {...form.getInputProps("stringValue")} />
-        ) : (
-          <TextInput {...form.getInputProps("stringValue")} />
-        ))}
-
-      {configVariable.type == "text" && (
-        <Textarea autosize {...form.getInputProps("textValue")} />
-      )}
-      {configVariable.type == "number" && (
-        <NumberInput {...form.getInputProps("numberValue")} />
-      )}
-      {configVariable.type == "boolean" && (
-        <Select
-          data={[
-            { value: "true", label: "True" },
-            { value: "false", label: "False" },
-          ]}
-          {...form.getInputProps("booleanValue")}
-        />
-      )}
-      <Space />
-      <Button
-        onClick={async () => {
-          const value =
-            configVariable.type == "string"
-              ? form.values.stringValue
-              : configVariable.type == "text"
-              ? form.values.textValue
-              : configVariable.type == "number"
-              ? form.values.numberValue
-              : form.values.booleanValue == "true";
-
-          await configService
-            .update(configVariable.key, value)
-            .then(() => {
-              getConfigVariables();
-              modals.closeAll();
-            })
-            .catch(toast.axiosError);
-        }}
-      >
-        Save
-      </Button>
-    </Stack>
-  );
-};
-
-export default showUpdateConfigVariableModal;

frontend/src/pages/admin/config.tsx

@@ -1,5 +1,5 @@
 import { Space, Title } from "@mantine/core";
-import AdminConfigTable from "../../components/admin/AdminConfigTable";
+import AdminConfigTable from "../../components/admin/configuration/AdminConfigTable";
 
 const AdminConfig = () => {
   return (

frontend/src/pages/admin/setup.tsx

@@ -1,19 +1,16 @@
-import { Box, Button, Stack, Text, Title } from "@mantine/core";
+import { Box, Stack, Text, Title } from "@mantine/core";
 import { useRouter } from "next/router";
-import { useState } from "react";
-import AdminConfigTable from "../../components/admin/AdminConfigTable";
+import AdminConfigTable from "../../components/admin/configuration/AdminConfigTable";
+
 import Logo from "../../components/Logo";
 import useConfig from "../../hooks/config.hook";
 import useUser from "../../hooks/user.hook";
-import configService from "../../services/config.service";
 
 const Setup = () => {
   const router = useRouter();
   const config = useConfig();
   const { user } = useUser();
 
-  const [isLoading, setIsLoading] = useState(false);
-
   if (!user) {
     router.push("/auth/signUp");
     return;
@@ -31,19 +28,6 @@ const Setup = () => {
         <Box style={{ width: "100%" }}>
           <AdminConfigTable />
         </Box>
-        <Button
-          loading={isLoading}
-          onClick={async () => {
-            setIsLoading(true);
-            await configService.finishSetup();
-            setIsLoading(false);
-            window.location.reload();
-          }}
-          mb={70}
-          mt="lg"
-        >
-          Let me in
-        </Button>
       </Stack>
     </>
   );

frontend/src/services/auth.service.ts

@@ -36,6 +36,12 @@ const signInTotp = async (
     totp,
     loginToken,
   });
+
+  setCookie("access_token", response.data.accessToken);
+  setCookie("refresh_token", response.data.refreshToken, {
+    maxAge: 60 * 60 * 24 * 30 * 3,
+  });
+
   return response;
 };
 

frontend/src/services/config.service.ts

@@ -1,4 +1,4 @@
-import Config, { AdminConfig } from "../types/config.type";
+import Config, { AdminConfig, UpdateConfig } from "../types/config.type";
 import api from "./api.service";
 
 const list = async (): Promise<Config[]> => {
@@ -9,11 +9,8 @@ const listForAdmin = async (): Promise<AdminConfig[]> => {
   return (await api.get("/configs/admin")).data;
 };
 
-const update = async (
-  key: string,
-  value: string | number | boolean
-): Promise<AdminConfig[]> => {
-  return (await api.patch(`/configs/admin/${key}`, { value })).data;
+const updateMany = async (data: UpdateConfig[]): Promise<AdminConfig[]> => {
+  return (await api.patch("/configs/admin", data)).data;
 };
 
 const get = (key: string, configVariables: Config[]): any => {
@@ -27,17 +24,23 @@ const get = (key: string, configVariables: Config[]): any => {
 
   if (configVariable.type == "number") return parseInt(configVariable.value);
   if (configVariable.type == "boolean") return configVariable.value == "true";
-  if (configVariable.type == "string" || configVariable.type == "text") return configVariable.value;
+  if (configVariable.type == "string" || configVariable.type == "text")
+    return configVariable.value;
 };
 
 const finishSetup = async (): Promise<AdminConfig[]> => {
   return (await api.post("/configs/admin/finishSetup")).data;
 };
 
+const sendTestEmail = async (email: string) => {
+  await api.post("/configs/admin/testEmail", { email });
+};
+
 export default {
   list,
   listForAdmin,
-  update,
+  updateMany,
   get,
   finishSetup,
+  sendTestEmail,
 };

frontend/src/types/config.type.ts

@@ -4,11 +4,29 @@ type Config = {
   type: string;
 };
 
+export type UpdateConfig = {
+  key: string;
+  value: string;
+};
+
 export type AdminConfig = Config & {
   updatedAt: Date;
   secret: boolean;
   description: string;
   obscured: boolean;
+  category: string;
+};
+
+export type AdminConfigGroupedByCategory = {
+  [key: string]: [
+    Config & {
+      updatedAt: Date;
+      secret: boolean;
+      description: string;
+      obscured: boolean;
+      category: string;
+    }
+  ];
 };
 
 export default Config;

frontend/src/utils/string.util.ts

@@ -0,0 +1,10 @@
+export const configVariableToFriendlyName = (variable: string) => {
+  return variable
+    .split("_")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(" ");
+};
+
+export const capitalizeFirstLetter = (string: string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+};