Resolve "Adapt UI to new Resoruce creation flow"

Closes #100 (closed)

src/components/modals/ReasonModal.vue

+<script setup lang="ts">
+import BootstrapModal from "@/components/modals/BootstrapModal.vue";
+import { reactive, ref } from "vue";
+
+type reasonfor = "request" | "rejection";
+
+const props = defineProps<{
+  modalId: string;
+  modalLabel: string;
+  loading: boolean;
+  purpose: reasonfor;
+}>();
+
+const formState = reactive<{
+  reason: string;
+  validated: boolean;
+}>({
+  reason: "",
+  validated: false,
+});
+
+const reasonForm = ref<HTMLFormElement | undefined>(undefined);
+const randomIDSuffix = Math.random().toString(16).substring(2, 8);
+
+const emit = defineEmits<{
+  (e: "save", reason: string): void;
+}>();
+
+function sendSaveEvent() {
+  formState.validated = true;
+  formState.reason = formState.reason.trim();
+  if (reasonForm.value?.checkValidity()) {
+    emit("save", formState.reason);
+  }
+}
+</script>
+
+<template>
+  <bootstrap-modal
+    :modal-id="props.modalId"
+    :modal-label="props.modalLabel"
+    size-modifier="lg"
+  >
+    <template #header>
+      <slot name="header" />
+    </template>
+    <template #body>
+      <form
+        :id="'reason-modal-form-' + randomIDSuffix"
+        ref="reasonForm"
+        :class="{ 'was-validated': formState.validated }"
+      >
+        <label :for="'reason-modal-input-' + randomIDSuffix" class="form-label"
+          >Reason for {{ props.purpose }}</label
+        >
+        <textarea
+          class="form-control"
+          :id="'reason-modal-input-' + randomIDSuffix"
+          rows="3"
+          minlength="16"
+          maxlength="512"
+          :placeholder="'State your reason for the ' + props.purpose"
+          v-model="formState.reason"
+        ></textarea>
+      </form>
+    </template>
+    <template #footer>
+      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+        Close
+      </button>
+      <button
+        type="submit"
+        :form="'reason-modal-form-' + randomIDSuffix"
+        class="btn btn-primary"
+        :disabled="formState.reason.length < 1 || props.loading"
+        @click.prevent="sendSaveEvent"
+      >
+        Save
+      </button>
+    </template>
+  </bootstrap-modal>
+</template>
+
+<style scoped></style>