76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import React, {useState, useCallback, useRef, useEffect} from 'react';
|
||
|
||
import arrow from '../assets/36-arrow-right.svg';
|
||
|
||
import {
|
||
MainWrapper,
|
||
InputElement,
|
||
InputLabel,
|
||
InputWrapper,
|
||
ArrowImg,
|
||
IconButton,
|
||
} from './style';
|
||
import { Journal } from './Journal';
|
||
|
||
const Input = ({ onStart }) => {
|
||
const [value, setValue] = useState('');
|
||
const [inFocuse, setInfocuse] = useState(false);
|
||
const handleChange = useCallback(event => {
|
||
setValue(event.target.value.toUpperCase())
|
||
}, [setValue]);
|
||
const inputRef = useRef<HTMLInputElement>(null);
|
||
|
||
useEffect(() => {
|
||
const pass = localStorage.getItem('pass')
|
||
|
||
if (pass) {
|
||
onStart();
|
||
}
|
||
}, []);
|
||
|
||
const handleSubmit = useCallback((event) => {
|
||
event.preventDefault();
|
||
localStorage.setItem('pass', 'true')
|
||
if (value === 'OYB0Y') {
|
||
onStart()
|
||
}
|
||
}, [value])
|
||
|
||
return (
|
||
<>
|
||
<form onSubmit={handleSubmit}>
|
||
<InputWrapper>
|
||
<InputLabel
|
||
htmlFor='input'
|
||
>
|
||
Введите пароль:
|
||
</InputLabel>
|
||
<InputElement
|
||
value={value}
|
||
onChange={handleChange}
|
||
onFocus={() => setInfocuse(true)}
|
||
ref={inputRef}
|
||
id="input"
|
||
type="password"
|
||
autoComplete="off"
|
||
/>
|
||
<IconButton type="submit">
|
||
<ArrowImg src={arrow} />
|
||
</IconButton>
|
||
</InputWrapper>
|
||
</form>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export const MainPage = () => {
|
||
const [shoList, setShoList] = useState(false);
|
||
|
||
return (
|
||
<MainWrapper>
|
||
{!shoList && <Input onStart={() => setShoList(true)} />}
|
||
{shoList && <Journal />}
|
||
</MainWrapper>
|
||
);
|
||
};
|