NextGraph
/
nextgraph-rs
1
3
Fork 0
Code Issues 1 Pull Requests Packages Projects 2 Releases 3 Activity

- i18n emojis

Browse Source 
- `{@html` for some translations
- replace remaining in-code texts
pull/28/head
Laurin Weger 6 months ago
parent e68907869e
commit 3ad23d8a27
No known key found for this signature in database
GPG Key ID: 9B372BB0B792770F
9 changed files with 187 additions and 106 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      ng-app/src/App.svelte
  2. 4
      ng-app/src/lib/Install.svelte
  3. 124
      ng-app/src/lib/Login.svelte
  4. 4
      ng-app/src/lib/NoWallet.svelte
  5. 9
      ng-app/src/locales/i18n-init.ts
  6. 16
      ng-app/src/routes/User.svelte
  7. 18
      ng-app/src/routes/UserRegistered.svelte
  8. 51
      ng-app/src/routes/WalletInfo.svelte
  9. 64
      ng-app/src/wallet_emojis.ts

3
ng-app/src/App.svelte
Unescape View File

@ -269,6 +269,9 @@
unsubscribe(); unsubscribe();
if (unsub_main_close) unsub_main_close(); if (unsub_main_close) unsub_main_close();
}); });
// import { to_debug } from "./wallet_emojis";
// to_debug();
</script> </script>
<!-- <p> <!-- <p>

4
ng-app/src/lib/Install.svelte
Unescape View File

@ -43,11 +43,11 @@
</div> </div>
<p class="max-w-sm"> <p class="max-w-sm">
{$t("pages.install.app_availability")} {@html $t("pages.install.app_availability")}
</p> </p>
{#if display_has_wallets_warning} {#if display_has_wallets_warning}
<Alert color="yellow" class="mt-5 block"> <Alert color="yellow" class="mt-5 block">
{$t("pages.install.has_wallet_warning")} {@html $t("pages.install.has_wallet_warning")}
</Alert> </Alert>
{/if} {/if}
<div class="row mt-5"> <div class="row mt-5">

124
ng-app/src/lib/Login.svelte
Unescape View File

@ -16,9 +16,11 @@
<script lang="ts"> <script lang="ts">
import { Alert, Toggle, Button } from "flowbite-svelte"; import { Alert, Toggle, Button } from "flowbite-svelte";
import { onMount, createEventDispatcher, tick } from "svelte"; import { onMount, createEventDispatcher } from "svelte";
import { t } from "svelte-i18n";
import ng from "../api"; import ng from "../api";
import { emoji_cat, emojis, load_svg } from "../wallet_emojis"; import { emoji_cat, emojis, load_svg, type Emoji } from "../wallet_emojis";
import { import {
PuzzlePiece, PuzzlePiece,
XCircle, XCircle,
@ -89,7 +91,7 @@
scrollToTop(); scrollToTop();
} }
let emojis2 = []; let emojis2: Emoji[][] = [];
let shuffle; let shuffle;
@ -333,72 +335,54 @@
{#if step == "load"} {#if step == "load"}
<div class="flex flex-col justify-center p-4 pt-6"> <div class="flex flex-col justify-center p-4 pt-6">
<h2 class="pb-5 text-xl self-start"> <h2 class="pb-5 text-xl self-start">
How to open your wallet? You have 2 options: {$t("pages.login.heading")}
</h2> </h2>
<h3 class="pb-2 text-lg self-start">With your Pazzle</h3> <h3 class="pb-2 text-lg self-start">{$t("pages.login.with_pazzle")}</h3>
<ul class="mb-8 ml-3 space-y-4 text-justify text-sm list-decimal"> <ul class="mb-8 ml-3 space-y-4 text-justify text-sm list-decimal">
<li> <li>
For each one of the 9 categories of images, you will be presented with {$t("pages.login.pazzle_steps.1")}
the 15 possible image choices. The categories are shuffled at every
login. They will not always appear in the same order.
</li> </li>
<li> <li>
At each category, only one of the 15 displayed choices is the correct {$t("pages.login.pazzle_steps.2")}
image that belongs to your pazzle. Find it and tap or click on that
one. The 15 images are shuffled too, they will not appear at the same
position at each login. On a computer, you can also use the tab key on
your keyboard to move to the desired item on the screen, then press
the space bar to select each one.
</li> </li>
<li> <li>
Once you completed the last category, you will be presented with all {$t("pages.login.pazzle_steps.3")}
the images you have previously selected. Their order is displayed as
it was when you picked them. But this is not the correct order of the
images in your pazzle. You now have to order them correctly.
</li> </li>
<li> <li>
You must remember which image should be the first one in your pazzle. {$t("pages.login.pazzle_steps.4")}
Find it on the screen and click or tap on it. It will be greyed out
and the number 1 will appear on top of it.
</li> </li>
<li> <li>
Move on to the second image of your pazzle (that you memorized). Find {$t("pages.login.pazzle_steps.5")}
it on the screen and tap on it. Repeat this step until you reached the
last image.
</li> </li>
<li> <li>
Finally, your PIN code will be asked. enter it by clicking or tapping {$t("pages.login.pazzle_steps.6")}
on the digits.
</li> </li>
</ul> </ul>
<h3 class="pb-2 text-lg self-start"> <h3 class="pb-2 text-lg self-start">
With your 12 words Mnemonic (passphrase) {$t("pages.login.with_mnemonic")}
</h3> </h3>
<ul class="mb-8 ml-3 space-y-4 text-justify text-sm list-decimal"> <ul class="mb-8 ml-3 space-y-4 text-justify text-sm list-decimal">
<li> <li>
Enter your twelve words mnemonic in the input field. The words must be {$t("pages.login.mnemonic_steps.1")}
separated by spaces. </li>
<li>
{$t("pages.login.mnemonic_steps.2")}
</li> </li>
<li>Enter the PIN code that you chose when you created your wallet.</li>
</ul> </ul>
<!-- Save wallet? --> <!-- Save wallet? -->
{#if for_import} {#if for_import}
<div class="max-w-xl lg:px-8 mx-auto px-4 mb-2"> <div class="max-w-xl lg:px-8 mx-auto px-4 mb-2">
<span class="text-xl">Do you trust this device? </span> <br /> <span class="text-xl">{$t("pages.login.trust_device")} </span> <br />
<p class="text-sm"> <p class="text-sm">
If you do, if this device is yours or is used by few trusted persons {$t("pages.login.trust_device_description")}
of your family or workplace, and you would like to login again from {#if !tauri_platform}
this device in the future, then you can save your wallet on this {$t("pages.login.trust_device_allow_cookies")}{/if}<br />
device. To the contrary, if this device is public and shared by
strangers, do not save your wallet here. {#if !tauri_platform}By
selecting this option, you agree to saving some cookies on your
browser.{/if}<br />
</p> </p>
<div class="flex justify-center items-center my-4"> <div class="flex justify-center items-center my-4">
<Toggle class="" bind:checked={trusted} <Toggle class="" bind:checked={trusted}
>Yes, save my wallet on this device</Toggle >{$t("pages.login.trust_device_yes")}</Toggle
> >
</div> </div>
</div> </div>
@ -407,7 +391,7 @@
<div class=" max-w-xl lg:px-8 mx-auto px-4 text-primary-700"> <div class=" max-w-xl lg:px-8 mx-auto px-4 text-primary-700">
<div class="flex flex-col justify-centerspace-x-12 mt-4 mb-4"> <div class="flex flex-col justify-centerspace-x-12 mt-4 mb-4">
{#if !loaded} {#if !loaded}
Loading pazzle... {$t("pages.login.loading_pazzle")}...
<svg <svg
class="animate-spin my-4 h-14 w-14 mx-auto" class="animate-spin my-4 h-14 w-14 mx-auto"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -438,7 +422,7 @@
tabindex="-1" tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white" class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white"
/> />
Open with Pazzle! {$t("pages.login.open_with_pazzle")}
</button> </button>
{/if} {/if}
<button <button
@ -447,7 +431,7 @@
><ArrowLeft ><ArrowLeft
tabindex="-1" tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white" class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white"
/>Cancel login</button />{$t("pages.login.login_cancel")}</button
> >
<span <span
on:click={start_with_mnemonic} on:click={start_with_mnemonic}
@ -456,7 +440,7 @@
tabindex="0" tabindex="0"
class="mt-1 text-lg px-5 py-2.5 text-center inline-flex items-center mb-2 underline cursor-pointer" class="mt-1 text-lg px-5 py-2.5 text-center inline-flex items-center mb-2 underline cursor-pointer"
> >
Open with Mnemonic instead {$t("pages.login.open_with_mnemonic")}
</span> </span>
</div> </div>
</div> </div>
@ -479,7 +463,7 @@
<label <label
for="mnemonic-input" for="mnemonic-input"
class="block mb-2 text-xl text-gray-900 dark:text-white" class="block mb-2 text-xl text-gray-900 dark:text-white"
>Enter your 12 words mnemonic</label >{$t("pages.login.enter_mnemonic")}</label
> >
<PasswordInput <PasswordInput
id="mnemonic-input" id="mnemonic-input"
@ -497,17 +481,21 @@
><CheckCircle ><CheckCircle
tabindex="-1" tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white" class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Confirm</Button />{$t("buttons.confirm")}</Button
> >
</div> </div>
</form> </form>
{:else if step == "pazzle"} {:else if step == "pazzle"}
<p class="max-w-xl mx-auto lg:max-w-2xl"> <p class="max-w-xl mx-auto lg:max-w-2xl">
<span class="text-xl"> <span class="text-xl">
<!-- TODO: Internationalization--> {@html $t("pages.login.select_emoji", {
Select your emoji of category:<br />{emoji_cat[ values: {
shuffle.category_indices[pazzlePage] category: $t(
]}</span "emojis.category." +
emoji_cat[shuffle.category_indices[pazzlePage]]
),
},
})}</span
> >
</p> </p>
{#each [0, 1, 2, 3, 4] as row} {#each [0, 1, 2, 3, 4] as row}
@ -517,6 +505,7 @@
role="button" role="button"
tabindex="0" tabindex="0"
class="w-full aspect-square emoji focus:outline-none focus:bg-gray-300" class="w-full aspect-square emoji focus:outline-none focus:bg-gray-300"
title={$t("emojis.codes." + emoji.code)}
on:click={() => select(row * 3 + i)} on:click={() => select(row * 3 + i)}
on:keypress={() => select(row * 3 + i)} on:keypress={() => select(row * 3 + i)}
> >
@ -527,7 +516,7 @@
{/each} {/each}
{:else if step == "order"} {:else if step == "order"}
<p class="max-w-xl mx-auto lg:max-w-2xl mb-2"> <p class="max-w-xl mx-auto lg:max-w-2xl mb-2">
<span class="text-xl">Select each image in the correct order</span> <span class="text-xl">{$t("pages.login.order_emojis")}</span>
</p> </p>
{#each [0, 1, 2] as row} {#each [0, 1, 2] as row}
<div class="columns-3 gap-0"> <div class="columns-3 gap-0">
@ -539,6 +528,10 @@
class="w-full aspect-square emoji focus:outline-none focus:bg-gray-300" class="w-full aspect-square emoji focus:outline-none focus:bg-gray-300"
on:click={() => select_order(emoji)} on:click={() => select_order(emoji)}
on:keypress={() => select_order(emoji)} on:keypress={() => select_order(emoji)}
title={$t(
"emojis.codes." +
emojis[emoji_cat[emoji.cat]][emoji.index].code
)}
> >
<svelte:component <svelte:component
this={emojis[emoji_cat[emoji.cat]][emoji.index].svg this={emojis[emoji_cat[emoji.cat]][emoji.index].svg
@ -548,6 +541,10 @@
{:else} {:else}
<div <div
class="w-full aspect-square opacity-25 select-none sel-emoji" class="w-full aspect-square opacity-25 select-none sel-emoji"
title={$t(
"emojis.codes." +
emojis[emoji_cat[emoji.cat]][emoji.index].code
)}
> >
<svelte:component <svelte:component
this={emojis[emoji_cat[emoji.cat]][emoji.index].svg this={emojis[emoji_cat[emoji.cat]][emoji.index].svg
@ -565,7 +562,7 @@
{/each} {/each}
{:else if step == "pin"} {:else if step == "pin"}
<p class="items-center"> <p class="items-center">
<span class="text-xl">Enter your PIN code</span> <span class="text-xl">{$t("pages.login.enter_pin")}</span>
</p> </p>
<!-- Chrome requires the columns-3 __flex__ to be set, or else it wraps the lines incorrectly. <!-- Chrome requires the columns-3 __flex__ to be set, or else it wraps the lines incorrectly.
However, this leads to the width decreasing and the buttons come together in mobile view. However, this leads to the width decreasing and the buttons come together in mobile view.
@ -625,7 +622,7 @@
><XCircle ><XCircle
tabindex="-1" tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition focus:outline-none duration-75 group-hover:text-gray-900 dark:group-hover:text-white" class="w-8 h-8 mr-2 -ml-1 transition focus:outline-none duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Cancel</button />{$t("buttons.cancel")}</button
> >
<button <button
class="mt-1 ml-2 min-w-[141px] focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center select-none inline-flex items-center dark:focus:ring-primary-700/55" class="mt-1 ml-2 min-w-[141px] focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center select-none inline-flex items-center dark:focus:ring-primary-700/55"
@ -633,15 +630,18 @@
><Backspace ><Backspace
tabindex="-1" tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition focus:outline-none duration-75 group-hover:text-gray-900 dark:group-hover:text-white" class="w-8 h-8 mr-2 -ml-1 transition focus:outline-none duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>{#if step === "mnemonic" || (step === "pazzle" && pazzlePage === 0)}Go />
back{:else}Correct{/if}</button {#if step === "mnemonic" || (step === "pazzle" && pazzlePage === 0)}
> {$t("buttons.go_back")}
{:else}
{$t("buttons.correct")}
{/if}
</button>
</div> </div>
</div> </div>
{:else if step == "opening"} {:else if step == "opening"}
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-primary-700"> <div class=" max-w-6xl lg:px-8 mx-auto px-4 text-primary-700">
Opening your wallet...<br /> {@html $t("pages.login.opening_wallet")}
Please wait
<svg <svg
class="animate-spin mt-10 h-14 w-14 mx-auto" class="animate-spin mt-10 h-14 w-14 mx-auto"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -668,7 +668,7 @@
{#if error} {#if error}
<div class=" max-w-6xl lg:px-8 mx-auto text-red-800"> <div class=" max-w-6xl lg:px-8 mx-auto text-red-800">
<div class="mt-auto max-w-6xl lg:px-8"> <div class="mt-auto max-w-6xl lg:px-8">
An error occurred ! {$t("errors.an_error_occurred")}
<svg <svg
fill="none" fill="none"
class="animate-bounce mt-10 h-10 w-10 mx-auto" class="animate-bounce mt-10 h-10 w-10 mx-auto"
@ -685,7 +685,7 @@
/> />
</svg> </svg>
<Alert color="red" class="mt-5"> <Alert color="red" class="mt-5">
{error} {$t("errors." + error)}
</Alert> </Alert>
</div> </div>
<div class="flex justify-between mt-auto gap-4"> <div class="flex justify-between mt-auto gap-4">
@ -695,7 +695,7 @@
><XCircle ><XCircle
tabindex="-1" tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white" class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white"
/>Cancel</button />{$t("buttons.cancel")}</button
> >
<button <button
class="mt-10 ml-2 select-none text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55" class="mt-10 ml-2 select-none text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
@ -705,13 +705,13 @@
tabindex="-1" tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white" class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white"
/> />
Try again {$t("buttons.try_again")}
</button> </button>
</div> </div>
</div> </div>
{:else} {:else}
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-green-800"> <div class=" max-w-6xl lg:px-8 mx-auto px-4 text-green-800">
Your wallet is opened! <br />Please wait while the app is loading... {@html $t("pages.login.wallet_opened")}
<svg <svg
class="my-10 h-16 w-16 mx-auto" class="my-10 h-16 w-16 mx-auto"
fill="none" fill="none"

4
ng-app/src/lib/NoWallet.svelte
Unescape View File

@ -30,7 +30,7 @@
<h1 class="text-2xl mb-10">{$t("pages.no_wallet.welcome")}</h1> <h1 class="text-2xl mb-10">{$t("pages.no_wallet.welcome")}</h1>
<p class="max-w-sm"> <p class="max-w-sm">
{$t("pages.no_wallet.description")} {@html $t("pages.no_wallet.description")}
</p> </p>
<div class="row mt-5"> <div class="row mt-5">
<a href="/wallet/create" use:link> <a href="/wallet/create" use:link>
@ -78,7 +78,7 @@
d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
/> />
</svg> </svg>
{$t("common.login")} {$t("buttons.login")}
</button> </button>
</a> </a>
</div> </div>

9
ng-app/src/locales/i18n-init.ts
Unescape View File

@ -1,8 +1,13 @@
import { register, init, getLocaleFromNavigator } from "svelte-i18n"; import { register, init, getLocaleFromNavigator } from "svelte-i18n";
register("en", () => import("./en.json")); register("en", () => import("./en.json"));
// register('de', () => import('./de.json')); register("de", () => import("./de.json"));
// register('fr', () => import('./fr.json')); register("fr", () => import("./fr.json"));
register("ru", () => import("./ru.json"));
register("es", () => import("./es.json"));
register("it", () => import("./it.json"));
register("zh", () => import("./zh.json"));
register("pt", () => import("./pt.json"));
init({ init({
fallbackLocale: "en", fallbackLocale: "en",

16
ng-app/src/routes/User.svelte
Unescape View File

@ -154,7 +154,7 @@
class="w-7 h-7 text-green-600 transition duration-75 focus:outline-none dark:text-green-400 " class="w-7 h-7 text-green-600 transition duration-75 focus:outline-none dark:text-green-400 "
/> />
<span class="ml-3 text-green-600 dark:text-green-400" <span class="ml-3 text-green-600 dark:text-green-400"
>{$t("pages.user_panel.online")}</span >{$t("connectivity.online")}</span
> >
{:else} {:else}
<SignalSlash <SignalSlash
@ -162,7 +162,7 @@
class="w-7 h-7 text-red-600 transition duration-75 focus:outline-none dark:text-red-400 " class="w-7 h-7 text-red-600 transition duration-75 focus:outline-none dark:text-red-400 "
/> />
<span class="ml-3 text-red-600 dark:text-red-400" <span class="ml-3 text-red-600 dark:text-red-400"
>{$t("pages.user_panel.offline")}</span >{$t("connectivity.offline")}</span
> >
{/if} {/if}
</li> </li>
@ -178,7 +178,7 @@
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
<span class="ml-3">{$t("common.logout")}</span> <span class="ml-3">{$t("buttons.logout")}</span>
</li> </li>
<!-- <li <!-- <li
tabindex="0" tabindex="0"
@ -206,7 +206,7 @@
</svelte:fragment> </svelte:fragment>
</SidebarItem> </SidebarItem>
<SidebarItem <SidebarItem
label={$t("pages.wallet.title")} label={$t("pages.wallet_info.title")}
href="#/wallet" href="#/wallet"
class="p-2" class="p-2"
> >
@ -352,26 +352,26 @@
</svg> </svg>
{#if error == "AlreadyExists"} {#if error == "AlreadyExists"}
<p class="max-w-xl md:mx-auto lg:max-w-2xl mb-5"> <p class="max-w-xl md:mx-auto lg:max-w-2xl mb-5">
{$t("pages.user_panel.already_registered")} {@html $t("errors.AlreadyExists")}
</p> </p>
<a use:link href="/"> <a use:link href="/">
<button <button
tabindex="-1" tabindex="-1"
class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2" class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
> >
{$t("common.login")} {$t("buttons.login")}
</button> </button>
</a> </a>
{:else} {:else}
<p class="max-w-xl md:mx-auto lg:max-w-2xl mb-5"> <p class="max-w-xl md:mx-auto lg:max-w-2xl mb-5">
{$t("pages.user_panel.error", { values: { error } })} {@html $t("errors.error_occured", { values: { error } })}
</p> </p>
<a use:link href="/"> <a use:link href="/">
<button <button
tabindex="-1" tabindex="-1"
class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2" class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
> >
{$t("common.back_to_homepage")} {$t("buttons.back_to_homepage")}
</button> </button>
</a> </a>
{/if} {/if}

18
ng-app/src/routes/UserRegistered.svelte
Unescape View File

@ -66,26 +66,26 @@
</svg> </svg>
{#if error == "AlreadyExists"} {#if error == "AlreadyExists"}
<p class="max-w-xl md:mx-auto lg:max-w-2xl mb-5"> <p class="max-w-xl md:mx-auto lg:max-w-2xl mb-5">
{$t("pages.user_registered.already_exists")} {@html $t("pages.user_registered.already_exists")}
</p> </p>
<a use:link href="/"> <a use:link href="/">
<button <button
tabindex="-1" tabindex="-1"
class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2" class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
> >
{$t("common.login")} {$t("buttons.login")}
</button> </button>
</a> </a>
{:else} {:else}
<p class="max-w-xl md:mx-auto lg:max-w-2xl mb-5"> <p class="max-w-xl md:mx-auto lg:max-w-2xl mb-5">
{$t("pages.user_registered.error", { values: { error } })} {@html $t("errors.error_occured", { values: { error } })}
</p> </p>
<a use:link href="/"> <a use:link href="/">
<button <button
tabindex="-1" tabindex="-1"
class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2" class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
> >
{$t("common.back_to_homepage")} {$t("buttons.back_to_homepage")}
</button> </button>
</a> </a>
{/if} {/if}
@ -108,9 +108,13 @@
/> />
</svg> </svg>
<p class="max-w-xl md:mx-auto lg:max-w-2xl"> <p class="max-w-xl md:mx-auto lg:max-w-2xl">
{$t("pages.user_registered.success", { {#if invitation?.V0?.name}
values: { invitation_name: invitation?.V0?.name }, {$t("pages.user_registered.success_with_invitation", {
})} values: { invitation_name: invitation?.V0?.name },
})}
{:else}
{$t("pages.user_registered.success")}
{/if}
</p> </p>
</div> </div>
{/if} {/if}

51
ng-app/src/routes/WalletInfo.svelte
Unescape View File

@ -30,7 +30,7 @@
} from "svelte-heros-v2"; } from "svelte-heros-v2";
import { onMount, tick } from "svelte"; import { onMount, tick } from "svelte";
import { Sidebar, SidebarGroup, SidebarWrapper } from "flowbite-svelte"; import { Sidebar, SidebarGroup, SidebarWrapper } from "flowbite-svelte";
import { t } from "svelte-i18n";
import { close_active_wallet, active_session, active_wallet } from "../store"; import { close_active_wallet, active_session, active_wallet } from "../store";
import { default as ng } from "../api"; import { default as ng } from "../api";
@ -104,7 +104,7 @@
> >
<SidebarGroup ulClass="space-y-2" role="menu"> <SidebarGroup ulClass="space-y-2" role="menu">
<li> <li>
<h2 class="text-xl mb-6">Wallet Info</h2> <h2 class="text-xl mb-6">{$t("pages.wallet_info.title")}</h2>
</li> </li>
<!-- Go Back --> <!-- Go Back -->
@ -138,7 +138,7 @@
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
</div> </div>
<span class="ml-3">Download Wallet File</span> <span class="ml-3">{$t("pages.wallet_info.download")}</span>
</li> </li>
{:else if download_error} {:else if download_error}
<li <li
@ -152,7 +152,9 @@
/> />
</div> </div>
<span class="ml-3 text-left" <span class="ml-3 text-left"
>Download failed:<br /> {download_error}</span >{$t("pages.wallet_info.download_failed", {
values: { error: download_error },
})}</span
> >
</li> </li>
{:else if !wallet_file_ready} {:else if !wallet_file_ready}
@ -166,7 +168,9 @@
class="w-7 h-7 text-blue-700 transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-blue-700 transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
</div> </div>
<span class="ml-3 text-left">Download in progress...</span> <span class="ml-3 text-left"
>{$t("pages.wallet_info.download_in_progress")}</span
>
</li> </li>
{:else if download_link === true} {:else if download_link === true}
<li <li
@ -174,8 +178,9 @@
class="flex p-2 text-sm text-left break-all font-normal text-blue-700 rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" class="flex p-2 text-sm text-left break-all font-normal text-blue-700 rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
> >
<span <span
>You will find the file named "{wallet_file_ready}" <br />in >{@html $t("pages.wallet_info.download_successful", {
your Downloads folder</span values: { wallet_file: wallet_file_ready },
})}</span
> >
</li> </li>
{:else} {:else}
@ -198,7 +203,7 @@
class="w-14 h-14 transition duration-75 dark:text-white dark:group-hover:text-white" class="w-14 h-14 transition duration-75 dark:text-white dark:group-hover:text-white"
/> />
</div> </div>
Click here to download the wallet file {$t("pages.wallet_info.download_file_button")}
</button> </button>
</a> </a>
</li> </li>
@ -218,7 +223,7 @@
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
</div> </div>
<span class="ml-3">Remove Wallet from Device</span> <span class="ml-3">{$t("pages.wallet_info.remove_wallet")}</span>
</li> </li>
<Modal <Modal
autoclose autoclose
@ -227,16 +232,16 @@
title="Remove Wallet" title="Remove Wallet"
> >
<p class="mt-4"> <p class="mt-4">
Are you sure you want to remove this wallet from your device? {$t("pages.wallet_info.remove_confirm")}
</p> </p>
<div class="mt-4 flex justify-end"> <div class="mt-4 flex justify-end">
<button on:click={close_modal}> Cancel </button> <button on:click={close_modal}>{$t("buttons.cancel")}</button>
<button <button
class="mr-2 bg-primary-700 text-white" class="mr-2 bg-primary-700 text-white"
on:click={remove_wallet_confirmed} on:click={remove_wallet_confirmed}
> >
Remove {$t("buttons.remove")}
</button> </button>
</div> </div>
</Modal> </Modal>
@ -254,10 +259,13 @@
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
</div> </div>
<span class="ml-3">Wallet QR-Code</span> <span class="ml-3">{$t("qr_code")}</span>
</li> </li>
<Modal autoclose outsideclose title="My Wallet QR-Code" <Modal
>Use this QR-Code to log in with your wallet on new devices. autoclose
outsideclose
title={$t("pages.wallet_info.qr_modal_title")}
>{@html $t("pages.wallet_info.qr_modal_description")}
</Modal> </Modal>
{/if} {/if}
@ -274,7 +282,7 @@
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
</div> </div>
<span class="ml-3">Copy Wallet Link</span> <span class="ml-3">{$t("pages.login.copy_wallet_link")}</span>
</li> </li>
{/if} {/if}
@ -290,7 +298,7 @@
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
<span class="ml-3">Save to Device for Future Logins</span> <span class="ml-3">{$t("pages.login.keep_wallet")}</span>
</li> </li>
{/if} {/if}
</SidebarGroup> </SidebarGroup>
@ -316,27 +324,26 @@
</svg> </svg>
{#if error == "AlreadyExists"} {#if error == "AlreadyExists"}
<p class="max-w-xl md:mx-auto lg:max-w-2xl mb-5"> <p class="max-w-xl md:mx-auto lg:max-w-2xl mb-5">
The user is already registered with the selected broker.<br /> Try logging {@html $t("errors.AlreadyExists")}
in instead
</p> </p>
<a use:link href="/"> <a use:link href="/">
<button <button
tabindex="-1" tabindex="-1"
class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2" class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
> >
Login {$t("buttons.login")}
</button> </button>
</a> </a>
{:else} {:else}
<p class="max-w-xl md:mx-auto lg:max-w-2xl mb-5"> <p class="max-w-xl md:mx-auto lg:max-w-2xl mb-5">
An error occurred:<br />{error} {@html $t("errors.error_occurred", { values: { error } })}
</p> </p>
<a use:link href="/"> <a use:link href="/">
<button <button
tabindex="-1" tabindex="-1"
class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2" class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
> >
Go back to homepage {$t("buttons.back_to_homepage")}
</button> </button>
</a> </a>
{/if} {/if}

64
ng-app/src/wallet_emojis.ts
Unescape View File

@ -7,6 +7,13 @@
// notice may not be copied, modified, or distributed except // notice may not be copied, modified, or distributed except
// according to those terms. // according to those terms.
export type Emoji = {
hexcode: string;
shortcode: string;
code: string;
svg?: any;
};
let face = [ let face = [
{ {
hexcode: "1f600", hexcode: "1f600",
@ -1709,7 +1716,7 @@ export async function load_svg() {
}); });
} }
export const emojis = { export const emojis: Record<string, Emoji[]> = {
face, face,
face_unwell, face_unwell,
face_costume, face_costume,
@ -1765,3 +1772,58 @@ export function emojis_from_pazzle_ids(pazzle: number[]) {
return { cat: cat_name, ...emojis[cat_name][idx] }; return { cat: cat_name, ...emojis[cat_name][idx] };
}); });
} }
/*
import en_annotations from "./locales/en_annotations.json";
import de_annotations from "./locales/de_annotations.json";
import fr_annotations from "./locales/fr_annotations.json";
import ru_annotations from "./locales/ru_annotations.json";
import es_annotations from "./locales/es_annotations.json";
import it_annotations from "./locales/it_annotations.json";
import zh_annotations from "./locales/zh_annotations.json";
import pt_annotations from "./locales/pt_annotations.json";
function i18n_for_emoji(annotations, emoji: Emoji) {
const char = String.fromCodePoint(Number.parseInt(emoji.hexcode, 16));
return annotations.annotations.annotations[char]?.tts[0];
}
function match_codes(annotations, emojis: Record<string, Emoji[]>) {
const not_found = [];
const map: Record<string, string> = {};
for (const cat in emojis) {
for (const emoji of emojis[cat]) {
const name = i18n_for_emoji(annotations, emoji);
if (!name) {
not_found.push(emoji);
} else {
map[emoji.code] = name;
}
}
}
if (not_found.length > 0) {
console.log("Not found: ", not_found);
}
return map;
}
export function to_debug() {
const en = match_codes(en_annotations, emojis);
const de = match_codes(de_annotations, emojis);
const fr = match_codes(fr_annotations, emojis);
const ru = match_codes(ru_annotations, emojis);
const es = match_codes(es_annotations, emojis);
const it = match_codes(it_annotations, emojis);
const zh = match_codes(zh_annotations, emojis);
const pt = match_codes(pt_annotations, emojis);
console.debug("en", JSON.stringify(en));
console.debug("de", JSON.stringify(de));
console.debug("fr", JSON.stringify(fr));
console.debug("ru", JSON.stringify(ru));
console.debug("es", JSON.stringify(es));
console.debug("it", JSON.stringify(it));
console.debug("zh", JSON.stringify(zh));
console.debug("pt", JSON.stringify(pt));
}
*/

Write Preview
Loading…
Cancel
Save