iio/pingvin-share
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
12 changed files with 59 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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 { 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} />,
});
};

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

@@ -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}

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 { 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>
);
};

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 { 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} />,
});