feat: First implementation

2018-08-24 19:03:08 +02:00
parent 7748939c65
commit 297d2e50f9
10 changed files with 9799 additions and 1187 deletions
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -0,0 +1,126 @@
+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>;
+    }
+};