77 lines
2.9 KiB
TypeScript
77 lines
2.9 KiB
TypeScript
import * as React from 'react'
|
|
|
|
export interface RegistrationPageProps {
|
|
setIsLoggedIn: (set: boolean) => void
|
|
setIsAskingForRegistration: (set: boolean) => void
|
|
error: string | null
|
|
setError: (a: string|null) => void
|
|
}
|
|
|
|
export default function RegistrationPage (props: RegistrationPageProps): JSX.Element {
|
|
const userInputRef = React.useRef<HTMLInputElement>(null)
|
|
const passwordInputRef = React.useRef<HTMLInputElement>(null)
|
|
const repeatPasswordInputRef = React.useRef<HTMLInputElement>(null)
|
|
const emailInputRef = React.useRef<HTMLInputElement>(null)
|
|
const onUserAsksForLogin = (): void => {
|
|
props.setIsAskingForRegistration(false)
|
|
}
|
|
function registerUser (): void {
|
|
if (userInputRef.current === null) {
|
|
return
|
|
}
|
|
if (passwordInputRef.current === null) {
|
|
return
|
|
}
|
|
if (repeatPasswordInputRef.current === null) {
|
|
return
|
|
}
|
|
if (emailInputRef.current === null) {
|
|
return
|
|
}
|
|
fetch('/player/register', {
|
|
method: 'POST',
|
|
mode: 'same-origin',
|
|
cache: 'no-cache',
|
|
body: JSON.stringify({
|
|
username: userInputRef.current.value,
|
|
password: passwordInputRef.current.value,
|
|
repeat_password: repeatPasswordInputRef.current.value,
|
|
email: emailInputRef.current.value
|
|
})
|
|
}).then(async (response) => {
|
|
const statusCode = response.status
|
|
const data = await response.json()
|
|
if (statusCode !== 200) {
|
|
props.setError(data.error)
|
|
return
|
|
}
|
|
props.setError(null)
|
|
}).catch((error) => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
return (
|
|
<>
|
|
<div className="login-container">
|
|
<div className="login-contained">
|
|
<h1>Inicia sesión en L3TDE online</h1>
|
|
{(props.error !== null
|
|
? (<p style={{ background: 'red' }}>{props.error}</p>)
|
|
: (<></>)
|
|
)}
|
|
<div className="login-form">
|
|
<input ref={userInputRef} type="text" placeholder="Nombre de usuario."/>
|
|
<input ref={passwordInputRef} type="password" placeholder="Password."/>
|
|
<input ref={repeatPasswordInputRef} type="password" placeholder="Repeat password."/>
|
|
<input ref={emailInputRef} type="text" placeholder="Email."/>
|
|
<div className="width-max-content align-self-end">
|
|
<button onClick={registerUser}>Registrate</button>
|
|
</div>
|
|
</div>
|
|
<p>¿Ya tienes cuenta? <a href="#" onClick={onUserAsksForLogin}>Inicia sesión</a>.</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|