Skip to content
Snippets Groups Projects
login.view.tsx 3.71 KiB
Newer Older
  • Learn to ignore specific revisions
  • Matthias Feyll's avatar
    Matthias Feyll committed
    import logo from '@assets/logo.svg'
    
    Matthias Feyll's avatar
    Matthias Feyll committed
    import { BasicProp } from '@helper/interfaces'
    
    import React, { useRef } from 'react'
    
    Matthias Feyll's avatar
    Matthias Feyll committed
    import { Alert, Button, Col, Container, Form, Image, Row, Spinner } from 'react-bootstrap'
    import { useTranslation } from 'react-i18next'
    
    import useLoginViewModel from '../viewmodel/login.viewmodel'
    
    Matthias Feyll's avatar
    Matthias Feyll committed
    import './login.scss'
    
    Matthias Feyll's avatar
    Matthias Feyll committed
    
    
    Matthias Feyll's avatar
    Matthias Feyll committed
    const LoginView: React.FC<BasicProp> = () => {
    
    Matthias Feyll's avatar
    Matthias Feyll committed
        const { t } = useTranslation('common')
    
        const { login, handleErrorMessageRendering, displayFormFieldChecks, loginLoading } = useLoginViewModel();
    
    Matthias Feyll's avatar
    Matthias Feyll committed
        const usernameRef = useRef<HTMLInputElement>(null)
        const passwordRef = useRef<HTMLInputElement>(null)
    
    
    Matthias Feyll's avatar
    Matthias Feyll committed
        const triggerLogin = (event: React.FormEvent<HTMLFormElement>) => {
            event.preventDefault();
    
            const username = usernameRef.current!.value;
            const password = passwordRef.current!.value;
    
    Matthias Feyll's avatar
    Matthias Feyll committed
            login(username, password);
    
        const invalidForm = (<Alert variant="warning">{t('login.form.invalid')}</Alert>)
        const invalidCredentials = (<Alert variant="danger">{t('login.form.failed')}</Alert>)
    
    
    Matthias Feyll's avatar
    Matthias Feyll committed
    
        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}>
    
    Matthias Feyll's avatar
    Matthias Feyll committed
                            <Form.Group
                                className="mb-3"
                                controlId="loginForm.username"
                            >
    
    Matthias Feyll's avatar
    Matthias Feyll committed
                                <Form.Label>{t('login.form.username.label')}</Form.Label>
    
    Matthias Feyll's avatar
    Matthias Feyll committed
                                <Form.Control
                                    type="text"
                                    ref={usernameRef}
    
    Matthias Feyll's avatar
    Matthias Feyll committed
                                    required
    
                                    autoComplete='on'
    
                                    autoFocus={true}
    
    Matthias Feyll's avatar
    Matthias Feyll committed
                                />
    
    Matthias Feyll's avatar
    Matthias Feyll committed
                                <Form.Control.Feedback type="invalid">
                                    {t('global.form.empty_field')}
                                </Form.Control.Feedback>
    
    Matthias Feyll's avatar
    Matthias Feyll committed
                            </Form.Group>
                            <Form.Group
                                className="mb-3"
                                controlId="loginForm.pasword"
                            >
    
    Matthias Feyll's avatar
    Matthias Feyll committed
                                <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>
    
    Matthias Feyll's avatar
    Matthias Feyll committed
                            </Form.Group>
                            <Button
                                variant="primary"
                                type="submit"
                                className="w-100 mt-3"
    
                                disabled={loginLoading}
    
    Matthias Feyll's avatar
    Matthias Feyll committed
                            >
                                {t('global.form.submit')}
    
                                {loginLoading &&
                                    <Spinner animation="border" size="sm" role="status">
                                        <span className="visually-hidden">Loading...</span>
                                    </Spinner>
                                }
    
    Matthias Feyll's avatar
    Matthias Feyll committed
                            </Button>
                        </Form>
                    </Col>
                </Row>
            </Container>
        )
    }