CoastalCommitsPastes/client/app/components/password-modal/index.tsx

98 lines
2.4 KiB
TypeScript
Raw Normal View History

import Button from "@components/button"
import Input from "@components/input"
import Note from "@components/note"
import * as Dialog from "@radix-ui/react-dialog"
2022-03-21 06:28:06 -04:00
import { useState } from "react"
import styles from "./modal.module.css"
2022-03-21 06:28:06 -04:00
type Props = {
2022-04-09 20:48:19 -04:00
creating: boolean
isOpen: boolean
onClose: () => void
onSubmit: (password: string) => void
2022-03-21 06:28:06 -04:00
}
2022-04-09 20:48:19 -04:00
const PasswordModal = ({
isOpen,
onClose,
onSubmit: onSubmitAfterVerify,
creating
}: Props) => {
const [password, setPassword] = useState<string>()
const [confirmPassword, setConfirmPassword] = useState<string>()
const [error, setError] = useState<string>()
const onSubmit = () => {
if (!password || (creating && !confirmPassword)) {
setError("Please enter a password")
return
}
if (password !== confirmPassword && creating) {
setError("Passwords do not match")
return
}
2022-03-21 06:28:06 -04:00
2022-04-09 20:48:19 -04:00
onSubmitAfterVerify(password)
}
return (
<>
{
<Dialog.Root
open={isOpen}
onOpenChange={(open) => {
if (!open) onClose()
}}
>
<Dialog.Portal>
<Dialog.Overlay className={styles.overlay} />
<Dialog.Content
className={styles.content}
onEscapeKeyDown={onClose}
>
<Dialog.Title>
{creating ? "Add a password" : "Enter password"}
</Dialog.Title>
<Dialog.Description>
{creating
? "Enter a password to protect your post"
: "Enter the password to access the post"}
</Dialog.Description>
<fieldset className={styles.fieldset}>
{error && <Note type="error">{error}</Note>}
<Input
width={"100%"}
label="Password"
type="password"
placeholder="Password"
onChange={(e) => setPassword(e.currentTarget.value)}
/>
{creating && (
<Input
width={"100%"}
label="Confirm"
type="password"
placeholder="Confirm Password"
onChange={(e) => setConfirmPassword(e.currentTarget.value)}
/>
)}
{!error && creating && (
<Note type="warning">
This doesn&apos;t protect your post from the server
administrator.
</Note>
)}
</fieldset>
2022-12-04 04:31:51 -05:00
<Button onClick={onClose}>Cancel</Button>
<Button onClick={onSubmit}>Submit</Button>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
2022-04-09 20:48:19 -04:00
}
</>
)
}
2022-03-21 06:28:06 -04:00
2022-04-09 20:48:19 -04:00
export default PasswordModal