import usePostAvatar from "@/query/usePostAvatar"; import { useTranslations } from "next-intl"; import { useMemo, useState } from "react"; import Button from "react-bootstrap/Button"; import FormControl from "react-bootstrap/FormControl"; import InputGroup from "react-bootstrap/InputGroup"; import InputGroupText from "react-bootstrap/InputGroupText"; import Stack from "react-bootstrap/Stack"; import { toast } from "react-toastify"; export default function EnrollView() { const t = useTranslations(); const [avatarID, setAvatarID] = useState(""); const [avatarCipher, setAvatarCipher] = useState(""); const [avatarCipherTest, setAvatarCipherTest] = useState(""); const [avatarName, setAvatarName] = useState(""); const [fax, setFax] = useState(""); const isValidFax = useMemo(() => /^.+@.+$/.test(fax), [fax]); const isValidAvatarID = useMemo( () => /[a-zA-Z\d]/.test(avatarID), [avatarID], ); const { mutateAsync: postAvatar } = usePostAvatar(); return ( <Stack gap={2}> <InputGroup> <InputGroupText>{t("avatarID")}</InputGroupText> <FormControl type="text" isValid={isValidAvatarID} isInvalid={!isValidAvatarID} placeholder={t("avatarID")} value={avatarID} onChange={({ target: { value } }) => { setAvatarID(value); }} /> </InputGroup> <InputGroup> <InputGroupText>{t("avatarCipher")}</InputGroupText> <FormControl type="password" isValid={!!avatarCipher} isInvalid={!avatarCipher} placeholder={t("avatarCipher")} value={avatarCipher} onChange={({ target: { value } }) => { setAvatarCipher(value); }} /> </InputGroup> <InputGroup> <InputGroupText>{t("avatarCipherTest")}</InputGroupText> <FormControl type="password" isValid={avatarCipher === avatarCipherTest} isInvalid={avatarCipher !== avatarCipherTest} placeholder={t("avatarCipherTest")} value={avatarCipherTest} onChange={({ target: { value } }) => { setAvatarCipherTest(value); }} /> </InputGroup> <InputGroup> <InputGroupText>{t("avatarName")}</InputGroupText> <FormControl type="text" isValid={avatarName.length > 0 && avatarName.length <= 16} isInvalid={avatarName.length > 16} maxLength={16} placeholder={t("avatarName")} value={avatarName} onChange={({ target: { value } }) => { setAvatarName(value); }} /> </InputGroup> <InputGroup> <InputGroupText>{t("fax")}</InputGroupText> <FormControl type="email" isValid={!!fax && isValidFax} isInvalid={!!fax && !isValidFax} placeholder={t("fax")} value={fax} onChange={({ target: { value } }) => { setFax(value); }} /> </InputGroup> <Button variant="success" onClick={async () => { if ( isValidAvatarID && avatarCipher && avatarCipher === avatarCipherTest && avatarName && (!fax || isValidFax) ) { await postAvatar({ avatarID, avatarCipher, avatarName, fax, }); } else { toast.error(t("failedValidation")); } }} > {t("enroll")} </Button> </Stack> ); }