49 lines
1.2 KiB
JavaScript
49 lines
1.2 KiB
JavaScript
import React, { useState, useRef } from "react";
|
|
import { Box, Input, Button, Label, Flex } from "theme-ui";
|
|
|
|
import { useAuth } from "../contexts/AuthContext";
|
|
|
|
import Modal from "../components/Modal";
|
|
|
|
function AuthModal({ isOpen, onSubmit }) {
|
|
const { password, setPassword } = useAuth();
|
|
const [tmpPassword, setTempPassword] = useState(password);
|
|
|
|
function handleChange(event) {
|
|
setTempPassword(event.target.value);
|
|
}
|
|
|
|
function handleSubmit(event) {
|
|
event.preventDefault();
|
|
setPassword(tmpPassword);
|
|
onSubmit(tmpPassword);
|
|
}
|
|
|
|
const inputRef = useRef();
|
|
function focusInput() {
|
|
inputRef.current && inputRef.current.focus();
|
|
}
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} allowClose={false} onAfterOpen={focusInput}>
|
|
<Box as="form" onSubmit={handleSubmit}>
|
|
<Label py={2} htmlFor="password">
|
|
Enter password
|
|
</Label>
|
|
<Input
|
|
id="password"
|
|
value={tmpPassword}
|
|
onChange={handleChange}
|
|
ref={inputRef}
|
|
autoComplete="off"
|
|
/>
|
|
<Flex py={2}>
|
|
<Button sx={{ flexGrow: 1 }}>Join</Button>
|
|
</Flex>
|
|
</Box>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export default AuthModal;
|