comunicconsole/src/ui/routes/LoginRoute.tsx

/**
 * Login route
 *
 * @author Pierre Hubert
 */

import {
	Typography,
	Link,
	makeStyles,
	Container,
	CssBaseline,
	Avatar,
	TextField,
	FormControlLabel,
	Checkbox,
	Button,
	Grid,
	Box,
} from "@material-ui/core";

import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import React from "react";
import { matAlert } from "../widgets/DialogsProvider";

function Copyright() {
	return (
		<Typography variant="body2" color="textSecondary" align="center">
			{"Copyright © "}
			Comunic&nbsp;
			{new Date().getFullYear()}
			{"."}
		</Typography>
	);
}

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
				style={{
					display: "flex",
					justifyContent: "center",
					alignItems: "center",
					height: "100%",
				}}
			>
				<Container component="main" maxWidth="xs">
					<CssBaseline />
					<div
						style={{
							marginTop: "8px",
							display: "flex",
							flexDirection: "column",
							alignItems: "center",
						}}
					>
						<Avatar
							style={{
								margin: "1px",
								backgroundColor: "pink",
							}}
						>
							<LockOutlinedIcon />
						</Avatar>
						<Typography
							component="h1"
							variant="h5"
							style={{ margin: "10px" }}
						>
							Comunic Console
						</Typography>
						<form
							style={{
								width: "100%", // Fix IE 11 issue.
								marginTop: "1px",
							}}
							noValidate
							onSubmit={this.handleSubmitEmail}
						>
							<TextField
								variant="outlined"
								margin="normal"
								required
								fullWidth
								id="email"
								label="Email Address"
								value={this.state.currEmail}
								autoComplete="email"
								onChange={this.handleChangedEmail}
								autoFocus
							/>

							<Button
								onClick={this.handleSubmitEmail}
								fullWidth
								variant="contained"
								color="primary"
								style={{
									margin: "10px 0px 2px 0px",
								}}
								disabled={!this.canSubmit}
							>
								Sign In
							</Button>
						</form>
					</div>
					<Box mt={8}>
						<Copyright />
					</Box>
				</Container>
			</div>
		);
	}
}