translate the app

frontend/src/lib/ui/FileUpload.svelte

@@ -2,6 +2,7 @@
 	import type { FileDTO } from '$lib/api'
 	import { Files } from '$lib/files'
 	import { createEventDispatcher } from 'svelte'
+	import { t } from 'svelte-intl-precompile'
 	import MaxSize from './MaxSize.svelte'
 
 	export let label: string = ''
@@ -40,7 +41,7 @@
 	<div class="box">
 		{#if files.length}
 			<div>
-				<b>Selected Files</b>
+				<b>{$t('file_upload.selected_files')}</b>
 				{#each files as file}
 					<div class="file">
 						{file.name}
@@ -49,9 +50,9 @@
 			</div>
 		{:else}
 			<div>
-				<b>No Files Selected</b>
+				<b>{$t('file_upload.no_files_selected')}</b>
 				<br />
-				<small>max: <MaxSize /></small>
+				<small>{$t('common.max')}: <MaxSize /></small>
 			</div>
 		{/if}
 	</div>

frontend/src/lib/ui/MaxSize.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { status } from '$lib/stores/status'
 	import prettyBytes from 'pretty-bytes'
+	import { _ } from 'svelte-intl-precompile'
 </script>
 
 <span>
 	{#if $status !== null}
 		{prettyBytes($status.max_size, { binary: true })}
 	{:else}
-		loading...
+		{$_('common.loading')}
 	{/if}
 </span>

frontend/src/lib/ui/ShowNote.svelte

@@ -4,6 +4,7 @@
 	import copy from 'copy-to-clipboard'
 	import { saveAs } from 'file-saver'
 	import prettyBytes from 'pretty-bytes'
+	import { t } from 'svelte-intl-precompile'
 	import Button from './Button.svelte'
 
 	export let note: NotePublic
@@ -28,20 +29,20 @@
 	}
 </script>
 
-<p class="error-text">you will <b>not</b> get the chance to see the note again.</p>
+<p class="error-text">{@html $t('show.warning_will_not_see_again')}</p>
 {#if note.meta.type === 'text'}
-	<div class="note" data-testid="note-result">
+	<div class="note">
 		{note.contents}
 	</div>
-	<Button on:click={() => copy(note.contents)}>copy to clipboard</Button>
+	<Button on:click={() => copy(note.contents)}>{$t('common.copy_clipboard')}</Button>
 {:else}
 	{#each files as file}
-		<div class="note file" data-testid="note-result">
+		<div class="note file">
 			<b on:click={() => downloadFile(file)}>↓ {file.name}</b>
 			<small> {file.type} － {prettyBytes(file.size)}</small>
 		</div>
 	{/each}
-	<Button on:click={download}>download all</Button>
+	<Button on:click={download}>{$t('show.download_all')}</Button>
 {/if}
 
 <style>

frontend/src/lib/ui/ThemeToggle.svelte

@@ -34,6 +34,7 @@
 
 <script lang="ts">
 	import Icon from '$lib/ui/Icon.svelte'
+	import { t } from 'svelte-intl-precompile'
 
 	function change() {
 		theme.update((current) => NextTheme[current])
@@ -42,7 +43,7 @@
 
 <div on:click={change}>
 	<Icon class="icon" icon="contrast-sharp" />
-	{$theme}
+	{$t('theme.' + $theme)}
 </div>
 
 <style>

frontend/src/lib/views/Create.svelte

@@ -8,6 +8,7 @@
 	import TextArea from '$lib/ui/TextArea.svelte'
 	import TextInput from '$lib/ui/TextInput.svelte'
 	import { blur } from 'svelte/transition'
+	import { t } from 'svelte-intl-precompile'
 
 	let note: Note = {
 		contents: '',
@@ -18,20 +19,24 @@
 	let result: { password: string; id: string } | null = null
 	let advanced = false
 	let file = false
-	let type = false
+	let timeExpiration = false
 	let message = ''
 	let loading = false
 	let error: string | null = null
 
 	$: if (!advanced) {
 		note.views = 1
-		type = false
+		timeExpiration = false
 	}
 
 	$: {
-		let fraction: string
-		fraction = type ? `${note.expiration} minutes` : `${note.views} views`
-		message = 'the note will expire and be destroyed after ' + fraction
+		message = $t('home.explanation', {
+			values: {
+				type: $t(timeExpiration ? 'common.minutes' : 'common.views', {
+					values: { n: timeExpiration ? note.expiration : note.views },
+				}),
+			},
+		})
 	}
 
 	$: note.meta.type = file ? 'file' : 'text'
@@ -50,10 +55,8 @@
 				contents: await encrypt(note.contents, key),
 				meta: note.meta,
 			}
-			// @ts-ignore
-			if (type) data.expiration = parseInt(note.expiration)
-			// @ts-ignore
-			else data.views = parseInt(note.views)
+			if (timeExpiration) data.expiration = parseInt(note.expiration as any)
+			else data.views = parseInt(note.views as any)
 
 			const response = await create(data)
 			result = {
@@ -62,9 +65,9 @@
 			}
 		} catch (e) {
 			if (e instanceof PayloadToLargeError) {
-				error = 'could not create not. note is to big'
+				error = $t('home.errors.note_to_big')
 			} else {
-				error = 'could not create note. please try again.'
+				error = $t('home.errors.note_error')
 			}
 		} finally {
 			loading = false
@@ -80,48 +83,36 @@
 	<TextInput
 		type="text"
 		readonly
-		label="share link"
+		label={$t('common.share_link')}
 		value="{window.location.origin}/note/{result.id}#{result.password}"
 		copy
-		data-testid="note-share-link"
 	/>
 	<br />
 	<p>
-		<b>availability:</b>
-		<br />
-		the note is not guaranteed to be stored as everything is kept in ram, if it fills up the oldest notes
-		will be removed.
-		<br />
-		(you probably will be fine, just be warned.)
+		{@html $t('home.new_note_notice')}
 	</p>
 	<br />
-	<Button on:click={reset}>new note</Button>
+	<Button on:click={reset}>{$t('home.new_note')}</Button>
 {:else}
 	<p>
-		Easily send <i>fully encrypted</i>, secure notes or files with one click. Just create a note and
-		share the link.
+		{@html $t('home.intro')}
 	</p>
 	<form on:submit|preventDefault={submit}>
 		<fieldset disabled={loading}>
 			{#if file}
-				<FileUpload label="file" on:file={(f) => (note.contents = f.detail)} />
+				<FileUpload label={$t('common.file')} on:file={(f) => (note.contents = f.detail)} />
 			{:else}
-				<TextArea
-					label="note"
-					bind:value={note.contents}
-					placeholder="..."
-					data-testid="input-note"
-				/>
+				<TextArea label={$t('common.note')} bind:value={note.contents} placeholder="..." />
 			{/if}
 
 			<div class="bottom">
-				<Switch class="file" label="file" bind:value={file} />
-				<Switch label="advanced" bind:value={advanced} />
+				<Switch class="file" label={$t('common.file')} bind:value={file} />
+				<Switch label={$t('common.advanced')} bind:value={advanced} />
 				<div class="grow" />
 				<div class="tr">
-					<small>max: <MaxSize /> </small>
+					<small>{$t('common.max')}: <MaxSize /> </small>
 					<br />
-					<Button type="submit" data-testid="button-create">create</Button>
+					<Button type="submit">{$t('common.create')}</Button>
 				</div>
 			</div>
 
@@ -132,7 +123,7 @@
 			<p>
 				<br />
 				{#if loading}
-					loading...
+					{$t('common.loading')}
 				{:else}
 					{message}
 				{/if}
@@ -144,19 +135,19 @@
 					<div class="fields">
 						<TextInput
 							type="number"
-							label="views"
+							label={$t('common.views', { values: { n: 0 } })}
 							bind:value={note.views}
-							disabled={type}
+							disabled={timeExpiration}
 							max={100}
 						/>
 						<div class="middle-switch">
-							<Switch label="mode" bind:value={type} color={false} />
+							<Switch label={$t('common.mode')} bind:value={timeExpiration} color={false} />
 						</div>
 						<TextInput
 							type="number"
-							label="minutes"
+							label={$t('common.minutes', { values: { n: 0 } })}
 							bind:value={note.expiration}
-							disabled={!type}
+							disabled={!timeExpiration}
 							max={360}
 						/>
 					</div>

frontend/src/lib/views/Footer.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
-	import Icon from '$lib/ui/Icon.svelte'
 	import ThemeToggle from '$lib/ui/ThemeToggle.svelte'
+	import { t } from 'svelte-intl-precompile'
 </script>
 
 <footer>
 	<ThemeToggle />
 	<nav>
-		<a href="/">/home</a>
-		<a href="/about">/about</a>
-		<a href="https://github.com/cupcakearmy/cryptgeon" target="_blank" rel="noopener">/code</a>
+		<a href="/">/{$t('nav.home')}</a>
+		<a href="/about">/{$t('nav.about')}</a>
+		<a href="https://github.com/cupcakearmy/cryptgeon" target="_blank" rel="noopener"
+			>/{$t('nav.code')}</a
+		>
 	</nav>
 </footer>
 

frontend/src/routes/__layout.svelte

@@ -1,12 +1,20 @@
+<script lang="ts" context="module">
+	import { init, waitLocale, getLocaleFromNavigator } from 'svelte-intl-precompile'
+	// @ts-ignore
+	import { registerAll } from '$locales'
+	registerAll()
+	init({ initialLocale: getLocaleFromNavigator(), fallbackLocale: 'en' })
+</script>
+
 <script lang="ts">
-	import { init } from '$lib/stores/status'
+	import { init as initStores } from '$lib/stores/status'
 	import Footer from '$lib/views/Footer.svelte'
 	import Header from '$lib/views/Header.svelte'
 	import { onMount } from 'svelte'
 	import '../app.css'
 
 	onMount(() => {
-		init()
+		initStores()
 	})
 </script>
 
@@ -14,12 +22,14 @@
 	<title>cryptgeon</title>
 </svelte:head>
 
-<main>
-	<Header />
-	<slot />
-</main>
+{#await waitLocale() then _}
+	<main>
+		<Header />
+		<slot />
+	</main>
 
-<Footer />
+	<Footer />
+{/await}
 
 <style>
 	main {

frontend/src/routes/note/[id].svelte

@@ -13,6 +13,7 @@
 	import Button from '$lib/ui/Button.svelte'
 	import ShowNote from '$lib/ui/ShowNote.svelte'
 	import { onMount } from 'svelte'
+	import { t } from 'svelte-intl-precompile'
 
 	export let id: string
 
@@ -55,20 +56,18 @@
 
 {#if !loading}
 	{#if !exists}
-		<p class="error-text" data-testid="note-not-found">
-			note was not found or was already deleted.
-		</p>
+		<p class="error-text">{$t('show.errors.not_found')}</p>
 	{:else if note && !error}
 		<ShowNote {note} />
 	{:else}
 		<form on:submit|preventDefault={show}>
 			<fieldset>
-				<p>click below to show and delete the note if the counter has reached it's limit</p>
-				<Button type="submit" data-testid="button-show">show note</Button>
+				<p>{$t('show.explanation')}</p>
+				<Button type="submit">{$t('show.show_note')}</Button>
 				{#if error}
 					<br />
 					<p class="error-text">
-						wrong password. could not decipher. probably a broken link. note was destroyed.
+						{$t('show.errors.decryption_failed')}
 						<br />
 					</p>
 				{/if}
@@ -77,5 +76,5 @@
 	{/if}
 {/if}
 {#if loading}
-	<p>loading...</p>
+	<p>{$t('common.loading')}</p>
 {/if}