2022-10-12 16:59:04 -04:00
|
|
|
import { Button, PasswordInput, Stack, Text, Title } from "@mantine/core";
|
2022-04-25 15:15:17 +02:00
|
|
|
import { ModalsContextProps } from "@mantine/modals/lib/context";
|
|
|
|
|
import { useState } from "react";
|
|
|
|
|
|
|
|
|
|
const showEnterPasswordModal = (
|
|
|
|
|
modals: ModalsContextProps,
|
|
|
|
|
submitCallback: any
|
|
|
|
|
) => {
|
|
|
|
|
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>
|
|
|
|
|
</>
|
|
|
|
|
),
|
|
|
|
|
children: <Body submitCallback={submitCallback} />,
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const Body = ({ submitCallback }: { submitCallback: any }) => {
|
|
|
|
|
const [password, setPassword] = useState("");
|
|
|
|
|
const [passwordWrong, setPasswordWrong] = useState(false);
|
|
|
|
|
return (
|
|
|
|
|
<>
|
2022-10-10 22:14:23 +02:00
|
|
|
<Stack align="stretch">
|
2022-04-25 15:15:17 +02:00
|
|
|
<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;
|
2022-10-09 22:30:32 +02:00
|
|
|
if (error == "Wrong password") {
|
2022-04-25 15:15:17 +02:00
|
|
|
setPasswordWrong(true);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
Submit
|
|
|
|
|
</Button>
|
2022-10-10 22:14:23 +02:00
|
|
|
</Stack>
|
2022-04-25 15:15:17 +02:00
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default showEnterPasswordModal;
|
