Updated API Keys UI

The UI has now been moved to the settings page.

Signed-off-by: Matthew Nickson <mnickson@sidingsmedia.com>

src/components/APIKeyDialog.vue

@@ -0,0 +1,214 @@
+<template>
+    <form @submit.prevent="submit">
+        <div ref="keyaddmodal" class="modal fade" tabindex="-1" data-bs-backdrop="static">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">
+                            {{ $t("Add API Key") }}
+                        </h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                    </div>
+                    <div class="modal-body">
+                        <!-- Name -->
+                        <div class="mb-3">
+                            <label for="name" class="form-label">{{ $t("Name") }}</label>
+                            <input
+                                id="name" v-model="key.name" type="text" class="form-control"
+                                required
+                            >
+                        </div>
+
+                        <!-- Expiry -->
+                        <div class="my-3">
+                            <label class="form-label">{{ $t("Expiry date") }}</label>
+                            <Datepicker
+                                v-model="key.expires"
+                                :dark="$root.isDark"
+                                :monthChangeOnScroll="false"
+                                :minDate="minDate"
+                                format="yyyy-MM-dd HH:mm"
+                                modelType="yyyy-MM-dd HH:mm:ss"
+                                :required="!noExpire"
+                                :disabled="noExpire"
+                            />
+
+                            <div class="form-check mb-2">
+                                <input
+                                    id="no-expire" v-model="noExpire" class="form-check-input"
+                                    type="checkbox"
+                                >
+                                <label class="form-check-label" for="no-expire">{{
+                                    $t("Don't expire")
+                                }}</label>
+                            </div>
+                        </div>
+
+                        <div class="modal-footer">
+                            <button
+                                id="monitor-submit-btn" class="btn btn-primary" type="submit"
+                                :disabled="processing"
+                            >
+                                {{ $t("Generate") }}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div ref="keymodal" class="modal fade" tabindex="-1" data-bs-backdrop="static">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">
+                            {{ $t("Key Added") }}
+                        </h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                    </div>
+
+                    <div class="modal-body">
+                        <div class="mb-3">
+                            {{ $t("apiKeyAddedMsg") }}
+                        </div>
+                        <div class="mb-3">
+                            <CopyableInput v-model="clearKey" disabled="disabled" />
+                        </div>
+                    </div>
+
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
+                            {{ $t('Continue') }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+</template>
+
+<script lang="ts">
+import { Modal } from "bootstrap";
+import { useToast } from "vue-toastification";
+import dayjs from "dayjs";
+import Datepicker from "@vuepic/vue-datepicker";
+import CopyableInput from "./CopyableInput.vue";
+const toast = useToast();
+
+export default {
+    components: {
+        CopyableInput,
+        Datepicker
+    },
+    props: {},
+    // emits: [ "added" ],
+    data() {
+        return {
+            keyaddmodal: null,
+            keymodal: null,
+            processing: false,
+            key: {},
+            dark: (this.$root.theme === "dark"),
+            minDate: this.$root.date(dayjs()) + " 00:00",
+            clearKey: null,
+            noExpire: false,
+        };
+    },
+
+    mounted() {
+        this.keyaddmodal = new Modal(this.$refs.keyaddmodal);
+        this.keymodal = new Modal(this.$refs.keymodal);
+    },
+
+    methods: {
+        /**
+         * Show modal
+         */
+        show() {
+            this.id = null;
+            this.key = {
+                name: "",
+                expires: this.minDate,
+                active: 1,
+            };
+
+            this.keyaddmodal.show();
+        },
+
+        /** Submit data to server */
+        async submit() {
+            this.processing = true;
+
+            if (this.noExpire) {
+                this.key.expires = null;
+            }
+
+            this.$root.addAPIKey(this.key, async (res) => {
+                this.keyaddmodal.hide();
+                if (res.ok) {
+                    this.clearKey = res.key;
+                    this.keymodal.show();
+                    this.clearForm();
+                } else {
+                    toast.error(res.msg);
+                }
+                this.processing = false;
+            });
+        },
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.dark {
+    .modal-dialog .form-text, .modal-dialog p {
+        color: $dark-font-color;
+    }
+}
+
+.shadow-box {
+    padding: 20px;
+}
+
+textarea {
+    min-height: 150px;
+}
+
+.dark-calendar::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+}
+
+.weekday-picker {
+    display: flex;
+    gap: 10px;
+
+    & > div {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 40px;
+
+        .form-check-inline {
+            margin-right: 0;
+        }
+    }
+}
+
+.day-picker {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+
+    & > div {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 40px;
+
+        .form-check-inline {
+            margin-right: 0;
+        }
+    }
+}
+</style>

src/components/settings/APIKeys.vue

@@ -1,85 +1,83 @@
 <template>
-    <transition name="slide-fade" appear>
+    <div>
+        <div class="add-btn">
+            <button class="btn btn-primary me-2" type="button" @click="$refs.apiKeyDialog.show()">
+                <font-awesome-icon icon="plus" /> {{ $t("Add API Key") }}
+            </button>
+        </div>
+
         <div>
-            <h1 class="mb-3">
+            <span v-if="Object.keys(keyList).length === 0" class="d-flex align-items-center justify-content-center my-3">
-                {{ $t("API Keys") }}
+                {{ $t("No API Keys") }}
-            </h1>
+            </span>
 
-            <div>
+            <div
-                <router-link to="/apikeys/add" class="btn btn-primary mb-3">
+                v-for="(item, index) in keyList"
-                    <font-awesome-icon icon="plus" /> {{ $t("Add API Key") }}
+                :key="index"
-                </router-link>
+                class="item"
-            </div>
+                :class="item.status"
-
+            >
-            <div class="shadow-box">
+                <div class="left-part">
-                <span v-if="Object.keys(keyList).length === 0" class="d-flex align-items-center justify-content-center my-3">
+                    <div
-                    {{ $t("No API Keys") }}
+                        class="circle"
-                </span>
+                    ></div>
-
+                    <div class="info">
-                <div
+                        <div class="title">{{ item.name }}</div>
-                    v-for="(item, index) in keyList"
+                        <div class="status">
-                    :key="index"
+                            {{ $t("apiKey-" + item.status) }}
-                    class="item"
-                    :class="item.status"
-                >
-                    <div class="left-part">
-                        <div
-                            class="circle"
-                        ></div>
-                        <div class="info">
-                            <div class="title">{{ item.name }}</div>
-                            <div class="status">
-                                {{ $t("apiKey-" + item.status) }}
-                            </div>
-                            <div class="date">
-                                {{ $t("Created") }}: {{ item.createdDate }}
-                            </div>
-                            <div class="date">
-                                {{ $t("Expires") }}: {{ item.expires || $t("Never") }}
-                            </div>
                         </div>
-                    </div>
+                        <div class="date">
-
+                            {{ $t("Created") }}: {{ item.createdDate }}
-                    <div class="buttons">
+                        </div>
-                        <div class="btn-group" role="group">
+                        <div class="date">
-                            <button v-if="item.active" class="btn btn-normal" @click="disableDialog(item.id)">
+                            {{ $t("Expires") }}: {{ item.expires || $t("Never") }}
-                                <font-awesome-icon icon="pause" /> {{ $t("Disable") }}
-                            </button>
-
-                            <button v-if="!item.active" class="btn btn-primary" @click="enableKey(item.id)">
-                                <font-awesome-icon icon="play" /> {{ $t("Enable") }}
-                            </button>
-
-                            <button class="btn btn-danger" @click="deleteDialog(item.id)">
-                                <font-awesome-icon icon="trash" /> {{ $t("Delete") }}
-                            </button>
                         </div>
                     </div>
                 </div>
+
+                <div class="buttons">
+                    <div class="btn-group" role="group">
+                        <button v-if="item.active" class="btn btn-normal" @click="disableDialog(item.id)">
+                            <font-awesome-icon icon="pause" /> {{ $t("Disable") }}
+                        </button>
+
+                        <button v-if="!item.active" class="btn btn-primary" @click="enableKey(item.id)">
+                            <font-awesome-icon icon="play" /> {{ $t("Enable") }}
+                        </button>
+
+                        <button class="btn btn-danger" @click="deleteDialog(item.id)">
+                            <font-awesome-icon icon="trash" /> {{ $t("Delete") }}
+                        </button>
+                    </div>
+                </div>
             </div>
-
-            <div class="text-center mt-3" style="font-size: 13px;">
-                <a href="https://github.com/louislam/uptime-kuma/wiki/API-Keys" target="_blank">{{ $t("Learn More") }}</a>
-            </div>
-
-            <Confirm ref="confirmPause" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="disableKey">
-                {{ $t("disableAPIKeyMsg") }}
-            </Confirm>
-
-            <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteKey">
-                {{ $t("deleteAPIKeyMsg") }}
-            </Confirm>
         </div>
-    </transition>
+
+        <div class="text-center mt-3" style="font-size: 13px;">
+            <a href="https://github.com/louislam/uptime-kuma/wiki/API-Keys" target="_blank">{{ $t("Learn More") }}</a>
+        </div>
+
+        <Confirm ref="confirmPause" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="disableKey">
+            {{ $t("disableAPIKeyMsg") }}
+        </Confirm>
+
+        <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteKey">
+            {{ $t("deleteAPIKeyMsg") }}
+        </Confirm>
+
+        <APIKeyDialog ref="apiKeyDialog" />
+    </div>
 </template>
 
 <script>
-import Confirm from "../components/Confirm.vue";
+import APIKeyDialog from "../../components/APIKeyDialog.vue";
+import Confirm from "../Confirm.vue";
 import { useToast } from "vue-toastification";
 const toast = useToast();
 
 export default {
     components: {
+        APIKeyDialog,
         Confirm,
     },
     data() {
@@ -111,7 +109,6 @@ export default {
             this.$root.deleteAPIKey(this.selectedKeyID, (res) => {
                 if (res.ok) {
                     toast.success(res.msg);
-                    this.$router.push("/apikeys");
                 } else {
                     toast.error(res.msg);
                 }
@@ -148,7 +145,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-    @import "../assets/vars.scss";
+    @import "../../assets/vars.scss";
 
     .mobile {
         .item {
@@ -158,6 +155,10 @@ export default {
         }
     }
 
+    .add-btn {
+        padding-top: 20px;
+    }
+
     .item {
         display: flex;
         align-items: center;

src/icon.js

@@ -44,7 +44,6 @@ import {
     faWrench,
     faHeartbeat,
     faFilter,
-    faKey,
     faInfoCircle,
 } from "@fortawesome/free-solid-svg-icons";
 
@@ -90,7 +89,6 @@ library.add(
     faWrench,
     faHeartbeat,
     faFilter,
-    faKey,
     faInfoCircle,
 );
 

src/layouts/Layout.vue

@@ -57,12 +57,6 @@
                                 </router-link>
                             </li>
 
-                            <li>
-                                <router-link to="/apikeys" class="dropdown-item" :class="{ active: $route.path.includes('manage-apikeys') }">
-                                    <font-awesome-icon icon="key" /> {{ $t("API Keys") }}
-                                </router-link>
-                            </li>
-
                             <li>
                                 <router-link to="/settings/general" class="dropdown-item" :class="{ active: $route.path.includes('settings') }">
                                     <font-awesome-icon icon="cog" /> {{ $t("Settings") }}

src/pages/AddAPIKey.vue

@@ -1,199 +0,0 @@
-<template>
-    <transition name="slide-fade" appear>
-        <div>
-            <h1 class="mb-3">{{ $t("Add API Key") }}</h1>
-            <form @submit.prevent="submit">
-                <div class="shadow-box">
-                    <div class="row">
-                        <div class="col-xl-10">
-                            <!-- Title -->
-                            <div class="mb-3">
-                                <label for="name" class="form-label">{{ $t("Name") }}</label>
-                                <input
-                                    id="name" v-model="key.name" type="text" class="form-control"
-                                    required
-                                >
-                            </div>
-
-                            <h2 class="mt-5">{{ $t("Expiry") }}</h2>
-
-                            <!-- Expiry -->
-                            <div class="my-3">
-                                <label class="form-label">{{ $t("Expiry date") }}</label>
-                                <Datepicker
-                                    v-model="key.expires"
-                                    :dark="$root.isDark"
-                                    :monthChangeOnScroll="false"
-                                    :minDate="minDate"
-                                    format="yyyy-MM-dd HH:mm"
-                                    modelType="yyyy-MM-dd HH:mm:ss"
-                                    :required="!noExpire"
-                                    :disabled="noExpire"
-                                />
-
-                                <div class="form-check mb-2">
-                                    <input
-                                        id="no-expire" v-model="noExpire" class="form-check-input"
-                                        type="checkbox"
-                                    >
-                                    <label class="form-check-label" for="no-expire">{{
-                                        $t("Don't expire")
-                                    }}</label>
-                                </div>
-                            </div>
-
-                            <div class="mt-4 mb-1">
-                                <button
-                                    id="monitor-submit-btn" class="btn btn-primary" type="submit"
-                                    :disabled="processing"
-                                >
-                                    {{ $t("Generate") }}
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </form>
-            <Confirm
-                ref="keyAdded"
-                :yes-text="$t('Continue')"
-                :no-text="$t('Add Another')"
-                :title="$t('Key Added')"
-                @yes="postAdd"
-                @no="clearForm"
-            >
-                <p>{{ $t("apiKeyAddedMsg") }}</p>
-                <p>{{ clearKey }}</p>
-            </Confirm>
-        </div>
-    </transition>
-</template>
-
-<script>
-
-import { useToast } from "vue-toastification";
-import dayjs from "dayjs";
-import Datepicker from "@vuepic/vue-datepicker";
-import Confirm from "../components/Confirm.vue";
-
-const toast = useToast();
-
-export default {
-    components: {
-        Confirm,
-        Datepicker
-    },
-
-    data() {
-        return {
-            processing: false,
-            key: {},
-            dark: (this.$root.theme === "dark"),
-            minDate: this.$root.date(dayjs()) + " 00:00",
-            clearKey: null,
-            noExpire: false,
-        };
-    },
-
-    watch: {
-        "$route.fullPath"() {
-            this.init();
-        },
-    },
-
-    mounted() {
-        this.init();
-    },
-
-    methods: {
-        /** Initialise page */
-        init() {
-            this.clearForm();
-        },
-
-        /** Redirect user to apikey list */
-        postAdd() {
-            this.$router.push("/apikeys");
-        },
-
-        /** Clear the form */
-        clearForm() {
-            this.key = {
-                name: "",
-                expires: this.minDate,
-                active: 1,
-            };
-            this.noExpire = false;
-        },
-
-        /** Submit data to server */
-        async submit() {
-            this.processing = true;
-
-            if (this.noExpire) {
-                this.key.expires = null;
-            }
-
-            this.$root.addAPIKey(this.key, async (res) => {
-                if (res.ok) {
-                    this.clearKey = res.key;
-                    this.$refs.keyAdded.show();
-                    this.clearForm();
-
-                } else {
-                    toast.error(res.msg);
-                }
-                this.processing = false;
-            });
-        },
-    },
-};
-</script>
-
-<style lang="scss" scoped>
-.shadow-box {
-    padding: 20px;
-}
-
-textarea {
-    min-height: 150px;
-}
-
-.dark-calendar::-webkit-calendar-picker-indicator {
-    filter: invert(1);
-}
-
-.weekday-picker {
-    display: flex;
-    gap: 10px;
-
-    & > div {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: 40px;
-
-        .form-check-inline {
-            margin-right: 0;
-        }
-    }
-}
-
-.day-picker {
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-
-    & > div {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: 40px;
-
-        .form-check-inline {
-            margin-right: 0;
-        }
-    }
-}
-
-</style>

src/pages/Settings.vue

@@ -7,9 +7,6 @@
             <router-link to="/maintenance" class="nav-link">
                 <font-awesome-icon icon="wrench" /> {{ $t("Maintenance") }}
             </router-link>
-            <router-link to="/apikeys" class="nav-link" :class="{ active: $route.path.includes('manage-apikeys') }">
-                <font-awesome-icon icon="key" /> {{ $t("API Keys") }}
-            </router-link>
         </div>
 
         <h1 v-show="show" class="mb-3">
@@ -110,6 +107,9 @@ export default {
                 security: {
                     title: this.$t("Security"),
                 },
+                "api-keys": {
+                    title: this.$t("API Keys")
+                },
                 proxies: {
                     title: this.$t("Proxies"),
                 },

src/router.js

@@ -18,8 +18,7 @@ import NotFound from "./pages/NotFound.vue";
 import DockerHosts from "./components/settings/Docker.vue";
 import MaintenanceDetails from "./pages/MaintenanceDetails.vue";
 import ManageMaintenance from "./pages/ManageMaintenance.vue";
-import ManageAPIKeys from "./pages/ManageAPIKeys.vue";
+import APIKeys from "./components/settings/APIKeys.vue";
-import AddAPIKey from "./pages/AddAPIKey.vue";
 import Plugins from "./components/settings/Plugins.vue";
 
 // Settings - Sub Pages
@@ -115,6 +114,10 @@ const routes = [
                                 path: "security",
                                 component: Security,
                             },
+                            {
+                                path: "api-keys",
+                                component: APIKeys,
+                            },
                             {
                                 path: "proxies",
                                 component: Proxies,
@@ -157,14 +160,6 @@ const routes = [
                         path: "/maintenance/edit/:id",
                         component: EditMaintenance,
                     },
-                    {
-                        path: "/apikeys",
-                        component: ManageAPIKeys
-                    },
-                    {
-                        path: "/apikeys/add",
-                        component: AddAPIKey
-                    },
                 ],
             },
         ],