Edit page localization

interface/windows/edit/edit.svelte

@@ -1,11 +1,14 @@
 <div class="transparent-900 loadedCodes m-auto my-20 hidden w-4/5 rounded-2xl p-10 text-left">
-	<h1 class="px-10">Edit codes</h1>
+	<h1 class="px-10">{language.edit.editCodes}</h1>
 	<div class="content mx-auto flex flex-col items-center justify-center rounded-2xl p-10" />
 </div>
 
 <script lang="ts">
 	import { onMount } from "svelte"
 	import { loadSavedCodes } from "./index"
+	import { getLanguage } from "@utils/language"
+
+	const language = getLanguage()
 
 	onMount(() => {
 		loadSavedCodes()

interface/windows/edit/index.ts

@@ -3,8 +3,10 @@ import { dialog } from "@tauri-apps/api"
 import { getSettings, setSettings } from "../../stores/settings"
 import { navigate } from "../../utils/navigate"
 import { decryptData, encryptData } from "interface/utils/encryption"
+import { getLanguage } from "@utils/language"
 
 const settings = getSettings()
+const language = getLanguage()
 let names: string[] = []
 let issuers: string[] = []
 let secrets: string[] = []
@@ -23,24 +25,24 @@ const generateEditElements = () => {
 		element.innerHTML = `
 		<div class="flex flex-wrap gap-3">
 				<div>
-					<h5>Name</h5>
+					<h5>${language.common.name}</h5>
 					<input id="issuer${i}" class="input mt-1" type="text" value="${issuers[i]}" readonly />
 				</div>
 
 				<div>
-					<h5>Description</h5>
+					<h5>${language.common.description}</h5>
 					<input id="name${i}" class="input mt-1 w-96" type="text" value="${names[i]}" readonly />
 				</div>
 			</div>
 			<div class="ml-10 flex gap-3 flex-wrap sm:mt-10 sm:w-full sm:ml-0">
 				<button id="editCode${i}" class="button">
 				<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"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg>
-					Edit
+					${language.common.edit}
 				</button>
 
 				<button id="deleteCode${i}" class="button">
 				<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="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
-					Delete
+					${language.common.delete}
 				</button>
 			</div>`
 
@@ -67,7 +69,7 @@ export const loadSavedCodes = async () => {
 	const codes = settings.vault.codes
 
 	if (codes === null) {
-		dialog.message("No save file found. \n\nGo to the codes or the import page and import your codes!", { type: "error" })
+		dialog.message(language.codes.dialog.noSaveFileFound, { type: "error" })
 
 		return navigate("import")
 	}
@@ -146,7 +148,7 @@ export const editCode = async (id: number) => {
 		const newIssuer = document.querySelector(`#issuer${id}`).value
 		const newName = document.querySelector(`#name${id}`).value
 
-		const res = await dialog.ask("Do you want to save your changes?", { type: "warning" })
+		const res = await dialog.ask(language.edit.dialog.saveChanges, { type: "warning" })
 
 		if (res === true) {
 			issuers[id] = newIssuer
@@ -164,7 +166,7 @@ export const editCode = async (id: number) => {
  * Delete a specific code
  */
 export const deleteCode = async (id: number) => {
-	const res = await dialog.ask("Are you sure you want to delete this code? \n\nYou can not revert this.", { type: "warning" })
+	const res = await dialog.ask(language.edit.dialog.deleteCode, { type: "warning" })
 
 	if (res === true) {
 		names.splice(id, 1)