Adding upstream version 2.0.0~beta.0+dfsg.upstream/2.0.0_beta.0+dfsgupstream

Signed-off-by: Daniel Baumann <daniel@debian.org>

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>