[Status Page] Improved entry page

This commit is contained in:
Louis Lam 2022-03-17 22:44:47 +08:00
parent 502c7f87e7
commit 719a136d1e
4 changed files with 34 additions and 19 deletions

View file

@ -201,8 +201,8 @@ exports.entryPage = "dashboard";
// Entry Page // Entry Page
app.get("/", async (_request, response) => { app.get("/", async (_request, response) => {
if (exports.entryPage === "statusPage") { if (exports.entryPage && exports.entryPage.startsWith("statusPage-")) {
response.redirect("/status"); response.redirect("/status/" + exports.entryPage.replace("statusPage-", ""));
} else { } else {
response.redirect("/dashboard"); response.redirect("/dashboard");
} }

View file

@ -62,31 +62,31 @@
<div class="form-check"> <div class="form-check">
<input <input
id="entryPageYes" id="entryPageDashboard"
v-model="settings.entryPage" v-model="settings.entryPage"
class="form-check-input" class="form-check-input"
type="radio" type="radio"
name="statusPage" name="entryPage"
value="dashboard" value="dashboard"
required required
/> />
<label class="form-check-label" for="entryPageYes"> <label class="form-check-label" for="entryPageDashboard">
{{ $t("Dashboard") }} {{ $t("Dashboard") }}
</label> </label>
</div> </div>
<div class="form-check"> <div v-for="statusPage in $root.statusPageList" :key="statusPage.id" class="form-check">
<input <input
id="entryPageNo" :id="'status-page-' + statusPage.id"
v-model="settings.entryPage" v-model="settings.entryPage"
class="form-check-input" class="form-check-input"
type="radio" type="radio"
name="statusPage" name="entryPage"
value="statusPage" :value="'statusPage-' + statusPage.slug"
required required
/> />
<label class="form-check-label" for="entryPageNo"> <label class="form-check-label" :for="'status-page-' + statusPage.id">
{{ $t("Status Page") }} {{ $t("Status Page") }} - {{ statusPage.title }}
</label> </label>
</div> </div>
</div> </div>

View file

@ -6,14 +6,21 @@
</h1> </h1>
<div class="shadow-box"> <div class="shadow-box">
<div class="my-3"> <div class="mb-3">
<label for="name" class="form-label">{{ $t("Status Page Name") }}</label> <label for="name" class="form-label">{{ $t("Name") }}</label>
<input id="name" v-model="statusPage.basic_auth_user" type="text" class="form-control"> <input id="name" v-model="statusPage.title" type="text" class="form-control">
</div> </div>
<div class="my-3"> <div class="mb-4">
<label for="basicauth" class="form-label">{{ $t("Password") }}</label> <label for="slug" class="form-label">{{ $t("Slug") }}</label>
<input id="basicauth-pass" v-model="statusPage.basic_auth_pass" type="password" autocomplete="new-password" class="form-control" :placeholder="$t('Password')"> <div class="input-group">
<span id="basic-addon3" class="input-group-text">/status/</span>
<input id="slug" v-model="statusPage.slug" type="text" class="form-control">
</div>
</div>
<div class="mt-2 mb-1">
<button id="monitor-submit-btn" class="btn btn-primary w-100" type="submit" :disabled="processing">{{ $t("Next") }}</button>
</div> </div>
</div> </div>
</div> </div>
@ -29,9 +36,15 @@ export default {
return { return {
statusPage: { statusPage: {
} },
processing: false,
}; };
} }
}; };
</script> </script>
<style lang="scss" scoped>
.shadow-box {
padding: 20px;
}
</style>

View file

@ -11,7 +11,9 @@
<div class="shadow-box"> <div class="shadow-box">
<template v-if="$root.statusPageListLoaded"> <template v-if="$root.statusPageListLoaded">
<span v-if="$root.statusPageList.length === 0">No status pages</span> <span v-if="$root.statusPageList.length === 0" class="d-flex align-items-center justify-content-center my-3 spinner">
No status pages
</span>
<router-link v-for="statusPage in $root.statusPageList" :key="statusPage.slug" :to="'/status/' + statusPage.slug" class="item"> <router-link v-for="statusPage in $root.statusPageList" :key="statusPage.slug" :to="'/status/' + statusPage.slug" class="item">
<img :src="icon(statusPage.icon)" alt class="logo me-2" /> <img :src="icon(statusPage.icon)" alt class="logo me-2" />