@ -2,7 +2,9 @@ import React, { Component } from 'react'
import ReactDOM from 'react-dom' ;
import ReactDOM from 'react-dom' ;
import { HashRouter , Route , Link } from 'react-router-dom'
import { HashRouter , Route , Link } from 'react-router-dom'
import { Menu , Container , Modal , Button , Image , Icon } from 'semantic-ui-react'
import { Menu , Container , Modal , Button , Image , Icon } from 'semantic-ui-react'
import toastr from 'toastr'
import 'semantic-ui-css/semantic.min.css' ;
import 'semantic-ui-css/semantic.min.css' ;
import 'toastr/build/toastr.css' ;
import About from './About/About'
import About from './About/About'
import Home from './Home/Home'
import Home from './Home/Home'
@ -15,7 +17,7 @@ export default class BaseComponent extends Component {
userData : { } ,
userData : { } ,
authorized : false ,
authorized : false ,
activeItem : "" ,
activeItem : "" ,
providers : [ ]
info : null
}
}
onOAuthClose ( ) {
onOAuthClose ( ) {
@ -30,7 +32,10 @@ export default class BaseComponent extends Component {
}
}
loadInfo = ( ) => {
loadInfo = ( ) => {
fetch ( '/api/v1/info' ) . then ( d => d . json ( ) ) . then ( d => this . setState ( { providers : d . providers } ) )
fetch ( '/api/v1/info' )
. then ( d => d . json ( ) )
. then ( info => this . setState ( { info } ) )
. catch ( e => toastr . error ( e ) )
}
}
checkAuth = ( ) => {
checkAuth = ( ) => {
@ -45,12 +50,14 @@ export default class BaseComponent extends Component {
headers : {
headers : {
'Content-Type' : 'application/json'
'Content-Type' : 'application/json'
}
}
} ) . then ( res => res . ok ? res . json ( ) : Promise . reject ( res . json ( ) ) ) // Check if the request was StatusOK, otherwise reject Promise
} )
. then ( res => res . ok ? res . json ( ) : Promise . reject ( ` incorrect response status code: ${ res . status } ; text: ${ res . statusText } ` ) )
. then ( d => {
. then ( d => {
that . setState ( { userData : d } )
that . setState ( { userData : d } )
that . setState ( { authorized : true } )
that . setState ( { authorized : true } )
} )
} )
. catch ( e => {
. catch ( e => {
toastr . error ( ` Could not fetch info: ${ e } ` )
window . localStorage . removeItem ( 'token' ) ;
window . localStorage . removeItem ( 'token' ) ;
that . setState ( { authorized : false } )
that . setState ( { authorized : false } )
} )
} )
@ -69,7 +76,7 @@ export default class BaseComponent extends Component {
onOAuthClick = provider => {
onOAuthClick = provider => {
window . addEventListener ( 'message' , this . onOAuthCallback , false ) ;
window . addEventListener ( 'message' , this . onOAuthCallback , false ) ;
var url = ` ${ window . location . origin } /api/v1/auth/ ${ provider } /login ` ;
var url = ` ${ window . location . origin } /api/v1/auth/ ${ provider } /login ` ;
if ( ! this . _ oAuthPopup ) {
if ( ! this . _ oAuthPopup || this . _ oAuthPopup . closed ) {
// Open the oAuth window that is it centered in the middle of the screen
// Open the oAuth window that is it centered in the middle of the screen
var wwidth = 400 ,
var wwidth = 400 ,
wHeight = 500 ;
wHeight = 500 ;
@ -87,7 +94,7 @@ export default class BaseComponent extends Component {
}
}
render ( ) {
render ( ) {
const { open , authorized , activeItem , userData , providers } = this . state
const { open , authorized , activeItem , userData , info } = this . state
if ( ! authorized ) {
if ( ! authorized ) {
return (
return (
< Modal size = 'tiny' open = { open } onClose = { this . onOAuthClose } >
< Modal size = 'tiny' open = { open } onClose = { this . onOAuthClose } >
@ -96,28 +103,28 @@ export default class BaseComponent extends Component {
< / M o d a l . H e a d e r >
< / M o d a l . H e a d e r >
< Modal . Content >
< Modal . Content >
< p > The following authentication services are currently available : < / p >
< p > The following authentication services are currently available : < / p >
< div className = 'ui center aligned segment' >
{ info && < div className = 'ui center aligned segment' >
{ providers . length === 0 && < p > There are currently no correct oAuth credentials maintained . < / p > }
{ info . providers . length === 0 && < p > There are currently no correct oAuth credentials maintained . < / p > }
{ providers . indexOf ( "google" ) !== - 1 && < div >
{ info . providers . indexOf ( "google" ) !== - 1 && < div >
< Button className = 'ui google plus button' onClick = { this . onOAuthClick . bind ( this , "google" ) } >
< Button className = 'ui google plus button' onClick = { this . onOAuthClick . bind ( this , "google" ) } >
< Icon name = 'google' / > Login with Google
< Icon name = 'google' / > Login with Google
< / B u t t o n >
< / B u t t o n >
{ providers . indexOf ( "github" ) !== - 1 && < div className = "ui divider" > < / d i v > }
{ info . providers . indexOf ( "github" ) !== - 1 && < div className = "ui divider" > < / d i v > }
< / d i v > }
< / d i v > }
{ providers . indexOf ( "github" ) !== - 1 && < div >
{ info . providers . indexOf ( "github" ) !== - 1 && < div >
< Button style = { { backgroundColor : "#333" , color : "white" } } onClick = { this . onOAuthClick . bind ( this , "github" ) } >
< Button style = { { backgroundColor : "#333" , color : "white" } } onClick = { this . onOAuthClick . bind ( this , "github" ) } >
< Icon name = 'github' / > Login with GitHub
< Icon name = 'github' / > Login with GitHub
< / B u t t o n >
< / B u t t o n >
< / d i v > }
< / d i v > }
{ providers . indexOf ( "microsoft" ) !== - 1 && < div >
{ info . providers . indexOf ( "microsoft" ) !== - 1 && < div >
< div className = "ui divider" > < / d i v >
< div className = "ui divider" > < / d i v >
< Button style = { { backgroundColor : "#0067b8" , color : "white" } } onClick = { this . onOAuthClick . bind ( this , "microsoft" ) } >
< Button style = { { backgroundColor : "#0067b8" , color : "white" } } onClick = { this . onOAuthClick . bind ( this , "microsoft" ) } >
< Icon name = 'windows' / > Login with Microsoft
< Icon name = 'windows' / > Login with Microsoft
< / B u t t o n >
< / B u t t o n >
< / d i v > }
< / d i v > }
< / d i v >
< / d i v > }
< / M o d a l . C o n t e n t >
< / M o d a l . C o n t e n t >
< / M o d a l >
< / M o d a l >
)
)
}
}
return (
return (
@ -147,7 +154,9 @@ export default class BaseComponent extends Component {
< / M e n u . M e n u >
< / M e n u . M e n u >
< / M e n u >
< / M e n u >
< Route exact path = "/" component = { Home } / >
< Route exact path = "/" component = { Home } / >
< Route path = "/about" component = { About } / >
< Route path = "/about" render = { ( props ) => (
< About info = { info } / >
) } / >
< Route path = "/ShareX" component = { ShareX } / >
< Route path = "/ShareX" component = { ShareX } / >
< Route path = "/Lookup" component = { Lookup } / >
< Route path = "/Lookup" component = { Lookup } / >
< / C o n t a i n e r >
< / C o n t a i n e r >