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>
     );
   }

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') {