feat: Remove the login stub

src/components/app.tsx

@@ -31,13 +31,17 @@ import ReviewPage from "../pages/review";
 import SummaryPage from "../pages/summary";
 import WelcomePage from "../pages/intro";
 
+import { BACKEND_URL } from "../config";
+
 import { ILevel } from "../models/level";
 import { ILearner } from "../models/learner";
 import { IVocab, VocabType } from "../models/vocab";
 import { IReviewMetadata, ReviewType } from "../models/review";
+import { IUser } from "../models/user";
 
 interface IState {
     loggedIn: boolean;
+    user: IUser | {};
 
     lastReview: IReviewMetadata;
 
@@ -47,18 +51,20 @@ interface IState {
 
 // TODO: Replace the sessionStorage with localStorage?
 // TODO: Cache API-Calls
+// TODO: When mounting without a login, check if the sessionToken is still valid
 export default class Application extends React.Component<{}, IState> {
     constructor(props: any) {
         super(props);
 
         // Load a key from the SessionStorage
-        const authKey = window.sessionStorage.getItem("authKey") || null;
+        const authKey = window.sessionStorage.getItem("sessionToken") || null;
         // TODO
         const loggedIn = authKey !== null;
 
         // TODO: Fetch the last review
         this.state = {
             loggedIn,
+            user: {},
 
             lastReview: {
                 correct: 0,
@@ -99,6 +105,8 @@ export default class Application extends React.Component<{}, IState> {
     }
 
     setLastReview = (meta: IReviewMetadata) => {
+        console.log("STUB: Application::setLastReview");
+
         // TODO: Send this to the server
         this.setState({
             lastReview: meta,
@@ -216,16 +224,32 @@ export default class Application extends React.Component<{}, IState> {
             } */] as IVocab[];
     }
 
-    login(username: string, password: string): Promise<boolean> {
+    login(username: string, password: string): Promise<IUser | {}> {
-        console.log("STUB: Application::login");
-
         return new Promise((res, rej) => {
             // TODO: First login? Redirect to /welcome
-            // TODO
+            fetch(`${BACKEND_URL}/login`, {
-            this.setState({
+                method: "POST",
-                loggedIn: true
+                headers: new Headers({
-            });
+                    'Content-Type': "application/json",
-            res();
+                }),
+                body: JSON.stringify({
+                    // NOTE: We will force HTTPS and hash using pbkdf2 on the
+                    // server
+                    username: username,
+                    hash: password,
+                }),
+            }).then(data => data.json())
+                .then((resp) => {
+                    if (resp.error === "0") {
+                        this.setState({
+                            loggedIn: true,
+                            user: resp.data,
+                        });
+                        res(resp.data);
+                    } else {
+                        rej({});
+                    }
+                });
         });
     }
 
@@ -278,9 +302,8 @@ export default class Application extends React.Component<{}, IState> {
                     onOpen={() => this.setState({ drawerOpen: true })}>
                     <List component="nav">
                         <ListItem>
-                            {/* TODO: Replace with the actual username */}
                             <Avatar alt="{Username}" style={{ width: 80, height: 80 }} src="https://avatarfiles.alphacoders.com/105/105250.jpg" />
-                            <ListItemText primary="{Username}" />
+                            <ListItemText primary={this.state.user.username} />
                         </ListItem>
 
                         <Divider />

src/config.ts

@@ -1,2 +1,4 @@
 // Maximum distance from the answer to be still considered correct
 export const LEVENSHTEIN_MAX_DISTANCE = 2;
+
+export const BACKEND_URL = "http://127.0.0.1:8080";

src/models/user.ts

@@ -0,0 +1,7 @@
+export interface IUser {
+    username: string;
+    uid: string;
+    showWelcome: boolean;
+
+    sessionToken: string;
+};

src/pages/login.tsx

@@ -10,8 +10,10 @@ 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<boolean>;
+    login: (username: string, password: string) => Promise<IUser | {}>;
     loggedIn: boolean;
 }
 
@@ -25,14 +27,14 @@ interface IState {
     open: boolean;
 }
 
-export default class LoginPage extends React.Component<{}, IState> {
+export default class LoginPage extends React.Component<IProps, IState> {
     constructor(props: any) {
         super(props);
 
         this.state = {
             username: "",
             password: "",
-            loading: false;
+            loading: false,
             snack: "",
             open: false,
         };
@@ -50,12 +52,12 @@ export default class LoginPage extends React.Component<{}, IState> {
     }
 
     performLogin() {
-        const load = (loading) => {
+        const load = (loading: boolean) => {
             this.setState({
                 loading
             });
         }
-        const showSnackbar = (msg) => {
+        const showSnackbar = (msg: string) => {
             this.setState({
                 open: true,
                 snack: msg,
@@ -65,9 +67,10 @@ export default class LoginPage extends React.Component<{}, IState> {
         load(true);
 
         const { username, password } = this.state;
-        this.props.login(username, password).then((res) => {
+        console.log(this.state);
+        this.props.login(username, password).then((res: IUser) => {
             // Set the session key
-            window.sessionStorage.setItem("authKey", "test123");
+            window.sessionStorage.setItem("sessionToken", res.sessionToken);
         }, (err) => {
             load(false);
             showSnackbar("Failed to log in");
@@ -94,13 +97,15 @@ export default class LoginPage extends React.Component<{}, IState> {
                             <Grid item>
                                 <TextField
                                     label="Username"
-                                    onChange={(ev) => this.update("username")} />
+                                    onChange={this.update("username")}
+                                    value={this.state.username} />
                             </Grid>
                             <Grid item>
                                 <TextField
                                     label="Passwort"
                                     type="password"
-                                    onChange={(ev) => this.update("password")} />
+                                    value={this.state.password}
+                                    onChange={this.update("password")} />
                             </Grid>
                             <Grid item>
                                 <Button

src/pages/review.tsx

@@ -7,6 +7,7 @@ import Grid from "@material-ui/core/Grid";
 import Button from "@material-ui/core/Button";
 import Typography from "@material-ui/core/Typography";
 import Popover from "@material-ui/core/Popover";
+import LinearProgress from "@material-ui/core/LinearProgress";
 
 import { Redirect } from "react-router-dom";
 
@@ -177,6 +178,8 @@ export default class ReviewPage extends React.Component<IProps, IState> {
     render() {
         const { question, qtype } = this.state.current;
         const questionTitle = `${question} (${reviewQTypeToStr(qtype)})`;
+        // TODO:
+        const progress = 50;
 
         return <div>
             {
@@ -204,6 +207,9 @@ export default class ReviewPage extends React.Component<IProps, IState> {
                                         if (ev.key === "Enter")
                                             this.checkInput();
                                     }} />
+                                <LinearProgress
+                                    variant="determinate"
+                                    value={progress} />
                                 <Popover
                                     open={this.state.popoverOpen}
                                     anchorOrigin={{