Add spinners to login and signup forms

discourse · Jan 3, 2014 · 17f23ad · 17f23ad
1 parent 25caec0
commit 17f23ad
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 2 deletions.
diff --git a/app/assets/javascripts/discourse/controllers/login_controller.js b/app/assets/javascripts/discourse/controllers/login_controller.js
@@ -31,6 +31,9 @@ Discourse.LoginController = Discourse.Controller.extend(Discourse.ModalFunctiona
     return this.get('loggingIn') || this.blank('loginName') || this.blank('loginPassword');
   }.property('loginName', 'loginPassword', 'loggingIn'),
 
+  showSignupLink: function() {
+    return !Discourse.SiteSettings.invite_only && !this.get('loggingIn');
+  }.property('loggingIn'),
 
   actions: {
     login: function() {

diff --git a/app/assets/javascripts/discourse/templates/modal/create_account.js.handlebars b/app/assets/javascripts/discourse/templates/modal/create_account.js.handlebars
@@ -68,5 +68,8 @@
 
   <div class="modal-footer">
     <button class='btn btn-large btn-primary' {{bindAttr disabled="submitDisabled"}} {{action createAccount}}>{{i18n create_account.title}}</button>
+    {{#if formSubmitted}}
+      &nbsp; <i class='fa fa-spinner fa-spin'></i>
+    {{/if}}
   </div>
 {{/unless}}
diff --git a/app/assets/javascripts/discourse/templates/modal/login.js.handlebars b/app/assets/javascripts/discourse/templates/modal/login.js.handlebars
@@ -51,11 +51,15 @@
         <i class="fa fa-unlock"></i>&nbsp;{{loginButtonText}}
     </button>
 
-    {{#unless Discourse.SiteSettings.invite_only}}
+    {{#if showSignupLink}}
       &nbsp; {{i18n create_account.invite}}
       <a id="new-account-link" {{action showCreateAccount}}>
         {{i18n create_account.action}}
       </a>
-    {{/unless}}
+    {{/if}}
+
+    {{#if loggingIn}}
+      &nbsp; <i class='fa fa-spinner fa-spin'></i>
+    {{/if}}
   {{/if}}
 </div>
diff --git a/app/assets/javascripts/discourse/views/modal/login_view.js b/app/assets/javascripts/discourse/views/modal/login_view.js
@@ -9,6 +9,7 @@
 Discourse.LoginView = Discourse.ModalBodyView.extend({
   templateName: 'modal/login',
   title: I18n.t('login.title'),
+  classNames: ['login-modal'],
 
 
   mouseMove: function(e) {

diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss
@@ -19,6 +19,12 @@
   }
 }
 
+.login-modal {
+  .fa-spinner {
+    font-size: 18px;
+  }
+}
+
 // Create account
 
 #new-account-link {
@@ -46,4 +52,8 @@
       color: #888;
     }
   }
+
+  .fa-spinner {
+    font-size: 18px;
+  }
 }