add ticket views

web/package.json

@@ -15,7 +15,6 @@
     "base-64": "^0.1.0",
     "bootstrap": "^4.3.1",
     "core-js": "^3.3.2",
-    "dotenv-webpack": "^1.7.0",
     "jquery": "^3.4.1",
     "lodash": "^4.17.15",
     "luxon": "^1.21.3",
@@ -26,14 +25,18 @@
     "utf8": "^3.0.0",
     "vue": "^2.6.10",
     "vue-debounce": "^2.2.0",
+    "vue-qrcode-component": "^2.1.1",
     "vue-router": "^3.1.3",
     "vuex": "^3.1.2",
-    "vuex-router-sync": "^5.0.0"
+    "vuex-router-sync": "^5.0.0",
+    "yarn": "^1.22.21"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
-    "vue-template-compiler": "^2.6.10"
+    "express-basic-auth": "^1.2.1",
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^5"
   },
   "eslintConfig": {
     "root": true,

web/src/components/Timeline.vue

@@ -0,0 +1,186 @@
+<template>
+    <ol class="timeline">
+        <li v-for="(item, index) in timeline" :key="index"
+            :class="{'timeline-item':true, 'extra-space': item.type === 'mail'}">
+            <span class="timeline-item-icon filled-icon" v-if="item.type === 'mail'">
+                <font-awesome-icon icon="envelope"/>
+            </span>
+            <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'comment'">
+                <font-awesome-icon icon="comment"/>
+            </span>
+            <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'state'">
+                <font-awesome-icon icon="check"/>
+            </span>
+            <span class="timeline-item-icon faded-icon" v-else>
+                <font-awesome-icon icon="pen"/>
+            </span>
+            <TimelineMail v-if="item.type === 'mail'" :item="item"/>
+            <TimelineComment v-else-if="item.type === 'comment'" :item="item"/>
+            <TimelineStateChange v-else-if="item.type === 'state'" :item="item"/>
+            <p v-else>{{ item }}</p>
+        </li>
+        <li class="timeline-item">
+            <span class="timeline-item-icon | faded-icon">
+                <font-awesome-icon icon="comment"/>
+            </span>
+            <div class="new-comment">
+                <div class="input-group">
+                    <input type="text" placeholder="reply mail..." v-model="newMail">
+                    <button class="btn btn-primary" @click="sendMail">
+                        Send
+                    </button>
+                </div>
+            </div>
+        </li>
+    </ol>
+</template>
+
+<script>
+
+import TimelineMail from "@/components/TimelineMail.vue";
+import TimelineComment from "@/components/TimelineComment.vue";
+import TimelineStateChange from "@/components/TimelineStateChange.vue";
+
+export default {
+    name: 'Timeline',
+    components: {TimelineStateChange, TimelineComment, TimelineMail},
+    props: {
+        timeline: {
+            type: Array,
+            default: () => []
+        }
+    },
+    emits: ['sendMail'],
+    data: () => ({
+        newMail: ""
+    }),
+    methods: {
+        sendMail() {
+            this.$emit('sendMail', this.newMail);
+            this.newMail = "";
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+button,
+input,
+select,
+textarea {
+    font: inherit;
+}
+
+a {
+    color: inherit;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+}
+
+/* End basic CSS override */
+
+.timeline {
+    width: 85%;
+    display: flex;
+    flex-direction: column;
+    padding: 32px 0 32px 32px;
+    border-left: 2px solid var(--gray);
+    font-size: 1.125rem;
+    margin: 0 auto;
+}
+
+.timeline-item {
+    display: flex;
+    gap: 24px;
+
+    & + * {
+        margin-top: 24px;
+    }
+
+    & + .extra-space {
+        margin-top: 48px;
+    }
+}
+
+.new-comment {
+    width: 100%;
+
+    input {
+        border: 1px solid var(--gray);
+        border-radius: 6px;
+        height: 48px;
+        padding: 0 16px;
+
+        &::placeholder {
+            color: var(--gray-dark);
+        }
+
+        &:focus {
+            border-color: var(--gray-dark);
+            outline: 0; /* Don't actually do this */
+            box-shadow: 0 0 0 4px var(--dark);
+        }
+    }
+}
+
+.timeline-item-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    margin-left: -57px;
+    flex-shrink: 0;
+    overflow: hidden;
+
+    svg {
+        width: 20px;
+        height: 20px;
+    }
+
+    &.faded-icon {
+        background-color: var(--secondary);
+        color: var(--light);
+    }
+
+    &.filled-icon {
+        background-color: var(--primary);
+        color: var(--light);
+    }
+}
+
+
+.button {
+    border: 0;
+    display: inline-flex;
+    vertical-align: middle;
+    margin-right: 4px;
+    margin-top: 12px;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    height: 32px;
+    padding: 0 8px;
+    background-color: var(--dark);
+    flex-shrink: 0;
+    cursor: pointer;
+    border-radius: 99em;
+
+    &:hover {
+        background-color: var(--gray);
+    }
+}
+
+
+</style>

web/src/components/TimelineComment.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="timeline-item-wrapper">
+        <div class="timeline-item-description">
+            <i class="avatar | small">
+                <font-awesome-icon icon="user"/>
+            </i>
+            <span><a href="#">$USER</a> commented <b></b> on <time
+                :datetime="item.timestamp">{{ item.timestamp }}</time></span>
+        </div>
+        <div class="card bg-dark">
+            <div class="card-body">
+                <p>{{ item.comment }}</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'TimelineComment',
+    props: {
+        'item': {
+            type: Object,
+            required: true
+        }
+    },
+};
+</script>
+
+<style scoped>
+
+
+a {
+    color: inherit;
+}
+
+/* End basic CSS override */
+
+
+.timeline-item-description {
+    display: flex;
+    padding-top: 6px;
+    gap: 8px;
+    color: var(--gray);
+
+    img {
+        flex-shrink: 0;
+    }
+
+    a {
+        /*color: var(--c-grey-500);*/
+        font-weight: 500;
+        text-decoration: none;
+
+        &:hover,
+        &:focus {
+            outline: 0; /* Don't actually do this */
+            color: var(--info);
+        }
+    }
+}
+
+.avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    overflow: hidden;
+    aspect-ratio: 1 / 1;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+
+    &.small {
+        width: 28px;
+        height: 28px;
+    }
+
+    img {
+        object-fit: cover;
+    }
+}
+
+
+</style>

web/src/components/TimelineMail.vue

@@ -0,0 +1,203 @@
+<template>
+    <div class="timeline-item-wrapper">
+        <div class="timeline-item-description">
+            <i class="avatar | small">
+                <font-awesome-icon icon="user"/>
+            </i>
+            <span><a href="#">$USER</a> commented on <time
+                :datetime="timestamp">{{ timestamp }}</time></span>
+        </div>
+        <div class="card bg-dark">
+            <div class="card-header">
+                {{ item.subject }}
+            </div>
+            <div class="card-body">
+            <p><span v-html="body"></span></p>
+            <!--button class="button">👏 2</button>
+            <button class="button | square">
+                <font-awesome-icon icon="user"/>
+            </button-->
+            </div>
+        </div>
+        <!--button class="show-replies">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-forward"
+                 width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
+                 stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                <path d="M15 11l4 4l-4 4m4 -4h-11a4 4 0 0 1 0 -8h1"/>
+            </svg>
+            Show 3 replies
+            <span class="avatar-list">
+					<i class="avatar | small">
+						<font-awesome-icon icon="user"/>
+					</i>
+					<i class="avatar | small">
+						<font-awesome-icon icon="user"/>
+					</i>
+                    <i class="avatar | small">
+						<font-awesome-icon icon="user"/>
+					</i>
+				</span>
+        </button-->
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'TimelineMail',
+    props: {
+        'item': {
+            type: Object,
+            required: true
+        }
+    },
+    computed: {
+        'timestamp': function () {
+            return new Date(this.item.timestamp).toLocaleString();
+        },
+        'body': function () {
+            return this.item.body.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>');
+        }
+
+    }
+};
+</script>
+
+<style scoped>
+
+a {
+    color: inherit;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+}
+
+
+.timeline-item-description {
+    display: flex;
+    padding-top: 6px;
+    gap: 8px;
+    color: var(--gray);
+
+    img {
+        flex-shrink: 0;
+    }
+
+    a {
+        /*color: var(--c-grey-500);*/
+        font-weight: 500;
+        text-decoration: none;
+
+        &:hover,
+        &:focus {
+            outline: 0; /* Don't actually do this */
+            color: var(--info);
+        }
+    }
+}
+
+
+.card {
+    border: 1px solid var(--gray);
+}
+
+.avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    overflow: hidden;
+    aspect-ratio: 1 / 1;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+
+    &.small {
+        width: 28px;
+        height: 28px;
+    }
+
+    img {
+        object-fit: cover;
+    }
+}
+
+.button {
+    border: 0;
+    display: inline-flex;
+    vertical-align: middle;
+    margin-right: 4px;
+    margin-top: 12px;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    height: 32px;
+    padding: 0 8px;
+    background-color: var(--gray);
+    flex-shrink: 0;
+    cursor: pointer;
+    border-radius: 99em;
+
+    &:hover {
+        background-color: var(--info);
+    }
+
+    &.square {
+        border-radius: 50%;
+        color: var(--gray);
+        background-color: var(--dark);
+        width: 32px;
+        height: 32px;
+        padding: 0;
+
+        svg {
+            width: 24px;
+            height: 24px;
+        }
+
+        &:hover {
+            color: var(--info);
+        }
+    }
+}
+
+.show-replies {
+    color: var(--gray);
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+    margin-top: 16px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 1rem;
+    cursor: pointer;
+
+    svg {
+        flex-shrink: 0;
+        width: 24px;
+        height: 24px;
+    }
+
+    &:hover,
+    &:focus {
+        color: var(--info);
+    }
+}
+
+.avatar-list {
+    display: flex;
+    align-items: center;
+
+    & > * {
+        position: relative;
+        box-shadow: 0 0 0 2px #fff;
+        background: var(--dark);
+        margin-right: -8px;
+    }
+}
+
+</style>

web/src/components/TimelineStateChange.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="timeline-item-description">
+        <i class="avatar | small">
+            <font-awesome-icon icon="user"/>
+        </i>
+        <span><a href="#">$USER</a> has changed state to <span
+            class="badge badge-pill badge-primary">{{ item.state }}</span> on <time
+            :datetime="item.timestamp">{{ item.timestamp }}</time></span>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'TimelineStateChange',
+    props: {
+        'item': {
+            type: Object,
+            required: true
+        }
+    },
+};
+</script>
+
+<style scoped>
+
+
+a {
+    color: inherit;
+}
+
+
+.timeline-item-description {
+    display: flex;
+    padding-top: 6px;
+    gap: 8px;
+    color: var(--gray);
+
+    img {
+        flex-shrink: 0;
+    }
+
+    a {
+        /*color: var(--c-grey-500);*/
+        font-weight: 500;
+        text-decoration: none;
+
+        &:hover,
+        &:focus {
+            outline: 0; /* Don't actually do this */
+            color: var(--info);
+        }
+    }
+}
+
+.avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    overflow: hidden;
+    aspect-ratio: 1 / 1;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+
+    &.small {
+        width: 28px;
+        height: 28px;
+    }
+
+    img {
+        object-fit: cover;
+    }
+}
+
+</style>

web/src/views/Login.vue

@@ -0,0 +1,120 @@
+<template>
+    <main class="d-flex w-100">
+        <div class="container d-flex flex-column">
+            <div class="row vh-100">
+                <div class="col-sm-10 col-md-8 col-lg-6 mx-auto d-table h-100">
+                    <div class="d-table-cell align-middle">
+                        <div class="text-center mt-4">
+                            <h1 class="h2">
+                                C3LF System3
+                            </h1>
+                            <p class="lead" v-if="msg">
+                                {{ msg }}
+                            </p>
+                            <p class="lead" v-else>
+                                Sign in to your account to continue
+                            </p>
+                        </div>
+                        <div class="card bg-dark">
+                            <div class="card-body">
+                                <div class="m-sm-4">
+                                    <form role="form" @submit.prevent="do_login">
+
+                                        <div class="mb-3">
+                                            <label class="form-label">Username</label>
+                                            <input class="form-control" type="text"
+                                                   name="username" placeholder="Enter your username"
+                                                   v-model="username"/>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label class="form-label">Password</label>
+                                            <input class="form-control" type="password"
+                                                   name="password" placeholder="Enter your password"
+                                                   v-model="password"/>
+                                        </div>
+                                        <div>
+                                            <label class="form-check">
+                                                <input class="form-check-input" type="checkbox" value="remember-me"
+                                                       name="remember-me" checked v-model="remember"
+                                                       @change="setRemember(remember)">
+                                                <span class="form-check-label">
+												Remember me next time
+												</span>
+                                            </label>
+                                        </div>
+                                        <div class="text-center mt-3">
+                                            <button type="submit" name="login" class="btn btn-primary">Login
+                                            </button>
+                                        </div>
+                                    </form>
+                                    <br/>
+                                    <div class="text-center">
+                                        <p class="mb-0 text-muted">
+                                            Don’t have an account?
+                                            <router-link to="/register">Sign up</router-link>
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+</template>
+
+<script>
+import {mapActions, mapMutations} from 'vuex';
+import router from "@/router";
+
+export default {
+    name: 'Login',
+    data() {
+        return {
+            msg: 'Welcome to ' + window.location.hostname,
+            username: '',
+            password: '',
+            remember: false
+        }
+    },
+    methods: {
+        ...mapActions(['login']),
+        ...mapMutations(['setRemember']),
+        async do_login(e) {
+            e.preventDefault();
+            if (await this.login({username: this.username, password: this.password, remember: this.remember})) {
+                if (this.$route.query.redirect) {
+                    await router.push({path: this.$route.query.redirect});
+                } else {
+                    await router.push({path: '/'});
+                }
+            } else {
+                this.msg = 'Invalid username or password';
+            }
+
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+input{
+    background-color: var(--dark);
+    border: var(--gray) 1px solid;;
+
+    &:focus {
+        background-color: var(--dark);
+    }
+
+    &:hover {
+        background-color: var(--dark);
+    }
+
+    &[type="checkbox"] {
+        background-color: var(--dark);
+    }
+}
+
+</style>

web/src/views/Register.vue

@@ -0,0 +1,169 @@
+<template>
+    <main class="d-flex w-100">
+        <div class="container d-flex flex-column">
+            <div class="row vh-100">
+                <div class="col-sm-10 col-md-8 col-lg-6 mx-auto d-table h-100">
+                    <div class="d-table-cell align-middle">
+                        <div class="text-center mt-4">
+                            <h1 class="h2">
+                                C3LF System3
+                            </h1>
+                            <p class="lead" v-if="msg">
+                                {{ msg }}
+                            </p>
+                            <p class="lead" v-else>
+                                Create an account to get started
+                            </p>
+                        </div>
+                        <div class="card bg-dark">
+                            <div class="card-body">
+                                <div class="m-sm-4">
+                                    <form role="form" method="post" @submit.prevent="do_register">
+                                        <div :class="errors.username?['mb-3','is-invalid']:['mb-3']">
+                                            <label class="form-label">Username</label>
+                                            <div class="input-group">
+                                                <input class="form-control"
+                                                       type="text" v-model="form.username" id="validationCustomUsername"
+                                                       placeholder="Enter your username" required/>
+                                            </div>
+                                            <div class="invalid-feedback">
+                                                {{ errors.username }}
+                                            </div>
+                                        </div>
+
+                                        <div :class="errors.email?['mb-3','is-invalid']:['mb-3']">
+                                            <label class="form-label">E-Mail</label>
+                                            <div class="input-group">
+                                                <input class="form-control"
+                                                       type="email" v-model="form.email" id="validationCustomEmail"
+                                                       placeholder="Enter your email" required/>
+                                            </div>
+                                            <div class="invalid-feedback">
+                                                {{ errors.email }}
+                                            </div>
+                                        </div>
+
+
+                                        <div :class="errors.password?['mb-3','is-invalid']:['mb-3']">
+                                            <label class="form-label">Password</label>
+                                            <input class="form-control" type="password"
+                                                   v-model="form.password" placeholder="Enter your password"/>
+                                            <div class="invalid-feedback">{{ errors.password }}</div>
+                                        </div>
+
+                                        <div :class="errors.password2?['mb-3','is-invalid']:['mb-3']">
+                                            <label class="form-label">Password Check</label>
+                                            <input class="form-control" type="password"
+                                                   v-model="password2" placeholder="Enter your password again"/>
+                                            <div class="invalid-feedback">{{ errors.password2 }}</div>
+                                        </div>
+
+                                        <div class="text-center mt-3">
+                                            <button type="submit" class="btn btn-primary">
+                                                Register
+                                            </button>
+                                        </div>
+                                    </form>
+                                    <br/>
+                                    <div class="text-center">
+                                        <p class="mb-0 text-muted">
+                                            Already have an account?
+                                            <router-link to="/login">Login</router-link>
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+</template>
+
+<script>
+
+export default {
+    name: 'Register',
+    data() {
+        return {
+            msg: 'Register',
+            password2: '',
+            form: {
+                username: '',
+                password: '',
+                email: '',
+            },
+            errors: {
+                username: null,
+                password: null,
+                password2: null,
+                email: null,
+            }
+        }
+    },
+    methods: {
+        do_register() {
+            console.log('do_register');
+            console.log(this.form);
+            if (this.form.password !== this.password2) {
+                this.errors.password2 = 'Passwords do not match';
+                return;
+            } else {
+                this.errors.password2 = null;
+            }
+            fetch('/api/2/register/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(this.form)
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.errors) {
+                        console.error('Error:', data.errors);
+                        this.errors = data.errors;
+                        return;
+                    }
+                    console.log('Success:', data);
+                    this.msg = 'Success';
+                    this.$router.push('/login');
+                })
+                .catch((error) => {
+                    console.error('Error:', error);
+                    this.msg = 'Error';
+                });
+        }
+    },
+    mounted() {
+    }
+}
+</script>
+
+<style scoped>
+.is-invalid input, .is-invalid select {
+    border: 1px solid var(--danger);
+}
+
+.is-invalid .invalid-feedback {
+    display: block;
+}
+
+input {
+    background-color: var(--dark);
+    border: var(--gray) 1px solid;;
+
+    &:focus {
+        background-color: var(--dark);
+    }
+
+    &:hover {
+        background-color: var(--dark);
+    }
+
+    &[type="checkbox"] {
+        background-color: var(--dark);
+    }
+}
+</style>

web/src/views/Ticket.vue

@@ -0,0 +1,58 @@
+<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>Ticket #{{ ticket.id }} - {{ ticket.name }}</h3>
+                    </div>
+                    <Timeline :timeline="ticket.timeline" @sendMail="handleMail"/>
+                    <div class="card-footer d-flex justify-content-between">
+                        <router-link :to="{name: 'tickets'}" class="btn btn-secondary mr-2">Back</router-link>
+                        <button class="btn btn-danger" @click="deleteItem({type: 'tickets', id: ticket.id})">
+                            <font-awesome-icon icon="trash"/>
+                            Delete
+                        </button>
+                        <button class="btn btn-success" @click="markItemReturned({type: 'tickets', id: ticket.id})">Mark
+                            as returned
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {mapActions, mapState} from 'vuex';
+import Timeline from "@/components/Timeline.vue";
+
+export default {
+    name: 'Ticket',
+    components: {Timeline},
+    computed: {
+        ...mapState(['tickets']),
+        ticket() {
+            const id = parseInt(this.$route.params.id)
+            const ret = this.tickets.find(ticket => ticket.id === id);
+            return ret ? ret : {};
+        }
+    },
+    methods: {
+        ...mapActions(['deleteItem', 'markItemReturned', 'loadTickets', 'sendMail']),
+        handleMail(mail) {
+            this.sendMail({
+                id: this.ticket.id,
+                message: mail
+            })
+        }
+    },
+    created() {
+        this.loadTickets()
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

web/src/views/Tickets.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="container-fluid px-xl-5 mt-3">
+        <div class="row">
+            <div class="col-xl-8 offset-xl-2">
+                <Table
+                    :columns="['id', 'name', 'state', 'last_activity', 'assigned_to']"
+                    :items="tickets"
+                    :keyName="'id'"
+                    v-slot="{ item }"
+                >
+                    <div class="btn-group">
+                        <a class="btn btn-primary" :href="'/ticket/' + item.id" title="view"
+                           @click.prevent="gotoDetail(item)">
+                            <font-awesome-icon icon="eye"/>
+                            View
+                        </a>
+                    </div>
+                </Table>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Table from '@/components/Table';
+import Cards from '@/components/Cards';
+import Modal from '@/components/Modal';
+import EditItem from '@/components/EditItem';
+import {mapActions, mapState} from 'vuex';
+import Lightbox from '../components/Lightbox';
+
+export default {
+    name: 'Tickets',
+    components: {Lightbox, Table, Cards, Modal, EditItem},
+    computed: mapState(['tickets']),
+    methods: {
+        gotoDetail(ticket) {
+            this.$router.push({name: 'ticket', params: {id: ticket.id}});
+        }
+    },
+    created() {
+        this.$store.dispatch('loadTickets');
+    }
+};
+</script>
+
+<style scoped>
+
+</style>