Add submit input to Claim Code, Referral and Wallet pages

This commit is contained in:
Alex Liebowitz 2016-10-19 03:13:39 -04:00
parent 7cfbb60033
commit 0e21b88281
3 changed files with 77 additions and 55 deletions

View file

@ -16,7 +16,11 @@ var ClaimCodePage = React.createClass({
submitting: false,
}
},
handleSubmit: function() {
handleSubmit: function(event) {
if (typeof event !== 'undefined') {
event.preventDefault();
}
if (!this.refs.code.value) {
alert('Please enter an invitation code or choose "Skip."');
return;
@ -81,25 +85,26 @@ var ClaimCodePage = React.createClass({
render: function() {
return (
<main>
<div className="card">
<h2>Claim your beta invitation code</h2>
<section style={claimCodeContentStyle}>
<p>Thanks for beta testing LBRY! Enter your invitation code and email address below to receive your initial
LBRY credits.</p>
<p>You will be added to our mailing list (if you're not already on it) and will be eligible for future rewards for beta testers.</p>
</section>
<section>
<form onSubmit={this.handleSubmit}>
<form onSubmit={this.handleSubmit}>
<div className="card">
<h2>Claim your beta invitation code</h2>
<section style={claimCodeContentStyle}>
<p>Thanks for beta testing LBRY! Enter your invitation code and email address below to receive your initial
LBRY credits.</p>
<p>You will be added to our mailing list (if you're not already on it) and will be eligible for future rewards for beta testers.</p>
</section>
<section>
<section><label style={claimCodeLabelStyle} htmlFor="code">Invitation code</label><input name="code" ref="code" /></section>
<section><label style={claimCodeLabelStyle} htmlFor="email">Email</label><input name="email" ref="email" /></section>
</form>
</section>
<section>
<Link button="primary" label={this.state.submitting ? "Submitting..." : "Submit"}
disabled={this.state.submitting} onClick={this.handleSubmit} />
<Link button="alt" label="Skip" disabled={this.state.submitting} onClick={this.handleSkip} />
</section>
</div>
</section>
<section>
<Link button="primary" label={this.state.submitting ? "Submitting..." : "Submit"}
disabled={this.state.submitting} onClick={this.handleSubmit} />
<Link button="alt" label="Skip" disabled={this.state.submitting} onClick={this.handleSkip} />
<input type='submit' className='hidden' />
</section>
</div>
</form>
</main>
);
}

View file

@ -16,7 +16,11 @@ var ReferralPage = React.createClass({
submitting: false,
}
},
handleSubmit: function() {
handleSubmit: function(event) {
if (typeof event !== 'undefined') {
event.preventDefault();
}
if (!this.refs.code.value) {
alert('Please enter a referral code.');
return;
@ -72,23 +76,24 @@ var ReferralPage = React.createClass({
render: function() {
return (
<main>
<div className="card">
<h2>Check your referral credits</h2>
<section style={referralCodeContentStyle}>
<p>Have you referred others to LBRY? Enter your referral code and email address below to check how many credits you've earned!</p>
<p>As a reminder, your referral code is the same as your LBRY invitation code.</p>
</section>
<section>
<form onSubmit={this.handleSubmit}>
<form onSubmit={this.handleSubmit}>
<div className="card">
<h2>Check your referral credits</h2>
<section style={referralCodeContentStyle}>
<p>Have you referred others to LBRY? Enter your referral code and email address below to check how many credits you've earned!</p>
<p>As a reminder, your referral code is the same as your LBRY invitation code.</p>
</section>
<section>
<section><label style={referralCodeLabelStyle} htmlFor="code">Referral code</label><input name="code" ref="code" /></section>
<section><label style={referralCodeLabelStyle} htmlFor="email">Email</label><input name="email" ref="email" /></section>
</form>
</section>
<section>
<Link button="primary" label={this.state.submitting ? "Submitting..." : "Submit"}
disabled={this.state.submitting} onClick={this.handleSubmit} />
</section>
</div>
</section>
<section>
<Link button="primary" label={this.state.submitting ? "Submitting..." : "Submit"}
disabled={this.state.submitting} onClick={this.handleSubmit} />
<input type='submit' className='hidden' />
</section>
</div>
</form>
</main>
);
}

View file

@ -2,7 +2,11 @@ var addressRefreshButtonStyle = {
fontSize: '11pt',
};
var AddressSection = React.createClass({
_refreshAddress: function() {
_refreshAddress: function(event) {
if (typeof event !== 'undefined') {
event.preventDefault();
}
lbry.getNewAddress((address) => {
localStorage.setItem('wallet_address', address);
this.setState({
@ -35,7 +39,8 @@ var AddressSection = React.createClass({
return (
<section className="card">
<h3>Wallet Address</h3>
<p><Address address={this.state.address} /> <Link text="Get new address" icon='icon-refresh' onClick={this._refreshAddress} style={addressRefreshButtonStyle} /></p>
<Address address={this.state.address} /> <Link text="Get new address" icon='icon-refresh' onClick={this._refreshAddress} style={addressRefreshButtonStyle} />
<input type='submit' className='hidden' />
<div className="help">
<p>Other LBRY users may send credits to you by entering this address on the "Send" page.</p>
You can generate a new address at any time, and any previous addresses will continue to work. Using multiple addresses can be helpful for keeping track of incoming payments from multiple sources.
@ -46,7 +51,11 @@ var AddressSection = React.createClass({
});
var SendToAddressSection = React.createClass({
sendToAddress: function() {
handleSubmit: function(event) {
if (typeof event !== 'undefined') {
event.preventDefault();
}
if ((this.state.balance - this.state.amount) < 1)
{
alert("Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.")
@ -104,26 +113,29 @@ var SendToAddressSection = React.createClass({
render: function() {
return (
<section className="card">
<h3>Send Credits</h3>
<div className="form-row">
<label htmlFor="amount">Amount</label>
<input id="amount" type="text" size="10" onChange={this.setAmount}></input>
</div>
<div className="form-row">
<label htmlFor="address">Recipient address</label>
<input id="address" type="text" size="60" onChange={this.setAddress}></input>
</div>
<div className="form-row form-row-submit">
<Link button="primary" label="Send" onClick={this.sendToAddress} disabled={!(parseFloat(this.state.amount) > 0.0) || this.state.address == ""} />
</div>
{
this.state.results ?
<form onSubmit={this.handleSubmit}>
<h3>Send Credits</h3>
<div className="form-row">
<h4>Results</h4>
{this.state.results}
<label htmlFor="amount">Amount</label>
<input id="amount" type="text" size="10" onChange={this.setAmount}></input>
</div>
: ''
}
<div className="form-row">
<label htmlFor="address">Recipient address</label>
<input id="address" type="text" size="60" onChange={this.setAddress}></input>
</div>
<div className="form-row form-row-submit">
<Link button="primary" label="Send" onClick={this.handleSubmit} disabled={!(parseFloat(this.state.amount) > 0.0) || this.state.address == ""} />
<input type='submit' className='hidden' />
</div>
{
this.state.results ?
<div className="form-row">
<h4>Results</h4>
{this.state.results}
</div>
: ''
}
</form>
</section>
);
}