Landing and confirm page translations

Levminer · Jan 11, 2024 · 4d5331c · 4d5331c
1 parent 72883d0
commit 4d5331c
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 32 deletions.
diff --git a/interface/windows/confirm/confirm.svelte b/interface/windows/confirm/confirm.svelte
@@ -1,16 +1,16 @@
 <div class="transparent-900 m-auto mb-60 mt-40 w-3/5 rounded-2xl p-10 text-center">
-	<h1>Welcome back!</h1>
+	<h1>{language.confirm.welcomeBack}</h1>
 
 	<div class="mx-auto flex w-4/5 flex-col items-center justify-center rounded-2xl p-10">
 		<div class="transparent-800 mb-10 w-full rounded-2xl p-5">
-			<h2>Confirm password</h2>
-			<h3>Please enter your password to continue.</h3>
+			<h2>{language.confirm.confirmPassword}</h2>
+			<h3>{language.confirm.confirmPasswordText}</h3>
 		</div>
 
 		<div class="transparent-800 mb-10 w-full rounded-2xl p-5">
 			<div class="mx-auto flex w-full items-center justify-center text-left">
 				<div>
-					<h5>Password</h5>
+					<h5>{language.confirm.password}</h5>
 					<div class="flex items-center justify-center">
 						<input class="input passwordInput mt-1" type="password" />
 						<svg xmlns="http://www.w3.org/2000/svg" on:click={showPassword} on:keypress={showPassword} class="showPassword relative right-9 top-0.5 h-6 w-6 cursor-pointer" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" /><circle cx="12" cy="12" r="3" /></svg>
@@ -21,7 +21,7 @@
 
 			<button class="button mx-auto mt-10" on:click={confirmPassword}>
 				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" /><path d="m9 12 2 2 4-4" /></svg>
-				Confirm
+				{language.common.confirm}
 			</button>
 		</div>
 
@@ -47,6 +47,9 @@
 	import { onMount } from "svelte"
 	import Details from "../../components/details.svelte"
 	import { confirmPassword, showPassword } from "./index"
+	import { getLanguage } from "@utils/language"
+
+	const language = getLanguage()
 
 	onMount(() => {
 		document.querySelector<HTMLInputElement>(".passwordInput").focus()

diff --git a/interface/windows/confirm/index.ts b/interface/windows/confirm/index.ts
@@ -4,6 +4,9 @@ import { dialog, invoke } from "@tauri-apps/api"
 import { getState, setState } from "../../stores/state"
 import { sendEncryptionKey, verifyWebAuthnLogin } from "interface/utils/encryption"
 import { decodeBase64 } from "@utils/convert"
+import { getLanguage } from "@utils/language"
+
+const language = getLanguage()
 
 export const confirmPassword = async () => {
 	const settings = getSettings()
@@ -28,7 +31,7 @@ export const confirmPassword = async () => {
 
 		navigate("codes")
 	} else {
-		dialog.message("Wrong password! \n\nPlease try again!", { type: "error" })
+		dialog.message(language.confirm.dialog.wrongPassword, { type: "error" })
 	}
 }
 

diff --git a/interface/windows/landing/index.ts b/interface/windows/landing/index.ts
@@ -5,6 +5,9 @@ import { dialog, invoke } from "@tauri-apps/api"
 import { setEntry, generateRandomKey, setEncryptionKey, createWebAuthnLogin, verifyWebAuthnLogin } from "interface/utils/encryption"
 import { search } from "interface/utils/password"
 import { encodeBase64 } from "@utils/convert"
+import { getLanguage } from "@utils/language"
+
+const language = getLanguage()
 
 export const noPassword = async () => {
 	const settings = getSettings()
@@ -51,17 +54,17 @@ export const createPassword = async () => {
 	const input1 = document.querySelector(".passwordInput1")
 
 	if (input0.value !== input1.value) {
-		return dialog.message("Passwords don't match. \n\nPlease try again!", { type: "error" })
+		dialog.message(language.landing.dialog.passwordsNotMatch, { type: "error" })
 	}
 
 	if (input0.value.length < 8) {
-		return dialog.message("Minimum password length is 8 characters. \n\nPlease try again!", { type: "error" })
+		return dialog.message(language.landing.dialog.passwordMinLength, { type: "error" })
 	} else if (input0.value.length > 64) {
-		return dialog.message("Maximum password length is 64 characters. \n\nPlease try again!", { type: "error" })
+		return dialog.message(language.landing.dialog.passwordMaxLength, { type: "error" })
 	}
 
 	if (search(input0.value)) {
-		return dialog.message("This password is on the list of the top 1000 most common passwords. Please choose a more secure password!", { type: "error" })
+		return dialog.message(language.landing.dialog.commonPassword, { type: "error" })
 	}
 
 	if (settings.security.hardwareAuthentication === true) {

diff --git a/interface/windows/landing/landing.svelte b/interface/windows/landing/landing.svelte
@@ -1,37 +1,37 @@
-<div class="transparent-900 landing m-auto mt-40 mb-60 w-3/5 rounded-2xl p-10 text-center">
-	<h1>Welcome to Authme!</h1>
+<div class="transparent-900 landing m-auto mb-60 mt-40 w-3/5 rounded-2xl p-10 text-center">
+	<h1>{language.landing.welcome}</h1>
 
 	<div class="mx-auto flex w-4/5 flex-col items-center justify-center rounded-2xl p-10">
 		<div class="transparent-800 mb-10 w-full rounded-2xl p-5">
-			<h2>Getting started</h2>
-			<h3>Choose how you want to use Authme.</h3>
+			<h2>{language.landing.gettingStarted}</h2>
+			<h3>{language.landing.gettingStartedText}</h3>
 		</div>
 
 		<div class="flex w-full flex-row justify-center gap-5 sm:flex-wrap">
 			<div class="transparent-800 my-5 flex w-1/2 flex-col flex-wrap items-center justify-center rounded-2xl p-5 sm:w-full">
-				<h4 data-loc class="mb-3">Password authentication</h4>
-				<h5 data-loc class="mb-3">You have to type in a password every time you launch Authme.</h5>
+				<h4 class="mb-3">{language.landing.passwordAuth}</h4>
+				<h5 class="mb-3">{language.landing.passwordAuthText}</h5>
 
 				<button class="button" on:click={requirePassword}>
 					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><polyline points="12 16 16 12 12 8" /><line x1="8" y1="12" x2="16" y2="12" /></svg>
-					<span data-loc>Continue</span>
+					<span>{language.common.continue}</span>
 				</button>
 			</div>
 			<div class="transparent-800 my-5 flex w-1/2 flex-col flex-wrap items-center justify-center rounded-2xl p-5 sm:w-full">
-				<h4 data-loc class="mb-3">No authentication</h4>
-				<h5 data-loc class="mb-3">If you don't want to type in a password every time you launch Authme.</h5>
+				<h4 class="mb-3">{language.landing.noAuth}</h4>
+				<h5 class="mb-3">{language.landing.noAuthText}</h5>
 
 				<button class="button" on:click={noPassword}>
 					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" /><path d="m9 12 2 2 4-4" /></svg>
-					<span data-loc>Confirm</span>
+					<span>{language.common.confirm}</span>
 				</button>
 			</div>
 		</div>
 
 		<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left sm:flex-wrap">
 			<div>
-				<h4>Hardware authentication</h4>
-				<h5>Confirm important actions with Windows Hello, Touch ID or any WebAuthn compatible hardware key.</h5>
+				<h4>{language.landing.hardwareAuth}</h4>
+				<h5>{language.landing.hardwareAuthText}</h5>
 			</div>
 			<div class="ml-20 flex gap-3">
 				<Toggle bind:checked={$settings.security.hardwareAuthentication} />
@@ -40,19 +40,19 @@
 	</div>
 </div>
 
-<div class="transparent-900 requirePassword m-auto mt-40 mb-60 hidden w-3/5 rounded-2xl p-10 text-center">
-	<h1>Password authentication</h1>
+<div class="transparent-900 requirePassword m-auto mb-60 mt-40 hidden w-3/5 rounded-2xl p-10 text-center">
+	<h1>{language.landing.passwordAuth}</h1>
 
 	<div class="mx-auto flex w-4/5 flex-col items-center justify-center rounded-2xl p-10">
 		<div class="transparent-800 mb-10 w-full rounded-2xl p-5">
-			<h2>Create password</h2>
-			<h3>Create a strong password to encrypt your codes.</h3>
+			<h2>{language.landing.createPass}</h2>
+			<h3>{language.landing.createPassText}</h3>
 		</div>
 
 		<div class="transparent-800 mb-10 w-full rounded-2xl p-5">
 			<div class="mx-auto flex w-full items-center justify-center gap-5 text-left sm:flex-wrap">
 				<div>
-					<h5>Password</h5>
+					<h5>{language.landing.password}</h5>
 					<div class="flex items-center justify-center">
 						<input class="input passwordInput0 mt-1" type="password" />
 						<svg xmlns="http://www.w3.org/2000/svg" on:click={() => showPassword(0)} on:keypress={() => showPassword(0)} class="showPassword0 relative right-9 top-0.5 h-6 w-6 cursor-pointer" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" /><circle cx="12" cy="12" r="3" /></svg>
@@ -61,7 +61,7 @@
 				</div>
 
 				<div>
-					<h5>Confirm password</h5>
+					<h5>{language.landing.confirmPassword}</h5>
 					<div class="flex items-center justify-center">
 						<input class="input passwordInput1 mt-1" type="password" />
 						<svg xmlns="http://www.w3.org/2000/svg" on:click={() => showPassword(1)} on:keypress={() => showPassword(1)} class="showPassword1 relative right-9 top-0.5 h-6 w-6 cursor-pointer" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" /><circle cx="12" cy="12" r="3" /></svg>
@@ -72,15 +72,15 @@
 
 			<button class="button mx-auto mt-10" on:click={createPassword}>
 				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" /><path d="m9 12 2 2 4-4" /></svg>
-				Confirm
+				{language.common.confirm}
 			</button>
 		</div>
 
 		<Details>
 			<div class="flex justify-between">
 				<div>
-					<h4>Choose a different method</h4>
-					<h5>Go back to the previous page and choose a different login method.</h5>
+					<h4>{language.landing.chooseDifferent}</h4>
+					<h5>{language.landing.chooseDifferentText}</h5>
 				</div>
 				<div class="ml-20">
 					<button
@@ -90,7 +90,7 @@
 						}}
 					>
 						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><polyline points="12 8 8 12 12 16" /><line x1="16" y1="12" x2="8" y2="12" /></svg>
-						Go back
+						{language.landing.goBack}
 					</button>
 				</div>
 			</div>
@@ -104,6 +104,9 @@
 	import Details from "../../components/details.svelte"
 	import { settings } from "interface/stores/settings"
 	import { onMount } from "svelte"
+	import { getLanguage } from "@utils/language"
+
+	const language = getLanguage()
 
 	onMount(() => {
 		appController()