Compare commits
No commits in common. "0ebfe3adfb2507a94520e4f1206a2b0d81c1d8b8" and "b1a870293287e9f25b6bd3bdd95324eb7d2d6506" have entirely different histories.
0ebfe3adfb
...
b1a8702932
9 changed files with 3 additions and 954 deletions
|
|
@ -15,6 +15,7 @@
|
||||||
"base-64": "^0.1.0",
|
"base-64": "^0.1.0",
|
||||||
"bootstrap": "^4.3.1",
|
"bootstrap": "^4.3.1",
|
||||||
"core-js": "^3.3.2",
|
"core-js": "^3.3.2",
|
||||||
|
"dotenv-webpack": "^1.7.0",
|
||||||
"jquery": "^3.4.1",
|
"jquery": "^3.4.1",
|
||||||
"lodash": "^4.17.15",
|
"lodash": "^4.17.15",
|
||||||
"luxon": "^1.21.3",
|
"luxon": "^1.21.3",
|
||||||
|
|
@ -25,18 +26,14 @@
|
||||||
"utf8": "^3.0.0",
|
"utf8": "^3.0.0",
|
||||||
"vue": "^2.6.10",
|
"vue": "^2.6.10",
|
||||||
"vue-debounce": "^2.2.0",
|
"vue-debounce": "^2.2.0",
|
||||||
"vue-qrcode-component": "^2.1.1",
|
|
||||||
"vue-router": "^3.1.3",
|
"vue-router": "^3.1.3",
|
||||||
"vuex": "^3.1.2",
|
"vuex": "^3.1.2",
|
||||||
"vuex-router-sync": "^5.0.0",
|
"vuex-router-sync": "^5.0.0"
|
||||||
"yarn": "^1.22.21"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "^5.0.8",
|
"@vue/cli-plugin-babel": "^5.0.8",
|
||||||
"@vue/cli-service": "^5.0.8",
|
"@vue/cli-service": "^5.0.8",
|
||||||
"express-basic-auth": "^1.2.1",
|
"vue-template-compiler": "^2.6.10"
|
||||||
"vue-template-compiler": "^2.6.10",
|
|
||||||
"webpack": "^5"
|
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"root": true,
|
"root": true,
|
||||||
|
|
|
||||||
|
|
@ -1,186 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,86 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,203 +0,0 @@
|
||||||
<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, '<').replace(/>/g, '>').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>
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,120 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,169 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
<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>
|
|
||||||
Loading…
Reference in a new issue