Started made functional CustomInput element.

frontend/app/js/views/Auth/CustomInput.jsx

@@ -0,0 +1,112 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+export default class CustomInput extends Component {
+	static propTypes = {
+		type: PropTypes.string,
+		inputType: PropTypes.string,
+		name: PropTypes.string,
+		value: PropTypes.string,
+		label: PropTypes.string,
+		placeholder: PropTypes.string,
+		customInputEvents: PropTypes.object,
+	};
+
+	static defaultProps = {
+		type: "text",
+		inputType: "text",
+		name: "",
+		value: "",
+		label: "",
+		placeholder: "",
+		customInputEvents: {},
+	};
+
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			customInputEvents: props.customInputEvents,
+			errors: "",
+			value: props.value,
+		};
+
+		if (this.state.customInputEvents.onBlur) {
+			const oldOnBlur = this.state.customInputEvents.onBlur;
+			this.state.customInputEvents.onBlur = () => {
+				this.onBlurHandler();
+				oldOnBlur();
+			};
+		} else this.state.customInputEvents.onBlur = this.onBlurHandler;
+
+		if (this.state.customInputEvents.onChange) {
+			const oldOnChange = this.state.customInputEvents.onChange;
+			this.state.customInputEvents.onChange = (event) => {
+				this.onChangeHandler(event);
+				oldOnChange(event);
+			};
+		} else this.state.customInputEvents.onChange = this.onChangeHandler;
+	}
+
+	onBlurHandler = () => {
+		this.validateInput();
+	};
+
+	onChangeHandler = (event) => {
+		this.setState({
+			value: event.target.value,
+		});
+	};
+
+	listErrors = () => {
+		let errors = this.state.errors;
+		if (errors.length > 0) {
+			errors = errors.map((error) => {
+				return (<li>{ error }</li>);
+			});
+			return (
+				<ul className="validation-errors">
+					{ errors }
+				</ul>
+			);
+		} return "";
+	};
+
+	validateInput = () => {
+		const value = this.state.value;
+		const type = this.props.type;
+		const errors = [];
+		if (type === "email") {
+			if (value.indexOf("@") === -1) {
+				errors.push(`${ this.props.label } must have at least one @.`);
+			} else if (value.lastIndexOf("@") !== value.indexOf("@")) {
+				errors.push(`${ this.props.label } must not have more than one @.`);
+			}
+		} else if (type === "password") {
+			if (value.length < 4) {
+				errors.push(`${ this.props.label } must be at least 4 characters long.`);
+			} else if (value.length > 10) {
+				errors.push(`${ this.props.label } can't be more than 10 characters long.`);
+			}
+		}
+
+		this.setState({ errors });
+	};
+
+	render() {
+		return (
+			<label htmlFor={ this.props.name }>
+				<span>{ this.props.label }</span>
+				<input
+					placeholder={ this.props.placeholder }
+					type={ this.props.inputType }
+					name={ this.props.name }
+					value={ this.state.value }
+					className={ (this.state.errors.length > 0) ? "has-validation-errors" : "" }
+					{ ...this.state.customInputEvents }
+				/>
+				{ this.listErrors() }
+			</label>
+		);
+	}
+}

frontend/app/js/views/Auth/Login.jsx

@@ -1,3 +1,5 @@
+import CustomInput from "./CustomInput.jsx";
+
 import React, { Component } from "react";
 
 import io from "../../io";
@@ -47,17 +49,12 @@ export default class Login extends Component {
 	render() {
 		return (
 			<div>
-				<label htmlFor="email">Email</label>
-				<input type="text" id="email" value={ this.state.email } onChange={ event => this.updateField("email", event) } />
-				<label htmlFor="password">Password</label>
-				<input type="password" id="password" value={ this.state.password } onChange={ event => this.updateField("password", event) } />
+				<CustomInput label="Email" placeholder="Email" inputType="email" type="email" name="email" value={ this.state.email } customInputEvents={ { onChange: event => this.updateField("email", event) } } />
+				<CustomInput label="Password" placeholder="Password" inputType="password" type="password" name="password" value={ this.state.password } customInputEvents={ { onChange: event => this.updateField("password", event) } } />
 				<p>By logging in/registering you agree to our <a href="/terms">Terms of Service</a> and <a href="/privacy">Privacy Policy</a>.</p>
 				<button onClick={ this.login }>Login</button>
 				<a href={ `${ config.serverDomain }/auth/github/authorize` } onClick={ this.githubRedirect }>
-					<div className="icon">
-						<img alt="GitHub Icon" src="/assets/images/social/github.svg" />
-					</div>
-					&nbsp;&nbsp;Login with GitHub
+					<img alt="GitHub Icon" src="/assets/images/social/github.svg" /> &nbsp;&nbsp;Login with GitHub
 				</a>
 				<a href="/reset_password">Forgot password?</a>
 			</div>