Properly validate email

This commit is contained in:
Angus McLeod 2018-06-25 18:37:55 +10:00
parent 8453d5cc03
commit fd0b53c67c
4 changed files with 59 additions and 33 deletions

View File

@ -2,6 +2,7 @@ import { ajax } from 'discourse/lib/ajax';
import { getRegister } from 'discourse-common/lib/get-owner'; import { getRegister } from 'discourse-common/lib/get-owner';
import { formatAnchor, zeroDecimalCurrencies } from '../lib/donation-utilities'; import { formatAnchor, zeroDecimalCurrencies } from '../lib/donation-utilities';
import { default as computed } from 'ember-addons/ember-computed-decorators'; import { default as computed } from 'ember-addons/ember-computed-decorators';
import { emailValid } from "discourse/lib/utilities";
export default Ember.Component.extend({ export default Ember.Component.extend({
result: [], result: [],
@ -94,9 +95,19 @@ export default Ember.Component.extend({
return amount; return amount;
}, },
@computed('currentUser', 'email') @computed('email')
userReady(currentUser, email) { emailValid(email) {
return currentUser || email; return emailValid(email);
},
@computed('email', 'emailValid')
showEmailError(email, emailValid) {
return email && email.length > 3 && !emailValid;
},
@computed('currentUser', 'emailValid')
userReady(currentUser, emailValid) {
return currentUser || emailValid;
}, },
@computed('userReady', 'stripeReady') @computed('userReady', 'stripeReady')

View File

@ -1,23 +1,29 @@
{{#if hasCharges}}
<h4>{{i18n 'discourse_donations.donations.charges'}}</h4>
<ul>
{{#each charges as |charge|}}
<li>{{donation-charge charge}}</li>
{{/each}}
</ul>
{{/if}}
{{#if hasSubscriptions}} {{#if hasSubscriptions}}
<h4>{{i18n 'discourse_donations.donations.subscriptions'}}</h4> <div class="subscription-list">
<ul> <div class="underline">{{i18n 'discourse_donations.donations.subscriptions'}}</div>
{{#each subscriptions as |s|}} <ul>
<li class="underline">{{donation-subscription s.subscription}}</li> {{#each subscriptions as |s|}}
<li>{{donation-subscription s.subscription}}</li>
{{#if s.invoices}} {{#if s.invoices}}
{{#each s.invoices as |invoice|}} <ul>
<li>{{donation-invoice invoice}}</li> {{#each s.invoices as |invoice|}}
{{/each}} <li>{{donation-invoice invoice}}</li>
{{/if}} {{/each}}
{{/each}} </ul>
</ul> {{/if}}
{{/each}}
</ul>
</div>
{{/if}}
{{#if hasCharges}}
<div class="charge-list">
<div class='underline'>{{i18n 'discourse_donations.donations.charges'}}</div>
<ul>
{{#each charges as |charge|}}
<li>{{donation-charge charge}}</li>
{{/each}}
</ul>
</div>
{{/if}} {{/if}}

View File

@ -50,7 +50,7 @@
<div class="controls"> <div class="controls">
<div id="card-element"></div> <div id="card-element"></div>
{{#if stripeError}} {{#if stripeError}}
<div class="instructions stripe-error">{{stripeError}}</div> <div class="stripe-error">{{stripeError}}</div>
{{/if}} {{/if}}
</div> </div>
</div> </div>
@ -60,7 +60,11 @@
<label class="control-label" for="card-element">{{i18n 'user.email.title'}}</label> <label class="control-label" for="card-element">{{i18n 'user.email.title'}}</label>
<div class="controls"> <div class="controls">
{{text-field value=email}} {{text-field value=email}}
<div class="instructions">{{i18n 'discourse_donations.email_instructions'}}</div> {{#if showEmailError}}
<div class="error">{{i18n 'user.email.invalid'}}</div>
{{else}}
<div class="instructions">{{i18n 'discourse_donations.email_instructions'}}</div>
{{/if}}
</div> </div>
</div> </div>

View File

@ -28,7 +28,7 @@ div.stripe-errors {
margin: 0; margin: 0;
} }
.stripe-error { .error, .stripe-error {
margin-top: 5px; margin-top: 5px;
color: $danger; color: $danger;
} }
@ -56,17 +56,22 @@ div.stripe-errors {
} }
.body-page .donations-page-donations { .body-page .donations-page-donations {
margin-bottom: 40px; margin-bottom: 20px;
.donation-list { .donation-list {
ul { .subscription-list, .charge-list {
margin-left: 0; margin-bottom: 10px;
list-style: none; display: inline-block;
li.underline { > ul {
border-bottom: 1px solid $primary-medium; margin: 10px 0;
display: inline-block; list-style: none;
} }
} }
.underline {
border-bottom: 1px solid $primary-medium;
display: inline-block;
}
} }
} }