fix(client): Display Service Unavailable if the user visits `/oauth…

…/sign(in|up)` and the OAuth server is unavailable. fixes #1399
mozilla · Jul 21, 2014 · fe59974 · fe59974
1 parent 7224d95
commit fe59974
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 9 deletions.
diff --git a/app/scripts/templates/sign_in.mustache b/app/scripts/templates/sign_in.mustache
@@ -12,6 +12,11 @@
   </header>
 
   <section>
+    {{#error}}
+      <div class="error visible">{{ error }}</div>
+    {{/error}}
+
+    {{^error}}
     <div class="error"></div>
     <div class="success"></div>
 
@@ -42,5 +47,6 @@
     <div class="privacy-links">
       {{#t}}By proceeding, I agree to the <a id="fxa-tos" href="/legal/terms">Terms of Service</a> and <a id="fxa-pp" href="/legal/privacy">Privacy Notice</a> of Firefox cloud services.{{/t}}
     </div>
+    {{/error}}
   </section>
 </div>
diff --git a/app/scripts/templates/sign_up.mustache b/app/scripts/templates/sign_up.mustache
@@ -12,6 +12,11 @@
   </header>
 
   <section>
+    {{#error}}
+      <div class="error visible">{{ error }}</div>
+    {{/error}}
+
+    {{^error}}
     <div class="error"></div>
     <div class="success"></div>
 
@@ -76,5 +81,6 @@
       <a href="/signin" class="sign-in">{{#t}}Already have an account? Sign in.{{/t}}</a>
     </div>
 
+    {{/error}}
   </section>
 </div>
diff --git a/app/scripts/views/mixins/service-mixin.js b/app/scripts/views/mixins/service-mixin.js
@@ -62,7 +62,7 @@ define([
           self.serviceRedirectURI = clientInfo.redirect_uri;
         })
         .fail(function(err) {
-          self.displayError(err, OAuthErrors);
+          self.error = OAuthErrors.toMessage(err);
         });
     },
 

diff --git a/app/scripts/views/sign_in.js b/app/scripts/views/sign_in.js
@@ -43,7 +43,8 @@ function (_, p, BaseView, FormView, SignInTemplate, Constants, Session, Password
         serviceName: this.serviceName,
         email: email,
         password: Session.prefillPassword,
-        isSync: this.isSync()
+        isSync: this.isSync(),
+        error: this.error
       };
     },
 

diff --git a/app/scripts/views/sign_up.js b/app/scripts/views/sign_up.js
@@ -110,7 +110,8 @@ function (_, p, BaseView, FormView, Template, Session, PasswordMixin, AuthErrors
         isSync: this.isSync(),
         shouldFocusEmail: autofocusEl === 'email',
         shouldFocusPassword: autofocusEl === 'password',
-        shouldFocusYear: autofocusEl === 'year'
+        shouldFocusYear: autofocusEl === 'year',
+        error: this.error
       };
     },
 

diff --git a/app/styles/_general.scss b/app/styles/_general.scss
@@ -74,8 +74,8 @@ noscript {
 }
 
 /**
- * IE < 10 does not support CSS transforms 
- */ 
+ * IE < 10 does not support CSS transforms
+ */
 .lt-ie10 #fox-logo {
   opacity: 1;
 }
@@ -195,6 +195,10 @@ strong.email {
   top:-15px;
 }
 
+.error.visible {
+  display: block;
+}
+
 .error {
   background: $error-background-color;
 }
@@ -574,7 +578,7 @@ label:focus ~ .input-help-focused {
   cursor: auto;
 }
 
-button::-moz-focus-inner { 
+button::-moz-focus-inner {
   border: 0;
   padding: 0;
 }
@@ -711,7 +715,7 @@ ul.links li {
 
 /**
  * IE8 blows up when changing the type of the password field
- * to a text field. Hide the show/hide button and reset 
+ * to a text field. Hide the show/hide button and reset
  * the password field's padding.
  */
 .no-toggle-pw, .reveal-pw {
@@ -838,7 +842,7 @@ input[type="text"] ~ .show-password-label:hover {
   &.image-snippet {
     // 160 right padding to avoid overlap of the android logo
     // in long locales (German)
-    padding: 28px 160px 28px 50px;  
+    padding: 28px 160px 28px 50px;
     text-align: left;
   }
   &.text-snippet {

diff --git a/app/tests/spec/lib/oauth-client.js b/app/tests/spec/lib/oauth-client.js
@@ -115,7 +115,7 @@ function (chai, $, testHelpers, sinon,
               assert.ok(result);
               assert.equal(result.name, 'MozRP');
             });
-        })
+        });
 
         it('responds with a SERVICE_UNAVAILABLE error if the service is unavailable', function () {
           var clientId = 'clientId';