Suggest a fallback method when the fancy login fails.

If the CORS/hoisted front page login fails for any reason, suggest
logging in via the https endpoint's login page.

r2/r2/lib/strings.py

@@ -75,6 +75,8 @@ string_dict = dict(
 
     oauth_login_msg = _("Log in or register to connect your reddit account with [%(app_name)s](%(app_about_url)s)."),
 
+    login_fallback_msg = _("try using our secure login form."),
+
     legal = _("I understand and agree that registration on or use of this site constitutes agreement to its %(user_agreement)s and %(privacy_policy)s."),
 
     friends = _('to view reddit with only submissions from your friends, use [reddit.com/r/friends](%s)'),

r2/r2/public/static/js/login.js

@@ -1,4 +1,6 @@
 r.login = {
+    currentOrigin: location.protocol+'//'+location.host,
+
     post: function(form, action, callback) {
         if (r.config.cnameframe && !r.config.https_endpoint) {
             form.$el.unbind()
@@ -8,10 +10,9 @@ r.login = {
 
         var username = $('input[name="user"]', form.$el).val(),
             endpoint = r.config.https_endpoint || ('http://'+r.config.ajax_domain),
-            sameOrigin = location.protocol+'//'+location.host == endpoint,
             apiTarget = endpoint+'/api/'+action+'/'+username
 
-        if (sameOrigin || $.support.cors) {
+        if (this.currentOrigin == endpoint || $.support.cors) {
             var params = form.serialize()
             params.push({name:'api_type', value:'json'})
             $.ajax({
@@ -189,6 +190,17 @@ r.ui.LoginForm.prototype = $.extend(new r.ui.Form(), {
         }
     },
 
+    _handleNetError: function(result, err, xhr) {
+        r.ui.Form.prototype._handleNetError.apply(this, arguments)
+        if (xhr.status == 0 && r.login.currentOrigin != r.config.https_endpoint) {
+            $('<p>').append(
+                $('<a>')
+                    .text(r.strings.login_fallback_msg)
+                    .attr('href', r.config.https_endpoint + '/login')
+            ).appendTo(this.$el.find('.status'))
+        }
+    },
+
     focus: function() {
         this.$el.find('input[name="user"]').focus()
     }

r2/r2/public/static/js/ui.js

@@ -131,12 +131,16 @@ r.ui.Form.prototype = $.extend(new r.ui.Base(), {
             this._handleResult(result)
         } else {
             this.setWorking(false)
-            this.showStatus('an error occurred (' + xhr.status + ')', true)
+            this._handleNetError(result, err, xhr)
         }
     },
 
     _handleResult: function(result) {
         this.showErrors(result.json.errors)
         this.setWorking(false)
+    },
+
+    _handleNetError: function(result, err, xhr) {
+        this.showStatus('an error occurred (' + xhr.status + ')', true)
     }
 })