Use vanilla JavaScript instead of jQuery to execute custom code on lo…

…gin form submission
byceps · Sep 24, 2019 · c4abea3 · c4abea3
1 parent 1a9e3a3
commit c4abea3
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 31 deletions.
diff --git a/byceps/blueprints/authentication/templates/authentication/login_form.html b/byceps/blueprints/authentication/templates/authentication/login_form.html
@@ -26,7 +26,7 @@ <h1>{{ title }}</h1>
 
   {%- if login_enabled %}
     {%- if not logged_in %}
-    <form action="{{ url_for('.login') }}" method="post" id="login">
+    <form action="{{ url_for('.login') }}" method="post" id="login-form">
       {%- call form_fieldset() %}
         {{ form_field(form.screen_name, maxlength=40, required='required', autofocus='autofocus') }}
         {{ form_field(form.password, maxlength=40, required='required') }}

diff --git a/byceps/static/behavior/authentication.js b/byceps/static/behavior/authentication.js
@@ -1,39 +1,42 @@
 onDomReady(function() {
 
   // Log in.
-  $('form#login').submit(function() {
-    const login_failed_notice = document.getElementById('login-failed-notice');
-    login_failed_notice.classList.add('hidden');
+  const login_form = document.getElementById('login-form')
+  if (login_form !== null) {
+    login_form.addEventListener('submit', function(event) {
+      event.preventDefault();
 
-    $.ajax({
-      type: 'POST',
-      url: $(this).attr('action'),
-      data: $(this).serializeArray(),
-      success: function(data, text_status, xhr) {
-        // Redirect to location specified via header.
-        var redirect_url = _get_location(xhr);
-        if (redirect_url !== null) {
-          location.href = redirect_url;
-          return;
-        }
+      const login_failed_notice = document.getElementById('login-failed-notice');
+      login_failed_notice.classList.add('hidden');
 
-        // Redirect to referrer if available.
-        var referrer = document.createElement('a');
-        referrer.href = document.referrer;
-        // Exclude selected referrer paths.
-        if (/^\/(authentication|consent)\//.test(referrer.pathname)) {
-          referrer.pathname = '/';
-        }
-        location.href = (referrer.hostname == location.hostname) ? referrer.pathname : '/';
-      },
-      error: function() {
-        login_failed_notice.classList.remove('hidden');
-      },
-      dataType: 'text'
-    });
+      $.ajax({
+        type: 'POST',
+        url: login_form.getAttribute('action'),
+        data: $(this).serializeArray(),
+        success: function(data, text_status, xhr) {
+          // Redirect to location specified via header.
+          var redirect_url = _get_location(xhr);
+          if (redirect_url !== null) {
+            location.href = redirect_url;
+            return;
+          }
 
-    return false;
-  });
+          // Redirect to referrer if available.
+          var referrer = document.createElement('a');
+          referrer.href = document.referrer;
+          // Exclude selected referrer paths.
+          if (/^\/(authentication|consent)\//.test(referrer.pathname)) {
+            referrer.pathname = '/';
+          }
+          location.href = (referrer.hostname == location.hostname) ? referrer.pathname : '/';
+        },
+        error: function() {
+          login_failed_notice.classList.remove('hidden');
+        },
+        dataType: 'text'
+      });
+    });
+  }
 
   // Log out.
   forEach(