62 lines
1.9 KiB
Vue
62 lines
1.9 KiB
Vue
<template>
|
||
<el-form ref="vapidDetails" :model="vapidDetails" :label-width="labelWidth">
|
||
<el-form-item label="Subject">
|
||
<el-input :value="vapidDetails.subject" @input="updateSetting($event, 'vapid_details', 'subject')"/>
|
||
<p class="expl">A mailto link for the administrative contact. It’s best if this email is not a personal email address,
|
||
but rather a group email so that if a person leaves an organization, is unavailable for an extended period,
|
||
or otherwise can’t respond, someone else on the list can.</p>
|
||
</el-form-item>
|
||
<el-form-item label="Public key">
|
||
<el-input :value="vapidDetails.public_key" @input="updateSetting($event, 'vapid_details', 'public_key')"/>
|
||
<p class="expl">VAPID public key</p>
|
||
</el-form-item>
|
||
<el-form-item label="Private key">
|
||
<el-input :value="vapidDetails.private_key" @input="updateSetting($event, 'vapid_details', 'private_key')"/>
|
||
<p class="expl">VAPID private key</p>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="onSubmit">Submit</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|
||
|
||
<script>
|
||
import i18n from '@/lang'
|
||
import { mapGetters } from 'vuex'
|
||
|
||
export default {
|
||
name: 'WebPush',
|
||
computed: {
|
||
...mapGetters([
|
||
'vapidDetailsConfig'
|
||
]),
|
||
vapidDetails() {
|
||
return this.vapidDetailsConfig
|
||
},
|
||
isMobile() {
|
||
return this.$store.state.app.device === 'mobile'
|
||
},
|
||
labelWidth() {
|
||
return this.isMobile ? '100px' : '210px'
|
||
}
|
||
},
|
||
methods: {
|
||
updateSetting(value, tab, input) {
|
||
this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
|
||
},
|
||
onSubmit() {
|
||
this.$store.dispatch('SubmitChanges')
|
||
this.$message({
|
||
type: 'success',
|
||
message: i18n.t('settings.success')
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style rel='stylesheet/scss' lang='scss'>
|
||
@import '../styles/main';
|
||
@include settings
|
||
</style>
|