diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 7ab56ea2..95c15b49 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -5,6 +5,7 @@ export default { return { availableStyles: [], selected: this.$store.state.config.theme, + invalidThemeImported: false, bgColorLocal: '', btnColorLocal: '', textColorLocal: '', @@ -37,6 +38,8 @@ export default { methods: { exportCurrentTheme () { const stringified = JSON.stringify({ + // To separate from other random JSON files and possible future theme formats + _pleroma_theme_version: 1, colors: this.$store.state.config.colors, radii: this.$store.state.config.radii }, null, 2) // Pretty-print and indent with 2 spaces @@ -53,6 +56,7 @@ export default { }, importTheme () { + this.invalidThemeImported = false const filePicker = document.createElement('input') filePicker.setAttribute('type', 'file') filePicker.setAttribute('accept', '.json') @@ -62,8 +66,18 @@ export default { // eslint-disable-next-line no-undef const reader = new FileReader() reader.onload = ({target}) => { - const parsed = JSON.parse(target.result) - this.normalizeLocalState(parsed.colors, parsed.radii) + try { + const parsed = JSON.parse(target.result) + if (parsed._pleroma_theme_version === 1) { + this.normalizeLocalState(parsed.colors, parsed.radii) + } else { + // A theme from the future, spooky + this.invalidThemeImported = true + } + } catch (e) { + // This will happen both if there is a JSON syntax error or the theme is missing components + this.invalidThemeImported = true + } } reader.readAsText(event.target.files[0]) } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 0bc08bd7..1439763d 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -11,6 +11,7 @@
+

{{ $t('settings.invalid_theme_imported') }}

{{$t('settings.theme_help')}}

@@ -135,6 +136,11 @@ margin-right: 1em; } +.import-warning { + color: $fallback--cRed; + color: var(--cRed, $fallback--cRed); +} + .radius-container, .color-container { display: flex; diff --git a/src/i18n/messages.js b/src/i18n/messages.js index c44c08ac..3951651d 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -50,6 +50,7 @@ const de = { presets: 'Voreinstellungen', export_theme: 'Aktuelles Theme exportieren', import_theme: 'Gespeichertes Theme laden', + invalid_theme_imported: 'Die ausgewählte Datei ist kein unterstütztes Pleroma-Theme. Keine Änderungen wurden vorgenommen.', theme_help: 'Benutze HTML Farbcodes (#rrggbb) um dein Farbschema anzupassen', radii_help: 'Kantenrundung (in Pixel) der Oberfläche anpassen', background: 'Hintergrund', @@ -293,6 +294,7 @@ const en = { export_theme: 'Export current theme', import_theme: 'Load saved theme', theme_help: 'Use hex color codes (#rrggbb) to customize your color theme.', + invalid_theme_imported: 'The selected file is not a supported Pleroma theme. No changes to your theme were made.', radii_help: 'Set up interface edge rounding (in pixels)', background: 'Background', foreground: 'Foreground',