diff --git a/ui/js/component/welcome.js b/ui/js/component/welcome.js index 7694997c0..36036abe1 100644 --- a/ui/js/component/welcome.js +++ b/ui/js/component/welcome.js @@ -6,19 +6,6 @@ import {Link} from '../component/link.js'; import FormField from '../component/form.js'; import Notice from '../component/notice.js' -const IntroStage = React.createClass({ - componentWillMount: function() { - this.props.onCompleted(); // Nothing required to move on - }, - render: function() { - return ( - <section> - <h1>Welcome to LBRY</h1> - <p>Content will go here...</p> - </section> - ); - } -}); const SubmitEmailStage = React.createClass({ getInitialState: function() { @@ -26,6 +13,7 @@ const SubmitEmailStage = React.createClass({ rewardType: null, email: '', submitting: false, + errorMessage: null, }; }, handleEmailChanged: function(event) { @@ -40,84 +28,94 @@ const SubmitEmailStage = React.createClass({ submitting: true, }); lbryio.call('user_email', 'new', {email: this.state.email}, 'post').then(() => { - this.setState({ - submitting: false, - message: "Your email has been verified.", - success: true, - }); - this.props.onCompleted(); + this.props.onDone(); }, (error) => { this.setState({ submitting: false, - message: error.message, - success: false, + errorMessage: error.message, }); }); }, render: function() { return ( <section> - <h1>Verify Your Email Address</h1> - {this.state.message - ? <Notice isError={!this.state.success}> - {this.state.message} + <h1>Welcome to LBRY</h1> + {this.state.errorMessage + ? <Notice isError> + {this.state.errorMessage} </Notice> : null} <p>Copy here explaining what we do with your email, and the reward.</p> <form onSubmit={this.handleSubmit}> - <section><label>Email <FormField ref={(field) => { this._emailField = field }} type="text" name="email" value={this.state.email} onChange={this.handleEmailChanged} /></label></section> - <div><Link button="primary" label="Submit email" disabled={this.state.submitting} onClick={this.handleSubmit} /></div> + <section>Email <label><FormField ref={(field) => { this._emailField = field }} type="text" name="email" value={this.state.email} onChange={this.handleEmailChanged} /></label></section> + <section><Link button="primary" label="Submit and Continue" disabled={this.state.submitting} onClick={this.handleSubmit} /></section> </form> </section> ); } }); -/* const ConfirmEmailStage = React.createClass({ +const ConfirmEmailStage = React.createClass({ getInitialState: function() { return { rewardType: null, - email: '', + code: '', submitting: false, + errorMessage: null, }; }, - handleEmailChanged: function(event) { + handleCodeChanged: function(event) { this.setState({ - email: event.target.value, + code: event.target.value, }); }, handleSubmit: function(event) { event.preventDefault(); - // ... + this.setState({ + submitting: true, + }); + + lbryio.call('user_email', 'confirm', {verification_token: this.state.code}, 'post').then(() => { + rewards.claimReward('confirm_email').then(() => { + console.log('succeeded'); + this.props.onDone(); + }, (err) => { + console.log('failed'); + this.props.onDone(); + }); + }, (error) => { + this.setState({ + submitting: false, + errorMessage: error.message, + }); + }); }, render: function() { return ( <section> <h1>Confirm Your Email Address</h1> - {this.state.message - ? <Notice isError={!this.state.success}> - {this.state.message} + {this.state.errorMessage + ? <Notice isError> + {this.state.errorMessage} </Notice> : null} - <p>Ask the user to take steps needed to confirm (click link in confirmation email, etc.)</p> + <p>Please enter your verification code to confirm your email address.</p> <form onSubmit={this.handleSubmit}> - <section><label>Email <FormField ref={(field) => { this._emailField = field }} type="text" name="email" value={this.state.email} onChange={this.handleEmailChanged} /></label></section> - <div><Link button="primary" label="Confirm" disabled={this.state.submitting} onClick={this.handleSubmit} /></div> + <section><label>Verification Code: <FormField ref={(field) => { this._codeField = field }} type="text" name="code" value={this.state.code} onChange={this.handleCodeChanged} /></label></section> + <section><Link button="primary" label="Verify" disabled={this.state.submitting} onClick={this.handleSubmit} /></section> </form> </section> ); } -}); */ +}); const FinalMessageStage = React.createClass({ - componentWillMount: function() { - this.props.onCompleted(); - }, render: function() { return ( <section> <h1>Email verified</h1> <p>Text here about what happens next</p> + <section><Link button="primary" label="OK" onClick={this.props.onDone} /></section> </section> ); } @@ -125,9 +123,8 @@ const FinalMessageStage = React.createClass({ export const Welcome = React.createClass({ _stages: [ - IntroStage, SubmitEmailStage, - //ConfirmEmailStage, + ConfirmEmailStage, FinalMessageStage, ], propTypes: { @@ -138,36 +135,20 @@ export const Welcome = React.createClass({ stageNum: 0, }; }, - handleNextClicked: function() { + handleStageDone: function() { if (this.state.stageNum >= this._stages.length - 1) { this.props.onDone(); + } else { + this.setState({ + stageNum: this.state.stageNum + 1, + }); } - - this.setState({ - stageNum: this.state.stageNum + 1, - stageCompleted: false, - }); - }, - handleDoneClicked: function() { - this.props.onDone(); - }, - handleStageComplete: function() { - console.log('inside handleStageComplete') - this.setState({ - stageCompleted: true, - }); }, render: function() { const Content = this._stages[this.state.stageNum]; - const isLastStage = this.state.stageNum >= this._stages.length - 1; return ( <ModalPage contentLabel="Welcome to LBRY" {...this.props}> - <Content onCompleted={this.handleStageComplete} /> - <section> - {!isLastStage - ? <Link button="primary" label="Next" onClick={this.handleNextClicked} disabled={!this.state.stageCompleted} /> - : <Link button="primary" label="OK" onClick={this.handleOKClicked} />} - </section> + <Content onDone={this.handleStageDone} /> </ModalPage> ); } diff --git a/ui/js/lbryio.js b/ui/js/lbryio.js index 0a1fd4b8f..e4bb40eb4 100644 --- a/ui/js/lbryio.js +++ b/ui/js/lbryio.js @@ -25,14 +25,6 @@ const mocks = { }, ]; }, - 'reward.new': ({reward_type}) => { - return { - UserID: localStorage.getItem('accessToken'), - UserWalletID: 123, - RewardType: reward_type, - RewardAmount: 50, - }; - } }; lbryio.call = function(resource, action, params={}, method='get') {