forked from Real-Dev-Squad/website-dashboard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
userLogin.js
108 lines (99 loc) · 2.91 KB
/
userLogin.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
const DROPDOWN_OPTIONS = [
{
name: 'Home',
link: 'https://dashboard.realdevsquad.com/',
},
{
name: 'Status',
link: 'https://my.realdevsquad.com/',
},
{
name: 'Profile',
link: 'https://my.realdevsquad.com/profile',
},
{
name: 'Tasks',
link: 'https://my.realdevsquad.com/tasks',
},
{
name: 'Identity',
link: 'https://my.realdevsquad.com/identity',
},
];
async function handleUserSignin() {
try {
const self_user = await getSelfUser();
if (self_user) {
const signInButton = document.querySelector('.sign-in-btn');
signInButton.style.display = 'none';
const dropdown = document.getElementById('dropdown');
const userInfo = document.querySelector('.user-info');
const username = document.getElementById('user-name');
const userImage = document.getElementById('user-img');
const tasksNav = document.getElementById('tasksNav');
username.innerText = `Hello, ${self_user.first_name}!`;
userImage.setAttribute('src', self_user?.picture?.url);
userInfo.classList.add('active');
tasksNav.style.alignItems = 'center';
const dropdownList = createElement({
type: 'ul',
attributes: {
class: 'dropdown-list',
},
});
DROPDOWN_OPTIONS.forEach((option) => {
const listElement = createElement({
type: 'li',
attributes: {
class: 'dropdown-item',
},
});
const anchorElement = createElement({
type: 'a',
attributes: {
class: 'dropdown-link',
},
});
anchorElement.href = `${option.link}`;
anchorElement.innerText = `${option.name}`;
listElement.append(anchorElement);
dropdownList.append(listElement);
});
const horizontalLine = createElement({
type: 'hr',
attributes: {
class: 'line',
},
});
dropdownList.append(horizontalLine);
const signOutElement = createElement({
type: 'li',
attributes: {
class: 'dropdown-item',
id: 'signout-option',
},
});
signOutElement.classList.add('dropdown-link');
dropdownList.append(signOutElement);
signOutElement.innerText = 'Sign Out';
dropdown.append(dropdownList);
userInfo.addEventListener('click', () => {
if (dropdown.classList.contains('active')) {
dropdown.classList.remove('active');
} else {
dropdown.classList.add('active');
}
});
signOutElement.addEventListener('click', () => {
getSelfUser('/auth/signout');
});
}
} catch (error) {}
}
const initializePageListener = () => {
addNavbartoPage().then(handleUserSignin);
};
window.addEventListener('load', initializePageListener);
window.addEventListener('beforeunload', () => {
window.removeEventListener('load', initializePageListener);
});