kamp/pingvin-share
1
0
Fork 0
mirror of https://github.com/stonith404/pingvin-share.git synced 2024-07-04 00:10:17 +02:00
Code

refactor: globalize modal title style

Browse Source
This commit is contained in:
Elias Schneider 2023-03-13 08:50:54 +01:00
parent f55aa80516
commit 6345e21db9
No known key found for this signature in database
GPG Key ID: 07E623B294202B6C
12 changed files with 59 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/share/share.service.ts
View File

@ -278,7 +278,7 @@ export class ShareService {
share?.security?.password && share?.security?.password &&
!(await argon.verify(share.security.password, 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) { if (share.security?.maxViews && share.security.maxViews <= share.views) {

3
frontend/src/components/account/showEnableTotpModal.tsx
View File

@ -7,7 +7,6 @@ import {
Stack, Stack,
Text, Text,
TextInput, TextInput,
Title,
Tooltip, Tooltip,
} from "@mantine/core"; } from "@mantine/core";
import { useForm, yupResolver } from "@mantine/form"; import { useForm, yupResolver } from "@mantine/form";
@ -27,7 +26,7 @@ const showEnableTotpModal = (
} }
) => { ) => {
return modals.openModal({ return modals.openModal({
title: <Title order={4}>Enable TOTP</Title>, title: "Enable TOTP",
children: ( children: (
<CreateEnableTotpModal options={options} refreshUser={refreshUser} /> <CreateEnableTotpModal options={options} refreshUser={refreshUser} />
), ),

3
frontend/src/components/admin/users/showCreateUserModal.tsx
View File

@ -5,7 +5,6 @@ import {
Stack, Stack,
Switch, Switch,
TextInput, TextInput,
Title,
} from "@mantine/core"; } from "@mantine/core";
import { useForm, yupResolver } from "@mantine/form"; import { useForm, yupResolver } from "@mantine/form";
import { ModalsContextProps } from "@mantine/modals/lib/context"; import { ModalsContextProps } from "@mantine/modals/lib/context";
@ -19,7 +18,7 @@ const showCreateUserModal = (
getUsers: () => void getUsers: () => void
) => { ) => {
return modals.openModal({ return modals.openModal({
title: <Title order={5}>Create user</Title>, title: "Create user",
children: ( children: (
<Body modals={modals} smtpEnabled={smtpEnabled} getUsers={getUsers} /> <Body modals={modals} smtpEnabled={smtpEnabled} getUsers={getUsers} />
), ),

3
frontend/src/components/admin/users/showUpdateUserModal.tsx
View File

@ -6,7 +6,6 @@ import {
Stack, Stack,
Switch, Switch,
TextInput, TextInput,
Title,
} from "@mantine/core"; } from "@mantine/core";
import { useForm, yupResolver } from "@mantine/form"; import { useForm, yupResolver } from "@mantine/form";
import { ModalsContextProps } from "@mantine/modals/lib/context"; import { ModalsContextProps } from "@mantine/modals/lib/context";
@ -21,7 +20,7 @@ const showUpdateUserModal = (
getUsers: () => void getUsers: () => void
) => { ) => {
return modals.openModal({ return modals.openModal({
title: <Title order={5}>Update {user.username}</Title>, title: `Update ${user.username}`,
children: <Body user={user} modals={modals} getUsers={getUsers} />, children: <Body user={user} modals={modals} getUsers={getUsers} />,
}); });
}; };

8
frontend/src/components/share/modals/showCompletedReverseShareModal.tsx
View File

@ -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 { useClipboard } from "@mantine/hooks";
import { useModals } from "@mantine/modals"; import { useModals } from "@mantine/modals";
import { ModalsContextProps } from "@mantine/modals/lib/context"; import { ModalsContextProps } from "@mantine/modals/lib/context";
@ -14,11 +14,7 @@ const showCompletedReverseShareModal = (
closeOnClickOutside: false, closeOnClickOutside: false,
withCloseButton: false, withCloseButton: false,
closeOnEscape: false, closeOnEscape: false,
title: ( title: "Reverse share link",
<Stack align="stretch" spacing={0}>
<Title order={4}>Reverse share link</Title>
</Stack>
),
children: <Body link={link} getReverseShares={getReverseShares} />, children: <Body link={link} getReverseShares={getReverseShares} />,
}); });
}; };

3
frontend/src/components/share/modals/showCreateReverseShareModal.tsx
View File

@ -8,7 +8,6 @@ import {
Stack, Stack,
Switch, Switch,
Text, Text,
Title,
} from "@mantine/core"; } from "@mantine/core";
import { useForm } from "@mantine/form"; import { useForm } from "@mantine/form";
import { useModals } from "@mantine/modals"; import { useModals } from "@mantine/modals";
@ -25,7 +24,7 @@ const showCreateReverseShareModal = (
getReverseShares: () => void getReverseShares: () => void
) => { ) => {
return modals.openModal({ return modals.openModal({
title: <Title order={4}>Create reverse share</Title>, title: "Create reverse share",
children: ( children: (
<Body <Body
showSendEmailNotificationOption={showSendEmailNotificationOption} showSendEmailNotificationOption={showSendEmailNotificationOption}

69
frontend/src/components/share/showEnterPasswordModal.tsx
View File

@ -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 { ModalsContextProps } from "@mantine/modals/lib/context";
import { useState } from "react"; import { useState } from "react";
const showEnterPasswordModal = ( const showEnterPasswordModal = (
modals: ModalsContextProps, modals: ModalsContextProps,
submitCallback: any submitCallback: (password: string) => Promise<void>
) => { ) => {
return modals.openModal({ return modals.openModal({
closeOnClickOutside: false, closeOnClickOutside: false,
withCloseButton: false, withCloseButton: false,
closeOnEscape: false, closeOnEscape: false,
title: ( title: "Password required",
<>
<Title order={4}>Password required</Title>
<Text size="sm">
This access this share please enter the password for the share.
</Text>
</>
),
children: <Body submitCallback={submitCallback} />, children: <Body submitCallback={submitCallback} />,
}); });
}; };
const Body = ({ submitCallback }: { submitCallback: any }) => { const Body = ({
submitCallback,
}: {
submitCallback: (password: string) => Promise<void>;
}) => {
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [passwordWrong, setPasswordWrong] = useState(false); const [passwordWrong, setPasswordWrong] = useState(false);
return ( return (
<> <Stack align="stretch">
<Stack align="stretch"> <Text size="sm">
<PasswordInput This access this share please enter the password for the share.
variant="filled" </Text>
placeholder="Password"
error={passwordWrong && "Wrong password"} <form
onFocus={() => setPasswordWrong(false)} onSubmit={(e) => {
onChange={(e) => setPassword(e.target.value)} e.preventDefault();
value={password} submitCallback(password);
/> }}
<Button >
onClick={() => <Stack>
submitCallback(password) <PasswordInput
.then((res: any) => res) variant="filled"
.catch((e: any) => { placeholder="Password"
const error = e.response.data.message; error={passwordWrong && "Wrong password"}
if (error == "Wrong password") { onFocus={() => setPasswordWrong(false)}
setPasswordWrong(true); onChange={(e) => setPassword(e.target.value)}
} value={password}
}) />
} <Button type="submit">Submit</Button>
> </Stack>
Submit </form>
</Button> </Stack>
</Stack>
</>
); );
}; };

4
frontend/src/components/share/showErrorModal.tsx
View File

@ -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 { useModals } from "@mantine/modals";
import { ModalsContextProps } from "@mantine/modals/lib/context"; import { ModalsContextProps } from "@mantine/modals/lib/context";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
@ -12,7 +12,7 @@ const showErrorModal = (
closeOnClickOutside: false, closeOnClickOutside: false,
withCloseButton: false, withCloseButton: false,
closeOnEscape: false, closeOnEscape: false,
title: <Title order={4}>{title}</Title>, title: title,
children: <Body text={text} />, children: <Body text={text} />,
}); });

15
frontend/src/components/upload/modals/showCompletedUploadModal.tsx
View File

@ -1,11 +1,4 @@
import { import { ActionIcon, Button, Stack, Text, TextInput } from "@mantine/core";
ActionIcon,
Button,
Stack,
Text,
TextInput,
Title,
} from "@mantine/core";
import { useClipboard } from "@mantine/hooks"; import { useClipboard } from "@mantine/hooks";
import { useModals } from "@mantine/modals"; import { useModals } from "@mantine/modals";
import { ModalsContextProps } from "@mantine/modals/lib/context"; import { ModalsContextProps } from "@mantine/modals/lib/context";
@ -24,11 +17,7 @@ const showCompletedUploadModal = (
closeOnClickOutside: false, closeOnClickOutside: false,
withCloseButton: false, withCloseButton: false,
closeOnEscape: false, closeOnEscape: false,
title: ( title: "Share ready",
<Stack align="stretch" spacing={0}>
<Title order={4}>Share ready</Title>
</Stack>
),
children: <Body share={share} appUrl={appUrl} />, children: <Body share={share} appUrl={appUrl} />,
}); });
}; };

2
frontend/src/components/upload/modals/showCreateUploadModal.tsx
View File

@ -37,7 +37,7 @@ const showCreateUploadModal = (
uploadCallback: (createShare: CreateShare) => void uploadCallback: (createShare: CreateShare) => void
) => { ) => {
return modals.openModal({ return modals.openModal({
title: <Title order={4}>Share</Title>, title: "Share",
children: ( children: (
<CreateUploadModalBody <CreateUploadModalBody
options={options} options={options}

6
frontend/src/pages/share/[shareId]/index.tsx
View File

@ -9,6 +9,7 @@ import showEnterPasswordModal from "../../../components/share/showEnterPasswordM
import showErrorModal from "../../../components/share/showErrorModal"; import showErrorModal from "../../../components/share/showErrorModal";
import shareService from "../../../services/share.service"; import shareService from "../../../services/share.service";
import { Share as ShareType } from "../../../types/share.type"; import { Share as ShareType } from "../../../types/share.type";
import toast from "../../../utils/toast.util";
export function getServerSideProps(context: GetServerSidePropsContext) { export function getServerSideProps(context: GetServerSidePropsContext) {
return { return {
@ -28,12 +29,15 @@ const Share = ({ shareId }: { shareId: string }) => {
getFiles(); getFiles();
}) })
.catch((e) => { .catch((e) => {
if (e.response.data.error == "share_max_views_exceeded") { const { error } = e.response.data;
if (error == "share_max_views_exceeded") {
showErrorModal( showErrorModal(
modals, modals,
"Visitor limit exceeded", "Visitor limit exceeded",
"The visitor limit from this share has been exceeded." "The visitor limit from this share has been exceeded."
); );
} else {
toast.axiosError(e);
} }
}); });
}; };

10
frontend/src/styles/mantine.style.ts
View File

@ -16,4 +16,14 @@ export default <MantineThemeOverride>{
], ],
}, },
primaryColor: "victoria", primaryColor: "victoria",
components: {
Modal: {
styles: (theme) => ({
title: {
fontSize: theme.fontSizes.lg,
fontWeight: 700,
},
}),
},
},
}; };