mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
Merge pull request #1861 from Human-Connection/refactor_embed_settings_page
Refactor embed settings page
This commit is contained in:
Robert Schäfer
GitHub
commit
f1fc712fa3
@ -226,6 +226,22 @@
|
||||
"success": "Konto erfolgreich gelöscht!",
|
||||
"pleaseConfirm": "<b class='is-danger'>Zerstörerische Aktion!</b> Gib <b>{confirm}</b> ein, um zu bestätigen."
|
||||
},
|
||||
"embeds": {
|
||||
"name": "Drittanbieter",
|
||||
"info-description": "Hier ist die Liste an Drittanbietern, deren Inhalte als Fremdcode z.B. in Form von eingebetteten Videos angezeigt werden kann:",
|
||||
"status": {
|
||||
"description": "Als Grundeinstellung für dich wird eingebetter Fremdcode von Drittanbietern",
|
||||
"disabled": {
|
||||
"false": "zunächst nicht angezeigt",
|
||||
"true": "sofort angezeigt"
|
||||
},
|
||||
"change": {
|
||||
"question": "Soll eingebetter Fremdcode von Dritten für dich immer angezeigt werden?",
|
||||
"allow": "Na klar",
|
||||
"deny": "Lieber nicht"
|
||||
}
|
||||
}
|
||||
},
|
||||
"organizations": {
|
||||
"name": "Meine Organisationen"
|
||||
},
|
||||
@ -343,19 +359,6 @@
|
||||
"submitted": "Kommentar Gesendet",
|
||||
"updated": "Änderungen gespeichert"
|
||||
},
|
||||
"allowEmbeds": {
|
||||
"name": "Drittanbieter",
|
||||
"info-description": "Wenn du zustimmst werden in den Beiträgen aus der folgenden Liste an Providern Fremdcode von anderen Anbietern (Drittanbietern) in Form von eingebundenen Videos, Bilder oder Text automatisch eingebunden werden.",
|
||||
"description": "Du hast zugestimmt das in den Beiträgen aus der folgenden Liste an Providern Fremdcode von anderen Anbietern (Drittanbietern) in Form von eingebundenen Videos, Bilder oder Text automatisch eingebunden werden.",
|
||||
"statustext": "Momentan ist das automatische einbinden:",
|
||||
"statuschange": "Einstellung ändern",
|
||||
"false": "Abgestellt",
|
||||
"true": "Zugelassen",
|
||||
"button-tofalse": "Abstellen",
|
||||
"button-totrue": "dauerhaft zulassen",
|
||||
"third-party-false": "Es wird <b style='color:red'>kein</b> Service von Drittanbietern automatisch eingebunden.",
|
||||
"third-party-true": "Das einbinden der Services von Drittanbietern ist <b style='color:red'>dauerhaft zugelassen</b> und gespeichert für komende Sitzungen."
|
||||
},
|
||||
"edited": "bearbeitet"
|
||||
},
|
||||
"comment": {
|
||||
|
||||
@ -227,6 +227,22 @@
|
||||
"success": "Account successfully deleted!",
|
||||
"pleaseConfirm": "<b class='is-danger'>Destructive action!</b> Type <b>{confirm}</b> to confirm"
|
||||
},
|
||||
"embeds": {
|
||||
"name": "Third party providers",
|
||||
"info-description": "Here is the list of third-party providers whose content can be displayed as third-party code, e.g. in the form of embedded videos.",
|
||||
"status": {
|
||||
"description": "As a default for you, embedded code of third-party providers is",
|
||||
"disabled": {
|
||||
"false": "initially not displayed",
|
||||
"true": "displayed immediately"
|
||||
},
|
||||
"change": {
|
||||
"question": "Should embedded source code from third parties always be displayed to you?",
|
||||
"allow": "Sure",
|
||||
"deny": "No thanks"
|
||||
}
|
||||
}
|
||||
},
|
||||
"organizations": {
|
||||
"name": "My Organizations"
|
||||
},
|
||||
@ -344,19 +360,6 @@
|
||||
"submitted": "Comment Submitted",
|
||||
"updated": "Changes Saved"
|
||||
},
|
||||
"allowEmbeds": {
|
||||
"name": "Third party providers",
|
||||
"info-description": "If you agree, the posts from the following list of providers will automatically include third-party code from other providers (third parties) in the form of embedded videos, images, or text.",
|
||||
"description": "You have agreed that in the contributions from the following list of providers, foreign code from other providers (third parties) in the form of embedded videos, images or text automatically are embedded.",
|
||||
"statustext": "At the moment this is automatic embedding:",
|
||||
"statuschange": "Change setting",
|
||||
"false": "Turned off",
|
||||
"true": "Admitted",
|
||||
"button-tofalse": "turn-off",
|
||||
"button-totrue": "allow permanently",
|
||||
"third-party-false": "It automatically integrates <b style='color:red'>no </b> third-party providers' service.",
|
||||
"third-party-true": "The inclusion of third-party services is <b style='color:red'>permanently allowed</b> and stored for future sessions."
|
||||
},
|
||||
"edited": "edited"
|
||||
},
|
||||
"comment": {
|
||||
|
||||
@ -40,8 +40,8 @@ export default {
|
||||
path: `/settings/blocked-users`,
|
||||
},
|
||||
{
|
||||
name: this.$t('post.allowEmbeds.name'),
|
||||
path: `/settings/allow-embeds`,
|
||||
name: this.$t('settings.embeds.name'),
|
||||
path: `/settings/embeds`,
|
||||
},
|
||||
{
|
||||
name: this.$t('settings.deleteUserAccount.name'),
|
||||
|
||||
@ -1,117 +0,0 @@
|
||||
<template>
|
||||
<ds-card :header="$t('post.allowEmbeds.name')">
|
||||
<p>{{ $t('post.allowEmbeds.statustext') }}</p>
|
||||
<ds-container width="large">
|
||||
<h3 v-html="allowEmbeds_h3" />
|
||||
<div v-html="allowEmbeds_desc" />
|
||||
</ds-container>
|
||||
<div>
|
||||
<ds-space />
|
||||
<ds-space />
|
||||
<p>{{ $t('post.allowEmbeds.statuschange') }}</p>
|
||||
<ds-container width="large">
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
<ds-button @click="toFalse" :disabled="!disabled">
|
||||
{{ $t('post.allowEmbeds.button-tofalse') }}
|
||||
</ds-button>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item>
|
||||
<ds-button @click="toTrue" secondary :disabled="disabled">
|
||||
{{ $t('post.allowEmbeds.button-totrue') }}
|
||||
</ds-button>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-container>
|
||||
</div>
|
||||
<ds-space />
|
||||
<ds-space />
|
||||
|
||||
<div>
|
||||
<p v-if="disabled">
|
||||
<b>{{ $t('post.allowEmbeds.description') }}</b>
|
||||
</p>
|
||||
<p v-else>{{ $t('post.allowEmbeds.info-description') }}</p>
|
||||
<ds-container>
|
||||
<ds-placeholder>
|
||||
<ul>
|
||||
<li v-for="provider in providers" :key="provider.provider_name">
|
||||
{{ provider.provider_name }},
|
||||
<small>{{ provider.provider_url }}</small>
|
||||
</li>
|
||||
</ul>
|
||||
</ds-placeholder>
|
||||
</ds-container>
|
||||
</div>
|
||||
</ds-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { mapGetters, mapMutations } from 'vuex'
|
||||
import { allowEmbedIframesMutation } from '~/graphql/User.js'
|
||||
|
||||
export default {
|
||||
head() {
|
||||
return {
|
||||
title: this.$t('post.allowEmbeds.name'),
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
currentUser: 'auth/user',
|
||||
}),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
allowEmbeds_h3: this.$t('post.allowEmbeds.false'),
|
||||
allowEmbeds_desc: this.$t('post.allowEmbeds.third-party-false'),
|
||||
disabled: null,
|
||||
providers: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
axios.get('../api/providers.json').then(response => {
|
||||
this.providers = response.data
|
||||
})
|
||||
this.disabled = this.currentUser.allowEmbedIframes
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setCurrentUser: 'auth/SET_USER',
|
||||
}),
|
||||
toFalse() {
|
||||
this.allowEmbeds_h3 = this.$t('post.allowEmbeds.false')
|
||||
this.allowEmbeds_desc = this.$t('post.allowEmbeds.third-party-false')
|
||||
this.submit()
|
||||
},
|
||||
toTrue() {
|
||||
this.allowEmbeds_h3 = this.$t('post.allowEmbeds.true')
|
||||
this.allowEmbeds_desc = this.$t('post.allowEmbeds.third-party-true')
|
||||
this.submit()
|
||||
},
|
||||
async submit() {
|
||||
try {
|
||||
await this.$apollo.mutate({
|
||||
mutation: allowEmbedIframesMutation(),
|
||||
variables: {
|
||||
id: this.currentUser.id,
|
||||
allowEmbedIframes: !this.disabled,
|
||||
},
|
||||
update: (store, { data: { UpdateUser } }) => {
|
||||
const { allowEmbedIframes } = UpdateUser
|
||||
this.setCurrentUser({
|
||||
...this.currentUser,
|
||||
allowEmbedIframes,
|
||||
})
|
||||
},
|
||||
})
|
||||
this.$toast.success(this.$t('site.thanks') + ' ' + this.allowEmbeds_h3)
|
||||
this.disabled = !this.disabled
|
||||
} catch (err) {
|
||||
this.$toast.error(err.message)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
87
webapp/pages/settings/embeds.vue
Normal file
87
webapp/pages/settings/embeds.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<ds-card :header="$t('settings.embeds.name')">
|
||||
<ds-section>
|
||||
<ds-text>
|
||||
{{ $t('settings.embeds.status.description') }}
|
||||
<ds-text bold>
|
||||
{{ $t(`settings.embeds.status.disabled.${disabled}`) }}
|
||||
</ds-text>
|
||||
.
|
||||
</ds-text>
|
||||
<ds-text>
|
||||
{{ $t('settings.embeds.status.change.question') }}
|
||||
</ds-text>
|
||||
<ds-button @click="submit" :primary="!disabled" :disabled="!disabled">
|
||||
{{ $t('settings.embeds.status.change.deny') }}
|
||||
</ds-button>
|
||||
<ds-button @click="submit" :primary="disabled" :disabled="disabled">
|
||||
{{ $t('settings.embeds.status.change.allow') }}
|
||||
</ds-button>
|
||||
|
||||
<p>{{ $t('settings.embeds.info-description') }}</p>
|
||||
<ul>
|
||||
<li v-for="provider in providers" :key="provider.provider_name">
|
||||
{{ provider.provider_name }},
|
||||
<small>{{ provider.provider_url }}</small>
|
||||
</li>
|
||||
</ul>
|
||||
</ds-section>
|
||||
</ds-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { mapGetters, mapMutations } from 'vuex'
|
||||
import { allowEmbedIframesMutation } from '~/graphql/User.js'
|
||||
|
||||
export default {
|
||||
head() {
|
||||
return {
|
||||
title: this.$t('settings.embeds.name'),
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
currentUser: 'auth/user',
|
||||
}),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
disabled: null,
|
||||
providers: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
axios.get('../api/providers.json').then(response => {
|
||||
this.providers = response.data
|
||||
})
|
||||
this.disabled = this.currentUser.allowEmbedIframes
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setCurrentUser: 'auth/SET_USER',
|
||||
}),
|
||||
async submit() {
|
||||
try {
|
||||
await this.$apollo.mutate({
|
||||
mutation: allowEmbedIframesMutation(),
|
||||
variables: {
|
||||
id: this.currentUser.id,
|
||||
allowEmbedIframes: !this.disabled,
|
||||
},
|
||||
update: (store, { data: { UpdateUser } }) => {
|
||||
const { allowEmbedIframes } = UpdateUser
|
||||
this.setCurrentUser({
|
||||
...this.currentUser,
|
||||
allowEmbedIframes,
|
||||
})
|
||||
},
|
||||
})
|
||||
this.disabled = !this.disabled
|
||||
} catch (err) {
|
||||
this.$toast.error(err.message)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user