From b3f4264b3d3dca0aa938008078241cad06086f3b Mon Sep 17 00:00:00 2001
From: viktorstrate <viktorstrate@gmail.com>
Date: Fri, 21 Feb 2020 12:22:04 +0100
Subject: [PATCH] Add logout button

---
 ui/src/Layout.js | 50 ++++++++++++++++++++++++++----------------------
 ui/src/Routes.js |  6 ++++++
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/ui/src/Layout.js b/ui/src/Layout.js
index 5046c728..0606e13e 100644
--- a/ui/src/Layout.js
+++ b/ui/src/Layout.js
@@ -39,32 +39,32 @@ const Content = styled.div`
   overflow-y: scroll;
 `
 
+const SideButtonLink = styled(NavLink)`
+  text-align: center;
+  padding-top: 8px;
+  padding-left: 2px;
+  display: block;
+  width: 60px;
+  height: 60px;
+  margin: 10px;
+  margin-bottom: 24px;
+
+  font-size: 28px;
+
+  color: #888;
+
+  transition: transform 200ms, box-shadow 200ms;
+
+  :hover {
+    transform: scale(1.02);
+  }
+`
+
 const SideButton = props => {
-  const StyledLink = styled(NavLink)`
-    text-align: center;
-    padding-top: 8px;
-    padding-left: 2px;
-    display: block;
-    width: 60px;
-    height: 60px;
-    margin: 10px;
-    margin-bottom: 24px;
-
-    font-size: 28px;
-
-    color: #888;
-
-    transition: transform 200ms, box-shadow 200ms;
-
-    :hover {
-      transform: scale(1.02);
-    }
-  `
-
   return (
-    <StyledLink {...props} activeStyle={{ color: '#4183c4' }}>
+    <SideButtonLink {...props} activeStyle={{ color: '#4183c4' }}>
       {props.children}
-    </StyledLink>
+    </SideButtonLink>
   )
 }
 
@@ -120,6 +120,10 @@ const Layout = ({ children, title }) => (
             return null
           }}
         </Query>
+        <SideButton to="/logout">
+          <Icon name="lock" />
+          <SideButtonLabel>Log out</SideButtonLabel>
+        </SideButton>
       </SideMenu>
     </Authorized>
     <Sidebar>
diff --git a/ui/src/Routes.js b/ui/src/Routes.js
index 85044ef5..8ce867c8 100644
--- a/ui/src/Routes.js
+++ b/ui/src/Routes.js
@@ -31,6 +31,12 @@ class Routes extends React.Component {
       >
         <Switch>
           <Route path="/login" component={LoginPage} />
+          <Route path="/logout">
+            {() => {
+              localStorage.removeItem('token')
+              location.href = '/'
+            }}
+          </Route>
           <Route path="/initialSetup" component={InitialSetupPage} />
           <Route path="/share" component={SharePage} />
           <AuthorizedRoute exact path="/albums" component={AlbumsPage} />