import wsAPI from "@/app/[language]/site/lib/wsAPI"; import CryptoJS from "crypto-js"; import { useTranslations } from "next-intl"; import { useState } from "react"; import Button from "react-bootstrap/Button"; import FormCheck from "react-bootstrap/FormCheck"; import FormControl from "react-bootstrap/FormControl"; import Stack from "react-bootstrap/Stack"; const EventPB = require("@/Event_pb"); export default function NotLoggedInAvatarView() { const [avatarID, setAvatarID] = useState(""); const [avatarCipher, setAvatarCipher] = useState(""); const [autoLogIn, setAutoLogIn] = useState(false); const t = useTranslations(); const onLogIn = async () => { if (autoLogIn) { window.localStorage.setItem("avatarID", avatarID); window.localStorage.setItem( "avatarCipher", CryptoJS.AES.encrypt( avatarCipher, "591A6F91-2A27-4A88-88FA-0FEB7CB5FD94", ).toString(), ); } window.localStorage.setItem("autoLogIn", autoLogIn.toString()); wsAPI.send({ eventID: EventPB.Event.EventID.LOG_IN, text: JSON.stringify({ avatarID, avatarCipher }), }); }; return ( <Stack gap={2}> <FormControl type="text" placeholder={t("avatarID")} value={avatarID} onChange={({ target: { value } }) => { setAvatarID(value); }} /> <FormControl type="password" placeholder={t("avatarCipher")} value={avatarCipher} onChange={({ target: { value } }) => { setAvatarCipher(value); }} /> <Button className="text-nowrap" variant="success" onClick={onLogIn}> {t("logIn")} </Button> <FormCheck className="text-nowrap" id="autoLogIn" label={t("autoLogIn")} checked={autoLogIn} onChange={() => { setAutoLogIn(!autoLogIn); }} /> </Stack> ); }