|
|
@ -14,7 +14,8 @@ export default class BaseComponent extends Component { |
|
|
open: true, |
|
|
open: true, |
|
|
userData: {}, |
|
|
userData: {}, |
|
|
authorized: false, |
|
|
authorized: false, |
|
|
activeItem: "" |
|
|
activeItem: "", |
|
|
|
|
|
providers: [] |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
onOAuthClose() { |
|
|
onOAuthClose() { |
|
|
@ -25,6 +26,11 @@ export default class BaseComponent extends Component { |
|
|
|
|
|
|
|
|
componentWillMount() { |
|
|
componentWillMount() { |
|
|
this.checkAuth() |
|
|
this.checkAuth() |
|
|
|
|
|
this.loadInfo() |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
loadInfo = () => { |
|
|
|
|
|
fetch('/api/v1/info').then(d => d.json()).then(d => this.setState({ providers: d.providers })) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
checkAuth = () => { |
|
|
checkAuth = () => { |
|
|
@ -61,12 +67,17 @@ 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`; |
|
|
|
|
|
if (!this._oAuthPopup) { |
|
|
// 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; |
|
|
var wLeft = (window.screen.width / 2) - (wwidth / 2); |
|
|
var wLeft = (window.screen.width / 2) - (wwidth / 2); |
|
|
var wTop = (window.screen.height / 2) - (wHeight / 2); |
|
|
var wTop = (window.screen.height / 2) - (wHeight / 2); |
|
|
window.open(`/api/v1/auth/${provider}/login`, '', `width=${wwidth}, height=${wHeight}, top=${wTop}, left=${wLeft}`) |
|
|
this._oAuthPopup = window.open(url, '', `width=${wwidth}, height=${wHeight}, top=${wTop}, left=${wLeft}`) |
|
|
|
|
|
} else { |
|
|
|
|
|
this._oAuthPopup.location = url; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
handleLogout = () => { |
|
|
handleLogout = () => { |
|
|
@ -75,7 +86,7 @@ export default class BaseComponent extends Component { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
render() { |
|
|
render() { |
|
|
const { open, authorized, activeItem, userData } = this.state |
|
|
const { open, authorized, activeItem, userData, providers } = this.state |
|
|
if (!authorized) { |
|
|
if (!authorized) { |
|
|
return ( |
|
|
return ( |
|
|
<Modal size='tiny' open={open} onClose={this.onOAuthClose}> |
|
|
<Modal size='tiny' open={open} onClose={this.onOAuthClose}> |
|
|
@ -85,17 +96,24 @@ export default class BaseComponent extends Component { |
|
|
<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'> |
|
|
<div className='ui center aligned segment'> |
|
|
|
|
|
{providers.length == 0 && <p>There are currently no correct oAuth credential maintained.</p>} |
|
|
|
|
|
{providers.indexOf("microsoft") != -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 |
|
|
</Button> |
|
|
</Button> |
|
|
|
|
|
</div>} |
|
|
|
|
|
{providers.indexOf("microsoft") != -1 && <div> |
|
|
<div className="ui divider"></div> |
|
|
<div className="ui divider"></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 |
|
|
</Button> |
|
|
</Button> |
|
|
|
|
|
</div>} |
|
|
|
|
|
{providers.indexOf("microsoft") != -1 && <div> |
|
|
<div className="ui divider"></div> |
|
|
<div className="ui divider"></div> |
|
|
<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 |
|
|
</Button> |
|
|
</Button> |
|
|
|
|
|
</div>} |
|
|
</div> |
|
|
</div> |
|
|
</Modal.Content> |
|
|
</Modal.Content> |
|
|
</Modal> |
|
|
</Modal> |
|
|
|