login.tsx

import { Button, Col, Container, Form, Image, Row } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import './login.scss'

import logo from '@assets/logo.svg'
import React, { useRef } from 'react'
import { AuthServiceLoginApiArg, useAuthServiceLoginMutation } from '@api/api'

const LoginPage = () => {
    const { t } = useTranslation('common')
    const usernameRef = useRef<HTMLInputElement>(null)
    const passwordRef = useRef<HTMLInputElement>(null)

    const getAuthPayload = (): AuthServiceLoginApiArg => {
        const username = usernameRef.current?.value
        const password = passwordRef.current?.value

        // TODO check values
        const payload: AuthServiceLoginApiArg = {
            rbacLoginRequest: {
                username: username,
                pwd: password,
                timestamp: new Date().getTime().toString(),
            }
        }

        return payload;
    }

    const [
        sendLogin,
      ] = useAuthServiceLoginMutation()

    const login = (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault()

        const payload = getAuthPayload();
        sendLogin(payload).unwrap()
        .then((payload) => console.log('fulfilled', payload))
        .catch((error) => console.error('rejected', error));
    }

    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>
                    <Form className="mt-4" onSubmit={login}>
                        <Form.Group
                            className="mb-3"
                            controlId="loginForm.username"
                        >
                            <Form.Label>{t('login.form.username')}</Form.Label>
                            <Form.Control
                                type="text"
                                ref={usernameRef}
                            />
                        </Form.Group>
                        <Form.Group
                            className="mb-3"
                            controlId="loginForm.pasword"
                        >
                            <Form.Label>{t('login.form.password')}</Form.Label>
                            <Form.Control type="password" ref={passwordRef} />
                        </Form.Group>
                        <Button
                            variant="primary"
                            type="submit"
                            className="w-100 mt-3"
                        >
                            {t('global.form.submit')}
                        </Button>
                    </Form>
                </Col>
            </Row>
        </Container>
    )
}

export default LoginPage