admin-fe/src/views/settings/components/Authentication.vue

116 lines
3.7 KiB
Vue

<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form :model="pleromaAuthenticatorData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="pleromaAuthenticator" :data="pleromaAuthenticatorData"/>
</el-form>
<el-divider v-if="pleromaAuthenticator" class="divider thick-line"/>
<el-form :model="authData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="auth" :data="authData"/>
</el-form>
<el-divider v-if="auth" class="divider thick-line"/>
<el-form :model="ldapData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="ldap" :data="ldapData"/>
</el-form>
<el-divider v-if="ldap" class="divider thick-line"/>
<el-form :model="oauth2Data" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="oauth2" :data="oauth2Data"/>
</el-form>
<el-divider v-if="oauth2" class="divider thick-line"/>
<el-form :model="restrictUnauthenticatedData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="restrictUnauthenticated" :data="restrictUnauthenticatedData"/>
</el-form>
<div class="submit-button-container">
<el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import i18n from '@/lang'
import Setting from './Setting'
import _ from 'lodash'
export default {
name: 'Authentication',
components: { Setting },
computed: {
...mapGetters([
'settings'
]),
auth() {
return this.settings.description.find(setting => setting.key === ':auth')
},
authData() {
return _.get(this.settings.settings, [':pleroma', ':auth']) || {}
},
isMobile() {
return this.$store.state.app.device === 'mobile'
},
isSidebarOpen() {
return this.$store.state.app.sidebar.opened ? 'sidebar-opened' : 'sidebar-closed'
},
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'
} else if (this.isTablet) {
return '200px'
} else {
return '280px'
}
},
ldap() {
return this.settings.description.find(setting => setting.key === ':ldap')
},
ldapData() {
return _.get(this.settings.settings, [':pleroma', ':ldap']) || {}
},
loading() {
return this.settings.loading
},
oauth2() {
return this.settings.description.find(setting => setting.key === ':oauth2')
},
oauth2Data() {
return _.get(this.settings.settings, [':pleroma', ':oauth2']) || {}
},
pleromaAuthenticator() {
return this.settings.description.find(setting => setting.children && setting.children[0].key === 'Pleroma.Web.Auth.Authenticator')
},
pleromaAuthenticatorData() {
return _.get(this.settings.settings, [':pleroma', 'Pleroma.Web.Auth.Authenticator']) || {}
},
restrictUnauthenticated() {
return this.settings.description.find(setting => setting.key === ':restrict_unauthenticated')
},
restrictUnauthenticatedData() {
return _.get(this.settings.settings, [':pleroma', ':restrict_unauthenticated']) || {}
}
},
methods: {
async onSubmit() {
try {
await this.$store.dispatch('SubmitChanges')
} catch (e) {
return
}
this.$message({
type: 'success',
message: i18n.t('settings.success')
})
}
}
}
</script>
<style rel='stylesheet/scss' lang='scss'>
@import '../styles/main';
@include settings
</style>