66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
import * as React from 'react'
|
|
|
|
export interface LoginPageProps {
|
|
setIsLoggedIn: (set: boolean) => void
|
|
setIsAskingForRegistration: (set: boolean) => void
|
|
setError: (set: string | null) => void
|
|
error: string | null
|
|
}
|
|
|
|
export default function LoginPage (props: LoginPageProps): JSX.Element {
|
|
const userInputRef = React.useRef<HTMLInputElement>(null)
|
|
const passwordInputRef = React.useRef<HTMLInputElement>(null)
|
|
const onUserAsksForRegistration = (): void => {
|
|
props.setIsAskingForRegistration(true)
|
|
}
|
|
const login = (): void => {
|
|
if (userInputRef.current === null) {
|
|
return
|
|
}
|
|
if (passwordInputRef.current == null) {
|
|
return
|
|
}
|
|
fetch('/player/login', {
|
|
method: 'POST',
|
|
mode: 'same-origin',
|
|
cache: 'no-cache',
|
|
body: JSON.stringify({
|
|
username: userInputRef.current.value,
|
|
password: passwordInputRef.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)
|
|
props.setIsLoggedIn(true)
|
|
}).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"/>
|
|
<div className="width-max-content align-self-end">
|
|
<button onClick={login}>Login</button>
|
|
</div>
|
|
</div>
|
|
<p>¿Todavía no tienes cuenta? <a href="#" onClick={onUserAsksForRegistration}>Registrate</a></p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|