flexor-web/src/components/pages/login.tsx

import React, { FC, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { useHistory } from 'react-router'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faIdCard, faKey } from '@fortawesome/free-solid-svg-icons'
import classNames from 'classnames'

import { handleApiError } from 'src/api/errors'
import { authenticate } from 'src/actions/authentication'
import { showNotification } from 'src/actions/notifications'
import { getChecked, getAuthenticated } from 'src/selectors/authentication'
import { getFieldValue } from 'src/selectors/forms'
import { getIsFetching } from 'src/selectors/requests'
import { initForm, initField, setFieldNotification } from 'src/actions/forms'

import PageHeader from 'src/components/page-header'
import TextField from 'src/components/forms/text-field'
import PasswordField from 'src/components/forms/password-field'

import { AppState, RequestKey, ClassDictionary, NotificationType } from 'src/types'

const Login: FC = () => {
    const checked = useSelector<AppState, boolean>(getChecked)
    const authenticated = useSelector<AppState, boolean>(getAuthenticated)
    const name = useSelector<AppState, string>(state => getFieldValue(state, 'name', ''))
    const password = useSelector<AppState, string>(state => getFieldValue(state, 'password', ''))
    const authenticating = useSelector<AppState, boolean>(state => getIsFetching(state, RequestKey.Authenticate))

    const dispatch = useDispatch()
    const history = useHistory()

    useEffect(() => {
        if (checked && authenticated) history.push('/self')
    }, [checked, authenticated])
    
    useEffect(() => {
        dispatch(initForm())
        dispatch(initField('name', '', 'id'))
        dispatch(initField('password', ''))
    }, [])

    const handleAuthenticate = async () => {
        let invalid = false

        if (!name) {
            dispatch(setFieldNotification('name', NotificationType.Error, 'This is required'))
            invalid = true
        }

        if (!password) {
            dispatch(setFieldNotification('password', NotificationType.Error, 'This is required'))
            invalid = true
        }

        if (invalid) return

        try {
            const id = await dispatch(authenticate(name, password))
            dispatch(showNotification(NotificationType.Welcome, `Welcome back ${id}!`))
            history.push('/')
        } catch (err) {
            handleApiError(err, dispatch, history)
        }
    }

    const buttonClassDictionary: ClassDictionary = {
        button: true,
        'is-primary': true,
        'is-loading': authenticating,
    }
    
    return (
        <div>
            <PageHeader title="Log In to Flexor" />

            <div className="main-content">
                <div className="centered-content">
                    <div className="centered-content-icon has-background-primary">
                        <span className="icon is-large has-text-white">
                            <FontAwesomeIcon icon={faKey} size="2x" />
                        </span>
                    </div>

                    <TextField icon={faIdCard} name="name" label="Username" placeholder="Your Username/ID" />
                    <br />
                    <PasswordField placeholder="Your password" showStrength={false} />
                    <br />

                    <button className={classNames(buttonClassDictionary)} onClick={() => handleAuthenticate()} disabled={authenticating}>
                        <span className="icon is-small">
                            <FontAwesomeIcon icon={faKey} />
                        </span>
                        <span>Log In</span>
                    </button>
                </div>
            </div>
        </div>
    )
}

export default Login