ok so it's full code of react
function App () {
const [section, setSection] = useState('login');
const [login, setLogfromLogging] = useState('');
const [password, setPassword] = useState('');
const [registerLogin, setRegisterLogin] = useState('');
const [registerPassword, setRegisterPassword] = useState('');
const [replayPassword, setReplayPassword] = useState('');
const [termsState, setTermsState] = useState(false);
const [buttonDisabledState, setButtonState] = useState(true);
const doRegister = () => {
const valuesStatements = { loginLength: registerLogin.length, passwordLength: registerPassword.length, replayPassword: replayPassword.length };
if (registerPassword !== replayPassword) {
alert("Passwords don't match");
return;
}
if (valuesStatements.loginLength < 3 || registerPassword.length < 4 || replayPassword.length < 4) {
alert('You have to provide at least 3 characters in Login and at least 4 characters in Password!');
return;
};
//@ts-ignore
mp.trigger("transferRegister", registerLogin, registerPassword, replayPassword);
};
const renderSection = (section: string) => {
if (section === 'login') {
return renderLoginSection();
} else {
return renderRegisterSection();
}
};
const loginInputs = () => {
return (<><input type="text" placeholder='Login' onChange={(e) => { setLogfromLogging(e.currentTarget.value); }} value={login} /><input type="password" placeholder='Hasło' onChange={(e) => { setPassword(e.currentTarget.value); }} value={password} /></>);
};
const closeTermsReleaseButton = () => {
setTermsState(false);
setButtonState(false);
};
const renderLoginSection = () => {
return (
<div className="mainSection">
<div className='topLane'> </div>
<div className='midLane'>
<h1>Witaj!</h1>
<span>Zaloguj się na konto</span>
{loginInputs()}
<span style={{ cursor: 'pointer' }}>Nie pamiętam hasła</span>
</div>
<div className='botLane'>
<button>Zaloguj się</button>
<button onClick={() => setSection('register')}>Rejestracja</button>
</div>
</div>
);
};
return (
<div className="App">
<div className="header">
{termsState ? renderTerms() : ''}
<div className="characterImage">
<img alt='Characters' src={require('./image/characters/1.png')} className="renderCharacter"></img>
</div>
{renderSection(section)}
</div>
</div>
);
};
export default App;
//do function
