Newer
Older
import React, { useRef } from 'react'
import { Alert, Button, Col, Container, Form, Image, Row, Spinner } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import useLoginViewModel from '../viewmodel/login.viewmodel'
const { login, handleErrorMessageRendering, displayFormFieldChecks, loginLoading } = useLoginViewModel();
const usernameRef = useRef<HTMLInputElement>(null)
const passwordRef = useRef<HTMLInputElement>(null)
const triggerLogin = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const username = usernameRef.current!.value;
const password = passwordRef.current!.value;
const invalidForm = (<Alert variant="warning">{t('login.form.invalid')}</Alert>)
const invalidCredentials = (<Alert variant="danger">{t('login.form.failed')}</Alert>)
return (
<Container className="vh-100 d-flex flex-column justify-content-center login-container">
<Row className="align-items-center">
<Image src={logo} alt="logo" height={150} />
</Row>
<Row className="mt-2 justify-content-center">
<Col md={6} sm={10} className="c-box p-4">
<h1 className="text-center h2">goSDN - Web</h1>
{handleErrorMessageRendering(invalidForm, invalidCredentials)}
<Form className="mt-4" noValidate validated={displayFormFieldChecks()} onSubmit={triggerLogin}>
<Form.Group
className="mb-3"
controlId="loginForm.username"
>
<Form.Label>{t('login.form.username.label')}</Form.Label>
<Form.Control.Feedback type="invalid">
{t('global.form.empty_field')}
</Form.Control.Feedback>
</Form.Group>
<Form.Group
className="mb-3"
controlId="loginForm.pasword"
>
<Form.Label>{t('login.form.password.label')}</Form.Label>
<Form.Control type="password" ref={passwordRef} required />
<Form.Control.Feedback type="invalid">
{t('global.form.empty_field')}
</Form.Control.Feedback>
</Form.Group>
<Button
variant="primary"
type="submit"
className="w-100 mt-3"
{loginLoading &&
<Spinner animation="border" size="sm" role="status">
<span className="visually-hidden">Loading...</span>
</Spinner>
}
</Button>
</Form>
</Col>
</Row>
</Container>
)
}
export default LoginView