forked from nauvalazhar/lowin
-
Notifications
You must be signed in to change notification settings - Fork 0
/
auth.js
136 lines (114 loc) · 4.41 KB
/
auth.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
var Auth = {
vars: {
lowin: document.querySelector('.lowin'),
lowin_brand: document.querySelector('.lowin-brand'),
lowin_wrapper: document.querySelector('.lowin-wrapper'),
lowin_login: document.querySelector('.lowin-login'),
lowin_wrapper_height: 0,
login_back_link: document.querySelector('.login-back-link'),
forgot_link: document.querySelector('.forgot-link'),
login_link: document.querySelector('.login-link'),
login_btn: document.querySelector('.login-btn'),
register_link: document.querySelector('.register-link'),
password_group: document.querySelector('.password-group'),
password_group_height: 0,
lowin_register: document.querySelector('.lowin-register'),
lowin_footer: document.querySelector('.lowin-footer'),
box: document.getElementsByClassName('lowin-box'),
option: {}
},
register(e) {
Auth.vars.lowin_login.className += ' lowin-animated';
setTimeout(() => {
Auth.vars.lowin_login.style.display = 'none';
}, 500);
Auth.vars.lowin_register.style.display = 'block';
Auth.vars.lowin_register.className += ' lowin-animated-flip';
Auth.setHeight(Auth.vars.lowin_register.offsetHeight + Auth.vars.lowin_footer.offsetHeight);
e.preventDefault();
},
login(e) {
Auth.vars.lowin_register.classList.remove('lowin-animated-flip');
Auth.vars.lowin_register.className += ' lowin-animated-flipback';
Auth.vars.lowin_login.style.display = 'block';
Auth.vars.lowin_login.classList.remove('lowin-animated');
Auth.vars.lowin_login.className += ' lowin-animatedback';
setTimeout(() => {
Auth.vars.lowin_register.style.display = 'none';
}, 500);
setTimeout(() => {
Auth.vars.lowin_register.classList.remove('lowin-animated-flipback');
Auth.vars.lowin_login.classList.remove('lowin-animatedback');
},1000);
Auth.setHeight(Auth.vars.lowin_login.offsetHeight + Auth.vars.lowin_footer.offsetHeight);
e.preventDefault();
},
forgot(e) {
Auth.vars.password_group.classList += ' lowin-animated';
Auth.vars.login_back_link.style.display = 'block';
setTimeout(() => {
Auth.vars.login_back_link.style.opacity = 1;
Auth.vars.password_group.style.height = 0;
Auth.vars.password_group.style.margin = 0;
}, 100);
Auth.vars.login_btn.innerText = 'Forgot Password';
Auth.setHeight(Auth.vars.lowin_wrapper_height - Auth.vars.password_group_height);
Auth.vars.lowin_login.querySelector('form').setAttribute('action', Auth.vars.option.forgot_url);
e.preventDefault();
},
loginback(e) {
Auth.vars.password_group.classList.remove('lowin-animated');
Auth.vars.password_group.classList += ' lowin-animated-back';
Auth.vars.password_group.style.display = 'block';
setTimeout(() => {
Auth.vars.login_back_link.style.opacity = 0;
Auth.vars.password_group.style.height = Auth.vars.password_group_height + 'px';
Auth.vars.password_group.style.marginBottom = 30 + 'px';
}, 100);
setTimeout(() => {
Auth.vars.login_back_link.style.display = 'none';
Auth.vars.password_group.classList.remove('lowin-animated-back');
}, 1000);
Auth.vars.login_btn.innerText = 'Sign In';
Auth.vars.lowin_login.querySelector('form').setAttribute('action', Auth.vars.option.login_url);
Auth.setHeight(Auth.vars.lowin_wrapper_height);
e.preventDefault();
},
setHeight(height) {
Auth.vars.lowin_wrapper.style.minHeight = height + 'px';
},
brand() {
Auth.vars.lowin_brand.classList += ' lowin-animated';
setTimeout(() => {
Auth.vars.lowin_brand.classList.remove('lowin-animated');
}, 1000);
},
init(option) {
Auth.setHeight(Auth.vars.box[0].offsetHeight + Auth.vars.lowin_footer.offsetHeight);
Auth.vars.password_group.style.height = Auth.vars.password_group.offsetHeight + 'px';
Auth.vars.password_group_height = Auth.vars.password_group.offsetHeight;
Auth.vars.lowin_wrapper_height = Auth.vars.lowin_wrapper.offsetHeight;
Auth.vars.option = option;
Auth.vars.lowin_login.querySelector('form').setAttribute('action', option.login_url);
var len = Auth.vars.box.length - 1;
for(var i = 0; i <= len; i++) {
if(i !== 0) {
Auth.vars.box[i].className += ' lowin-flip';
}
}
Auth.vars.forgot_link.addEventListener("click", (e) => {
Auth.forgot(e);
});
Auth.vars.register_link.addEventListener("click", (e) => {
Auth.brand();
Auth.register(e);
});
Auth.vars.login_link.addEventListener("click", (e) => {
Auth.brand();
Auth.login(e);
});
Auth.vars.login_back_link.addEventListener("click", (e) => {
Auth.loginback(e);
});
}
}