Commit 20941deb authored by Minji Park's avatar Minji Park Committed by Jee Hyeok Kim

Modify cloud dashboard for sign-up

- change sign-up page to insert oauth provider manually
- sign-out bug fixed

Change-Id: Ie9bd0bae006a1cdc7bfabd5686e51da15c9d22d5
Signed-off-by: default avatarMinji Park <minjii.park@samsung.com>
Reviewed-on: https://gerrit.iotivity.org/gerrit/19025Tested-by: default avatarjenkins-iotivity <jenkins@iotivity.org>
Reviewed-by: default avatarJee Hyeok Kim <jihyeok13.kim@samsung.com>
(cherry picked from commit de0208f8)
Reviewed-on: https://gerrit.iotivity.org/gerrit/19045
parent 45903a3d
...@@ -117,8 +117,7 @@ var Client = new function() { ...@@ -117,8 +117,7 @@ var Client = new function() {
// send sign-in request. // send sign-in request.
this.onSignIn = function(packet) { this.onSignIn = function(packet) {
if(packet.getCode === 68) { if(packet.getCode === 68) {
Client.event.emit(SIGNIN, packet.getPayloadObject.uid, Client.event.emit(SIGNIN);
packet.getPayloadObject.accesstoken);
} else { } else {
Client.event.emit(ERROR, "SignIn Failed" + packet.getCode); Client.event.emit(ERROR, "SignIn Failed" + packet.getCode);
} }
......
...@@ -40,9 +40,9 @@ const style = { ...@@ -40,9 +40,9 @@ const style = {
} }
} }
const handleSignout = () => { const handleSignout = (di, accesstoken) => {
console.debug("sign out clicked"); console.debug("sign out clicked");
Client.signOut(); Client.signOut(di, accesstoken);
}; };
const handleDisconnect = () => { const handleDisconnect = () => {
...@@ -59,7 +59,7 @@ const Menu = (props) => ( ...@@ -59,7 +59,7 @@ const Menu = (props) => (
anchorOrigin={{horizontal: 'right', vertical: 'bottom'}} anchorOrigin={{horizontal: 'right', vertical: 'bottom'}}
> >
<MenuItem primaryText="Help" /> <MenuItem primaryText="Help" />
{props.signin ? <MenuItem primaryText="Sign out" onTouchTap={handleSignout} />: null} {props.signin ? <MenuItem primaryText="Sign out" onTouchTap={handleSignout.bind(this, props.di, props.accesstoken)} />: null}
<MenuItem primaryText="Server setting" onTouchTap={handleDisconnect}/> <MenuItem primaryText="Server setting" onTouchTap={handleDisconnect}/>
</IconMenu> </IconMenu>
); );
...@@ -71,7 +71,9 @@ class MainAppBar extends React.Component { ...@@ -71,7 +71,9 @@ class MainAppBar extends React.Component {
super(props, context); super(props, context);
this.state = { this.state = {
signin: props.signin signin: props.signin,
di: props.di,
accesstoken: props.accesstoken
} }
}; };
...@@ -85,7 +87,7 @@ class MainAppBar extends React.Component { ...@@ -85,7 +87,7 @@ class MainAppBar extends React.Component {
titleStyle={style.font} titleStyle={style.font}
/* TODO add icon */ /* TODO add icon */
//iconElementLeft={ } //iconElementLeft={ }
iconElementRight={ <Menu signin={this.state.signin} /> } iconElementRight={ <Menu signin={this.state.signin} di={this.state.di} accesstoken={this.state.accesstoken}/> }
showMenuIconButton={false} showMenuIconButton={false}
style={style.basic} style={style.basic}
/> />
......
...@@ -22,8 +22,6 @@ ...@@ -22,8 +22,6 @@
import React from 'react'; import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton'; import RaisedButton from 'material-ui/RaisedButton';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import TextField from 'material-ui/TextField'; import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton'; import FlatButton from 'material-ui/FlatButton';
import Dialog from 'material-ui/Dialog'; import Dialog from 'material-ui/Dialog';
...@@ -80,28 +78,38 @@ class SignupButton extends React.Component { ...@@ -80,28 +78,38 @@ class SignupButton extends React.Component {
}; };
handleAuthcodeButtonClicked = (value) => { handleAuthcodeButtonClicked = (value) => {
this.setState({ provider : value }); this.setState({ provider : value, providerError : '' });
};
handleSelectfieldChange = (event, index, value) => {
this.setState({ provider : value });
}; };
handleTextChange = (event) => { handleTextChange = (event) => {
var currentProviderErr = this.state.providerError;
var currentCodeErr = this.state.codeError; var currentCodeErr = this.state.codeError;
this.setState({ code : event.target.value }); switch(event.target.id) {
if (event.target.value.length !== 0) { case "provider":
currentCodeErr = ''; this.setState({ provider : event.target.value });
} else { if (event.target.value.length !== 0) {
currentCodeErr = errorText; currentProviderErr = '';
} else {
currentProviderErr = errorText;
}
break;
case "code":
this.setState({ code : event.target.value });
if (event.target.value.length !== 0) {
currentCodeErr = '';
} else {
currentCodeErr = errorText;
}
break;
default:
return;
} }
this.setState({ providerError : currentProviderErr, codeError : currentCodeErr })
this.setState({ codeError : currentCodeErr });
}; };
handleSubmit = () => { handleSubmit = () => {
if (this.state.code.length === 0) { if (this.state.provider.length === 0 || this.state.code.length === 0) {
return; return;
} }
...@@ -123,6 +131,7 @@ class SignupButton extends React.Component { ...@@ -123,6 +131,7 @@ class SignupButton extends React.Component {
open: false, open: false,
provider: 'github', provider: 'github',
code: '', code: '',
providerError: '',
codeError: errorText, codeError: errorText,
dialogMessage: '', dialogMessage: '',
signup: false signup: false
...@@ -134,15 +143,14 @@ class SignupButton extends React.Component { ...@@ -134,15 +143,14 @@ class SignupButton extends React.Component {
<RaisedButton label="Github" backgroundColor="#E0E0E0" style={style.basic} onTouchTap={this.handleAuthcodeButtonClicked.bind(this, "github")} <RaisedButton label="Github" backgroundColor="#E0E0E0" style={style.basic} onTouchTap={this.handleAuthcodeButtonClicked.bind(this, "github")}
href="https://github.com/login?return_to=%2Flogin%2Foauth%2Fauthorize%3Fclient_id%3Dea9c18f540323b0213d0%26redirect_uri%3Dhttp%253A%252F%252Fwww.example.com%252Foauth_callback%252F" href="https://github.com/login?return_to=%2Flogin%2Foauth%2Fauthorize%3Fclient_id%3Dea9c18f540323b0213d0%26redirect_uri%3Dhttp%253A%252F%252Fwww.example.com%252Foauth_callback%252F"
target="_blank" />, <br />, target="_blank" />, <br />,
<SelectField <TextField
floatingLabelText="OAuth provider" floatingLabelText="OAuth provider"
id="provider"
value={this.state.provider} value={this.state.provider}
onChange={this.handleSelectfieldChange} errorText={this.state.providerError}
style={style.selectfield} errorStyle={style.error}
> onChange={this.handleTextChange}
<MenuItem value={'github'} primaryText="Github" /> />, <br />,
<MenuItem value={'samsung'} primaryText="Samsung" />
</SelectField>, <br />,
<TextField <TextField
floatingLabelText="Device Id" floatingLabelText="Device Id"
disabled={true} disabled={true}
...@@ -150,6 +158,7 @@ class SignupButton extends React.Component { ...@@ -150,6 +158,7 @@ class SignupButton extends React.Component {
/>, <br />, />, <br />,
<TextField <TextField
floatingLabelText="Auth Code" floatingLabelText="Auth Code"
id="code"
errorText={this.state.codeError} errorText={this.state.codeError}
errorStyle={style.error} errorStyle={style.error}
onChange={this.handleTextChange} onChange={this.handleTextChange}
......
...@@ -52,7 +52,7 @@ Client.event.on(ERROR, function(message) { ...@@ -52,7 +52,7 @@ Client.event.on(ERROR, function(message) {
// #2 websocket connected: default page // #2 websocket connected: default page
Client.event.on(CONNECTED, function() { Client.event.on(CONNECTED, function() {
renderDefaultPage(false); renderDefaultPage(false, '', '');
ReactDOM.render( ReactDOM.render(
<SigninPage di={getDeviceId()} uid={getUid()} accesstoken={getAccesstoken()} autosignin={getAutosignin()} />, <SigninPage di={getDeviceId()} uid={getUid()} accesstoken={getAccesstoken()} autosignin={getAutosignin()} />,
...@@ -76,7 +76,7 @@ Client.event.on(DISCONNECTED, function() { ...@@ -76,7 +76,7 @@ Client.event.on(DISCONNECTED, function() {
Client.event.on(SIGNIN, function() { Client.event.on(SIGNIN, function() {
unmountDefaultPage(); unmountDefaultPage();
renderDefaultPage(true); renderDefaultPage(true, getDeviceId(), getAccesstoken());
ReactDOM.unmountComponentAtNode(document.getElementById('body')); ReactDOM.unmountComponentAtNode(document.getElementById('body'));
}); });
...@@ -86,7 +86,7 @@ Client.event.on(SIGNOUT, function() { ...@@ -86,7 +86,7 @@ Client.event.on(SIGNOUT, function() {
Client.removeClientData(['accesstoken']); Client.removeClientData(['accesstoken']);
unmountDefaultPage(); unmountDefaultPage();
renderDefaultPage(false); renderDefaultPage(false, '', '');
ReactDOM.render( ReactDOM.render(
<SigninPage di={getDeviceId()} uid={getUid()} accesstoken={getAccesstoken()} autosignin={getAutosignin()} />, <SigninPage di={getDeviceId()} uid={getUid()} accesstoken={getAccesstoken()} autosignin={getAutosignin()} />,
...@@ -99,9 +99,9 @@ ReactDOM.render( ...@@ -99,9 +99,9 @@ ReactDOM.render(
document.getElementById('body') document.getElementById('body')
); );
function renderDefaultPage(signinStatue) { function renderDefaultPage(signinStatue, di, accesstoken) {
ReactDOM.render( ReactDOM.render(
<MainAppBar signin={signinStatue}/>, <MainAppBar signin={signinStatue} di={di} accesstoken={accesstoken}/>,
document.getElementById('appbar') document.getElementById('appbar')
); );
ReactDOM.render( ReactDOM.render(
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment