mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-11-23 23:04:04 +00:00
Merge pull request #1229 from Computroniks/#1209-Logout-button-in-navbar
Add #1209: logout button in navbar
This commit is contained in:
Louis Lam
GitHub
commit
10f6a3c4f5
6 changed files with 127 additions and 20 deletions
|
|
@ -87,5 +87,7 @@ module.exports.autoStart = async (token) => {
|
|||
|
||||
module.exports.stop = async () => {
|
||||
console.log("Stop cloudflared");
|
||||
if (cloudflared) {
|
||||
cloudflared.stop();
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<!-- Change Password -->
|
||||
<template v-if="!settings.disableAuth">
|
||||
<p>
|
||||
{{ $t("Current User") }}: <strong>{{ username }}</strong>
|
||||
{{ $t("Current User") }}: <strong>{{ $root.username }}</strong>
|
||||
<button v-if="! settings.disableAuth" id="logout-btn" class="btn btn-danger ms-4 me-2 mb-2" @click="$root.logout">{{ $t("Logout") }}</button>
|
||||
</p>
|
||||
|
||||
|
|
@ -269,7 +269,6 @@ export default {
|
|||
|
||||
data() {
|
||||
return {
|
||||
username: "",
|
||||
invalidPassword: false,
|
||||
password: {
|
||||
currentPassword: "",
|
||||
|
|
@ -297,10 +296,6 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.loadUsername();
|
||||
},
|
||||
|
||||
methods: {
|
||||
savePassword() {
|
||||
if (this.password.newPassword !== this.password.repeatNewPassword) {
|
||||
|
|
@ -319,14 +314,6 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
loadUsername() {
|
||||
const jwtPayload = this.$root.getJWTPayload();
|
||||
|
||||
if (jwtPayload) {
|
||||
this.username = jwtPayload.username;
|
||||
}
|
||||
},
|
||||
|
||||
disableAuth() {
|
||||
this.settings.disableAuth = true;
|
||||
|
||||
|
|
|
|||
|
|
@ -34,11 +34,13 @@ import {
|
|||
faAward,
|
||||
faLink,
|
||||
faChevronDown,
|
||||
faSignOutAlt,
|
||||
faPen,
|
||||
faExternalLinkSquareAlt,
|
||||
faSpinner,
|
||||
faUndo,
|
||||
faPlusCircle,
|
||||
faAngleDown,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
library.add(
|
||||
|
|
@ -72,11 +74,13 @@ library.add(
|
|||
faAward,
|
||||
faLink,
|
||||
faChevronDown,
|
||||
faSignOutAlt,
|
||||
faPen,
|
||||
faExternalLinkSquareAlt,
|
||||
faSpinner,
|
||||
faUndo,
|
||||
faPlusCircle,
|
||||
faAngleDown,
|
||||
);
|
||||
|
||||
export { FontAwesomeIcon };
|
||||
|
|
|
|||
|
|
@ -32,10 +32,28 @@
|
|||
</router-link>
|
||||
</li>
|
||||
<li v-if="$root.loggedIn" class="nav-item">
|
||||
<router-link to="/settings" class="nav-link" :class="{ active: $route.path.includes('settings') }">
|
||||
<div class="dropdown dropdown-profile-pic">
|
||||
<div type="button" class="nav-link" data-bs-toggle="dropdown">
|
||||
<div class="profile-pic">{{ $root.usernameFirstChar }}</div>
|
||||
<font-awesome-icon icon="angle-down" />
|
||||
</div>
|
||||
<ul class="dropdown-menu">
|
||||
<li><span class="dropdown-item-text">Signed in as <strong>{{ $root.username }}</strong></span></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li>
|
||||
<router-link to="/settings" class="dropdown-item" :class="{ active: $route.path.includes('settings') }">
|
||||
<font-awesome-icon icon="cog" /> {{ $t("Settings") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="$root.loggedIn && $root.storage().token !== 'autoLogin'">
|
||||
<button class="dropdown-item" @click="$root.logout">
|
||||
<font-awesome-icon icon="sign-out-alt" />
|
||||
{{ $t("Logout") }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
|
|
@ -192,6 +210,79 @@ main {
|
|||
z-index: 99999;
|
||||
}
|
||||
|
||||
// Profile Pic Button with Dropdown
|
||||
.dropdown-profile-pic {
|
||||
user-select: none;
|
||||
|
||||
.nav-link {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
background-color: rgba(200, 200, 200, 0.2);
|
||||
padding: 0.5rem 0.8rem;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
transition: all 0.2s;
|
||||
padding-left: 0;
|
||||
margin-top: 8px !important;
|
||||
border-radius: 20px;
|
||||
|
||||
.dropdown-divider {
|
||||
margin: 0;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.4);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dropdown-item-text {
|
||||
font-size: 14px;
|
||||
padding-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 0.7rem 1rem;
|
||||
}
|
||||
|
||||
.dark & {
|
||||
background-color: $dark-bg;
|
||||
color: $dark-font-color;
|
||||
border-color: $dark-border-color;
|
||||
|
||||
.dropdown-item {
|
||||
color: $dark-font-color;
|
||||
|
||||
&.active {
|
||||
color: $dark-font-color2;
|
||||
background-color: $highlight !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $dark-bg2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-pic {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
background-color: $primary;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 5px;
|
||||
border-radius: 50rem;
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
header {
|
||||
background-color: $dark-header-bg;
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ export default {
|
|||
connectCount: 0,
|
||||
initedSocketIO: false,
|
||||
},
|
||||
username: null,
|
||||
remember: (localStorage.remember !== "0"),
|
||||
allowLoginDialog: false, // Allowed to show login dialog, but "loggedIn" have to be true too. This exists because prevent the login dialog show 0.1s in first before the socket server auth-ed.
|
||||
loggedIn: false,
|
||||
|
|
@ -102,6 +103,7 @@ export default {
|
|||
|
||||
socket.on("autoLogin", (monitorID, data) => {
|
||||
this.loggedIn = true;
|
||||
this.username = "No Auth";
|
||||
this.storage().token = "autoLogin";
|
||||
this.allowLoginDialog = false;
|
||||
});
|
||||
|
|
@ -233,7 +235,6 @@ export default {
|
|||
if (token !== "autoLogin") {
|
||||
this.loginByToken(token);
|
||||
} else {
|
||||
|
||||
// Timeout if it is not actually auto login
|
||||
setTimeout(() => {
|
||||
if (! this.loggedIn) {
|
||||
|
|
@ -241,7 +242,6 @@ export default {
|
|||
this.$root.storage().removeItem("token");
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
}
|
||||
} else {
|
||||
this.allowLoginDialog = true;
|
||||
|
|
@ -305,6 +305,7 @@ export default {
|
|||
this.storage().token = res.token;
|
||||
this.socket.token = res.token;
|
||||
this.loggedIn = true;
|
||||
this.username = this.getJWTPayload()?.username;
|
||||
|
||||
// Trigger Chrome Save Password
|
||||
history.pushState({}, "");
|
||||
|
|
@ -322,6 +323,7 @@ export default {
|
|||
this.logout();
|
||||
} else {
|
||||
this.loggedIn = true;
|
||||
this.username = this.getJWTPayload()?.username;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -331,6 +333,7 @@ export default {
|
|||
this.storage().removeItem("token");
|
||||
this.socket.token = null;
|
||||
this.loggedIn = false;
|
||||
this.username = null;
|
||||
this.clearData();
|
||||
},
|
||||
|
||||
|
|
@ -398,6 +401,14 @@ export default {
|
|||
|
||||
computed: {
|
||||
|
||||
usernameFirstChar() {
|
||||
if (typeof this.username == "string" && this.username.length >= 1) {
|
||||
return this.username.charAt(0).toUpperCase();
|
||||
} else {
|
||||
return "🐻";
|
||||
}
|
||||
},
|
||||
|
||||
lastHeartbeatList() {
|
||||
let result = {};
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,14 @@
|
|||
{{ item.title }}
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<!-- Logout Button -->
|
||||
<a v-if="$root.isMobile && $root.loggedIn && $root.storage().token !== 'autoLogin'" class="logout" @click.prevent="$root.logout">
|
||||
<div class="menu-item">
|
||||
<font-awesome-icon icon="sign-out-alt" />
|
||||
{{ $t("Logout") }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="settings-content col-lg-9 col-md-7">
|
||||
<div v-if="currentPage" class="settings-content-header">
|
||||
|
|
@ -233,4 +241,8 @@ footer {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logout {
|
||||
color: $danger !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue