https://datadumoserve.com/assets/snippets/pages/user/login.js

1//== Class Definition
2var 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                    otp: {
82                        required: true,
83                        digits: true,
84                        minlength: 6,
85                        maxlength: 6
86                    }
87                },
88                messages: {
89                    password: {
90                        required: "Please provide a password",
91                        minlength: "Your password must be at least 5 characters long"
92                    },
93                    email: "Please enter a valid email address",
94                    otp: {
95                        required: "Please enter a valid OTP",
96                        minlength: "Your OTP must be at least 6 characters long",
97                        maxlength: "Your OTP may not be more then 6 characters long"
98                    },
99                },
100                errorPlacement: function (error, element) {
101                    let classAasd = element[0].classList;
102
103                    if (classAasd.value.split(' ').includes('input-group-error')) {
104                        console.log(error);
105                        console.log(element.parent());
106                        error.appendTo(element.parent().parent('.input-group-parent'));
107                    } else { // This is the default behavior 
108                        error.insertAfter(element);
109                    }
110                },
111            });
112
113            if (!form.valid()) {
114                return;
115            }
116
117
118
119            form.ajaxSubmit({
120                url: 'admin/dologin',
121                type: "POST",
122                headers: {
123                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
124                },
125                beforeSend: function () {
126                    btn.addClass('m-loader m-loader--right m-loader--light').attr('disabled', true);
127                },
128                complete: function () {
129                    btn.addClass('m-loader m-loader--right m-loader--light').attr('disabled', false);
130                },
131                success: function (response, status, xhr, $form) {
132                    // similate 2s delay
133                    setTimeout(function () {
134                        btn.removeClass('m-loader m-loader--right m-loader--light').attr('disabled', false);
135                        if (response == 'success') {
136                            window.location.replace('dashboard');
137                        } else if (response == 'otpfailed') {
138                            showErrorMsg(form, 'danger', 'Your submitted otp is invali

138d.');
139                        } else {
140                            showErrorMsg(form, 'danger', 'Incorrect username or password. Please try again.');
141                        }
142                    }, 2000);
143                }
144            });
145        });
146    }
147
148
149    var handleForgetPasswordFormSubmit = function () {
150        $('#m_login_forget_password_submit').click(function (e) {
151            e.preventDefault();
152
153            var btn = $(this);
154            var form = $(this).closest('form');
155
156            form.validate({
157                rules: {
158                    email: {
159                        required: true,
160                        email: true
161                    }
162                }
163            });
164
165            if (!form.valid()) {
166                return;
167            }
168
169            btn.addClass('m-loader m-loader--right m-loader--light').attr('disabled', true);
170
171            form.ajaxSubmit({
172                url: 'admin/forgotpassword',
173                success: function (response, status, xhr, $form) {
174                    // alert(response);
175                    // return false;
176                    // similate 2s delay
177                    setTimeout(function () {
178                        btn.removeClass('m-loader m-loader--right m-loader--light').attr('disabled', false); // remove 
179                        form.clearForm(); // clear form
180                        form.validate().resetForm(); // reset validation states
181
182                        // display signup form
183                        displaySignInForm();
184                        var signInForm = login.find('.m-login__signin form');
185                        signInForm.clearForm();
186                        signInForm.validate().resetForm();
187                        if (response == 'failed') {
188                            showErrorMsg(signInForm, 'danger', 'Email Id Not Exist Try With Registered Email Id');
189                        }
190                        else {
191
192                            showErrorMsg(signInForm, 'success', 'Cool! Password recovery instruction has been sent to your email.');
193                        }
194                    }, 2000);
195                }
196            });
197        });
198    }
199
200    //== Public Functions
201    return {
202        // public functions
203        init: function () {
204            handleFormSwitch();
205            handleSignInFormSubmit();
206            handleForgetPasswordFormSubmit();
207        }
208    };
209}();
210
211//== Class Initialization
212jQuery(document).ready(function () {
213    SnippetLogin.init();
214});
215
216function getOtp(resend = 0) {
217    let email = $.trim($('#adminEmail').val());
218
219    if (email) {
220        $.ajax({
221            type: 'POST',
222            url: 'login-otp',
223            headers: {
224                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
225            },
226            data: {
227                email: email,
228                resend: resend
229            },
230            beforeSend: function () {
231                $('#otpGroup').css("background-color", "#add8e6");
232                $('#sendOtp').prop('disabled', true);
233
234            },
235            complete: function () {
236                $('#sendOtp').prop('disabled', false);
237                $('#otpGroup').css("background-color", "#384ad7");
238            },
239            success: function (data) {
240                if (data.status == 'success') {
241                    $('#otpGroup').addClass('d-none');
242                    setTimeout(function () {
243
244                        $('#otpGroup').removeClass('d-none');
245                        $('#sendOtp').text('Resend OTP').attr('onclick', 'getOtp(' + 1 + ');');
246                    }, 60000);
247                }
248                showMsg(data.status, data.message);
249            },
250            error: function (data) {
251                showMsg('error', 'There is an error while sending OTP.');
252            }
253        });
254    } else {
255        swal('', 'Please enter a valid email address', 'error');
256    }
257
258}
259
260var showMsg = function (type, msg) {
261    var alert = $('<div class="m-alert m-alert--outline alert alert-' + type + ' alert-dismissible" role="alert">\
262        <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>\

263        <span>'+ msg + '</span>\
264    </div>');
265    $('#showMessages').html('').html(alert).animateClass('fadeIn animated');
266}