{"size": 8377, "ext": "js", "max_stars_repo_path": "client/src/components/Register.js", "max_stars_repo_name": "dmattox10/fj-50points", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/components/Register.js", "max_issues_repo_name": "dmattox10/fj-50points", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/components/Register.js", "max_forks_repo_name": "dmattox10/fj-50points", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 44.5585106383, "max_line_length": 275, "alphanum_fraction": 0.4683060762}
import { CustomInput, Card, CardBody, CardTitle, CardSubtitle, CardText, CardLink, Container, Row, Col, Form, FormGroup, Label, FormFeedback, Input, Button, Modal, ModalHeader, ModalBody, CardHeader } from 'reactstrap'
import { useState } from 'react'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import validator from 'validator'

// if validator.isEmail(username)
const strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})")
const mediumRegex = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})")
const gameRegex = new RegExp('[^A-Za-z0-9]+', 'g')

const Register = props => {

    const { toggle, formError, doRegister } = props

    const [passwordMessage, setPasswordMessage] = useState(null)

    Yup.addMethod(Yup.string, 'isValidEmail', function (errorMessage) {
        return this.test('test-is-email', errorMessage, function (value) {
            const { path, createError } = this
            if (!value || !validator.isEmail(value)) return createError({ path, errorMessage })
            return true
        })
    })

    Yup.addMethod(Yup.string, 'isGoodPassword', function (errorMessage) {
        return this.test('test-good-password', errorMessage, function (value) {
            const { path, createError } = this
            if (!strongRegex.test(value) || !mediumRegex.test(value)) return createError({ path, errorMessage })
            else if (!strongRegex.test(value) && mediumRegex.test(value)) {
                setPasswordMessage({
                    color: 'yellow',
                    message: 'Medium Strength Password.'
                })
            }
            else {
                setPasswordMessage({
                    color: 'green',
                    message: 'Strong Password!'
                })
                return true
            }
        })
    })

    Yup.addMethod(Yup.string, 'noSpaces', function (errorMessage) {
        return this.test('test-no-spaces', errorMessage, function (value) {
            const { path, createError } = this
            if (gameRegex.test(value)) return createError({ path, errorMessage })
            return true
        })
    })

    const formik = useFormik({
        initialValues: {
            username: '',
            password: '',
            accept: false,
            online: false,
            location: false,
            gameId: 'FJ'
        },
        validationSchema: Yup.object({
            username: Yup.string()
            .required('An email address is required!')
            .isValidEmail('Not a valid email address!'),
            password: Yup.string()
            .required('Please enter a password.')
            .isGoodPassword('Security is serious, choose a better password.'),
            accept: Yup.bool()
            .oneOf([true], 'Accepting Terms & Conditions is required!'),
            gameId: Yup.string()
            .required('A common game ID is required to play with other groups.')
            .noSpaces('Must only contain letters and numbers')
        }),
        onSubmit: values => {
            // do something!
            doRegister(values, toggle)
        }
    })

    const gameId = (
        <Row>
            <FormGroup>
                <Label for='gameId'>Group Game ID&nbsp;<span className='required'>*</span></Label>
                <Input
                    id='gameId'
                    name='gameId'
                    type='gameId'
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    value={formik.values.gameId}
                    className={ !formik.errors.gameId ? 'form-control is-valid' : 'form-control is-invalid' }
                />
                { formik.errors.gameId ? <span className='invalid-feedback'>{ formik.errors.password }</span> : <span>&nbsp;</span>}
            </FormGroup>
        </Row>
    )

    return (
        <div className='spacer'>
            <Form onSubmit={formik.handleSubmit}>
                <Row>
                    <FormGroup>
                        <Label for='username'>Email Address  <span className='required'>*</span></Label>
                        <Input
                            id='username'
                            name='username'
                            type='text'
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                            value={formik.values.username}
                            className={ !formik.errors.username ? 'form-control is-valid' : 'form-control is-invalid' }
                        />
                        { formik.errors.username ? <span className='invalid-feedback'>{ formik.errors.username }</span> : <span>&nbsp;</span>}
                    </FormGroup>
                </Row>
                <Row>
                    <FormGroup>
                        <Label for='password'>Password <span className='required'>*</span></Label>
                        <Input
                            id='password'
                            name='password'
                            type='password'
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                            value={formik.values.password}
                            className={ !formik.errors.password ? 'form-control is-valid' : 'form-control is-invalid' }
                        />
                        { formik.errors.password ? <span className='invalid-feedback'>{ formik.errors.password }</span> : <span>&nbsp;</span>}
                    </FormGroup>
                </Row>
                <Row>
                    <div className='form-check form-switch'>
                        <input className='form-check-input'
                            type='checkbox'
                            id='accept'
                            name='accept'
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                            checked={formik.values.accept}
                        />
                        <label class='form-check-label' for='accept'>Do you accept the terms and conditions?  <span className='required'>*</span>&nbsp;{ formik.errors.password ? <span className='invalid-feedback'>{ formik.errors.accept }</span> : <span>&nbsp;</span>}</label>
                    </div>
                </Row>
                <Row>
                    <div className='form-check form-switch'>
                        <input className='form-check-input'
                            type='checkbox'
                            id='online'
                            name='online'
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                            checked={formik.values.online}
                        />
                        <label class='form-check-label' for='online'>Play online with other groups?</label>
                    </div>
                </Row>
                { formik.values.online ? gameId : null }
                <Row>
                    <div className='form-check form-switch'>
                        <input className='form-check-input'
                            type='checkbox'
                            id='location'
                            name='location'
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                            checked={formik.values.location}
                        />
                        <label class='form-check-label' for='location'>Share location and be alerted to scores nearby?</label>
                    </div>
                </Row>
                <div className='spacer'>
                    <Row>
                        <Button type='submit' style={{width: '100%'}} className='btn-success'>Submit</Button>
                    </Row>
                </div>
                <div className='spacer'>
                    <Row>
                        {formError ? <span className='invalid-feedback'>{ formError.message }</span> : <span>&nbsp;</span>}
                    </Row>
                </div>
            </Form>
        </div>
    )
}

export default Register