lbry-desktop/ui/js/component/auth.js

217 lines
6 KiB
JavaScript
Raw Normal View History

2017-04-09 17:06:23 +02:00
import React from 'react';
import lbryio from '../lbryio.js';
2017-04-10 14:32:40 +02:00
import Modal from './modal.js';
2017-04-09 17:06:23 +02:00
import ModalPage from './modal-page.js';
2017-04-10 14:32:40 +02:00
import {Link, RewardLink} from '../component/link.js';
import {FormField, FormRow} from '../component/form.js';
import rewards from '../rewards.js';
2017-04-09 17:06:23 +02:00
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.props.onEmailSaved();
}, (error) => {
2017-04-10 14:32:40 +02:00
if (this._emailRow) {
this._emailRow.showError(error.message)
2017-04-09 17:06:23 +02:00
}
this.setState({ submitting: false });
});
},
render: function() {
return (
<section>
<form onSubmit={this.handleSubmit}>
2017-04-10 14:32:40 +02:00
<FormRow ref={(ref) => { this._emailRow = ref }} type="text" label="Email" placeholder="webmaster@toplbryfan.com"
2017-04-09 17:06:23 +02:00
name="email" value={this.state.email}
onChange={this.handleEmailChanged} />
2017-04-10 14:32:40 +02:00
<div className="form-row-submit">
2017-04-09 17:06:23 +02:00
<Link button="primary" label="Next" disabled={this.state.submitting} onClick={this.handleSubmit} />
</div>
</form>
</section>
);
}
});
const ConfirmEmailStage = React.createClass({
getInitialState: function() {
return {
rewardType: null,
code: '',
submitting: false,
errorMessage: null,
};
},
handleCodeChanged: function(event) {
this.setState({
code: event.target.value,
});
},
handleSubmit: function(event) {
event.preventDefault();
this.setState({
submitting: true,
});
2017-04-10 14:32:40 +02:00
const onSubmitError = function(error) {
if (this._codeRow) {
this._codeRow.showError(error.message)
2017-04-09 17:06:23 +02:00
}
2017-04-10 14:32:40 +02:00
this.setState({ submitting: false });
}.bind(this)
lbryio.call('user_email', 'confirm', {verification_token: this.state.code}, 'post').then((userEmail) => {
if (userEmail.IsVerified) {
this.props.onEmailConfirmed();
} else {
onSubmitError(new Error("Your email is still not verified.")) //shouldn't happen?
}
}, onSubmitError);
2017-04-09 17:06:23 +02:00
},
render: function() {
return (
<section>
<form onSubmit={this.handleSubmit}>
2017-04-10 14:32:40 +02:00
<FormRow label="Verification Code" ref={(ref) => { this._codeRow = ref }} type="text"
2017-04-09 17:06:23 +02:00
name="code" placeholder="a94bXXXXXXXXXXXXXX" value={this.state.code} onChange={this.handleCodeChanged}
helper="A verification code is required to access this version."/>
2017-04-10 14:32:40 +02:00
<div className="form-row-submit">
2017-04-09 17:06:23 +02:00
<Link button="primary" label="Verify" disabled={this.state.submitting} onClick={this.handleSubmit} />
</div>
</form>
</section>
);
}
});
2017-04-10 14:32:40 +02:00
const WelcomeStage = React.createClass({
onRewardClaim: function() {
console.log('omg');
},
render: function() {
return (
<section>
<h3 className="modal__header">Welcome to LBRY.</h3>
<p>LBRY is the first community controlled content marketplace.</p>
<p>Since you're new here, we'll toss you some credits.</p>
<div style={{textAlign: "center", marginBottom: "12px"}}>
<RewardLink type="new_user" onRewardClaim={this.onRewardClaim} />
</div>
<p>LBC is blah blah blah.</p>
<p>And remember, LBRY is a beta and be safe!</p>
</section>
);
}
});
2017-04-09 17:06:23 +02:00
const ErrorStage = React.createClass({
render: function() {
return (
<section>
<p>An error was encountered that we cannot continue from.</p>
<p>At least we're earning the name beta.</p>
<Link button="alt" label="Try Reload" onClick={() => { window.location.reload() } } />
</section>
);
}
});
const PendingStage = React.createClass({
render: function() {
return (
<section>
<p>Preparing for first access <span className="busy-indicator"></span></p>
</section>
);
}
});
export const AuthOverlay = React.createClass({
_stages: {
pending: PendingStage,
error: ErrorStage,
email: SubmitEmailStage,
confirm: ConfirmEmailStage,
2017-04-10 14:32:40 +02:00
welcome: WelcomeStage,
2017-04-09 17:06:23 +02:00
},
2017-04-10 14:32:40 +02:00
2017-04-09 17:06:23 +02:00
getInitialState: function() {
return {
2017-04-10 20:12:07 +02:00
stage: "pending",
2017-04-09 17:06:23 +02:00
stageProps: {}
};
},
2017-04-10 14:32:40 +02:00
endAuth: function() {
this.setState({
stage: null
});
},
2017-04-09 17:06:23 +02:00
componentWillMount: function() {
2017-04-10 20:12:07 +02:00
lbryio.authenticate().then(function(user) {
if (!user.HasVerifiedEmail) { //oops I fucked this up
this.setState({
stage: "email",
stageProps: {
onEmailSaved: function() {
this.setState({
stage: "confirm",
stageProps: {
onEmailConfirmed: function() { this.setState({ stage: "welcome"}) }.bind(this)
}
})
}.bind(this)
}
})
} else {
this.endAuth()
}
}.bind(this)).catch((err) => {
this.setState({
stage: "error",
stageProps: { errorText: err.message }
})
document.dispatchEvent(new CustomEvent('unhandledError', {
detail: {
message: err.message,
data: err.stack
}
}));
})
2017-04-09 17:06:23 +02:00
},
render: function() {
if (!this.state.stage || lbryio.user && lbryio.user.HasVerifiedEmail) {
return null;
}
const StageContent = this._stages[this.state.stage];
return (
2017-04-10 14:32:40 +02:00
this.state.stage != "welcome" ?
<ModalPage className="modal-page--full"isOpen={true} contentLabel="Authentication" {...this.props}>
<h1>LBRY Early Access</h1>
<StageContent {...this.state.stageProps} />
</ModalPage> :
<Modal isOpen={true} contentLabel="Welcome to LBRY" {...this.props} onConfirmed={this.endAuth}>
<StageContent {...this.state.stageProps} />
</Modal>
2017-04-09 17:06:23 +02:00
);
}
});