From 286927663ab4fb06b4dcf26a880ac60259691025 Mon Sep 17 00:00:00 2001
From: Alexander Polynomdivision <digitalmail555@googlemail.com>
Date: Wed, 19 Sep 2018 18:18:32 +0200
Subject: [PATCH] feat: Set the session token in Application

---
 src/components/Drawer.tsx     |  7 ++++---
 src/components/app.tsx        | 20 ++++++++++++++++----
 src/containers/Application.ts |  4 +++-
 src/pages/login.tsx           |  2 --
 src/security/Token.ts         |  7 +++++++
 5 files changed, 30 insertions(+), 10 deletions(-)
 create mode 100644 src/security/Token.ts

diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx
index 7a32dde..394d275 100644
--- a/src/components/Drawer.tsx
+++ b/src/components/Drawer.tsx
@@ -22,6 +22,8 @@ import BookIcon from "@material-ui/icons/Book";
 import ViewWeekIcon from "@material-ui/icons/ViewWeek";
 
 interface IProps {
+    logout: () => void;
+
     open: boolean;
     showButton: boolean;
     authenticated: boolean;
@@ -121,9 +123,8 @@ export default class Drawer extends React.Component<IProps> {
                         <Divider />
 
                         <ListItem button onClick={() => {
-                            // Remove the auth token from the SessionStorage
-                            // window.sessionStorage.removeItem("authKey");
-                            // TODO: Perform logout
+                            this.closeDrawer();
+                            this.props.logout();
                         }}>
                             <ListItemText>
                                 Abmelden
diff --git a/src/components/app.tsx b/src/components/app.tsx
index b2406f9..f2729ca 100644
--- a/src/components/app.tsx
+++ b/src/components/app.tsx
@@ -3,6 +3,7 @@ import * as React from "react";
 import { BrowserRouter, Route, Redirect } from "react-router-dom";
 
 import AuthRoute from "../security/AuthRoute";
+import { setSessionToken, removeSessionToken } from "../security/Token";
 
 import Dashboard from "../pages/dashboard";
 import LoginPage from "../containers/LoginPage";
@@ -23,6 +24,8 @@ import { IReviewMetadata, ReviewType } from "../models/review";
 import { IUser } from "../models/user";
 
 interface IProps {
+    authenticated: boolean;
+
     setAuthenticated: (status: boolean) => void;
     setUser: (user: IUser) => void;
 };
@@ -209,8 +212,9 @@ export default class Application extends React.Component<IProps> {
                 .then(resp => {
                     if (resp.error === "0") {
                         // Successful login
-                        // TODO: Set the auth token here
                         this.props.setUser(resp.data);
+                        setSessionToken(window, resp.data.sessionToken);
+
                         res(resp.data);
                     } else {
                         rej({});
@@ -219,18 +223,26 @@ export default class Application extends React.Component<IProps> {
         });
     }
 
+    logout = () => {
+        // TODO: Tell the server that we're logging ourselves out
+        removeSessionToken(window);
+        this.props.setAuthenticated(false);
+    }
+
     // Checks whether the user is logged in
     isAuthenticated = () => {
         // TODO: Security?
         // TODO: Implement
-        return true;
+        return this.props.authenticated;
     }
 
     render() {
+        // TODO: Show a spinner before mounting the routes, so that we can
+        //       check if were authenticated before doing any requests
         return <BrowserRouter
             basename="/app/">
-            < div className="flex" >
-                <Drawer />
+            <div className="flex" >
+                <Drawer logout={this.logout} />
                 <div className="content">
                     <Route exact path="/" component={() => <Redirect to="/login" />} />
                     <Route exact path="/login" component={() => {
diff --git a/src/containers/Application.ts b/src/containers/Application.ts
index cac2253..27e60b7 100644
--- a/src/containers/Application.ts
+++ b/src/containers/Application.ts
@@ -7,7 +7,9 @@ import Application from "../components/app";
 import { setAuthenticated, setUser } from "../actions";
 
 const mapStateToProps = state => {
-    return {};
+    return {
+        authenticated: state.authenticated,
+    };
 };
 const mapDispatchToProps = dispatch => {
     return {
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 603ba04..91a6bfd 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -35,8 +35,6 @@ const LoginPageWithRouter = withRouter(
             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);
                 this.props.history.push("/dashboard");
             }, (err) => {
                 this.props.setLoading(false);
diff --git a/src/security/Token.ts b/src/security/Token.ts
new file mode 100644
index 0000000..a6560eb
--- /dev/null
+++ b/src/security/Token.ts
@@ -0,0 +1,7 @@
+export function setSessionToken(window: Window, token: string) {
+    window.sessionStorage.setItem("sessionToken", token);
+};
+
+export function removeSessionToken(window: Window) {
+    window.sessionStorage.removeItem("sessionToken");
+}