refactor: globalize modal title style

2024-06-30 06:30:11 +02:00 · 2023-03-13 08:50:54 +01:00 · 2023-03-13 08:50:54 +01:00 · 6345e21db9
commit 6345e21db9
parent f55aa80516
12 changed files with 59 additions and 69 deletions
--- a/backend/src/share/share.service.ts
+++ b/backend/src/share/share.service.ts
@ -278,7 +278,7 @@ export class ShareService {
      share?.security?.password &&
      !(await argon.verify(share.security.password, password))
    ) {
-      throw new ForbiddenException("Wrong password");
+      throw new ForbiddenException("Wrong password", "wrong_password");
    }

    if (share.security?.maxViews && share.security.maxViews <= share.views) {
--- a/frontend/src/components/account/showEnableTotpModal.tsx
+++ b/frontend/src/components/account/showEnableTotpModal.tsx
@ -7,7 +7,6 @@ import {
  Stack,
  Text,
  TextInput,
-  Title,
  Tooltip,
 } from "@mantine/core";
 import { useForm, yupResolver } from "@mantine/form";
@ -27,7 +26,7 @@ const showEnableTotpModal = (
  }
 ) => {
  return modals.openModal({
-    title: <Title order={4}>Enable TOTP</Title>,
+    title: "Enable TOTP",
    children: (
      <CreateEnableTotpModal options={options} refreshUser={refreshUser} />
    ),
--- a/frontend/src/components/admin/users/showCreateUserModal.tsx
+++ b/frontend/src/components/admin/users/showCreateUserModal.tsx
@ -5,7 +5,6 @@ import {
  Stack,
  Switch,
  TextInput,
-  Title,
 } from "@mantine/core";
 import { useForm, yupResolver } from "@mantine/form";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
@ -19,7 +18,7 @@ const showCreateUserModal = (
  getUsers: () => void
 ) => {
  return modals.openModal({
-    title: <Title order={5}>Create user</Title>,
+    title: "Create user",
    children: (
      <Body modals={modals} smtpEnabled={smtpEnabled} getUsers={getUsers} />
    ),
--- a/frontend/src/components/admin/users/showUpdateUserModal.tsx
+++ b/frontend/src/components/admin/users/showUpdateUserModal.tsx
@ -6,7 +6,6 @@ import {
  Stack,
  Switch,
  TextInput,
-  Title,
 } from "@mantine/core";
 import { useForm, yupResolver } from "@mantine/form";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
@ -21,7 +20,7 @@ const showUpdateUserModal = (
  getUsers: () => void
 ) => {
  return modals.openModal({
-    title: <Title order={5}>Update {user.username}</Title>,
+    title: `Update ${user.username}`,
    children: <Body user={user} modals={modals} getUsers={getUsers} />,
  });
 };
--- a/frontend/src/components/share/modals/showCompletedReverseShareModal.tsx
+++ b/frontend/src/components/share/modals/showCompletedReverseShareModal.tsx
@ -1,4 +1,4 @@
-import { ActionIcon, Button, Stack, TextInput, Title } from "@mantine/core";
+import { ActionIcon, Button, Stack, TextInput } from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
@ -14,11 +14,7 @@ const showCompletedReverseShareModal = (
    closeOnClickOutside: false,
    withCloseButton: false,
    closeOnEscape: false,
-    title: (
-      <Stack align="stretch" spacing={0}>
-        <Title order={4}>Reverse share link</Title>
-      </Stack>
-    ),
+    title: "Reverse share link",
    children: <Body link={link} getReverseShares={getReverseShares} />,
  });
 };
--- a/frontend/src/components/share/modals/showCreateReverseShareModal.tsx
+++ b/frontend/src/components/share/modals/showCreateReverseShareModal.tsx
@ -8,7 +8,6 @@ import {
  Stack,
  Switch,
  Text,
-  Title,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { useModals } from "@mantine/modals";
@ -25,7 +24,7 @@ const showCreateReverseShareModal = (
  getReverseShares: () => void
 ) => {
  return modals.openModal({
-    title: <Title order={4}>Create reverse share</Title>,
+    title: "Create reverse share",
    children: (
      <Body
        showSendEmailNotificationOption={showSendEmailNotificationOption}
--- a/frontend/src/components/share/showEnterPasswordModal.tsx
+++ b/frontend/src/components/share/showEnterPasswordModal.tsx
@ -1,57 +1,52 @@
-import { Button, PasswordInput, Stack, Text, Title } from "@mantine/core";
+import { Button, PasswordInput, Stack, Text } from "@mantine/core";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import { useState } from "react";

 const showEnterPasswordModal = (
  modals: ModalsContextProps,
-  submitCallback: any
+  submitCallback: (password: string) => Promise<void>
 ) => {
  return modals.openModal({
    closeOnClickOutside: false,
    withCloseButton: false,
    closeOnEscape: false,
-    title: (
-      <>
-        <Title order={4}>Password required</Title>
-        <Text size="sm">
-          This access this share please enter the password for the share.
-        </Text>
-      </>
-    ),
+    title: "Password required",
    children: <Body submitCallback={submitCallback} />,
  });
 };

-const Body = ({ submitCallback }: { submitCallback: any }) => {
+const Body = ({
+  submitCallback,
+}: {
+  submitCallback: (password: string) => Promise<void>;
+}) => {
  const [password, setPassword] = useState("");
  const [passwordWrong, setPasswordWrong] = useState(false);
  return (
-    <>
-      <Stack align="stretch">
-        <PasswordInput
-          variant="filled"
-          placeholder="Password"
-          error={passwordWrong && "Wrong password"}
-          onFocus={() => setPasswordWrong(false)}
-          onChange={(e) => setPassword(e.target.value)}
-          value={password}
-        />
-        <Button
-          onClick={() =>
-            submitCallback(password)
-              .then((res: any) => res)
-              .catch((e: any) => {
-                const error = e.response.data.message;
-                if (error == "Wrong password") {
-                  setPasswordWrong(true);
-                }
-              })
-          }
-        >
-          Submit
-        </Button>
-      </Stack>
-    </>
+    <Stack align="stretch">
+      <Text size="sm">
+        This access this share please enter the password for the share.
+      </Text>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          submitCallback(password);
+        }}
+      >
+        <Stack>
+          <PasswordInput
+            variant="filled"
+            placeholder="Password"
+            error={passwordWrong && "Wrong password"}
+            onFocus={() => setPasswordWrong(false)}
+            onChange={(e) => setPassword(e.target.value)}
+            value={password}
+          />
+          <Button type="submit">Submit</Button>
+        </Stack>
+      </form>
+    </Stack>
  );
 };

--- a/frontend/src/components/share/showErrorModal.tsx
+++ b/frontend/src/components/share/showErrorModal.tsx
@ -1,4 +1,4 @@
-import { Button, Stack, Text, Title } from "@mantine/core";
+import { Button, Stack, Text } from "@mantine/core";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import { useRouter } from "next/router";
@ -12,7 +12,7 @@ const showErrorModal = (
    closeOnClickOutside: false,
    withCloseButton: false,
    closeOnEscape: false,
-    title: <Title order={4}>{title}</Title>,
+    title: title,

    children: <Body text={text} />,
  });
--- a/frontend/src/components/upload/modals/showCompletedUploadModal.tsx
+++ b/frontend/src/components/upload/modals/showCompletedUploadModal.tsx
@ -1,11 +1,4 @@
-import {
-  ActionIcon,
-  Button,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-} from "@mantine/core";
+import { ActionIcon, Button, Stack, Text, TextInput } from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
@ -24,11 +17,7 @@ const showCompletedUploadModal = (
    closeOnClickOutside: false,
    withCloseButton: false,
    closeOnEscape: false,
-    title: (
-      <Stack align="stretch" spacing={0}>
-        <Title order={4}>Share ready</Title>
-      </Stack>
-    ),
+    title: "Share ready",
    children: <Body share={share} appUrl={appUrl} />,
  });
 };
--- a/frontend/src/components/upload/modals/showCreateUploadModal.tsx
+++ b/frontend/src/components/upload/modals/showCreateUploadModal.tsx
@ -37,7 +37,7 @@ const showCreateUploadModal = (
  uploadCallback: (createShare: CreateShare) => void
 ) => {
  return modals.openModal({
-    title: <Title order={4}>Share</Title>,
+    title: "Share",
    children: (
      <CreateUploadModalBody
        options={options}
--- a/frontend/src/pages/share/[shareId]/index.tsx
+++ b/frontend/src/pages/share/[shareId]/index.tsx
@ -9,6 +9,7 @@ import showEnterPasswordModal from "../../../components/share/showEnterPasswordM
 import showErrorModal from "../../../components/share/showErrorModal";
 import shareService from "../../../services/share.service";
 import { Share as ShareType } from "../../../types/share.type";
+import toast from "../../../utils/toast.util";

 export function getServerSideProps(context: GetServerSidePropsContext) {
  return {
@ -28,12 +29,15 @@ const Share = ({ shareId }: { shareId: string }) => {
        getFiles();
      })
      .catch((e) => {
-        if (e.response.data.error == "share_max_views_exceeded") {
+        const { error } = e.response.data;
+        if (error == "share_max_views_exceeded") {
          showErrorModal(
            modals,
            "Visitor limit exceeded",
            "The visitor limit from this share has been exceeded."
          );
+        } else {
+          toast.axiosError(e);
        }
      });
  };
--- a/frontend/src/styles/mantine.style.ts
+++ b/frontend/src/styles/mantine.style.ts
@ -16,4 +16,14 @@ export default <MantineThemeOverride>{
    ],
  },
  primaryColor: "victoria",
+  components: {
+    Modal: {
+      styles: (theme) => ({
+        title: {
+          fontSize: theme.fontSizes.lg,
+          fontWeight: 700,
+        },
+      }),
+    },
+  },
 };