diff --git a/ui/js/component/welcome.js b/ui/js/component/welcome.js index 885bfaf3e..7694997c0 100644 --- a/ui/js/component/welcome.js +++ b/ui/js/component/welcome.js @@ -1,21 +1,172 @@ import React from 'react'; +import lbryio from '../lbryio.js'; + import ModalPage from './modal-page.js'; import {Link} from '../component/link.js'; +import FormField from '../component/form.js'; +import Notice from '../component/notice.js' -export const Welcome = React.createClass({ - propTypes: { - onDone: React.PropTypes.func.isRequired, - }, - handleOKClicked: function() { - this.props.onDone(); +const IntroStage = React.createClass({ + componentWillMount: function() { + this.props.onCompleted(); // Nothing required to move on }, render: function() { return ( - +

Welcome to LBRY

- Content will go here... +

Content will go here...

+
+ ); + } +}); + +const SubmitEmailStage = React.createClass({ + getInitialState: function() { + return { + rewardType: null, + email: '', + submitting: false, + }; + }, + handleEmailChanged: function(event) { + this.setState({ + email: event.target.value, + }); + }, + handleSubmit: function(event) { + event.preventDefault(); + + this.setState({ + 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(); + }, (error) => { + this.setState({ + submitting: false, + message: error.message, + success: false, + }); + }); + }, + render: function() { + return ( +
+

Verify Your Email Address

+ {this.state.message + ? + {this.state.message} + + : null} +

Copy here explaining what we do with your email, and the reward.

+
+
+
+
+
+ ); + } +}); + +/* const ConfirmEmailStage = React.createClass({ + getInitialState: function() { + return { + rewardType: null, + email: '', + submitting: false, + }; + }, + handleEmailChanged: function(event) { + this.setState({ + email: event.target.value, + }); + }, + handleSubmit: function(event) { + event.preventDefault(); + // ... + }, + render: function() { + return ( +
+

Confirm Your Email Address

+ {this.state.message + ? + {this.state.message} + + : null} +

Ask the user to take steps needed to confirm (click link in confirmation email, etc.)

+
+
+
+
+
+ ); + } +}); */ + +const FinalMessageStage = React.createClass({ + componentWillMount: function() { + this.props.onCompleted(); + }, + render: function() { + return ( +
+

Email verified

+

Text here about what happens next

+
+ ); + } +}); + +export const Welcome = React.createClass({ + _stages: [ + IntroStage, + SubmitEmailStage, + //ConfirmEmailStage, + FinalMessageStage, + ], + propTypes: { + onDone: React.PropTypes.func.isRequired, + }, + getInitialState: function() { + return { + stageNum: 0, + }; + }, + handleNextClicked: function() { + if (this.state.stageNum >= this._stages.length - 1) { + this.props.onDone(); + } + + 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 ( + +
- + {!isLastStage + ? + : }
);