diff options
author | elijah <elijah@riseup.net> | 2016-09-21 15:39:03 -0700 |
---|---|---|
committer | Kali Kaneko (leap communications) <kali@leap.se> | 2016-09-22 11:40:14 -0400 |
commit | 7569ac8bd58174095f3f897548e26d0ba905236c (patch) | |
tree | 839c300d7dff62900bcc91672a3b55cf62c31f6c /ui/app/components/wizard/register_stage.js | |
parent | 61b5734c12d6ab6733d3a832df8d99f1041bf355 (diff) |
[feat] the setup wizard for the new ui
Diffstat (limited to 'ui/app/components/wizard/register_stage.js')
-rw-r--r-- | ui/app/components/wizard/register_stage.js | 102 |
1 files changed, 102 insertions, 0 deletions
diff --git a/ui/app/components/wizard/register_stage.js b/ui/app/components/wizard/register_stage.js new file mode 100644 index 0000000..9afa958 --- /dev/null +++ b/ui/app/components/wizard/register_stage.js @@ -0,0 +1,102 @@ +import React from 'react' +import {Button, ButtonGroup, ButtonToolbar, + Glyphicon, Tabs, Tab} from 'react-bootstrap' + +import App from 'app' +import Provider from 'models/provider' +import Login from 'components/login' +import Center from 'components/center' + +import StageLayout from './stage_layout' + +export default class RegisterStage extends React.Component { + + static get defaultProps() {return{ + provider: null + }} + + constructor(props) { + super(props) + this.state = { + activeTab: 'signup', // either 'login' or 'signup' + error: null // error message + } + // this.add = this.add.bind(this) + // this.remove = this.remove.bind(this) + // this.select = this.select.bind(this) + this.selectTab = this.selectTab.bind(this) + this.previous = this.previous.bind(this) + this.cancel = this.cancel.bind(this) + this.login = this.login.bind(this) + } + + previous() { + App.show('wizard', { + stage: 'provider', + initialProvider: this.props.provider + }) + } + + cancel() { + App.start() + } + + login(account) { + App.show('main', {initialAccount: account}) + } + + selectTab(key) { + this.setState({ + activeTab: key + }) + } + + render() { + let info = null + if (this.props.provider) { + info = ( + <div> + <h1 className="first">{this.props.provider.name}</h1> + <h3>{this.props.provider.domain}</h3> + <p>{this.props.provider.description}</p> + <p><b>Enrollment Policy:</b> {this.props.provider.enrollment_policy}</p> + <p><b>Services</b>: {this.props.provider.services}</p> + <p><b>Languages</b>: {this.props.provider.languages.join(', ')}</p> + </div> + ) + } + let buttons = ( + <div> + <ButtonToolbar className="pull-left"> + <Button onClick={this.cancel}> + Cancel + </Button> + </ButtonToolbar> + <ButtonToolbar className="pull-right"> + <Button onClick={this.previous}> + <Glyphicon glyph="chevron-left" /> + Previous + </Button> + </ButtonToolbar> + </div> + ) + return( + <StageLayout title={this.props.provider.domain} buttons={buttons}> + <Tabs activeKey={this.state.activeTab} onSelect={this.selectTab} animation={false} id="login-tabs"> + <Tab eventKey="signup" title="Sign up"> + <div className="vspacer" /> + <Center direction="horizontal" width={400}> + <Login mode="signup" domain={this.props.provider.domain} onLogin={this.login} /> + </Center> + </Tab> + <Tab eventKey="login" title="Log In"> + <div className="vspacer" /> + <Center direction="horizontal" width={400}> + <Login domain={this.props.provider.domain} onLogin={this.login} /> + </Center> + </Tab> + </Tabs> + </StageLayout> + ) + } +} |