JAVASCRIPT 6
Login.js Guest on 12th September 2020 09:30:32 PM
  1. //== Class Definition
  2. var SnippetLogin = function() {
  3.  
  4.     var login = $('#m_login');
  5.  
  6.     var showErrorMsg = function(form, type, msg) {
  7.         var alert = $('<div class="m-alert m-alert--outline alert alert-' + type + ' alert-dismissible" role="alert">\
  8.                         <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>\
  9.                         <span></span>\
  10.                 </div>');
  11.  
  12.         form.find('.alert').remove();
  13.         alert.prependTo(form);
  14.         alert.animateClass('fadeIn animated');
  15.         alert.find('span').html(msg);
  16.     }
  17.  
  18.     //== Private Functions
  19.  
  20.     var displaySignUpForm = function() {
  21.         login.removeClass('m-login--forget-password');
  22.         login.removeClass('m-login--signin');
  23.  
  24.         login.addClass('m-login--signup');
  25.         login.find('.m-login__signup').animateClass('flipInX animated');
  26.     }
  27.  
  28.     var displaySignInForm = function() {
  29.         login.removeClass('m-login--forget-password');
  30.         login.removeClass('m-login--signup');
  31.  
  32.         login.addClass('m-login--signin');
  33.         login.find('.m-login__signin').animateClass('flipInX animated');
  34.     }
  35.  
  36.     var displayForgetPasswordForm = function() {
  37.         login.removeClass('m-login--signin');
  38.         login.removeClass('m-login--signup');
  39.  
  40.         login.addClass('m-login--forget-password');
  41.         login.find('.m-login__forget-password').animateClass('flipInX animated');
  42.     }
  43.  
  44.     var handleFormSwitch = function() {
  45.         $('#m_login_forget_password').click(function(e) {
  46.             e.preventDefault();
  47.             displayForgetPasswordForm();
  48.         });
  49.  
  50.         $('#m_login_forget_password_cancel').click(function(e) {
  51.             e.preventDefault();
  52.             displaySignInForm();
  53.         });
  54.  
  55.         $('#m_login_signup').click(function(e) {
  56.             e.preventDefault();
  57.             displaySignUpForm();
  58.         });
  59.  
  60.         $('#m_login_signup_cancel').click(function(e) {
  61.             e.preventDefault();
  62.             displaySignInForm();
  63.         });
  64.     }
  65.  
  66.     var handleSignInFormSubmit = function() {
  67.         $('#m_login_signin_submit').click(function(e) {
  68.             e.preventDefault();
  69.             var btn = $(this);
  70.             var form = $(this).closest('form');
  71.  
  72.             form.validate({
  73.                 rules: {
  74.                     email: {
  75.                         required: true,
  76.                         email: true
  77.                     },
  78.                     password: {
  79.                         required: true
  80.                     }
  81.                 }
  82.             });
  83.  
  84.             if (!form.valid()) {
  85.                 return;
  86.             }
  87.  
  88.             btn.addClass('m-loader m-loader--right m-loader--light').attr('disabled', true);
  89.  
  90.             form.ajaxSubmit({
  91.                 url: '',
  92.                 success: function(response, status, xhr, $form) {
  93.                         // similate 2s delay
  94.                         setTimeout(function() {
  95.                             btn.removeClass('m-loader m-loader--right m-loader--light').attr('disabled', false);
  96.                             showErrorMsg(form, 'danger', 'Incorrect username or password. Please try again.');
  97.                     }, 2000);
  98.                 }
  99.             });
  100.         });
  101.     }
  102.  
  103.     var handleSignUpFormSubmit = function() {
  104.         $('#m_login_signup_submit').click(function(e) {
  105.             e.preventDefault();
  106.  
  107.             var btn = $(this);
  108.             var form = $(this).closest('form');
  109.  
  110.             form.validate({
  111.                 rules: {
  112.                     fullname: {
  113.                         required: true
  114.                     },
  115.                     email: {
  116.                         required: true,
  117.                         email: true
  118.                     },
  119.                     password: {
  120.                         required: true
  121.                     },
  122.                     rpassword: {
  123.                         required: true
  124.                     },
  125.                     agree: {
  126.                         required: true
  127.                     }
  128.                 }
  129.             });
  130.  
  131.             if (!form.valid()) {
  132.                 return;
  133.             }
  134.  
  135.             btn.addClass('m-loader m-loader--right m-loader--light').attr('disabled', true);
  136.  
  137.             form.ajaxSubmit({
  138.                 url: '',
  139.                 success: function(response, status, xhr, $form) {
  140.                         // similate 2s delay
  141.                         setTimeout(function() {
  142.                             btn.removeClass('m-loader m-loader--right m-loader--light').attr('disabled', false);
  143.                             form.clearForm();
  144.                             form.validate().resetForm();
  145.  
  146.                             // display signup form
  147.                             displaySignInForm();
  148.                             var signInForm = login.find('.m-login__signin form');
  149.                             signInForm.clearForm();
  150.                             signInForm.validate().resetForm();
  151.  
  152.                             showErrorMsg(signInForm, 'success', 'Thank you. To complete your registration please check your email.');
  153.                         }, 2000);
  154.                 }
  155.             });
  156.         });
  157.     }
  158.  
  159.     var handleForgetPasswordFormSubmit = function() {
  160.         $('#m_login_forget_password_submit').click(function(e) {
  161.             e.preventDefault();
  162.  
  163.             var btn = $(this);
  164.             var form = $(this).closest('form');
  165.  
  166.             form.validate({
  167.                 rules: {
  168.                     email: {
  169.                         required: true,
  170.                         email: true
  171.                     }
  172.                 }
  173.             });
  174.  
  175.             if (!form.valid()) {
  176.                 return;
  177.             }
  178.  
  179.             btn.addClass('m-loader m-loader--right m-loader--light').attr('disabled', true);
  180.  
  181.             form.ajaxSubmit({
  182.                 url: '',
  183.                 success: function(response, status, xhr, $form) {
  184.                         // similate 2s delay
  185.                         setTimeout(function() {
  186.                                 btn.removeClass('m-loader m-loader--right m-loader--light').attr('disabled', false); // remove
  187.                             form.clearForm(); // clear form
  188.                             form.validate().resetForm(); // reset validation states
  189.  
  190.                             // display signup form
  191.                             displaySignInForm();
  192.                             var signInForm = login.find('.m-login__signin form');
  193.                             signInForm.clearForm();
  194.                             signInForm.validate().resetForm();
  195.  
  196.                             showErrorMsg(signInForm, 'success', 'Cool! Password recovery instruction has been sent to your email.');
  197.                         }, 2000);
  198.                 }
  199.             });
  200.         });
  201.     }
  202.  
  203.     //== Public Functions
  204.     return {
  205.         // public functions
  206.         init: function() {
  207.             handleFormSwitch();
  208.             handleSignInFormSubmit();
  209.             handleSignUpFormSubmit();
  210.             handleForgetPasswordFormSubmit();
  211.         }
  212.     };
  213. }();
  214.  
  215. //== Class Initialization
  216. jQuery(document).ready(function() {
  217.     SnippetLogin.init();
  218. });

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.