import usePostAvatar from "@/avatar/usePostAvatar"; import { useAvatarStore } from "@/store/Stores"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import { useLayoutEffect, useMemo, useState } from "react"; import { toast } from "react-toastify"; import { Button, Col, Input, Row } from "reactstrap"; import { useTo } from "taehui-ts/fe-utilities"; export default observer(() => { const { totem } = useAvatarStore(); const t = useTranslations(); const [avatarID, setAvatarID] = useState(""); const [avatarCipher, setAvatarCipher] = useState(""); const [avatarCipherTest, setAvatarCipherTest] = useState(""); const [avatarName, setAvatarName] = useState(""); const [fax, setFax] = useState(""); const to = useTo(); const isValidFax = useMemo(() => /^.+@.+$/.test(fax), [fax]); const isValidAvatarID = useMemo( () => avatarID && !avatarID.startsWith("@") && !avatarID.startsWith("#") && !avatarID.startsWith("$") && !avatarID.startsWith("*"), [avatarID], ); useLayoutEffect(() => { if (totem) { to("/avatar/m"); } }, [to, totem]); const { mutateAsync: postAvatar } = usePostAvatar(); return ( <> <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <Input valid={!!isValidAvatarID} invalid={!isValidAvatarID} placeholder={t("avatarID")} value={avatarID} onChange={({ target: { value } }) => { setAvatarID(value); }} /> </Col> </Row> <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <Input valid={!!avatarCipher} invalid={!avatarCipher} type="password" placeholder={t("avatarCipher")} value={avatarCipher} onChange={({ target: { value } }) => { setAvatarCipher(value); }} /> </Col> </Row> <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <Input valid={avatarCipher === avatarCipherTest} invalid={avatarCipher !== avatarCipherTest} type="password" placeholder={t("avatarCipherTest")} value={avatarCipherTest} onChange={({ target: { value } }) => { setAvatarCipherTest(value); }} /> </Col> </Row> <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <Input maxLength={16} valid={!!avatarName} invalid={!avatarName} placeholder={t("avatarName")} value={avatarName} onChange={({ target: { value } }) => { setAvatarName(value); }} /> </Col> </Row> <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <Input valid={fax.length > 0 && isValidFax} invalid={fax.length > 0 && !isValidFax} type="email" placeholder={t("fax")} value={fax} onChange={({ target: { value } }) => { setFax(value); }} /> </Col> </Row> <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <Button color="success" onClick={async () => { if ( isValidAvatarID && avatarCipher && avatarCipher === avatarCipherTest && avatarName && (!fax || isValidFax) ) { await postAvatar({ avatarID, avatarCipher, avatarName, fax, }); } else { toast.error(t("failedValidation")); } }} > {t("signUp")} </Button> </Col> <Col className="m-1" xs="auto"> <Button color="danger" onClick={() => { to("/"); }} > {t("quit")} </Button> </Col> </Row> </> ); });