✨ Render base strings

packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue

@@ -3,17 +3,17 @@
 		<banner
 			v-show="showValidationWarning"
 			theme="danger"
-			message="Please check the errors below"
+			:message="$baseText('credentialEdit.credentialConfig.pleaseCheckTheErrorsBelow')"
 		/>
 
 		<banner
 			v-if="authError && !showValidationWarning"
 			theme="danger"
-			message="Couldn’t connect with these settings"
+			:message="$baseText('credentialEdit.credentialConfig.couldntConnectWithTheseSettings')"
 			:details="authError"
-			buttonLabel="Retry"
+			:buttonLabel="$baseText('credentialEdit.credentialConfig.retry')"
 			buttonLoadingLabel="Retrying"
-			buttonTitle="Retry credentials test"
+			:buttonTitle="$baseText('credentialEdit.credentialConfig.retryCredentialTest')"
 			:buttonLoading="isRetesting"
 			@click="$emit('retest')"
 		/>
@@ -21,35 +21,37 @@
 		<banner
 			v-show="showOAuthSuccessBanner && !showValidationWarning"
 			theme="success"
-			message="Account connected"
-			buttonLabel="Reconnect"
-			buttonTitle="Reconnect OAuth Credentials"
+			:message="$baseText('credentialEdit.credentialConfig.accountConnected')"
+			:buttonLabel="$baseText('credentialEdit.credentialConfig.reconnect')"
+			:buttonTitle="$baseText('credentialEdit.credentialConfig.reconnectOAuth2Credential')"
 			@click="$emit('oauth')"
 		/>
 
 		<banner
 			v-show="testedSuccessfully && !showValidationWarning"
 			theme="success"
-			message="Connection tested successfully"
-			buttonLabel="Retry"
-			buttonLoadingLabel="Retrying"
-			buttonTitle="Retry credentials test"
+			:message="$baseText('credentialEdit.credentialConfig.connectionTestedSuccessfully')"
+			:buttonLabel="$baseText('credentialEdit.credentialConfig.retry')"
+			:buttonLoadingLabel="$baseText('credentialEdit.credentialConfig.retrying')"
+			:buttonTitle="$baseText('credentialEdit.credentialConfig.retryCredentialTest')"
 			:buttonLoading="isRetesting"
 			@click="$emit('retest')"
 		/>
 
 		<n8n-info-tip v-if="documentationUrl && credentialProperties.length">
-			Need help filling out these fields?
-			<a :href="documentationUrl" target="_blank" @click="onDocumentationUrlClick">Open docs</a>
+			{{ $baseText('credentialEdit.credentialConfig.needHelpFillingOutTheseFields') }}
+			<a :href="documentationUrl" target="_blank" @click="onDocumentationUrlClick">
+				{{ $baseText('credentialEdit.credentialConfig.openDocs') }}
+			</a>
 		</n8n-info-tip>
 
 		<CopyInput
 			v-if="isOAuthType && credentialProperties.length"
-			label="OAuth Redirect URL"
+			:label="$baseText('credentialEdit.credentialConfig.oAuthRedirectUrl')"
 			:copyContent="oAuthCallbackUrl"
-			copyButtonText="Click to copy"
-			:subtitle="`In ${appName}, use the URL above when prompted to enter an OAuth callback or redirect URL`"
-			successMessage="Redirect URL copied to clipboard"
+			:copyButtonText="$baseText('credentialEdit.credentialConfig.clickToCopy')"
+			:subtitle="$baseText('credentialEdit.credentialConfig.subtitle', { interpolate: { appName } })"
+			:successMessage="$baseText('credentialEdit.credentialConfig.redirectUrlCopiedToClipboard')"
 		/>
 
 		<CredentialInputs
@@ -78,8 +80,11 @@ import Banner from '../Banner.vue';
 import CopyInput from '../CopyInput.vue';
 import CredentialInputs from './CredentialInputs.vue';
 import OauthButton from './OauthButton.vue';
+import { renderText } from '../mixins/renderText';
 
-export default Vue.extend({
+import mixins from 'vue-typed-mixins';
+
+export default mixins(renderText).extend({
 	name: 'CredentialConfig',
 	components: {
 		Banner,

packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue

@@ -53,10 +53,10 @@
 						:light="true"
 					>
 						<n8n-menu-item index="connection" :class="$style.credTab"
-							><span slot="title">Connection</span></n8n-menu-item
+							><span slot="title">{{ $baseText('credentialEdit.credentialEdit.connection') }}</span></n8n-menu-item
 						>
 						<n8n-menu-item index="details" :class="$style.credTab"
-							><span slot="title">Details</span></n8n-menu-item
+							><span slot="title">{{ $baseText('credentialEdit.credentialEdit.details') }}</span></n8n-menu-item
 						>
 					</n8n-menu>
 				</div>
@@ -116,6 +116,7 @@ import CredentialIcon from '../CredentialIcon.vue';
 
 import mixins from 'vue-typed-mixins';
 import { nodeHelpers } from '../mixins/nodeHelpers';
+import { renderText } from '../mixins/renderText';
 import { showMessage } from '../mixins/showMessage';
 
 import CredentialConfig from './CredentialConfig.vue';
@@ -128,7 +129,7 @@ interface NodeAccessMap {
 	[nodeType: string]: ICredentialNodeAccess | null;
 }
 
-export default mixins(showMessage, nodeHelpers).extend({
+export default mixins(renderText, showMessage, nodeHelpers).extend({
 	name: 'CredentialsDetail',
 	components: {
 		CredentialConfig,
@@ -349,20 +350,20 @@ export default mixins(showMessage, nodeHelpers).extend({
 			if (this.hasUnsavedChanges) {
 				const displayName = this.credentialType ? this.credentialType.displayName : '';
 				keepEditing = await this.confirmMessage(
-					`Are you sure you want to throw away the changes you made to the ${displayName} credential?`,
-					'Close without saving?',
+					this.$baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.message', { interpolate: { credentialDisplayName: displayName } }),
+					this.$baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.headline'),
 					null,
-					'Keep editing',
-					'Close',
+					this.$baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.cancelButtonText'),
+					this.$baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.confirmButtonText'),
 				);
 			}
 			else if (this.isOAuthType && !this.isOAuthConnected) {
 				keepEditing = await this.confirmMessage(
-					`You need to connect your credential for it to work`,
-					'Close without connecting?',
+					this.$baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.message'),
+					this.$baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.headline'),
 					null,
-					'Keep editing',
-					'Close',
+					this.$baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.cancelButtonText'),
+					this.$baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.confirmButtonText'),
 				);
 			}
 
@@ -400,7 +401,9 @@ export default mixins(showMessage, nodeHelpers).extend({
 				this.$store.getters['credentials/getCredentialTypeByName'](name);
 
 			if (!credentialsData) {
-				throw new Error(`Could not find credentials of type: ${name}`);
+				throw new Error(
+					this.$baseText('credentialEdit.credentialEdit.couldNotFindCredentialOfType') + ':' + name,
+				);
 			}
 
 			if (credentialsData.extends === undefined) {
@@ -436,7 +439,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 					});
 				if (!currentCredentials) {
 					throw new Error(
-						`Could not find the credentials with the id: ${this.credentialId}`,
+						this.$baseText('credentialEdit.credentialEdit.couldNotFindCredentialWithId') + ':' + this.credentialId,
 					);
 				}
 
@@ -448,11 +451,11 @@ export default mixins(showMessage, nodeHelpers).extend({
 						this.nodeAccess[access.nodeType] = access;
 					},
 				);
-			} catch (e) {
+			} catch (error) {
 				this.$showError(
-					e,
-					'Problem loading credentials',
-					'There was a problem loading the credentials:',
+					error,
+					this.$baseText('credentialEdit.credentialEdit.showError.loadCredential.title'),
+					this.$baseText('credentialEdit.credentialEdit.showError.loadCredential.message'),
 				);
 				this.closeDialog();
 
@@ -657,8 +660,8 @@ export default mixins(showMessage, nodeHelpers).extend({
 			} catch (error) {
 				this.$showError(
 					error,
-					'Problem creating credentials',
-					'There was a problem creating the credentials:',
+					this.$baseText('credentialEdit.credentialEdit.showError.createCredential.title'),
+					this.$baseText('credentialEdit.credentialEdit.showError.createCredential.message'),
 				);
 
 				return null;
@@ -686,8 +689,8 @@ export default mixins(showMessage, nodeHelpers).extend({
 			} catch (error) {
 				this.$showError(
 					error,
-					'Problem updating credentials',
-					'There was a problem updating the credentials:',
+					this.$baseText('credentialEdit.credentialEdit.showError.updateCredential.title'),
+					this.$baseText('credentialEdit.credentialEdit.showError.updateCredential.message'),
 				);
 
 				return null;
@@ -708,10 +711,10 @@ export default mixins(showMessage, nodeHelpers).extend({
 			const savedCredentialName = this.currentCredential.name;
 
 			const deleteConfirmed = await this.confirmMessage(
-				`Are you sure you want to delete "${savedCredentialName}" credentials?`,
-				'Delete Credentials?',
+				this.$baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.message', { interpolate: { savedCredentialName } }),
+				this.$baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline'),
 				null,
-				'Yes, delete!',
+				this.$baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText'),
 			);
 
 			if (deleteConfirmed === false) {
@@ -727,8 +730,8 @@ export default mixins(showMessage, nodeHelpers).extend({
 			} catch (error) {
 				this.$showError(
 					error,
-					'Problem deleting credentials',
-					'There was a problem deleting the credentials:',
+					this.$baseText('credentialEdit.credentialEdit.showError.deleteCredential.title'),
+					this.$baseText('credentialEdit.credentialEdit.showError.deleteCredential.message'),
 				);
 				this.isDeleting = false;
 
@@ -740,8 +743,11 @@ export default mixins(showMessage, nodeHelpers).extend({
 			this.updateNodesCredentialsIssues();
 
 			this.$showMessage({
-				title: 'Credentials deleted',
-				message: `The credential "${savedCredentialName}" was deleted!`,
+				title: this.$baseText('credentialEdit.credentialEdit.showMessage.title'),
+				message: this.$baseText(
+					'credentialEdit.credentialEdit.showMessage.message',
+					{ interpolate: { savedCredentialName } },
+				),
 				type: 'success',
 			});
 			this.closeDialog();
@@ -778,8 +784,8 @@ export default mixins(showMessage, nodeHelpers).extend({
 			} catch (error) {
 				this.$showError(
 					error,
-					'OAuth Authorization Error',
-					'Error generating authorization URL:',
+					this.$baseText('credentialEdit.credentialEdit.showError.generateAuthorizationUrl.title'),
+					this.$baseText('credentialEdit.credentialEdit.showError.generateAuthorizationUrl.message'),
 				);
 
 				return;

packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue

@@ -2,7 +2,7 @@
 	<div :class="$style.container">
 		<el-row>
 			<el-col :span="8" :class="$style.accessLabel">
-				<n8n-text :compact="true" :bold="true">Allow use by</n8n-text>
+				<n8n-text :compact="true" :bold="true">{{ $baseText('credentialEdit.credentialInfo.allowUseBy') }}</n8n-text>
 			</el-col>
 			<el-col :span="16">
 				<div
@@ -20,7 +20,7 @@
 		</el-row>
 		<el-row v-if="currentCredential">
 			<el-col :span="8" :class="$style.label">
-				<n8n-text :compact="true" :bold="true">Created</n8n-text>
+				<n8n-text :compact="true" :bold="true">{{ $baseText('credentialEdit.credentialInfo.created') }}</n8n-text>
 			</el-col>
 			<el-col :span="16" :class="$style.valueLabel">
 				<n8n-text :compact="true"><TimeAgo :date="currentCredential.createdAt" :capitalize="true" /></n8n-text>
@@ -28,7 +28,7 @@
 		</el-row>
 		<el-row v-if="currentCredential">
 			<el-col :span="8" :class="$style.label">
-				<n8n-text :compact="true" :bold="true">Last modified</n8n-text>
+				<n8n-text :compact="true" :bold="true">{{ $baseText('credentialEdit.credentialInfo.lastModified') }}</n8n-text>
 			</el-col>
 			<el-col :span="16" :class="$style.valueLabel">
 				<n8n-text :compact="true"><TimeAgo :date="currentCredential.updatedAt" :capitalize="true" /></n8n-text>
@@ -36,7 +36,7 @@
 		</el-row>
 		<el-row v-if="currentCredential">
 			<el-col :span="8" :class="$style.label">
-				<n8n-text :compact="true" :bold="true">ID</n8n-text>
+				<n8n-text :compact="true" :bold="true">{{ $baseText('credentialEdit.credentialInfo.id') }}</n8n-text>
 			</el-col>
 			<el-col :span="16" :class="$style.valueLabel">
 				<n8n-text :compact="true">{{currentCredential.id}}</n8n-text>
@@ -47,10 +47,12 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { renderText } from '../mixins/renderText';
 
 import TimeAgo from '../TimeAgo.vue';
+import mixins from 'vue-typed-mixins';
 
-export default Vue.extend({
+export default mixins(renderText).extend({
 	name: 'CredentialInfo',
 	props: ['nodesWithAccess', 'nodeAccess', 'currentCredential'],
 	components: {

packages/editor-ui/src/components/CredentialEdit/OauthButton.vue

@@ -4,12 +4,12 @@
 			v-if="isGoogleOAuthType"
 			:src="basePath + 'google-signin-light.png'"
 			:class="$style.googleIcon"
-			alt="Sign in with Google"
+			:alt="$baseText('credentialEdit.oAuthButton.signInWithGoogle')"
 			@click.stop="$emit('click')"
 		/>
 		<n8n-button
 			v-else
-			label="Connect my account"
+			:label="$baseText('credentialEdit.oAuthButton.connectMyAccount')"
 			size="large"
 			@click.stop="$emit('click')"
 		/>
@@ -18,8 +18,10 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { renderText } from '../mixins/renderText';
+import mixins from 'vue-typed-mixins';
 
-export default Vue.extend({
+export default mixins(renderText).extend({
 	props: {
 		isGoogleOAuthType: {
 			type: Boolean,