}
}
-const handleSignout = () => {
+const handleSignout = (di, accesstoken) => {
console.debug("sign out clicked");
- Client.signOut();
+ Client.signOut(di, accesstoken);
};
const handleDisconnect = () => {
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>
);
super(props, context);
this.state = {
- signin: props.signin
+ signin: props.signin,
+ di: props.di,
+ accesstoken: props.accesstoken
}
};
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}
/>
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';
};
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;
}
open: false,
provider: 'github',
code: '',
+ providerError: '',
codeError: errorText,
dialogMessage: '',
signup: false
<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}
/>, <br />,
<TextField
floatingLabelText="Auth Code"
+ id="code"
errorText={this.state.codeError}
errorStyle={style.error}
onChange={this.handleTextChange}
// #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()} />,
Client.event.on(SIGNIN, function() {
unmountDefaultPage();
- renderDefaultPage(true);
+ renderDefaultPage(true, getDeviceId(), getAccesstoken());
ReactDOM.unmountComponentAtNode(document.getElementById('body'));
});
Client.removeClientData(['accesstoken']);
unmountDefaultPage();
- renderDefaultPage(false);
+ renderDefaultPage(false, '', '');
ReactDOM.render(
<SigninPage di={getDeviceId()} uid={getUid()} accesstoken={getAccesstoken()} autosignin={getAutosignin()} />,
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(