fix(theming): use plain string in `t` method (l10n)

To correctly extract the translations we only can have plain strings
within the `t` method.
Also applied new l10n feature to move link code into translation
function cleaning up a bit.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

1 files changed, 26 insertions, 24 deletions

diff --git a/apps/theming/src/UserTheming.vue b/apps/theming/src/UserTheming.vue
index 2efe409a62a..baebf09bcc5 100644
--- a/apps/theming/src/UserTheming.vue
+++ b/apps/theming/src/UserTheming.vue
@@ -76,11 +76,12 @@
 </template>
 
 <script>
-import { generateOcsUrl } from '@nextcloud/router'
+import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
+import { generateOcsUrl } from '@nextcloud/router'
 import { refreshStyles } from './helpers/refreshStyles'
 
-import axios from '@nextcloud/axios'
+import axios, { isAxiosError } from '@nextcloud/axios'
 
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
@@ -137,35 +138,32 @@ export default {
 		},
 
 		description() {
-			// using the `t` replace method escape html, we have to do it manually :/
 			return t(
 				'theming',
-				'Universal access is very important to us. We follow web standards and check to make everything usable also without mouse, and assistive software such as screenreaders. We aim to be compliant with the {guidelines}Web Content Accessibility Guidelines{linkend} 2.1 on AA level, with the high contrast theme even on AAA level.',
+				'Universal access is very important to us. We follow web standards and check to make everything usable also without mouse, and assistive software such as screenreaders. We aim to be compliant with the {linkstart}Web Content Accessibility Guidelines{linkend} 2.1 on AA level, with the high contrast theme even on AAA level.',
+				{
+					linkstart: '<a target="_blank" href="https://www.w3.org/WAI/standards-guidelines/wcag/" rel="noreferrer nofollow">',
+					linkend: '</a>',
+				},
+				{
+					escape: false,
+				},
 			)
-				.replace('{guidelines}', this.guidelinesLink)
-				.replace('{linkend}', '</a>')
-		},
-
-		guidelinesLink() {
-			return '<a target="_blank" href="https://www.w3.org/WAI/standards-guidelines/wcag/" rel="noreferrer nofollow">'
 		},
 
 		descriptionDetail() {
 			return t(
 				'theming',
 				'If you find any issues, do not hesitate to report them on {issuetracker}our issue tracker{linkend}. And if you want to get involved, come join {designteam}our design team{linkend}!',
+				{
+					issuetracker: '<a target="_blank" href="https://github.com/nextcloud/server/issues/" rel="noreferrer nofollow">',
+					designteam: '<a target="_blank" href="https://nextcloud.com/design" rel="noreferrer nofollow">',
+					linkend: '</a>',
+				},
+				{
+					escape: false,
+				},
 			)
-				.replace('{issuetracker}', this.issuetrackerLink)
-				.replace('{designteam}', this.designteamLink)
-				.replace(/\{linkend\}/g, '</a>')
-		},
-
-		issuetrackerLink() {
-			return '<a target="_blank" href="https://github.com/nextcloud/server/issues/" rel="noreferrer nofollow">'
-		},
-
-		designteamLink() {
-			return '<a target="_blank" href="https://nextcloud.com/design" rel="noreferrer nofollow">'
 		},
 	},
 
@@ -284,9 +282,13 @@ export default {
 					})
 				}
 
-			} catch (err) {
-				console.error(err, err.response)
-				OC.Notification.showTemporary(t('theming', err.response.data.ocs.meta.message + '. Unable to apply the setting.'))
+			} catch (error) {
+				console.error('theming: Unable to apply setting.', error)
+				let message = t('theming', 'Unable to apply the setting.')
+				if (isAxiosError(error) && error.response.data.ocs?.meta?.message) {
+					message = `${error.response.data.ocs.meta.message}. ${message}`
+				}
+				showError(message)
 			}
 		},
 	},