fix(oauth): instance name encoding on oauth app in admin

apps/oauth2/src/App.vue

@@ -4,25 +4,29 @@
 -->
 <template>
 	<NcSettingsSection :name="t('oauth2', 'OAuth 2.0 clients')"
-		:description="t('oauth2', 'OAuth 2.0 allows external services to request access to {instanceName}.', { instanceName })"
+		:description="`${t(
+			'oauth2',
+			'OAuth 2.0 allows external services to request access to'
+		)} ${instanceName} .
+		`"
 		:doc-url="oauthDocLink">
 		<table v-if="clients.length > 0" class="grid">
 			<thead>
 				<tr>
 					<th>
-						{{ t('oauth2', 'Name') }}
+						{{ t("oauth2", "Name") }}
 					</th>
 					<th>
-						{{ t('oauth2', 'Redirection URI') }}
+						{{ t("oauth2", "Redirection URI") }}
 					</th>
 					<th>
-						{{ t('oauth2', 'Client Identifier') }}
+						{{ t("oauth2", "Client Identifier") }}
 					</th>
 					<th>
-						{{ t('oauth2', 'Secret key') }}
+						{{ t("oauth2", "Secret key") }}
 					</th>
 					<th>
-						{{ t('oauth2', 'Delete client') }}
+						{{ t("oauth2", "Delete client") }}
 					</th>
 				</tr>
 			</thead>
@@ -33,14 +37,20 @@
 					@delete="deleteClient" />
 			</tbody>
 		</table>
-		<NcNoteCard v-if="showSecretWarning"
-			type="warning">
-			{{ t('oauth2', 'Make sure you store the secret key, it cannot be recovered.') }}
+		<NcNoteCard v-if="showSecretWarning" type="warning">
+			{{
+				t(
+					"oauth2",
+					"Make sure you store the secret key, it cannot be recovered."
+				)
+			}}
 		</NcNoteCard>
 
 		<br>
-		<h3>{{ t('oauth2', 'Add client') }}</h3>
-		<span v-if="newClient.error" class="msg error">{{ newClient.errorMsg }}</span>
+		<h3>{{ t("oauth2", "Add client") }}</h3>
+		<span v-if="newClient.error" class="msg error">{{
+			newClient.errorMsg
+		}}</span>
 		<form class="oauth2-form" @submit.prevent="addClient">
 			<NcTextField id="name"
 				:value.sync="newClient.name"
@@ -57,7 +67,7 @@
 				:label="t('oauth2', 'Redirection URI')"
 				:placeholder="t('oauth2', 'Redirection URI')" />
 			<NcButton native-type="submit" class="inline-button">
-				{{ t('oauth2', 'Add') }}
+				{{ t("oauth2", "Add") }}
 			</NcButton>
 		</form>
 	</NcSettingsSection>
@@ -108,54 +118,57 @@ export default {
 	},
 	methods: {
 		deleteClient(id) {
-			axios.delete(generateUrl('apps/oauth2/clients/{id}', { id }))
+			axios
+				.delete(generateUrl('apps/oauth2/clients/{id}', { id }))
 				.then(() => {
 					// eslint-disable-next-line vue/no-mutating-props
-					this.clients = this.clients.filter(client => client.id !== id)
+					this.clients = this.clients.filter(
+						(client) => client.id !== id,
+					)
 				})
 		},
 		addClient() {
 			this.newClient.error = false
 
-			axios.post(
-				generateUrl('apps/oauth2/clients'),
-				{
+			axios
+				.post(generateUrl('apps/oauth2/clients'), {
 					name: this.newClient.name,
 					redirectUri: this.newClient.redirectUri,
-				},
-			).then(response => {
-				// eslint-disable-next-line vue/no-mutating-props
-				this.clients.push(response.data)
-				this.showSecretWarning = true
+				})
+				.then((response) => {
+					// eslint-disable-next-line vue/no-mutating-props
+					this.clients.push(response.data)
+					this.showSecretWarning = true
 
-				this.newClient.name = ''
-				this.newClient.redirectUri = ''
-			}).catch(reason => {
-				this.newClient.error = true
-				this.newClient.errorMsg = reason.response.data.message
-			})
+					this.newClient.name = ''
+					this.newClient.redirectUri = ''
+				})
+				.catch((reason) => {
+					this.newClient.error = true
+					this.newClient.errorMsg = reason.response.data.message
+				})
 		},
 	},
 }
 </script>
 <style scoped>
-	table {
-		max-width: 800px;
-	}
+table {
+	max-width: 800px;
+}
 
-	/** Overwrite button height and position to be aligned with the text input */
-	.inline-button {
-		min-height: 34px !important;
-		display: inline-flex !important;
-	}
+/** Overwrite button height and position to be aligned with the text input */
+.inline-button {
+	min-height: 34px !important;
+	display: inline-flex !important;
+}
 
-	.oauth2-form {
-		display: flex;
-		flex-direction: row;
-	}
+.oauth2-form {
+	display: flex;
+	flex-direction: row;
+}
 
-	.oauth2-form--input {
-		max-width: 200px;
-		margin-inline-end: 10px;
-	}
+.oauth2-form--input {
+	max-width: 200px;
+	margin-inline-end: 10px;
+}
 </style>