Added logout button

This commit is contained in:
mrfry 2021-02-16 10:10:52 +01:00
parent ca12511e6d
commit 0e59785c3c
2 changed files with 80 additions and 46 deletions

View file

@ -115,43 +115,61 @@ export default function Layout({
</a>
</div>
<div className="userStatus">
<div className="msgs">
<div
onClick={() => {
if (!userSpecificMotd) {
return
}
setShowMotdModal(true)
if (userSpecificMotd.seen) {
return
}
fetch(constants.apiUrl + 'infos', {
method: 'POST',
credentials: 'include',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
userSpecificMotdSeen: true,
}),
})
.then((resp) => {
return resp.json()
})
.then(() => {
refetchGlobalData()
})
}}
style={{ cursor: userSpecificMotd ? 'pointer' : 'default' }}
title={
userSpecificMotd && !userSpecificMotd.seen
? "You've got Mail!"
: ''
}
>
{userSpecificMotd && !userSpecificMotd.seen ? '📬' : '📭'}
</div>
<div title="User ID">UID: {userId || '...'}</div>
</div>
<div
className="logout"
onClick={() => {
if (!userSpecificMotd) {
return
}
setShowMotdModal(true)
if (userSpecificMotd.seen) {
return
}
fetch(constants.apiUrl + 'infos', {
method: 'POST',
fetch(constants.apiUrl + 'logout', {
method: 'GET',
credentials: 'include',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
userSpecificMotdSeen: true,
}),
})
.then((resp) => {
return resp.json()
})
.then(() => {
refetchGlobalData()
})
location.reload()
}}
style={{ cursor: userSpecificMotd ? 'pointer' : 'default' }}
title={
userSpecificMotd && !userSpecificMotd.seen
? "You've got Mail!"
: ''
}
>
{userSpecificMotd && !userSpecificMotd.seen ? '📬' : '📭'}
Logout
</div>
<div>User ID: {userId || '...'}</div>
</div>
{showMotdModal ? (
<Modal

View file

@ -37,6 +37,11 @@ a {
overflow: auto;
}
.content {
margin-left: 200px;
padding: 1px 16px;
}
.sidebar a {
display: block;
color: black;
@ -55,26 +60,6 @@ a {
color: white;
}
.userStatus {
display: flex;
align-items: center;
margin-bottom: 15px;
margin-top: auto;
}
.userStatus :first-child {
font-size: 35px;
}
.userStatus > div {
margin: 3px 5px;
}
.content {
margin-left: 200px;
padding: 1px 16px;
}
.menuicon div {
height: 5px;
background-color: var(--bright-color);
@ -259,3 +244,34 @@ select {
select:hover {
border: 1px solid #99f;
}
.userStatus {
display: flex;
margin-top: auto;
margin-bottom: 20px;
align-items: center;
justify-content: space-between;
}
.msgs {
display: flex;
align-items: center;
}
.logout {
padding: 7px;
cursor: pointer;
}
.logout:hover {
color: #fff;
}
.msgs :first-child {
font-size: 35px;
}
.msgs > div {
margin: 0px 5px;
}