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.
103 lines
3.8 KiB
103 lines
3.8 KiB
// create-user-step.tsx
|
|
// Copyright (C) 2020 Dwayne Harris
|
|
|
|
// This program is free software: you can redistribute it and/or modify
|
|
// it under the terms of the GNU General Public License as published by
|
|
// the Free Software Foundation, either version 3 of the License, or
|
|
// (at your option) any later version.
|
|
|
|
// This program is distributed in the hope that it will be useful,
|
|
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
// GNU General Public License for more details.
|
|
|
|
// You should have received a copy of the GNU General Public License
|
|
// along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
|
|
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
|