From d4b0fbf45aec0e26ba8e8bc88de8da007a6b001f Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Mon, 6 Nov 2017 15:57:16 +0100
Subject: [PATCH] moved authentification stuff into the index.js

---
 static/src/Home/Home.js | 94 +++++------------------------------------
 static/src/index.js     | 94 +++++++++++++++++++++++++++++++++++------
 2 files changed, 91 insertions(+), 97 deletions(-)

diff --git a/static/src/Home/Home.js b/static/src/Home/Home.js
index bfd414d..8633503 100644
--- a/static/src/Home/Home.js
+++ b/static/src/Home/Home.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Input, Segment, Form, Modal, Button } from 'semantic-ui-react'
+import { Input, Segment, Form } from 'semantic-ui-react'
 
 import './Home.css';
 
@@ -19,88 +19,16 @@ export default class HomeComponent extends Component {
       .then(r => alert(r.URL))
   }
 
-  componentWillMount() {
-    this.checkAuth()
-  }
-
-  state = {
-    open: true,
-    userData: {},
-    authorized: false
-  }
-
-  onOAuthClose() {
-    this.setState({ open: true })
-  }
-  checkAuth = () => {
-    const that = this,
-      token = window.localStorage.getItem('token');
-    if (token) {
-      fetch('/api/v1/check', {
-        method: 'POST',
-        body: JSON.stringify({
-          Token: token
-        }),
-        headers: {
-          'Content-Type': 'application/json'
-        }
-      }).then(res => res.ok ? res.json() : Promise.reject(res.json())) // Check if the request was StatusOK, otherwise reject Promise
-        .then(d => {
-          that.setState({ userData: d })
-          that.setState({ authorized: true })
-        })
-        .catch(e => {
-          window.localStorage.removeItem('token');
-          that.setState({ authorized: false })
-        })
-    }
-  }
-  onAuthCallback = data => {
-    // clear the old event listener, so that the event can only emitted be once
-    window.removeEventListener('onAuthCallback', this.onAuthCallback);
-    window.localStorage.setItem('token', data.detail.token);
-    this.checkAuth();
-  }
-  onAuthClick = () => {
-    window.addEventListener('onAuthCallback', this.onAuthCallback, false);
-    // Open the oAuth window that is it centered in the middle of the screen
-    var wwidth = 400,
-      wHeight = 500;
-    var wLeft = (window.screen.width / 2) - (wwidth / 2);
-    var wTop = (window.screen.height / 2) - (wHeight / 2);
-    window.open('/api/v1/login', '', `width=${wwidth}, height=${wHeight}, top=${wTop}, left=${wLeft}`)
-  }
-
   render() {
-    const { open, authorized } = this.state
-    if (authorized) {
-      return (
-        <Segment raised>
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
-          <Form onSubmit={this.handleURLSubmit}>
-            <Form.Field>
-              <Input size='big' action={{ icon: 'arrow right', labelPosition: 'right', content: 'Shorten' }} type='url' onChange={this.handleURLChange} name='url' placeholder='Paste a link to shorten it' />
-            </Form.Field>
-          </Form>
-        </Segment>
-      )
-    } else {
-      return (
-        <Modal size='tiny' open={open} onClose={this.onOAuthClose}>
-          <Modal.Header>
-            Authentication
-          </Modal.Header>
-          <Modal.Content>
-            <p>Currently you are only able to use Google as authentication service:</p>
-            <div className='ui center aligned segment'>
-              <Button className='ui google plus button' onClick={this.onAuthClick}>
-                <i className='google icon'></i>
-                Login with Google
-            </Button>
-            </div>
-          </Modal.Content>
-        </Modal>
-      )
-    }
+    return (
+      <Segment raised>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
+        <Form onSubmit={this.handleURLSubmit}>
+          <Form.Field>
+            <Input size='big' action={{ icon: 'arrow right', labelPosition: 'right', content: 'Shorten' }} type='url' onChange={this.handleURLChange} name='url' placeholder='Paste a link to shorten it' />
+          </Form.Field>
+        </Form>
+      </Segment>
+    )
   }
 };
\ No newline at end of file
diff --git a/static/src/index.js b/static/src/index.js
index 072c483..5c5758f 100644
--- a/static/src/index.js
+++ b/static/src/index.js
@@ -6,7 +6,7 @@ import {
     Route,
     Link
 } from 'react-router-dom'
-import { Menu, Container } from 'semantic-ui-react'
+import { Menu, Container, Modal, Button, Image } from 'semantic-ui-react'
 
 import About from './About/About'
 import Home from './Home/Home'
@@ -14,32 +14,98 @@ import Home from './Home/Home'
 import 'semantic-ui-css/semantic.min.css';
 
 export default class BaseComponent extends Component {
-    state = {}
+
+    state = {
+        open: true,
+        userData: {},
+        authorized: false,
+        activeItem: ""
+    }
+
+    onOAuthClose() {
+        this.setState({ open: true })
+    }
+
 
     handleItemClick = (e, { name }) => this.setState({ activeItem: name })
 
-    render() {
-        const { activeItem } = this.state
+    componentWillMount() {
+        this.checkAuth()
+    }
+
+    checkAuth = () => {
+        const that = this,
+            token = window.localStorage.getItem('token');
+        if (token) {
+            fetch('/api/v1/check', {
+                method: 'POST',
+                body: JSON.stringify({
+                    Token: token
+                }),
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            }).then(res => res.ok ? res.json() : Promise.reject(res.json())) // Check if the request was StatusOK, otherwise reject Promise
+                .then(d => {
+                    that.setState({ userData: d })
+                    that.setState({ authorized: true })
+                })
+                .catch(e => {
+                    window.localStorage.removeItem('token');
+                    that.setState({ authorized: false })
+                })
+        }
+    }
 
+    onAuthCallback = data => {
+        // clear the old event listener, so that the event can only emitted be once
+        window.removeEventListener('onAuthCallback', this.onAuthCallback);
+        window.localStorage.setItem('token', data.detail.token);
+        this.checkAuth();
+    }
+    onAuthClick = () => {
+        window.addEventListener('onAuthCallback', this.onAuthCallback, false);
+        // Open the oAuth window that is it centered in the middle of the screen
+        var wwidth = 400,
+            wHeight = 500;
+        var wLeft = (window.screen.width / 2) - (wwidth / 2);
+        var wTop = (window.screen.height / 2) - (wHeight / 2);
+        window.open('/api/v1/login', '', `width=${wwidth}, height=${wHeight}, top=${wTop}, left=${wLeft}`)
+    }
+
+    render() {
+        const { open, authorized, activeItem, userData } = this.state
+        if (!authorized) {
+            return (
+                <Modal size='tiny' open={open} onClose={this.onOAuthClose}>
+                    <Modal.Header>
+                        Authentication
+                    </Modal.Header>
+                    <Modal.Content>
+                        <p>Currently you are only able to use Google as authentication service:</p>
+                        <div className='ui center aligned segment'>
+                            <Button className='ui google plus button' onClick={this.onAuthClick}>
+                                <i className='google icon'></i>
+                                Login with Google
+                            </Button>
+                        </div>
+                    </Modal.Content>
+                </Modal>
+            )
+        }
         return (
             <HashRouter>
                 <Container style={{ "margin-top": "15px" }}>
                     <Menu stackable>
-                        <Menu.Item to="/">
-                            <img src='https://react.semantic-ui.com/logo.png' alt='user profile picture' />
+                        <Menu.Item as={Link} to="/" name='shorten' onClick={this.handleItemClick} >
+                            <Image src={userData.Picture} alt='user profile' circular size='mini' />
                         </Menu.Item>
-
-                        <Menu.Item name='features' active={activeItem === 'features'} onClick={this.handleItemClick} as={Link} to="/">
+                        <Menu.Item name='shorten' active={activeItem === 'shorten'} onClick={this.handleItemClick} as={Link} to="/">
                             Shorten
                         </Menu.Item>
-
-                        <Menu.Item name='testimonials' active={activeItem === 'testimonials'} onClick={this.handleItemClick} as={Link} to="/about">
+                        <Menu.Item name='about' active={activeItem === 'about'} onClick={this.handleItemClick} as={Link} to="/about">
                             About
                         </Menu.Item>
-
-                        <Menu.Item name='sign-in' active={activeItem === 'sign-in'} onClick={this.handleItemClick}>
-                            Sign-in
-                        </Menu.Item>
                         <Menu.Menu position='right'>
                             <Menu.Item name='logout' active={activeItem === 'logout'} onClick={this.handleItemClick} />
                         </Menu.Menu>