import wsAPI from "@/app/[language]/site/lib/wsAPI"; import { useSiteStore } from "@/state/Stores"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import { useState } from "react"; import { Button, Col, Form, Input, Modal, Row } from "reactstrap"; const EventPB = require("@/Event_pb"); export default observer( ({ siteID, siteName }: { siteID: string; siteName: string }) => { const { setSiteWindowOpened, isSiteCipherWindowOpened, setSiteCipherWindowOpened, } = useSiteStore(); const [siteCipher, setSiteCipher] = useState(""); const t = useTranslations(); const onEnterSite = () => { wsAPI.send({ eventID: EventPB.Event.EventID.ENTER_SITE, text: JSON.stringify({ siteID, siteCipher }), }); setSiteCipherWindowOpened(false); setSiteWindowOpened(false); }; return ( <Modal isOpen={isSiteCipherWindowOpened} toggle={() => { setSiteCipherWindowOpened(false); }} centered > <Form> <Row className="g-0"> <Col className="m-1"> <Input value={siteName} disabled /> </Col> </Row> <Row className="g-0"> <Col className="m-1"> <Input autoComplete="new-password" value={siteCipher} onChange={({ target: { value } }) => { setSiteCipher(value); }} type="password" placeholder={t("siteCipher")} onKeyDown={({ key }) => { if (key === "Enter") { onEnterSite(); } }} /> </Col> </Row> <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <Button onClick={onEnterSite}>{t("enterSite")}</Button> </Col> </Row> </Form> </Modal> ); }, );