Lateinicus/src/pages/login.tsx

import * as React from "react";

import Typography from "@material-ui/core/Typography";
import Paper from "@material-ui/core/Paper";
import TextField from "@material-ui/core/TextField";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import LinearProgress from "@material-ui/core/LinearProgress";
import Snackbar from "@material-ui/core/Snackbar";

interface IProps {
    login: (username: string, password: string) => Promise<boolean>;
}

interface IState {
    username: string;
    password: string;

    loading: boolean;

    snack: string; // The message
    open: boolean;
}

export default class LoginPage extends React.Component<{}, IState> {
    constructor(props: any) {
        super(props);

        this.state = {
            username: "",
            password: "",
            loading: false;
            snack: "",
            open: false,
        };

        this.update = this.update.bind(this);
        this.performLogin = this.performLogin.bind(this);
    }

    update(prop: string) {
        return (event: any) => {
            this.setState({
                [prop]: event.target.value,
            });
        };
    }

    performLogin() {
        const load = (loading) => {
            this.setState({
                loading
            });
        }
        const showSnackbar = (msg) => {
            this.setState({
                open: true,
                snack: msg,
            });
        };

        load(true);

        const { username, password } = this.state;
        this.props.login(username, password).then((res) => {
            load(false);
        }, (err) => {
            load(false);
            showSnackbar("Failed to log in");
        });
    }

    render() {
        const snackbarClose = () => {
            this.setState({ open: false });
        };

        return <div>
            <Grid
                container
                spacing={0}
                direction="column"
                alignItems="center"
                justify="center"
                style={{ minHeight: '100vh' }}>
                <Grid item xs={12}>
                    <Paper className="paper">
                        <Typography variant="title">Login</Typography>
                        <Grid container direction="column" spacing={8}>
                            <Grid item>
                                <TextField
                                    label="Username"
                                    onChange={(ev) => this.update("username")} />
                            </Grid>
                            <Grid item>
                                <TextField
                                    label="Passwort"
                                    type="password"
                                    onChange={(ev) => this.update("password")} />
                            </Grid>
                            <Grid item>
                                <Button
                                    variant="contained"
                                    color="primary"
                                    className="login-btn"
                                    onClick={() => this.performLogin()}>
                                    Login
                            </Button>
                                {
                                    this.state.loading ? (
                                        <LinearProgress />
                                    ) : undefined
                                }
                            </Grid>
                        </Grid>
                    </Paper>
                </Grid>
            </Grid>
            <Snackbar
                open={this.state.open}
                onClose={snackbarClose}
                message={this.state.snack}
                autoHideDuration={6000} />
        </div>;
    }
};