Add vue-i18n

src/components/NavBarComponent.vue

@@ -22,9 +22,9 @@ const toggleBurger = () => {
 					</div>
 					<div class="navbar-menu" :class="{ 'is-active': menuActive }">
 						<div class="navbar-end">
-							<RouterLink to="/add-account" class="navbar-item">New account</RouterLink>
-							<RouterLink to="/manage-accounts" class="navbar-item">Accounts</RouterLink>
-							<RouterLink to="/about" class="navbar-item">About</RouterLink>
+							<RouterLink to="/add-account" class="navbar-item">{{ $t("navbar.addAccount") }}</RouterLink>
+							<RouterLink to="/manage-accounts" class="navbar-item">{{ $t("navbar.manageAccounts") }}</RouterLink>
+							<RouterLink to="/about" class="navbar-item">{{ $t("navbar.about") }}</RouterLink>
 						</div>
 					</div>
 				</nav>

src/locales/en.json

@@ -0,0 +1,64 @@
+{
+	"invariants": {
+		"controls": {
+			"cancel": "Cancel",
+			"close": "Close",
+			"copy": "Copy",
+			"delete": "Delete"
+		}
+	},
+	"navbar": {
+		"addAccount": "New account",
+		"manageAccounts": "Accounts",
+		"about": "About"
+	},
+	"about": {
+		"title": "About",
+		"name": "Sub-Address KEy (SAKE) app",
+		"version": "Version: {version}",
+		"license": "License: {mit} or {apache}",
+		"repository": "Repository: {url}",
+		"close": "@:invariants.controls.close"
+	},
+	"addAccount": {
+		"title": "New account",
+		"localPart": "Local part",
+		"separator": "Separator",
+		"domainName": "Domain name",
+		"privateKey": "Private key",
+		"scan": "Scan",
+		"addAccount": "Add account",
+		"cancel": "@:invariants.controls.cancel",
+		"error": {
+			"invalidBase64": "The key must be a valid base64 string.",
+			"invalidSeparator": "The separator must be a single character.",
+			"cameraNotAllowed": "Camera access permission was not granted.",
+			"cameraNotFound": "No camera detected.",
+			"cameraInsecureContext": "Unable to access the camera through an insecure channel.",
+			"cameraNotReadable": "Camera not accessible (potentially already in use).",
+			"cameraOverconstrained": "Installed cameras are not suitable.",
+			"cameraStreamApiNotSupported": "Stream API is not supported in this browser.",
+			"unknown": "Unknown error."
+		}
+	},
+	"deleteAccount": {
+		"title": "Delete account",
+		"account": "You are about to delete the following account:",
+		"confirm": "Are you sure?",
+		"delete": "@:invariants.controls.delete",
+		"cancel": "@:invariants.controls.cancel"
+	},
+	"main": {
+		"title": "New address",
+		"account": "Account",
+		"name": "Name",
+		"input": "Dedicated name",
+		"address": "Address",
+		"copy": "@:invariants.controls.copy"
+	},
+	"manageAccounts": {
+		"title": "Accounts",
+		"delete": "@:invariants.controls.delete",
+		"close": "@:invariants.controls.close"
+	}
+}

src/main.js

@@ -1,9 +1,22 @@
 import './assets/main.sass';
 
 import { createApp } from 'vue';
+import { createI18n } from 'vue-i18n'
 import App from './App.vue';
 import router from './router';
 
+import msg_en from './locales/en.json';
+
+const messages = {
+	en: msg_en,
+};
+const i18n = createI18n({
+	locale: 'en',
+	fallbackLocale: 'en',
+	messages,
+});
+
 const app = createApp(App);
 app.use(router);
+app.use(i18n);
 app.mount('#app');

src/views/AboutView.vue

@@ -16,20 +16,29 @@ const toMainView = () => {
 
 <template>
 	<LayoutComponent>
-		<h1 class="title is-1">About</h1>
-		<h4 class="subtitle is-4">Sub-Address KEy (SAKE) app</h4>
+		<h1 class="title is-1">{{ $t("about.title") }}</h1>
+		<h4 class="subtitle is-4">{{ $t("about.name") }}</h4>
 		<div class="block">
-			<p>Version {{ version }}</p>
-			<p>
-				License: <ExternalLinkComponent :url="mitLicenseUrl" name="MIT" /> or <ExternalLinkComponent :url="apacheLicenseUrl" name="Apache 2.0" />
-			</p>
-			<p>
-				Repository: <ExternalLinkComponent :url="repoUrl" :name="repoUrl" />
-			</p>
+			<i18n-t keypath="about.version" tag="p">
+				<template v-slot:version>{{ version }}</template>
+			</i18n-t>
+			<i18n-t keypath="about.license" tag="p">
+				<template v-slot:mit>
+					<ExternalLinkComponent :url="mitLicenseUrl" name="MIT" />
+				</template>
+				<template v-slot:apache>
+					<ExternalLinkComponent :url="apacheLicenseUrl" name="Apache 2.0" />
+				</template>
+			</i18n-t>
+			<i18n-t keypath="about.repository" tag="p">
+				<template v-slot:url>
+					<ExternalLinkComponent :url="repoUrl" :name="repoUrl" />
+				</template>
+			</i18n-t>
 		</div>
 		<div class="block">
 			<div class="buttons is-centered">
-				<button class="button is-light" @click="toMainView">Close</button>
+				<button class="button is-light" @click="toMainView">{{ $t("about.close") }}</button>
 			</div>
 		</div>
 	</LayoutComponent>

src/views/AddAccountView.vue

@@ -13,7 +13,7 @@ const localPart = ref('');
 const separator = ref('+');
 const domainName = ref('');
 const privateKey = ref('');
-const errorMessage = ref('');
+const errorMessageId = ref('');
 
 const base64Decode = (str_b64) => {
 	try {
@@ -25,7 +25,7 @@ const base64Decode = (str_b64) => {
 		}
 		return b;
 	} catch (e) {
-		throw new Error('The key must be a valid base64 string.');
+		throw new Error('addAccount.error.invalidBase64');
 	}
 };
 
@@ -43,7 +43,7 @@ const addAccount = () => {
 	if (!addDisabled.value) {
 		try {
 			if (separator.value.length != 1) {
-				throw new Error('The separator must be a single character.');
+				throw new Error('addAccount.error.invalidSeparator');
 			}
 			const key = base64Decode(privateKey.value);
 			const hash = sha256(`${localPart.value}@${domainName.value}`);
@@ -57,7 +57,7 @@ const addAccount = () => {
 			accounts.value.push(newAccount);
 			return toMainView();
 		} catch (e) {
-			errorMessage.value = e.message;
+			errorMessageId.value = e.message;
 		}
 	}
 };
@@ -74,24 +74,22 @@ const onQrCodeDetected = (result_list) => {
 	}
 };
 const onQrCodeError = (err) => {
-	var message = '';
 	if (err.name === 'NotAllowedError') {
-		message = 'Camera access permission was not granted.'
+		setErrorMessage('addAccount.error.cameraNotAllowed');
 	} else if (err.name === 'NotFoundError') {
-		message = 'No camera detected'
+		setErrorMessage('addAccount.error.cameraNotFound');
 	} else if (err.name === 'NotSupportedError' || err.name === 'InsecureContextError') {
-		message = 'Unable to access the camera through an insecure channel.'
+		setErrorMessage('addAccount.error.cameraInsecureContext');
 	} else if (err.name === 'NotReadableError') {
-		message = 'Camera not accessible (potentially already in use).'
+		setErrorMessage('addAccount.error.cameraNotReadable');
 	} else if (err.name === 'OverconstrainedError') {
-		message = 'Installed cameras are not suitable.'
+		setErrorMessage('addAccount.error.cameraOverconstrained');
 	} else if (err.name === 'StreamApiNotSupportedError') {
-		message = 'Stream API is not supported in this browser.'
+		setErrorMessage('addAccount.error.cameraStreamApiNotSupported');
 	} else {
-		message = `${err.name}: ${err.value}`;
+		setErrorMessage('addAccount.error.unknown');
+		console.log(`${err.name}: ${err.value}`);
 	}
-	console.log(message);
-	errorMessage.value = message;
 };
 
 // Cancel button
@@ -103,50 +101,57 @@ const toMainView = () => {
 };
 
 // Error message
+const setErrorMessage = (messageId) => {
+	if (messageId.startsWith('addAccount.error.')) {
+		errorMessageId.value = messageId;
+	} else {
+		errorMessageId.value = 'addAccount.error.unknown';
+	}
+};
 const resetErrorMessage = () => {
-	errorMessage.value = '';
+	errorMessageId.value = '';
 };
 </script>
 
 <template>
 	<LayoutComponent>
-		<h1 class="title is-1">New account</h1>
-		<div class="notification is-danger is-light" v-if="errorMessage">
+		<h1 class="title is-1">{{ $t("addAccount.title") }}</h1>
+		<div class="notification is-danger is-light" v-if="errorMessageId">
 			<button class="delete" @click="resetErrorMessage"></button>
-			{{ errorMessage }}
+			{{ $t(errorMessageId) }}
 		</div>
 		<div class="container" id="new-account-error-msg-container"></div>
 		<div class="field">
-			<label class="label" for="new-addr-local-part">Local part</label>
+			<label class="label" for="new-addr-local-part">{{ $t("addAccount.localPart") }}</label>
 			<div class="control">
 				<input class="input" type="text" id="new-addr-local-part" v-model="localPart">
 			</div>
 		</div>
 		<div class="field">
-			<label class="label" for="new-addr-separator">Separator</label>
+			<label class="label" for="new-addr-separator">{{ $t("addAccount.separator") }}</label>
 			<div class="control">
 				<input class="input" type="text" id="new-addr-separator" v-model="separator">
 			</div>
 		</div>
 		<div class="field">
-			<label class="label" for="new-addr-domain">Domain name</label>
+			<label class="label" for="new-addr-domain">{{ $t("addAccount.domainName") }}</label>
 			<div class="control">
 				<input class="input" type="text" id="new-addr-domain" placeholder="example.org" v-model="domainName">
 			</div>
 		</div>
-		<label class="label" for="new-addr-key">Private key</label>
+		<label class="label" for="new-addr-key">{{ $t("addAccount.privateKey") }}</label>
 		<div class="field has-addons">
 			<div class="control is-expanded">
 				<input class="input" type="text" id="new-addr-key" v-model="privateKey">
 			</div>
 			<p class="control">
-				<a class="button is-primary" @click="showQrCodeScanner">Scan</a>
+				<a class="button is-primary" @click="showQrCodeScanner">{{ $t("addAccount.scan") }}</a>
 			</p>
 		</div>
 		<qrcode-stream v-if="scanQrCode" @detect="onQrCodeDetected" @error="onQrCodeError"></qrcode-stream>
 		<div class="buttons is-centered">
-			<button class="button is-primary" :disabled="addDisabled" @click="addAccount">Add account</button>
-			<button class="button is-light" v-if="!cancellDisabled" @click="toMainView">Cancel</button>
+			<button class="button is-primary" :disabled="addDisabled" @click="addAccount">{{ $t("addAccount.addAccount") }}</button>
+			<button class="button is-light" v-if="!cancellDisabled" @click="toMainView">{{ $t("addAccount.cancel") }}</button>
 		</div>
 	</LayoutComponent>
 </template>

src/views/DeleteAccountView.vue

@@ -19,13 +19,13 @@ const toMainView = () => {
 
 <template>
 	<LayoutComponent>
-		<h1 class="title is-1">Delete account</h1>
-		<p>You are about to delete the following account:</p>
+		<h1 class="title is-1">{{ $t("deleteAccount.title") }}</h1>
+		<p>{{ $t("deleteAccount.account") }}</p>
 		<p class="has-text-weight-semibold is-size-5">{{ account.localPart }}@{{ account.domain }}</p>
-		<p>Are you sure?</p>
+		<p>{{ $t("deleteAccount.confirm") }}</p>
 		<div class="buttons is-centered">
-			<button class="button is-danger" @click="deleteAccount">Delete</button>
-			<button class="button is-light" @click="toMainView">Cancel</button>
+			<button class="button is-danger" @click="deleteAccount">{{ $t("deleteAccount.delete") }}</button>
+			<button class="button is-light" @click="toMainView">{{ $t("deleteAccount.cancel") }}</button>
 		</div>
 	</LayoutComponent>
 </template>

src/views/MainView.vue

@@ -49,9 +49,9 @@ const copyAddr = () => {
 <template>
 	<NavBarComponent />
 	<LayoutComponent>
-		<h1 class="title is-1">New address</h1>
+		<h1 class="title is-1">{{ $t("main.title") }}</h1>
 		<div class="field">
-			<label class="label" for="account-name">Account</label>
+			<label class="label" for="account-name">{{ $t("main.account") }}</label>
 			<div class="control">
 				<div class="select is-fullwidth">
 					<select id="account-name" v-model="selectedAccountId">
@@ -61,19 +61,19 @@ const copyAddr = () => {
 			</div>
 		</div>
 		<div class="field">
-			<label class="label" for="sub-addr-name">Name</label>
+			<label class="label" for="sub-addr-name">{{ $t("main.name") }}</label>
 			<div class="control">
-				<input class="input" type="text" id="sub-addr-name" placeholder="Text input" v-model="subAddrName">
+				<input class="input" type="text" id="sub-addr-name" :placeholder="$t('main.input')" v-model="subAddrName">
 			</div>
 		</div>
 		<div class="field">
-			<label class="label" for="generated-addr">Address</label>
+			<label class="label" for="generated-addr">{{ $t("main.address") }}</label>
 			<div class="control">
 				<input class="input" type="text" id="generated-addr" v-model="generatedAddr" disabled>
 			</div>
 		</div>
 		<div class="buttons is-centered">
-			<button class="button is-primary" @click="copyAddr">Copy</button>
+			<button class="button is-primary" @click="copyAddr">{{ $t("main.copy") }}</button>
 		</div>
 	</LayoutComponent>
 </template>

src/views/ManageAccountsView.vue

@@ -17,7 +17,7 @@ const toMainView = () => {
 
 <template>
 	<LayoutComponent>
-		<h1 class="title is-1">Accounts</h1>
+		<h1 class="title is-1">{{ $t("manageAccounts.title") }}</h1>
 		<div class="block">
 			<table class="table is-fullwidth">
 				<tbody>
@@ -26,7 +26,7 @@ const toMainView = () => {
 							{{ account.localPart }}@{{ account.domain }}
 						</th>
 						<th>
-							<button class="button is-danger" @click="deleteAccount(account.id)">Delete</button>
+							<button class="button is-danger" @click="deleteAccount(account.id)">{{ $t("manageAccounts.delete") }}</button>
 						</th>
 					</tr>
 				</tbody>
@@ -34,7 +34,7 @@ const toMainView = () => {
 		</div>
 		<div class="block">
 			<div class="buttons is-centered">
-				<button class="button is-light" @click="toMainView">Close</button>
+				<button class="button is-light" @click="toMainView">{{ $t("manageAccounts.close") }}</button>
 			</div>
 		</div>
 	</LayoutComponent>