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: Minji Park <minjii.park@samsung.com>
Reviewed-on: https://gerrit.iotivity.org/gerrit/19025Tested-by: jenkins-iotivity <jenkins@iotivity.org>
Reviewed-by: Jee Hyeok Kim <jihyeok13.kim@samsung.com>
(cherry picked from commit de0208f8)
Reviewed-on: https://gerrit.iotivity.org/gerrit/19045

cloud/dashboard/src/Client.js

@@ -117,8 +117,7 @@ var Client = new function() {
     // send sign-in request.
     this.onSignIn = function(packet) {
         if(packet.getCode === 68) {
-          Client.event.emit(SIGNIN, packet.getPayloadObject.uid,
-            packet.getPayloadObject.accesstoken);
+          Client.event.emit(SIGNIN);
         } else {
           Client.event.emit(ERROR, "SignIn Failed" + packet.getCode);
         }

cloud/dashboard/src/components/MainAppBar.js

@@ -40,9 +40,9 @@ const style = {
     }
 }
 
-const handleSignout = () => {
+const handleSignout = (di, accesstoken) => {
     console.debug("sign out clicked");
-    Client.signOut();
+    Client.signOut(di, accesstoken);
 };
 
 const handleDisconnect = () => {
@@ -59,7 +59,7 @@ const Menu = (props) => (
         anchorOrigin={{horizontal: 'right', vertical: 'bottom'}}
     >
         <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}/>
     </IconMenu>
 );
@@ -71,7 +71,9 @@ class MainAppBar extends React.Component {
         super(props, context);
 
         this.state = {
-            signin: props.signin
+            signin: props.signin,
+            di: props.di,
+            accesstoken: props.accesstoken
         }
     };
 
@@ -85,7 +87,7 @@ class MainAppBar extends React.Component {
                         titleStyle={style.font}
                         /* TODO add icon */
                         //iconElementLeft={ }
-                        iconElementRight={ <Menu signin={this.state.signin} /> }
+                        iconElementRight={ <Menu signin={this.state.signin} di={this.state.di} accesstoken={this.state.accesstoken}/> }
                         showMenuIconButton={false}
                         style={style.basic}
                     />

cloud/dashboard/src/components/SignupButton.js

@@ -22,8 +22,6 @@
 import React from 'react';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 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 FlatButton from 'material-ui/FlatButton';
 import Dialog from 'material-ui/Dialog';
@@ -80,28 +78,38 @@ class SignupButton extends React.Component {
     };
 
     handleAuthcodeButtonClicked = (value) => {
-        this.setState({ provider : value });
-    };
-
-    handleSelectfieldChange = (event, index, value) => {
-        this.setState({ provider : value });
+        this.setState({ provider : value, providerError : '' });
     };
 
     handleTextChange = (event) => {
+        var currentProviderErr = this.state.providerError;
         var currentCodeErr = this.state.codeError;
 
-        this.setState({ code : event.target.value });
-        if (event.target.value.length !== 0) {
-            currentCodeErr = '';
-        } else {
-            currentCodeErr = errorText;
+        switch(event.target.id) {
+            case "provider":
+                this.setState({ provider : event.target.value });
+                if (event.target.value.length !== 0) {
+                    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({ codeError : currentCodeErr });
+        this.setState({ providerError : currentProviderErr, codeError : currentCodeErr })
     };
 
     handleSubmit = () => {
-        if (this.state.code.length === 0) {
+        if (this.state.provider.length === 0 || this.state.code.length === 0) {
             return;
         }
 
@@ -123,6 +131,7 @@ class SignupButton extends React.Component {
             open: false,
             provider: 'github',
             code: '',
+            providerError: '',
             codeError: errorText,
             dialogMessage: '',
             signup: false
@@ -134,15 +143,14 @@ class SignupButton extends React.Component {
                 <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"
                     target="_blank" />, <br />,
-                <SelectField
+                <TextField
                     floatingLabelText="OAuth provider"
+                    id="provider"
                     value={this.state.provider}
-                    onChange={this.handleSelectfieldChange}
-                    style={style.selectfield}
-                >
-                    <MenuItem value={'github'} primaryText="Github" />
-                    <MenuItem value={'samsung'} primaryText="Samsung" />
-                </SelectField>, <br />,
+                    errorText={this.state.providerError}
+                    errorStyle={style.error}
+                    onChange={this.handleTextChange}
+                />, <br />,
                 <TextField
                     floatingLabelText="Device Id"
                     disabled={true}
@@ -150,6 +158,7 @@ class SignupButton extends React.Component {
                 />, <br />,
                 <TextField
                     floatingLabelText="Auth Code"
+                    id="code"
                     errorText={this.state.codeError}
                     errorStyle={style.error}
                     onChange={this.handleTextChange}

cloud/dashboard/src/index.js

@@ -52,7 +52,7 @@ Client.event.on(ERROR, function(message) {
 
 // #2 websocket connected: default page
 Client.event.on(CONNECTED, function() {
-    renderDefaultPage(false);
+    renderDefaultPage(false, '', '');
 
     ReactDOM.render(
         <SigninPage di={getDeviceId()} uid={getUid()} accesstoken={getAccesstoken()} autosignin={getAutosignin()} />,
@@ -76,7 +76,7 @@ Client.event.on(DISCONNECTED, function() {
 Client.event.on(SIGNIN, function() {
     unmountDefaultPage();
 
-    renderDefaultPage(true);
+    renderDefaultPage(true, getDeviceId(), getAccesstoken());
 
     ReactDOM.unmountComponentAtNode(document.getElementById('body'));
 });
@@ -86,7 +86,7 @@ Client.event.on(SIGNOUT, function() {
     Client.removeClientData(['accesstoken']);
 
     unmountDefaultPage();
-    renderDefaultPage(false);
+    renderDefaultPage(false, '', '');
 
     ReactDOM.render(
         <SigninPage di={getDeviceId()} uid={getUid()} accesstoken={getAccesstoken()} autosignin={getAutosignin()} />,
@@ -99,9 +99,9 @@ ReactDOM.render(
     document.getElementById('body')
 );
 
-function renderDefaultPage(signinStatue) {
+function renderDefaultPage(signinStatue, di, accesstoken) {
     ReactDOM.render(
-        <MainAppBar signin={signinStatue}/>,
+        <MainAppBar signin={signinStatue} di={di} accesstoken={accesstoken}/>,
         document.getElementById('appbar')
     );
     ReactDOM.render(