fix: obscure critical config variables

Author: stonith404

backend/prisma/schema.prisma

@@ -84,6 +84,7 @@ model Config {
   type        String
   value       String
   description String
+  obscured    Boolean @default(false)
   secret      Boolean @default(true)
   locked      Boolean @default(false)
 }

backend/prisma/seed/config.seed.ts

@@ -1,7 +1,7 @@
-import { PrismaClient } from "@prisma/client";
+import { Prisma, PrismaClient } from "@prisma/client";
 import * as crypto from "crypto";
 
-const configVariables = [
+const configVariables: Prisma.ConfigCreateInput[] = [
   {
     key: "SETUP_FINISHED",
     description: "Whether the setup has been finished",
@@ -83,6 +83,7 @@ const configVariables = [
     description: "Password of the SMTP server",
     type: "string",
     value: "",
+    obscured: true,
   },
 ];
 

backend/src/config/dto/adminConfig.dto.ts

@@ -11,6 +11,9 @@ export class AdminConfigDTO extends ConfigDTO {
   @Expose()
   description: string;
 
+  @Expose()
+  obscured: boolean;
+
   from(partial: Partial<AdminConfigDTO>) {
     return plainToClass(AdminConfigDTO, partial, {
       excludeExtraneousValues: true,

frontend/src/components/admin/AdminConfigTable.tsx

@@ -54,17 +54,20 @@ const AdminConfigTable = () => {
       <tbody>
         {isLoading
           ? skeletonRows
-          : configVariables.map((element) => (
-              <tr key={element.key}>
+          : configVariables.map((configVariable) => (
+              <tr key={configVariable.key}>
                 <td style={{ maxWidth: "200px" }}>
-                  <Code>{element.key}</Code> {element.secret && <TbLock />}{" "}
-                  <br />
+                  <Code>{configVariable.key}</Code>{" "}
+                  {configVariable.secret && <TbLock />} <br />
                   <Text size="xs" color="dimmed">
-                    {element.description}
+                    {configVariable.description}
                   </Text>
                 </td>
-                <td>{element.value}</td>
-
+                <td>
+                  {configVariable.obscured
+                    ? "••••••••••••"
+                    : configVariable.value}
+                </td>
                 <td>
                   <Group position="right">
                     <ActionIcon
@@ -74,7 +77,7 @@ const AdminConfigTable = () => {
                       onClick={() =>
                         showUpdateConfigVariableModal(
                           modals,
-                          element,
+                          configVariable,
                           getConfigVariables
                         )
                       }

frontend/src/components/admin/showCreateUserModal.tsx

@@ -62,10 +62,7 @@ const Body = ({
       >
         <Stack>
           <TextInput label="Username" {...form.getInputProps("username")} />
-          <TextInput
-            label="Email"
-            {...form.getInputProps("email")}
-          />
+          <TextInput label="Email" {...form.getInputProps("email")} />
           <PasswordInput
             label="New password"
             {...form.getInputProps("password")}

frontend/src/components/admin/showUpdateConfigVariableModal.tsx

@@ -2,6 +2,7 @@ import {
   Button,
   Code,
   NumberInput,
+  PasswordInput,
   Select,
   Space,
   Stack,
@@ -53,9 +54,12 @@ const Body = ({
       <Text>
         Set <Code>{configVariable.key}</Code> to
       </Text>
-      {configVariable.type == "string" && (
-        <TextInput label="Value" {...form.getInputProps("stringValue")} />
-      )}
+      {configVariable.type == "string" &&
+        (configVariable.obscured ? (
+          <PasswordInput label="Value" {...form.getInputProps("stringValue")} />
+        ) : (
+          <TextInput label="Value" {...form.getInputProps("stringValue")} />
+        ))}
       {configVariable.type == "number" && (
         <NumberInput label="Value" {...form.getInputProps("numberValue")} />
       )}

frontend/src/components/admin/showUpdateUserModal.tsx

@@ -79,10 +79,7 @@ const Body = ({
             label="Username"
             {...accountForm.getInputProps("username")}
           />
-          <TextInput
-            label="Email"
-            {...accountForm.getInputProps("email")}
-          />
+          <TextInput label="Email" {...accountForm.getInputProps("email")} />
           <Switch
             mt="xs"
             labelPosition="left"

frontend/src/pages/account/index.tsx

@@ -80,10 +80,7 @@ const Account = () => {
               label="Username"
               {...accountForm.getInputProps("username")}
             />
-            <TextInput
-              label="Email"
-              {...accountForm.getInputProps("email")}
-            />
+            <TextInput label="Email" {...accountForm.getInputProps("email")} />
             <Group position="right">
               <Button type="submit">Save</Button>
             </Group>

frontend/src/types/config.type.ts

@@ -8,6 +8,7 @@ export type AdminConfig = Config & {
   updatedAt: Date;
   secret: boolean;
   description: string;
+  obscured: boolean;
 };
 
 export default Config;