ES6

React login component

Featuring password generation, xmlHttpRequest, and form encryption

Will update with further explanation of parts, as well as Express endpoints

'use strict';

import React from 'react'
import Config from '../../../../config'

export class Login extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        const generate = (length) => {
                if (!isNaN(length)) {
                    let generated = "";
                    while (generated.length < length && length > 0) {
                        const
                            r = Math.random(),
                            p = Math.random(),
                            specialChars = [33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 58, 59, 62, 63, 64, 91, 92, 93, 94, 95, 96, 123, 124, 125, 126];

                        if (0 <= p && p < .25) {
                            generated += (r < 0.1 ? Math.floor(r * 100) : String.fromCharCode(Math.floor(r * 25) + 65));
                        } else if (.25 <= p && p < .5) {
                            generated += (r < 0.1 ? Math.floor(r * 100) : String.fromCharCode(Math.floor(r * 25) + 97));
                        } else if (.5 <= p && p < .75) {
                            generated += (String.fromCharCode(Math.floor(specialChars[Math.floor(Math.random() * specialChars.length)])));
                        } else if (.75 <= p) {
                            generated += (r < 0.1 ? Math.floor(r * 100) : String.fromCharCode(Math.floor(r * 9) + 48));
                        }
                    }
                    return generated;
                }
            },
            loginCss = {
                marginBottom: 5,
                button: {}
            },
            returnUserEndpoint = Config.server.fqHost + '/userApi/loginAuth',
            newUserEndpoint = Config.server.fqHost + '/userApi/newUser',
            encrypt = (string) => {
                //Encryption Logic Here         
                return string;
            },
            auth = () => {
                if (this.email && this.password) {
                    const
                        req = new XMLHttpRequest(),
                        user = new FormData();
                    if (this.checkbox) {
                        req.open("POST", newUserEndpoint);
                    } else {
                        req.open("POST", returnUserEndpoint);
                    }
                    user.append('email', this.email.toLowerCase()).append('password', encrypt(this.password));
                    req.send(user);
                }
            };

        return (
            <div className='loginWrapper' style={loginCss}>
                <label style={loginCss}>Email: <input type='email' ref={(email) => this.email = email} placeholder='you.are@awesome.com'/></label>
                <label style={loginCss}>Password: <input type='text' ref={(password) => this.password = password} placeholder={generate.bind(this, 10)}/></label>
                <label style={loginCss}>First time? <input type="checkbox" ref={(checkbox) => this.checkbox = checkbox} checked='true' value="firstTime"/></label>
                <button style={loginCss.button} type='submit' onClick={auth.bind(this)} value='Go!'/>
            </div>
        )
    }
}