flexor-web/src/app/components/create-user-step.tsx

import React, { FC } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import zxcvbn from 'zxcvbn'

import { setFieldNotification } from '../actions/forms'
import { showNotification } from '../actions/notifications'
import { setStep } from '../actions/registration'
import { getForm } from '../selectors/forms'
import { MAX_ID_LENGTH, MAX_NAME_LENGTH } from '../constants'
import { valueFromForm } from '../utils'

import { AppThunkDispatch, NotificationType } from '../types'

import CreateUserForm from './create-user-form'
import HorizontalRule from '../components/horizontal-rule'
import PrimaryButton from '../components/controls/primary-button'

const CreateUserStep: FC = () => {
    const form = useSelector(getForm)
    const dispatch = useDispatch<AppThunkDispatch>()

    const next = () => {
        let invalid = false
        
        const userId = valueFromForm<string>(form, 'user-id')
        const name = valueFromForm<string>(form, 'user-name')
        const email = valueFromForm<string>(form, 'user-email')
        const password = valueFromForm<string>(form, 'password')
        const agree = valueFromForm<boolean>(form, 'user-agree')

        if (!userId || userId === '') {
            dispatch(setFieldNotification('user-id', NotificationType.Error, 'This is required'))
            invalid = true
        }

        if (userId && userId.length > MAX_ID_LENGTH) {
            dispatch(setFieldNotification('user-id', NotificationType.Error, `This must be less than ${MAX_ID_LENGTH} characters`))
            invalid = true
        }

        if (name && name.length > MAX_NAME_LENGTH) {
            dispatch(setFieldNotification('user-name', NotificationType.Error, `This must be less than ${MAX_NAME_LENGTH} characters`))
            invalid = true
        }

        if (!email || email === '') {
            dispatch(setFieldNotification('user-email', NotificationType.Error, 'This is required'))
            invalid = true
        }

        if (!agree) {
            dispatch(setFieldNotification('user-agree', NotificationType.Error, 'You must agree to the terms and conditions to continue'))
            dispatch(showNotification(NotificationType.Error, 'You must agree to the terms and conditions to continue.'))
            invalid = true
        }

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

            if (score === 0) {
                dispatch(setFieldNotification('password', NotificationType.Error, 'Try another password'))
                invalid = true
            }
        }

        if (invalid) return
        dispatch(setStep(1))
    }

    return (
        <div>
            <CreateUserForm />
            <HorizontalRule />

            <nav className="level" style={{ flexDirection: 'row-reverse'}}>
                <div>
                    <PrimaryButton text="To Community" onClick={() => next()} />
                </div>
            </nav>
        </div>
    )
}

export default CreateUserStep