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";

import { Redirect } from "react-router-dom";

import { IUser } from "../models/user";

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

    setLoading: (state: boolean) => void;
    setSnackbar: (state: boolean, msg: string) => void;
    loading: boolean;
    snackOpen: boolean;
    snackMsg: string;
}
/* 
 * interface IState {
 *     loading: boolean;
 * 
 *     snack: string; // The message
 *     open: boolean;
 * } */

export default class LoginPage extends React.Component<IProps> {
    private usernameRef: any = undefined;
    private passwordRef: any = undefined;

    performLogin = () => {
        this.props.setLoading(true);

        const username = this.usernameRef.value || "";
        const password = this.passwordRef.value || "";
        this.props.login(username, password).then((res: IUser) => {
            // Set the session key
            window.sessionStorage.setItem("sessionToken", res.sessionToken);
        }, (err) => {
            this.props.setLoading(false);
            this.props.setSnackbar(true, "Failed to log in");
        });
    }

    render() {
        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"
                                    inputRef={node => this.usernameRef = node} />
                            </Grid>
                            <Grid item>
                                <TextField
                                    label="Passwort"
                                    type="password"
                                    inputRef={node => this.passwordRef = node} />
                            </Grid>
                            <Grid item>
                                <Button
                                    variant="contained"
                                    color="primary"
                                    className="login-btn"
                                    onClick={() => this.performLogin()}>
                                    Login
                            </Button>
                                {
                                    this.props.loading ? (
                                        <LinearProgress />
                                    ) : undefined
                                }
                            </Grid>
                        </Grid>
                    </Paper>
                </Grid>
            </Grid>
            <Snackbar
                open={this.props.snackOpen}
                onClose={() => this.props.setSnackbar(false, "")}
                message={this.props.snackMsg}
                autoHideDuration={6000} />
            {
                this.props.authenticated ? (
                    <Redirect to="/dashboard" />
                ) : undefined
            }
        </div>;
    }
};