add modal to manually create tickets

web/src/components/AddTicketModal.vue

@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <Modal v-if="isModal" title="Add Item" @close="$emit('close')">
+            <template #body>
+                <div>
+                    <input type="text" class="form-control" placeholder="Sender" v-model="ticket.sender">
+                    <input type="text" class="form-control" placeholder="Title" v-model="ticket.title">
+                    <textarea class="form-control" placeholder="Message" v-model="ticket.message"></textarea>
+                </div>
+            </template>
+            <template #buttons>
+                <button type="button" class="btn btn-secondary" @click="$emit('close')">Cancel</button>
+                <button type="button" class="btn btn-success" @click="saveNewTicket()">Save new Item</button>
+            </template>
+        </Modal>
+    </div>
+</template>
+
+<script>
+import Modal from '@/components/Modal';
+import EditItem from '@/components/EditItem';
+
+export default {
+    name: 'AddTicketModal',
+    components: {Modal, EditItem},
+    props: ['isModal'],
+    data: () => ({
+        ticket: {
+            sender: '',
+            message: '',
+            title: '',
+        }
+    }),
+    created() {
+        this.ticket = {box: this.$store.state.lastUsed.box || '', cid: this.$store.state.lastUsed.cid || ''};
+    },
+    methods: {
+        saveNewTicket() {
+            this.$store.dispatch('postManualTicket', this.ticket).then(() => {
+                this.$emit('close');
+            });
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

web/src/views/Empty.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="container-fluid px-xl-5 mt-3">
+        <div class="row">
+            <div class="col-xl-8 offset-xl-2">
+                <div class="card bg-dark text-light mb-2" id="filters">
+                    <div class="card-header">
+                        <h3 class="text-center">User: {{user}}</h3>
+                    </div>
+                    <div class="card-body">
+                        <p>Your Account is not yet activated. Please contact an admin.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+    name: 'Empty',
+    computed: mapState(['user']),
+};
+</script>
+
+<style scoped>
+
+</style>

web/src/views/Error.vue

@@ -1,5 +1,18 @@
 <template>
-    <p>Error</p>
+    <div class="container-fluid px-xl-5 mt-3">
+        <div class="row">
+            <div class="col-xl-8 offset-xl-2">
+                <div class="card bg-dark text-light mb-2" id="filters">
+                    <div class="card-header">
+                        <h3 class="text-center">Error</h3>
+                    </div>
+                    <div class="card-body">
+                        <p>Something went wrong. <a href="/">Go back to the start page </a>or contact an admin.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>

web/src/views/HowTo.vue

@@ -134,5 +134,8 @@ export default {
 </script>
 
 <style scoped>
+* {
+    color: #c8c8c8 !important;
+}
 
 </style>