djsundog/ffplayout
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

work on message, auth middleware, cleanup, button titles

Browse Source
This commit is contained in:
jb-alvarado 2020-04-28 21:00:23 +02:00
parent 8c54e9e88e
commit c81e470b87
7 changed files with 76 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
ffplayout/frontend/components/Login.vue
View File

@ -1,99 +0,0 @@
<template>
<div>
<b-modal
id="modal-prevent-closing"
ref="my-modal"
title="Submit Your Name"
@show="resetModal"
@hidden="resetModal"
@ok="handleOk"
>
<form ref="form" @submit.stop.prevent="handleSubmit">
<b-form-group :state="nameState" label="Name" label-for="name-input" invalid-feedback="Name is required">
<b-form-input id="name-input" v-model="name" :state="nameState" required />
</b-form-group>
<b-form-group :state="passState" label="Password" label-for="pass-input" invalid-feedback="Password is required">
<b-form-input id="pass-input" v-model="pass" :state="passState" type="password" required />
</b-form-group>
</form>
</b-modal>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'Login',
props: {
show: {
type: Boolean,
default: false
}
},
data () {
return {
formError: null,
name: '',
pass: '',
nameState: null,
passState: null
}
},
computed: {
...mapState('auth', ['isLogin'])
},
mounted () {
if (this.show) {
this.$refs['my-modal'].show()
}
},
methods: {
checkFormValidity () {
const valid = this.$refs.form.checkValidity()
this.nameState = valid
return valid
},
resetModal () {
this.name = ''
this.pass = ''
this.nameState = null
this.passState = null
},
handleOk (bvModalEvt) {
// Prevent modal from closing
bvModalEvt.preventDefault()
// Trigger submit handler
this.handleSubmit()
},
async handleSubmit () {
// Exit when the form isn't valid
if (!this.checkFormValidity()) {
return
}
try {
await this.$store.dispatch('auth/obtainToken', {
username: this.name,
password: this.pass
})
this.formError = null
window.location.reload(true)
} catch (e) {
this.formError = e.message
}
// Hide the modal manually
this.$nextTick(() => {
this.$bvModal.hide('modal-prevent-closing')
})
}
}
}
</script>

5
ffplayout/frontend/middleware/auth.js Normal file
View File

@ -0,0 +1,5 @@
export default function ({ store, redirect }) {
if (!store.state.auth.isLogin) {
return redirect('/')
}
}

12
ffplayout/frontend/pages/configure.vue
View File

@ -208,32 +208,25 @@
</b-tab>
</b-tabs>
</b-card>
<Login :show="showLogin" />
</div>
</template>
<script>
import Menu from '@/components/Menu.vue'
import Login from '@/components/Login.vue'
export default {
name: 'Configure',
middleware: 'auth',
components: {
Menu,
Login
Menu
},
async asyncData ({ app, store }) {
await store.dispatch('auth/inspectToken')
let login = false
if (store.state.auth.isLogin) {
await store.dispatch('config/getGuiConfig')
await store.dispatch('config/getPlayoutConfig')
await store.dispatch('config/getUserConfig')
} else {
login = true
}
return {
@ -244,7 +237,6 @@ export default {
oldPass: null,
newPass: null,
confirmPass: null,
showLogin: login,
showAlert: false,
alertVariant: 'success',
alertMsg: ''

5
ffplayout/frontend/pages/control.vue
View File

@ -38,7 +38,6 @@
<b-col>
<div>
<b-button
v-b-tooltip.hover
title="Start Playout Service"
class="control-button control-button-play"
:class="isPlaying"
@ -52,7 +51,6 @@
<b-col>
<div>
<b-button
v-b-tooltip.hover
title="Stop Playout Service"
class="control-button control-button-stop"
variant="primary"
@ -66,7 +64,6 @@
<b-col>
<div>
<b-button
v-b-tooltip.hover
title="Reload Playout Service"
class="control-button control-button-reload"
variant="primary"
@ -79,7 +76,6 @@
<b-col>
<div>
<b-button
v-b-tooltip.hover
title="Restart Playout Service"
class="control-button control-button-restart"
variant="primary"
@ -277,6 +273,7 @@ import Menu from '@/components/Menu.vue'
export default {
name: 'Control',
middleware: 'auth',
components: {
Menu

21
ffplayout/frontend/pages/logging.vue
View File

@ -29,21 +29,19 @@
</b-tab>
</b-tabs>
</b-card>
<Login :show="showLogin" />
</div>
</template>
<script>
// import { mapState } from 'vuex'
import Menu from '@/components/Menu.vue'
import Login from '@/components/Login.vue'
export default {
name: 'Media',
name: 'Logging',
middleware: 'auth',
components: {
Menu,
Login
Menu
},
filters: {
@ -61,19 +59,6 @@ export default {
}
},
async asyncData ({ app, store }) {
await store.dispatch('auth/inspectToken')
let login = false
if (!store.state.auth.isLogin) {
login = true
}
return {
showLogin: login
}
},
data () {
return {
currentLog: null

5
ffplayout/frontend/pages/media.vue
View File

@ -90,10 +90,10 @@
</pane>
</splitpanes>
<b-button-group class="media-button">
<b-button variant="primary" @click="showCreateFolderModal()">
<b-button title="Create Folder" variant="primary" @click="showCreateFolderModal()">
<b-icon-folder-plus />
</b-button>
<b-button variant="primary" @click="showUploadModal()">
<b-button title="Upload File" variant="primary" @click="showUploadModal()">
<b-icon-upload />
</b-button>
</b-button-group>
@ -217,6 +217,7 @@ import Menu from '@/components/Menu.vue'
export default {
name: 'Media',
middleware: 'auth',
components: {
Menu

93
ffplayout/frontend/pages/message.vue
View File

@ -9,17 +9,20 @@
</b-col>
<b-col cols="2">
<b-button-group class="mr-1">
<b-button title="New file" variant="primary" @click="openDialog()">
<b-button title="Save Preset" variant="primary" @click="savePreset()">
<b-icon icon="cloud-upload" />
</b-button>
<b-button title="New Preset" variant="primary" @click="openDialog()">
<b-icon-file-plus />
</b-button>
<b-button title="Save file" variant="primary" @click="savePreset()">
<b-icon icon="cloud-upload" />
<b-button title="Delete Preset" variant="primary" @click="deleteDialog()">
<b-icon-file-minus />
</b-button>
</b-button-group>
</b-col>
</b-row>
</div>
<b-form @submit.prevent="submit">
<b-form @submit.prevent="submitMessage">
<b-form-group>
<b-form-textarea
v-model="form.text"
@ -200,7 +203,7 @@
id="create-modal"
ref="create-modal"
title="Create Preset"
@ok="handleOk"
@ok="handleCreate"
>
<form ref="form" @submit.stop.prevent="createPreset">
<b-form-group label="Name" label-for="name-input" invalid-feedback="Name is required">
@ -208,40 +211,27 @@
</b-form-group>
</form>
</b-modal>
<Login :show="showLogin" />
<b-modal
id="delete-modal"
ref="delete-modal"
title="Delete Preset"
@ok="handleDelete"
>
<strong>Delete: "{{ selected }}"?</strong>
</b-modal>
</div>
</template>
<script>
// import { mapState } from 'vuex'
import Menu from '@/components/Menu.vue'
import Login from '@/components/Login.vue'
export default {
name: 'Media',
middleware: 'auth',
components: {
Menu,
Login
},
filters: {
aToHex (num) {
return '0x' + Math.round(num * 255).toString(16)
}
},
async asyncData ({ app, store }) {
await store.dispatch('auth/inspectToken')
let login = false
if (!store.state.auth.isLogin) {
login = true
}
return {
showLogin: login
}
Menu
},
data () {
@ -319,14 +309,14 @@ export default {
openDialog () {
this.$bvModal.show('create-modal')
},
handleOk (bvModalEvt) {
handleCreate (bvModalEvt) {
// Prevent modal from closing
bvModalEvt.preventDefault()
// Trigger submit handler
this.createPreset()
},
async createPreset () {
console.log('ok')
await this.$store.dispatch('auth/inspectToken')
const preset = {
name: this.newPresetName,
message: this.form.text,
@ -360,6 +350,7 @@ export default {
})
},
async savePreset () {
await this.$store.dispatch('auth/inspectToken')
if (this.selected) {
const preset = {
id: this.form.id,
@ -379,7 +370,7 @@ export default {
}
const response = await this.$axios.put(
`api/messenger/${this.selectedPreset.id}/`,
`api/messenger/${this.form.id}/`,
preset,
{ headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken } }
)
@ -390,6 +381,46 @@ export default {
this.failed = true
}
}
},
deleteDialog () {
this.$bvModal.show('delete-modal')
},
handleDelete (evt) {
evt.preventDefault()
this.deletePreset()
},
async deletePreset () {
await this.$store.dispatch('auth/inspectToken')
if (this.selected) {
await this.$axios.delete(
`api/messenger/${this.form.id}/`,
{ headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken } }
)
}
this.$bvModal.hide('delete-modal')
this.getPreset('')
},
submitMessage () {
function aToHex (num) {
return '0x' + Math.round(num * 255).toString(16)
}
const obj = {
text: this.form.text,
x: this.form.x,
y: this.form.y,
fontsize: this.form.fontSize,
line_spacing: this.form.fontSpacing,
fontcolor: this.form.fontColor + '@' + aToHex(this.form.fontAlpha),
alpha: this.form.overallAlpha,
box: (this.form.showBox) ? 1 : 0,
boxcolor: this.form.boxColor + '@' + aToHex(this.form.boxAlpha),
boxborderw: this.form.border
}
console.log(obj)
}
}
}