import { Modal, Note, Spacer, Input } from "@geist-ui/core/dist" import { useState } from "react" type Props = { creating: boolean isOpen: boolean onClose: () => void onSubmit: (password: string) => void } const PasswordModal = ({ isOpen, onClose, onSubmit: onSubmitAfterVerify, creating }: Props) => { const [password, setPassword] = useState() const [confirmPassword, setConfirmPassword] = useState() const [error, setError] = useState() const onSubmit = () => { if (!password || (creating && !confirmPassword)) { setError("Please enter a password") return } if (password !== confirmPassword && creating) { setError("Passwords do not match") return } onSubmitAfterVerify(password) } return ( <> {/* TODO: investigate disableBackdropClick not updating state? */} { Enter a password {!error && creating && ( This doesn't protect your post from the server administrator. )} {error && ( {error} )} setPassword(e.target.value)} /> {creating && ( setConfirmPassword(e.target.value)} /> )} Cancel Submit } ) } export default PasswordModal