You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
4.0 KiB
101 lines
4.0 KiB
import React, { FC } from 'react'
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import zxcvbn from 'zxcvbn'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
import { faUser, faArrowRight } from '@fortawesome/free-solid-svg-icons'
|
|
|
|
import { setFieldNotification } from 'src/actions/forms'
|
|
import { showNotification } from 'src/actions/notifications'
|
|
import { setStep } from 'src/actions/registration'
|
|
import { getFieldValue } from 'src/selectors/forms'
|
|
import { MAX_ID_LENGTH, MAX_NAME_LENGTH } from 'src/constants'
|
|
import { AppState, AppThunkDispatch, NotificationType } from 'src/types'
|
|
|
|
import CreateUserForm from './create-user-form'
|
|
|
|
const CreateUserStep: FC = () => {
|
|
const userId = useSelector<AppState, string>(state => getFieldValue<string>(state, 'user-id', ''))
|
|
const name = useSelector<AppState, string>(state => getFieldValue<string>(state, 'user-name', ''))
|
|
const email = useSelector<AppState, string>(state => getFieldValue<string>(state, 'user-email', ''))
|
|
const password = useSelector<AppState, string>(state => getFieldValue<string>(state, 'password', ''))
|
|
const agree = useSelector<AppState, boolean>(state => getFieldValue<boolean>(state, 'user-agree', false))
|
|
|
|
const dispatch = useDispatch<AppThunkDispatch>()
|
|
|
|
const next = (userId: string, name: string, email: string, password: string, agree: boolean) => {
|
|
let invalid = false
|
|
|
|
if (!userId) {
|
|
dispatch(setFieldNotification('user-id', NotificationType.Error, 'This is required'))
|
|
invalid = true
|
|
}
|
|
|
|
if (userId.length > MAX_ID_LENGTH) {
|
|
dispatch(setFieldNotification('user-id', NotificationType.Error, `This must be less than ${MAX_ID_LENGTH} characters`))
|
|
invalid = true
|
|
}
|
|
|
|
if (name.length > MAX_NAME_LENGTH) {
|
|
dispatch(setFieldNotification('user-name', NotificationType.Error, `This must be less than ${MAX_NAME_LENGTH} characters`))
|
|
invalid = true
|
|
}
|
|
|
|
if (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 === '') {
|
|
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 className="centered-content">
|
|
<div className="centered-content-icon has-background-primary">
|
|
<span className="icon is-large has-text-white">
|
|
<FontAwesomeIcon icon={faUser} size="2x" />
|
|
</span>
|
|
</div>
|
|
|
|
<CreateUserForm />
|
|
<hr />
|
|
|
|
<nav className="level">
|
|
<div className="level-left">
|
|
<p className="level-item"></p>
|
|
</div>
|
|
|
|
<div className="level-right">
|
|
<p className="level-item">
|
|
<button className="button is-success" onClick={() => next(userId, name, email, password, agree)}>
|
|
<span>Community</span>
|
|
<span className="icon is-small">
|
|
<FontAwesomeIcon icon={faArrowRight} />
|
|
</span>
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CreateUserStep
|