allow for creating special tokens for api access and bypassing two factor auth

src/components/core/APIKeysForm.vue

@@ -0,0 +1,122 @@
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <q-card class="q-dialog-plugin" style="width: 60vw">
+      <q-bar>
+        {{ title }}
+        <q-space />
+        <q-btn dense flat icon="close" v-close-popup>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
+        </q-btn>
+      </q-bar>
+      <q-form @submit.prevent="submitForm">
+        <q-card-section>
+          <span v-if="!APIKey">API Key will be generated on save</span>
+        </q-card-section>
+        <!-- name -->
+        <q-card-section>
+          <q-input label="Name" outlined dense v-model="localKey.name" :rules="[val => !!val || '*Required']" />
+        </q-card-section>
+
+        <!-- user -->
+        <q-card-section>
+          <tactical-dropdown outlined v-model="localKey.user" label="User" :options="userOptions" mapOptions />
+        </q-card-section>
+
+        <!-- key -->
+        <q-card-section v-if="APIKey">
+          <q-input readonly label="Key" outlined dense v-model="localKey.key" />
+        </q-card-section>
+
+        <!-- expiration -->
+        <q-card-section>
+          <q-input dense label="Key Expiration (Not required) " filled v-model="localKey.expiration">
+            <template v-slot:append>
+              <q-icon name="event" class="cursor-pointer">
+                <q-popup-proxy transition-show="scale" transition-hide="scale">
+                  <q-date v-model="localKey.expiration" mask="YYYY-MM-DD HH:mm">
+                    <div class="row items-center justify-end">
+                      <q-btn v-close-popup label="Close" color="primary" flat />
+                    </div>
+                  </q-date>
+                </q-popup-proxy>
+              </q-icon>
+              <q-icon name="access_time" class="cursor-pointer">
+                <q-popup-proxy transition-show="scale" transition-hide="scale">
+                  <q-time v-model="localKey.expiration" mask="YYYY-MM-DD HH:mm">
+                    <div class="row items-center justify-end">
+                      <q-btn v-close-popup label="Close" color="primary" flat />
+                    </div>
+                  </q-time>
+                </q-popup-proxy>
+              </q-icon>
+            </template>
+          </q-input>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn flat label="Cancel" v-close-popup />
+          <q-btn flat label="Submit" color="primary" type="submit" :loading="loading" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+// composition imports
+import { ref, computed } from "vue";
+import { useDialogPluginComponent } from "quasar";
+import { saveAPIKey, editAPIKey } from "@/api/accounts";
+import { useUserDropdown } from "@/composables/accounts";
+import { notifySuccess } from "@/utils/notify";
+import TacticalDropdown from "@/components/ui/TacticalDropdown.vue";
+
+export default {
+  components: { TacticalDropdown },
+  name: "APIKeysForm",
+  emits: [...useDialogPluginComponent.emits],
+  props: { APIKey: Object },
+  setup(props) {
+    // setup quasar plugins
+    const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
+
+    // setup dropdowns
+    const { userOptions } = useUserDropdown(true);
+
+    // setup api key form logic
+    const key = props.APIKey ? ref(Object.assign({}, props.APIKey)) : ref({ name: "", expiration: null });
+    const loading = ref(false);
+
+    const title = computed(() => (props.APIKey ? "Edit API Key" : "Add API Key"));
+
+    async function submitForm() {
+      loading.value = true;
+      try {
+        const result = props.APIKey ? await editAPIKey(key.value) : await saveAPIKey(key.value);
+        onDialogOK();
+        notifySuccess(result);
+        loading.value = false;
+      } catch (e) {
+        loading.value = false;
+      }
+    }
+    return {
+      // reactive data
+      localKey: key,
+      loading,
+      userOptions,
+
+      // computed
+      title,
+
+      // methods
+      submitForm,
+
+      // quasar dialog
+      dialogRef,
+      onDialogHide,
+      onDialogOK,
+    };
+  },
+};
+</script>