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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 94
      static/src/Home/Home.js
  2. 94
      static/src/index.js

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

@ -1,5 +1,5 @@
import React, { Component } from 'react' 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'; import './Home.css';
@ -19,88 +19,16 @@ export default class HomeComponent extends Component {
.then(r => alert(r.URL)) .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() { render() {
const { open, authorized } = this.state return (
if (authorized) { <Segment raised>
return ( <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>
<Segment raised> <Form onSubmit={this.handleURLSubmit}>
<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.Field>
<Form onSubmit={this.handleURLSubmit}> <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.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>
</Form.Field> </Segment>
</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, Route,
Link Link
} from 'react-router-dom' } 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 About from './About/About'
import Home from './Home/Home' import Home from './Home/Home'
@ -14,32 +14,98 @@ import Home from './Home/Home'
import 'semantic-ui-css/semantic.min.css'; import 'semantic-ui-css/semantic.min.css';
export default class BaseComponent extends Component { 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 }) handleItemClick = (e, { name }) => this.setState({ activeItem: name })
render() { componentWillMount() {
const { activeItem } = this.state 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 ( return (
<HashRouter> <HashRouter>
<Container style={{ "margin-top": "15px" }}> <Container style={{ "margin-top": "15px" }}>
<Menu stackable> <Menu stackable>
<Menu.Item to="/"> <Menu.Item as={Link} to="/" name='shorten' onClick={this.handleItemClick} >
<img src='https://react.semantic-ui.com/logo.png' alt='user profile picture' /> <Image src={userData.Picture} alt='user profile' circular size='mini' />
</Menu.Item> </Menu.Item>
<Menu.Item name='shorten' active={activeItem === 'shorten'} onClick={this.handleItemClick} as={Link} to="/">
<Menu.Item name='features' active={activeItem === 'features'} onClick={this.handleItemClick} as={Link} to="/">
Shorten Shorten
</Menu.Item> </Menu.Item>
<Menu.Item name='about' active={activeItem === 'about'} onClick={this.handleItemClick} as={Link} to="/about">
<Menu.Item name='testimonials' active={activeItem === 'testimonials'} onClick={this.handleItemClick} as={Link} to="/about">
About About
</Menu.Item> </Menu.Item>
<Menu.Item name='sign-in' active={activeItem === 'sign-in'} onClick={this.handleItemClick}>
Sign-in
</Menu.Item>
<Menu.Menu position='right'> <Menu.Menu position='right'>
<Menu.Item name='logout' active={activeItem === 'logout'} onClick={this.handleItemClick} /> <Menu.Item name='logout' active={activeItem === 'logout'} onClick={this.handleItemClick} />
</Menu.Menu> </Menu.Menu>

Write Preview
Loading…
Cancel
Save