Skip to content

Commit

Permalink
Settings and components localization
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Jan 16, 2024
1 parent fc129b1 commit d825315
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 49 deletions.
5 changes: 4 additions & 1 deletion interface/components/details.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="transparent-800 mx-auto w-full rounded-xl">
<Disclosure let:open defaultOpen={openByDefault}>
<DisclosureButton class="transparentHover flex w-full items-center justify-between rounded-xl px-6 py-3 text-left text-2xl font-medium text-white outline-none duration-200 ease-linear focus:outline-none focus-visible:ring-4 focus-visible:ring-purple-500">
<span>More options</span>
<span>{language.common.moreOptions}</span>
<svg xmlns="http://www.w3.org/2000/svg" class={`${open ? "rotate-180 transform" : ""} h-5 w-5 text-white`} fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
</svg>
Expand All @@ -16,5 +16,8 @@

<script lang="ts">
import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from "@rgossiaux/svelte-headlessui"
import { getLanguage } from "@utils/language"
export let openByDefault = false
const language = getLanguage()
</script>
16 changes: 9 additions & 7 deletions interface/components/navigation.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,36 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
</svg>

Codes
{language.menu.codes}
</a>

<a href="/import" use:active data-active-class="selectedMenuButton" class="menuButton mx-3 mt-0">
<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="M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4" /><polyline points="14 2 14 8 20 8" /><path d="M2 15h10" /><path d="m9 18 3-3-3-3" /></svg>
Import
{language.menu.import}
</a>

<a href="/export" use:active data-active-class="selectedMenuButton" class="menuButton">
<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="M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4" /><polyline points="14 2 14 8 20 8" /><path d="M2 15h10" /><path d="m5 12-3 3 3 3" /></svg>
Export
{language.menu.export}
</a>

<a href="/edit" use:active data-active-class="selectedMenuButton" class="menuButton">
<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" /><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z" /></svg>
Edit
{language.menu.edit}
</a>
</div>

<div class="flex-flex-col">
<div class="flex flex-col">
<a href="/settings" use:active data-active-class="selectedMenuButton" class="menuButton">
<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.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" /><circle cx="12" cy="12" r="3" /></svg>
Settings
{language.menu.settings}
</a>
</div>
</div>

<script lang="ts">
import { active } from "@baileyherbert/tinro"
import { getLanguage } from "@utils/language"
const language = getLanguage()
</script>
7 changes: 5 additions & 2 deletions interface/components/searchFilter.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
<div class="overflow-hidden rounded-xl text-xl font-medium text-black shadow-2xl">
<div class="relative bg-white py-3">
<div>
<input type="checkbox" bind:checked={$settings.searchFilter.name} tabindex="-1" id="checkbox0" name="Search for names" class="checkbox" /> Name
<input type="checkbox" bind:checked={$settings.searchFilter.name} tabindex="-1" id="checkbox0" name="Search for names" class="checkbox" /> {language.common.name}
</div>
<div>
<input type="checkbox" bind:checked={$settings.searchFilter.description} tabindex="-1" id="checkbox1" name="Search for desciptions" class="checkbox" /> Desciption
<input type="checkbox" bind:checked={$settings.searchFilter.description} tabindex="-1" id="checkbox1" name="Search for desciptions" class="checkbox" /> {language.common.description}
</div>
</div>
</div>
Expand All @@ -21,4 +21,7 @@
<script lang="ts">
import { Popover, PopoverButton, PopoverPanel, Transition } from "@rgossiaux/svelte-headlessui"
import { settings } from "../stores/settings"
import { getLanguage } from "@utils/language"
const language = getLanguage()
</script>
4 changes: 2 additions & 2 deletions interface/components/updateAlert.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
<span data-loc>Install</span>
<span>Install</span>
</button>

<button type="button" class="smallButton" on:click={showReleaseNotes}>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
</svg>
<span data-loc>Release notes</span>
<span>Release notes</span>
</button>
</div>

Expand Down
77 changes: 40 additions & 37 deletions interface/windows/settings/settings.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<div class="transparent-900 m-auto my-20 w-4/5 rounded-2xl p-10 text-left">
<h1 class="px-10">General</h1>
<h1 class="px-10">{language.settings.general}</h1>

<div class="mx-auto flex flex-col items-center justify-center rounded-2xl p-10">
<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Launch on startup</h2>
<h3>Start Authme after your computer started. Authme will start on the system tray.</h3>
<h2>{language.settings.launchOnStartup}</h2>
<h3>{language.settings.launchOnStartupText}</h3>
</div>
<div class="ml-20 flex gap-3">
<Toggle bind:checked={$settings.settings.launchOnStartup} on:click={launchOnStartup} />
Expand All @@ -14,8 +14,8 @@

<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Minimize to tray</h2>
<h3>When closing the app Authme will not quit. You can open Authme from the system tray.</h3>
<h2>{language.settings.minimizeToTray}</h2>
<h3>{language.settings.minimizeToTrayText}</h3>
</div>
<div class="ml-20 flex gap-3">
<Toggle bind:checked={$settings.settings.minimizeToTray} />
Expand All @@ -24,8 +24,8 @@

<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Optional analytics</h2>
<h3>Send optional analytics, the sent data is completely anonymous. This includes your Authme version and your OS version.</h3>
<h2>{language.settings.optionalAnalytics}</h2>
<h3>{language.settings.optionalAnalyticsText}</h3>
</div>
<div class="ml-20 flex gap-3">
<Toggle bind:checked={$settings.settings.optionalAnalytics} />
Expand All @@ -34,8 +34,8 @@

<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Window capture</h2>
<h3>By default Authme can't be captured by outside programs. If you turn this on it applies until you restart Authme.</h3>
<h2>{language.settings.windowCapture}</h2>
<h3>{language.settings.windowCaptureText}</h3>
</div>
<div class="ml-20 flex gap-3">
<Toggle bind:checked={windowCapture} on:click={() => toggleWindowCapture(windowCapture)} />
Expand All @@ -44,27 +44,27 @@

<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Clear data</h2>
<h3>Clear password, 2FA codes and all other settings. Be careful, this can not be undone.</h3>
<h2>{language.settings.clearData}</h2>
<h3>{language.settings.clearDataText}</h3>
</div>
<div class="ml-20 flex gap-3">
<button class="button" on:click={clearData}>
<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 d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" /><line x1="10" y1="11" x2="10" y2="17" /><line x1="14" y1="11" x2="14" y2="17" /></svg>
Clear data
{language.settings.clearDataButton}
</button>
</div>
</div>
</div>
</div>

<div class="transparent-900 m-auto my-20 w-4/5 rounded-2xl p-10 text-left">
<h1 class="px-10">Codes</h1>
<h1 class="px-10">{language.settings.codes}</h1>

<div class="mx-auto flex flex-col items-center justify-center rounded-2xl p-10">
<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Codes description</h2>
<h3>2FA codes description will be visible. You can copy it after clicking it.</h3>
<h2>{language.settings.codesDescription}</h2>
<h3>{language.settings.codesDescriptionText}</h3>
</div>
<div class="ml-20 flex gap-3">
<Toggle bind:checked={$settings.settings.codesDescription} />
Expand All @@ -73,8 +73,8 @@

<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Blur codes</h2>
<h3>Blur the saved codes. You can still copy the codes or hover over the codes to show them.</h3>
<h2>{language.settings.blurCodes}</h2>
<h3>{language.settings.blurCodesText}</h3>
</div>
<div class="ml-20 flex gap-3">
<Toggle bind:checked={$settings.settings.blurCodes} />
Expand All @@ -83,8 +83,8 @@

<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Codes layout</h2>
<h3>You can choose your preferred layout. Grid displays more items and adapts to the screen size.</h3>
<h2>{language.settings.codesLayout}</h2>
<h3>{language.settings.codesLayoutText}</h3>
</div>
<div class="ml-20 flex gap-3">
<Select options={["Grid", "List"]} setting={"codesLayout"} />
Expand All @@ -93,8 +93,8 @@

<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Sort codes</h2>
<h3>You can choose how to sort the codes. By default codes are sorted by importing order.</h3>
<h2>{language.settings.sortCodes}</h2>
<h3>{language.settings.sortCodesText}</h3>
</div>
<div class="ml-20 flex gap-3">
<Select options={["Default", "A-Z", "Z-A"]} setting={"sortCodes"} />
Expand All @@ -103,21 +103,21 @@

<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Delete codes</h2>
<h3>Delete all imported 2FA codes. Be careful, this can not be undone.</h3>
<h2>{language.settings.deleteCodes}</h2>
<h3>{language.settings.deleteCodesText}</h3>
</div>
<div class="ml-20 flex gap-3">
<button class="button" on:click={deleteCodes}>
<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 d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" /><line x1="10" y1="11" x2="10" y2="17" /><line x1="14" y1="11" x2="14" y2="17" /></svg>
Delete codes
{language.settings.deleteCodesButton}
</button>
</div>
</div>
</div>
</div>

<div class="transparent-900 m-auto my-20 w-4/5 rounded-2xl p-10 text-left">
<h1 class="px-10 pb-10">Shortcuts</h1>
<h1 class="px-10 pb-10">{language.settings.shortcuts}</h1>

{#each shortcuts as { id, name }, i}
<div class="mx-auto flex flex-col items-center justify-center rounded-2xl px-10">
Expand All @@ -131,15 +131,15 @@
<div class="ml-10 flex flex-wrap gap-3 sm:ml-0 sm:mt-10 sm:w-full">
<button on:click={() => editShortcut(i)} id="editShortcut{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" /><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z" /></svg>
Edit
{language.settings.shortcutsEditButton}
</button>
<button on:click={() => resetShortcut(i)} id="resetShortcut{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 2v6h6" /><path d="M21 12A9 9 0 0 0 6 5.3L3 8" /><path d="M21 22v-6h-6" /><path d="M3 12a9 9 0 0 0 15 6.7l3-2.7" /></svg>
Reset
{language.settings.shortcutsResetButton}
</button>
<button on:click={() => deleteShortcut(i)} id="deleteShortcut{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 d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" /><line x1="10" y1="11" x2="10" y2="17" /><line x1="14" y1="11" x2="14" y2="17" /></svg>
Delete
{language.settings.shortcutsDeleteButton}
</button>
</div>
</div>
Expand All @@ -148,13 +148,13 @@
</div>

<div class="transparent-900 m-auto my-20 w-4/5 rounded-2xl p-10 text-left">
<h1 class="px-10">About</h1>
<h1 class="px-10">{language.settings.about}</h1>

<div class="mx-auto flex flex-col items-center justify-center rounded-2xl p-10">
<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Feedback</h2>
<h3>Thank you for providing feedback! Please report issues or feature requests on GitHub or by Email (authme@levminer.com).</h3>
<h2>{language.settings.feedback}</h2>
<h3>{language.settings.feedbackText}</h3>
</div>
<div class="ml-20 flex gap-3">
<button
Expand All @@ -170,26 +170,26 @@
</div>
<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Logs</h2>
<h3>You can view the logs for debugging..</h3>
<h2>{language.settings.logs}</h2>
<h3>{language.settings.logsText}</h3>
</div>
<div class="ml-20 flex gap-3">
<button class="button" on:click={showLogs}>
<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="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" /><polyline points="14 2 14 8 20 8" /><line x1="16" y1="13" x2="8" y2="13" /><line x1="16" y1="17" x2="8" y2="17" /><line x1="10" y1="9" x2="8" y2="9" /></svg>
Show logs
{language.settings.showLogsButton}
</button>
</div>
</div>

<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>About Authme</h2>
<h3>Information about your Authme build and your computer.</h3>
<h2>{language.settings.aboutAuthme}</h2>
<h3>{language.settings.aboutAuthmeText}</h3>
</div>
<div class="ml-20 flex gap-3">
<button class="button" on:click={about}>
<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" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" /></svg>
About Authme
{language.settings.aboutAuthme}
</button>
</div>
</div>
Expand All @@ -204,6 +204,9 @@
import { open } from "../../utils/navigate"
import { deleteShortcut, editShortcut, resetShortcut, shortcuts } from "../../utils/shortcuts"
import { deleteCodes } from "../edit/index"
import { getLanguage } from "@utils/language"
const language = getLanguage()
$: windowCapture = false
</script>

0 comments on commit d825315

Please sign in to comment.