Properly validate email

assets/javascripts/discourse/components/stripe-card.js.es6

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

assets/javascripts/discourse/templates/components/donation-list.hbs

@@ -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}}
-  <h4>{{i18n 'discourse_donations.donations.subscriptions'}}</h4>
-  <ul>
-    {{#each subscriptions as |s|}}
-      <li class="underline">{{donation-subscription s.subscription}}</li>
+  <div class="subscription-list">
+    <div class="underline">{{i18n 'discourse_donations.donations.subscriptions'}}</div>
+    <ul>
+      {{#each subscriptions as |s|}}
+        <li>{{donation-subscription s.subscription}}</li>
 
-      {{#if s.invoices}}
-        {{#each s.invoices as |invoice|}}
-          <li>{{donation-invoice invoice}}</li>
-        {{/each}}
-      {{/if}}
-    {{/each}}
-  </ul>
+        {{#if s.invoices}}
+          <ul>
+            {{#each s.invoices as |invoice|}}
+              <li>{{donation-invoice invoice}}</li>
+            {{/each}}
+          </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}}

assets/javascripts/discourse/templates/components/stripe-card.hbs

@@ -50,7 +50,7 @@
     <div class="controls">
       <div id="card-element"></div>
       {{#if stripeError}}
-        <div class="instructions stripe-error">{{stripeError}}</div>
+        <div class="stripe-error">{{stripeError}}</div>
       {{/if}}
     </div>
   </div>
@@ -60,7 +60,11 @@
       <label class="control-label" for="card-element">{{i18n 'user.email.title'}}</label>
       <div class="controls">
         {{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>
 

assets/stylesheets/discourse-donations.scss

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