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