diff options
Diffstat (limited to 'src/components/APIKeyDialog.vue')
| -rw-r--r-- | src/components/APIKeyDialog.vue | 233 |
1 files changed, 233 insertions, 0 deletions
diff --git a/src/components/APIKeyDialog.vue b/src/components/APIKeyDialog.vue new file mode 100644 index 0000000..a103cf0 --- /dev/null +++ b/src/components/APIKeyDialog.vue @@ -0,0 +1,233 @@ +<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> + <div class="d-flex flex-row align-items-center"> + <div class="col-6"> + <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> + <div class="col-6 ms-3"> + <div class="form-check mb-0"> + <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> + </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 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 dayjs from "dayjs"; +import Datepicker from "@vuepic/vue-datepicker"; +import CopyableInput from "./CopyableInput.vue"; + +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 + * @returns {void} + */ + show() { + this.id = null; + this.key = { + name: "", + expires: this.minDate, + active: 1, + }; + + this.keyaddmodal.show(); + }, + + /** + * Submit data to server + * @returns {Promise<void>} + */ + async submit() { + this.processing = true; + + if (this.noExpire) { + this.key.expires = null; + } + + this.$root.addAPIKey(this.key, async (res) => { + this.keyaddmodal.hide(); + this.processing = false; + if (res.ok) { + this.clearKey = res.key; + this.keymodal.show(); + this.clearForm(); + } else { + this.$root.toastError(res.msg); + } + }); + }, + + /** + * Clear Form inputs + * @returns {void} + */ + clearForm() { + this.key = { + name: "", + expires: this.minDate, + active: 1, + }; + this.noExpire = 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> |