Added custom errors.

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

@@ -0,0 +1,35 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+export default class CustomErrors extends Component {
+	static propTypes = {
+		errors: PropTypes.array,
+	};
+
+	static defaultProps = {
+		errors: [],
+	};
+
+	listErrors = () => {
+		let errors = this.props.errors;
+		let key = 0;
+		if (errors.length > 0) {
+			errors = errors.map((error) => {
+				key++;
+				return (<li key={ key }>{ error }</li>);
+			});
+			return (
+				<div className="errors">
+					<p>Something went wrong</p>
+					<ul>
+						{ errors }
+					</ul>
+				</div>
+			);
+		} return null;
+	};
+
+	render() {
+		return this.listErrors();
+	}
+}

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

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 
 import CustomInput from "./CustomInput.jsx";
+import CustomErrors from "./CustomErrors.jsx";
 
 import io from "../../io";
 import config from "../../../../config/default";
@@ -12,6 +13,11 @@ export default class Login extends Component {
 		this.state = {
 			password: "",
 			email: "",
+			errors: [],
+			inputInvalid: {
+				email: true,
+				password: true,
+			},
 		};
 
 		this.login = this.login.bind(this);
@@ -24,33 +30,40 @@ export default class Login extends Component {
 	}
 
 	login() {
-		io.getSocket(socket => {
-			socket.emit("users.login", this.state.email, this.state.password, res => {
-				if (res.status === "success") {
-					const date = new Date();
-					date.setTime(new Date().getTime() + (2 * 365 * 24 * 60 * 60 * 1000));
-					const secure = (config.cookie.secure) ? "secure=true; " : "";
-					let domain = "";
-					if (config.cookie.domain !== "localhost") domain = ` domain=${ config.cookie.domain };`;
-					document.cookie = `SID=${ res.SID }; expires=${ date.toGMTString() }; ${ domain }${ secure }path=/`;
-					location.reload(); // if we could avoid this, then that would be better
-				} else {
-					// return res.message, temporarily:
-					alert(res.message); // eslint-disable-line no-alert
-				}
+		if (CustomInput.hasInvalidInput(this.state.inputInvalid)) {
+			alert("Input invalid. Fix before continuing.");
+		} else {
+			this.setState({ errors: [] });
+			io.getSocket(socket => {
+				socket.emit("users.login", this.state.email, this.state.password, res => {
+					if (res.status === "success") {
+						const date = new Date();
+						date.setTime(new Date().getTime() + (2 * 365 * 24 * 60 * 60 * 1000));
+						const secure = (config.cookie.secure) ? "secure=true; " : "";
+						let domain = "";
+						if (config.cookie.domain !== "localhost") domain = ` domain=${ config.cookie.domain };`;
+						document.cookie = `SID=${ res.SID }; expires=${ date.toGMTString() }; ${ domain }${ secure }path=/`;
+						location.reload(); // if we could avoid this, then that would be better
+					} else {
+						this.setState({ errors: [res.message] });
+					}
+				});
 			});
-		});
+		}
 	}
 
 	githubRedirect() {
 		localStorage.setItem("github_redirect", window.location.pathname);
 	}
 
+	validationCallback = CustomInput.validationCallback(this);
+
 	render() {
 		return (
 			<div>
-				<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) } } />
+				<CustomErrors errors={ this.state.errors } />
+				<CustomInput label="Email" placeholder="Email" inputType="email" type="email" name="email" value={ this.state.email } customInputEvents={ { onChange: event => this.updateField("email", event) } } validationCallback={ this.validationCallback } />
+				<CustomInput label="Password" placeholder="Password" inputType="password" type="password" name="password" value={ this.state.password } customInputEvents={ { onChange: event => this.updateField("password", event) } } validationCallback={ this.validationCallback } />
 				<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 }>

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

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 
 import CustomInput from "./CustomInput.jsx";
+import CustomErrors from "./CustomErrors.jsx";
 
 import io from "../../io";
 import config from "../../../../config/default";
@@ -19,6 +20,7 @@ export default class Register extends Component {
 				username: true,
 				password: true,
 			},
+			errors: []
 		};
 
 		this.register = this.register.bind(this);
@@ -40,6 +42,7 @@ export default class Register extends Component {
 		if (CustomInput.hasInvalidInput(this.state.inputInvalid)) {
 			alert("Input invalid. Fix before continuing.");
 		} else {
+			this.setState({ errors: [] });
 			io.getSocket(socket => {
 				socket.emit("users.register", this.state.username, this.state.email, this.state.password, grecaptcha.getResponse(this.state.recaptcha), res => {
 					if (res.status === "success") {
@@ -53,8 +56,7 @@ export default class Register extends Component {
 							// redirect to login
 						}
 					} else {
-						// return res.message, temporarily:
-						alert(res.message); // eslint-disable-line no-alert
+						this.setState({ errors: [res.message] });
 					}
 				});
 			});
@@ -70,6 +72,7 @@ export default class Register extends Component {
 	render() {
 		return (
 			<div>
+				<CustomErrors errors={ this.state.errors } />
 				<CustomInput label="Email" placeholder="Email" inputType="email" type="email" name="email" value={ this.state.email } customInputEvents={ { onChange: event => this.updateField("email", event) } } validationCallback={ this.validationCallback } />
 				<CustomInput label="Username" placeholder="Username" inputType="text" type="username" name="username" value={ this.state.username } customInputEvents={ { onChange: event => this.updateField("username", event) } } validationCallback={ this.validationCallback } />
 				<CustomInput label="Password" placeholder="Password" inputType="password" type="password" name="password" value={ this.state.password } customInputEvents={ { onChange: event => this.updateField("password", event) } } validationCallback={ this.validationCallback } />