Update login form

src/ui/routes/LoginRoute.tsx

@@ -21,6 +21,7 @@ import {
 
 import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
 import React from "react";
+import { matAlert } from "../widgets/DialogsProvider";
 
 function Copyright() {
 	return (
@@ -33,7 +34,38 @@ function Copyright() {
 	);
 }
 
-export class LoginRoute extends React.Component {
+interface LoginRouteState {
+	currEmail: string;
+}
+
+export class LoginRoute extends React.Component<{}, LoginRouteState> {
+	constructor(props: any) {
+		super(props);
+
+		this.state = {
+			currEmail: "",
+		};
+
+		this.handleChangedEmail = this.handleChangedEmail.bind(this);
+		this.handleSubmitEmail = this.handleSubmitEmail.bind(this);
+	}
+
+	get canSubmit(): boolean {
+		return this.state.currEmail.length > 4;
+	}
+
+	handleChangedEmail(e: React.ChangeEvent<HTMLInputElement>) {
+		this.setState({ currEmail: e.target.value });
+	}
+
+	handleSubmitEmail(e: React.ChangeEvent<any>) {
+		e.preventDefault();
+
+		if (!this.canSubmit) return;
+
+		matAlert("good");
+	}
+
 	render() {
 		return (
 			<div
@@ -75,6 +107,7 @@ export class LoginRoute extends React.Component {
 								marginTop: "1px",
 							}}
 							noValidate
+							onSubmit={this.handleSubmitEmail}
 						>
 							<TextField
 								variant="outlined"
@@ -83,19 +116,21 @@ export class LoginRoute extends React.Component {
 								fullWidth
 								id="email"
 								label="Email Address"
-								name="email"
+								value={this.state.currEmail}
 								autoComplete="email"
+								onChange={this.handleChangedEmail}
 								autoFocus
 							/>
 
 							<Button
-								type="submit"
+								onClick={this.handleSubmitEmail}
 								fullWidth
 								variant="contained"
 								color="primary"
 								style={{
 									margin: "10px 0px 2px 0px",
 								}}
+								disabled={!this.canSubmit}
 							>
 								Sign In
 							</Button>