feat(share, config): more variables, placeholder and reset default (#132)

* More email share vars + unfinished placeolders config

{desc} {expires} vars
(unfinished) config placeholder vals

* done

* migrate

* edit seed

* removed comments

* refactor: replace dependecy `luxon` with `moment`

* update shareRecipientsMessage message

* chore: remove `luxon`

* fix: grammatically incorrect `shareRecipientsMessage` message

* changed to defaultValue and value instead

* fix: don't expose defaultValue to non admin user

* fix: update default value if default value changes

* refactor: set config value to null instead of a empty string

* refactor: merge two migrations into one

* fix value check empty

---------

Co-authored-by: Elias Schneider <login@eliasschneider.com>

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

@@ -18,10 +18,13 @@ const AdminConfigInput = ({
 }) => {
   const form = useForm({
     initialValues: {
-      stringValue: configVariable.value,
-      textValue: configVariable.value,
-      numberValue: parseInt(configVariable.value),
-      booleanValue: configVariable.value == "true",
+      stringValue: configVariable.value ?? configVariable.defaultValue,
+      textValue: configVariable.value ?? configVariable.defaultValue,
+      numberValue: parseInt(
+        configVariable.value ?? configVariable.defaultValue
+      ),
+      booleanValue:
+        configVariable.value ?? configVariable.defaultValue == "true",
     },
   });
 
@@ -35,29 +38,38 @@ const AdminConfigInput = ({
       {configVariable.type == "string" &&
         (configVariable.obscured ? (
           <PasswordInput
-            style={{ width: "100%" }}
+            style={{
+              width: "100%",
+            }}
             {...form.getInputProps("stringValue")}
             onChange={(e) => onValueChange(configVariable, e.target.value)}
           />
         ) : (
           <TextInput
-            style={{ width: "100%" }}
+            style={{
+              width: "100%",
+            }}
             {...form.getInputProps("stringValue")}
+            placeholder={configVariable.defaultValue}
             onChange={(e) => onValueChange(configVariable, e.target.value)}
           />
         ))}
 
       {configVariable.type == "text" && (
         <Textarea
-          style={{ width: "100%" }}
+          style={{
+            width: "100%",
+          }}
           autosize
           {...form.getInputProps("textValue")}
+          placeholder={configVariable.defaultValue}
           onChange={(e) => onValueChange(configVariable, e.target.value)}
         />
       )}
       {configVariable.type == "number" && (
         <NumberInput
           {...form.getInputProps("numberValue")}
+          placeholder={configVariable.defaultValue}
           onChange={(number) => onValueChange(configVariable, number)}
         />
       )}

frontend/src/pages/admin/config/[category].tsx

@@ -67,7 +67,7 @@ export default function AppShellDemo() {
           toast.success("Configurations updated successfully");
         })
         .catch(toast.axiosError);
-      config.refresh();
+      void config.refresh();
     }
   };
 
@@ -75,8 +75,12 @@ export default function AppShellDemo() {
     const index = updatedConfigVariables.findIndex(
       (item) => item.key === configVariable.key
     );
+
     if (index > -1) {
-      updatedConfigVariables[index] = configVariable;
+      updatedConfigVariables[index] = {
+        ...updatedConfigVariables[index],
+        ...configVariable,
+      };
     } else {
       setUpdatedConfigVariables([...updatedConfigVariables, configVariable]);
     }
@@ -132,9 +136,24 @@ export default function AppShellDemo() {
                       <Title order={6}>
                         {configVariableToFriendlyName(configVariable.name)}
                       </Title>
-                      <Text color="dimmed" size="sm" mb="xs">
-                        {configVariable.description}
-                      </Text>
+                      {configVariable.description.split("\n").length == 1 ? (
+                        <Text color="dimmed" size="sm" mb="xs">
+                          {configVariable.description}
+                        </Text>
+                      ) : (
+                        configVariable.description.split("\n").map((line) => (
+                          <Text
+                            key={line}
+                            color="dimmed"
+                            size="sm"
+                            style={{
+                              marginBottom: line === "" ? "1rem" : "0",
+                            }}
+                          >
+                            {line}
+                          </Text>
+                        ))
+                      )}
                     </Stack>
                     <Stack></Stack>
                     <Box style={{ width: isMobile ? "100%" : "50%" }}>

frontend/src/services/config.service.ts

@@ -23,10 +23,12 @@ const get = (key: string, configVariables: Config[]): any => {
 
   if (!configVariable) throw new Error(`Config variable ${key} not found`);
 
-  if (configVariable.type == "number") return parseInt(configVariable.value);
-  if (configVariable.type == "boolean") return configVariable.value == "true";
+  const value = configVariable.value ?? configVariable.defaultValue;
+
+  if (configVariable.type == "number") return parseInt(value);
+  if (configVariable.type == "boolean") return value == "true";
   if (configVariable.type == "string" || configVariable.type == "text")
-    return configVariable.value;
+    return value;
 };
 
 const finishSetup = async (): Promise<AdminConfig[]> => {

frontend/src/types/config.type.ts

@@ -1,5 +1,6 @@
 type Config = {
   key: string;
+  defaultValue: string;
   value: string;
   type: string;
 };