nicolas
/
golang-url-shortener
mirror of https://github.com/nmasse-itix/golang-url-shortener
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

moved authentification stuff into the index.js

dependabot/npm_and_yarn/web/prismjs-1.21.0
Max Schmitt 8 years ago
parent
067763e997
commit
d4b0fbf45a
2 changed files with 91 additions and 97 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 74
      static/src/Home/Home.js
  2. 94
      static/src/index.js

74
static/src/Home/Home.js
View File

@ -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,61 +19,7 @@ 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>
@ -84,23 +30,5 @@ export default class HomeComponent extends Component {
</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>
)
}
}
};

94
static/src/index.js
View File

@ -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>

Write Preview
Loading…
Cancel
Save