From a62c0cc3420db343f23ef2f6c759ca792c88471c Mon Sep 17 00:00:00 2001 From: Laurin Weger Date: Thu, 11 Jul 2024 17:26:26 +0200 Subject: [PATCH] wip: login pages finished - success message with continue button left to do on WalletLogin - User Panel QR-Scan with native + TextCode left to do --- ng-app/src/locales/en.json | 34 +- ng-app/src/routes/ScanQR.svelte | 92 ++++-- ng-app/src/routes/WalletInfo.svelte | 19 +- ng-app/src/routes/WalletLogin.svelte | 64 ++-- ng-app/src/routes/WalletLoginQr.svelte | 271 +++++----------- ng-app/src/routes/WalletLoginTextCode.svelte | 322 ++++--------------- ng-app/src/store.ts | 13 +- ng-app/src/styles.css | 24 ++ 8 files changed, 300 insertions(+), 539 deletions(-) diff --git a/ng-app/src/locales/en.json b/ng-app/src/locales/en.json index b691f33..0508f03 100644 --- a/ng-app/src/locales/en.json +++ b/ng-app/src/locales/en.json @@ -28,16 +28,15 @@ "remove_wallet": "Remove wallet from Device", "remove_wallet_modal.title": "Remove wallet?", "remove_wallet_modal.confirm": "Are you sure you want to remove this wallet from your device?", - "offline_warning": "You cannot export your Wallet with QR-Code while being offline.
Please connect to the internet and to your broker first.", "scan_qr.title": "Export by scanning QR-Code", - "scan_qr.notes": "Scan the QR-Code on the device that you want to transfer your wallet to.
During this wallet import, your wallet will be temporarily and securely stored on our servers for up to 5 minutes, using two levels of encryption.", + "scan_qr.notes": "Scan the QR-Code on the device that you want to transfer your wallet to.
.", "scan_qr.scan_btn": "Scan QR Code ", "scan_qr.scanner.title": "Scan your QR Code", "scan_qr.scanner.loading": "Loading scanner", "scan_qr.syncing": "Synchronizing wallet", "scan_qr.scan_successful": "Success!
Your wallet has been synchronized to the new device.", "gen_qr.title": "Export with generated QR-Code", - "gen_qr.notes": "Use the following QR-Code to scan with the device that you want to transfer your wallet to.
During this wallet import, your wallet will be temporarily and securely stored on our servers for up to 5 minutes, using two levels of encryption.", + "gen_qr.notes": "Use the following QR-Code to scan with the device that you want to transfer your wallet to.", "gen_qr.img_title": "Your Export QR Code to Scan", "gen_qr.img_alt": "Your Export QR Code to Scan", "gen_qr.gen_button": "Display QR Code" @@ -243,29 +242,28 @@ "with_another_wallet": "Log in with another wallet", "import_wallet": "Import your wallet", "import_file": "Import a Wallet File", - "import_qr": "Import with QRCode", - "import_link": "Enter a Wallet Link", + "import_qr": "Import with QR-Code", + "import_link": "Import with TextCode", "new_wallet": "Create a new Wallet", "logged_in": "You are logged in.
please wait while the app is loading" }, "wallet_login_qr": { "title": "Import Wallet with QR-Code", - "offline_warning": "Cannot connect to the wallet synchronization service. Are you offline?", - "scan.description": "To import your wallet from another device, generate a wallet QR-Code there. On the other device, go to
User Panel > Wallet > Generate QR to export.
Both devices need to be online.
For the wallet transfer, your wallet will be temporarily and securely stored on our servers for up to 5 minutes, using double encryption.", + "scan.description": "To import your wallet from another device, generate a wallet QR-Code there. On the other device, go to
User Panel > Wallet > Generate QR to export.", "scan.button": "Scan QR-Code", - "scan.syncing": "Importing wallet", - "scan.error": "An error occurred transferring wallet: {error}", "scan.modal.title": "Scan Wallet QR-Code", - "scan.success": "Your wallet has been imported!", "gen.button": "Generate", - "gen.description": "To import your wallet from another device, you have to display a QR-Code here on this device, and then scan it with your other device. On the other device, go to
User Panel > Wallet > Scan QR to export.
Both devices need to be online.
For the wallet transfer, your wallet will be temporarily and securely stored on our servers for up to 5 minutes, using double encryption. If your other device does not have a camera, then you should use the \"Enter a TextCode\" option on the previous screen.", + "gen.description": "To import your wallet from another device, you have to display a QR-Code here on this device, and then scan it with your other device. On the other device, go to
User Panel > Wallet > Scan QR to export.", "gen.generated": "Scan this QR-Code from the the other device.", - "gen.success": "Your wallet has been imported!", "success_btn": "Continue to Login" }, "wallet_login_textcode": { "title": "Import Wallet from TextCode", - "warning": "You have to exchange this TextCode with the other device by any means available to you (email, other messenger apps, etc...). It is highly recommended to use a tool that is end-to-end encrypted. If you can, you should use instead the \"Import with QRCode\" option, as it is safer. If your devices are not connected to the internet, then you can use the \"Import a Wallet File\" option. In this case, you will transfer the wallet file with a USB key, from one device to the other, or for mobile, by connecting your mobile with the USB cable, to the computer, and then transferring the file with the File Transfer utility on Android, or AirDrop/Finder/iTunes on an iPhone/mac/PC. We do not recommend uploading your wallet file to any cloud service." + "description": "To generate a TextCode, open a logged in device and go to
User Panel > Wallet > Generate TextCode to export.", + "login_btn": "Import with TextCode" + }, + "scan_qr": { + "scanning": "Scan the QR-Code" } }, "buttons": { @@ -346,7 +344,8 @@ "LocalBrokerIsNotHeadless": "The local broker is not headless.", "InvalidNuri": "Invalid NextGraph URI.", "InvalidTarget": "Cannot resolve target.", - "ExportWalletTimeOut": "Export of wallet has expired." + "ExportWalletTimeOut": "Export of wallet has expired.", + "ConnectionError": "Could not connect to the server." }, "connectivity": { "stopped": "Stopped", @@ -365,6 +364,13 @@ "about_nextgraph": "About NextGraph", "donate_nextgraph": "Donate to NextGraph" }, + "wallet_sync": { + "offline_warning": "You cannot transfer your wallet when offline.
Please make sure, you are connected first.", + "textcode.usage_warning": "You have to exchange this TextCode with the other device by any means available to you (email, other messenger apps, etc...). It is highly recommended to use a tool that is end-to-end encrypted. If you can, you should use instead the \"Import with QRCode\" option, as it is safer. If your devices are not connected to the internet, then you can use the \"Import a Wallet File\" option. In this case, you will transfer the wallet file with a USB key, from one device to the other, or for mobile, by connecting your mobile with the USB cable, to the computer, and then transferring the file with the File Transfer utility on Android, or AirDrop/Finder/iTunes on an iPhone/mac/PC. We do not recommend uploading your wallet file to any cloud service.", + "server_transfer_notice": "Both devices need to be online.
During this wallet import, your wallet will be temporarily and securely stored on our servers for up to 5 minutes, using two levels of encryption.", + "importing": "Importing wallet", + "error": "An error occurred while synchronizing your wallet:
{error}" + }, "emojis": { "category": { "face": "Face", diff --git a/ng-app/src/routes/ScanQR.svelte b/ng-app/src/routes/ScanQR.svelte index 7d8f393..b577a70 100644 --- a/ng-app/src/routes/ScanQR.svelte +++ b/ng-app/src/routes/ScanQR.svelte @@ -10,42 +10,94 @@ --> -
- - Scanning the QRcode -
\ No newline at end of file +
+

{$t("pages.scan_qr.scanning")}

+
+ + +
+ +
+ +
+ diff --git a/ng-app/src/routes/WalletInfo.svelte b/ng-app/src/routes/WalletInfo.svelte index 008b032..0af73ae 100644 --- a/ng-app/src/routes/WalletInfo.svelte +++ b/ng-app/src/routes/WalletInfo.svelte @@ -43,7 +43,7 @@ active_session, active_wallet, display_error, - online + online, } from "../store"; import { default as ng } from "../api"; @@ -65,7 +65,7 @@ let generated_text_code: string | null = null; // TODO: do that only when needed // generated_text_code = await ng.wallet_export_get_textcode($active_session.session_id); - + let scanner_open = false; let scanned_qr = null; let scan_successful: null | true = null; @@ -116,7 +116,7 @@ async function on_qr_scanned(text: string) { scanned_qr = text; // TODO: API calls for synchronization @niko - // + // // example : // try { // await ng.wallet_export_rendezvous($active_session.session_id, text); @@ -266,7 +266,7 @@
{$t("pages.wallet_info.generate_qr")} @@ -462,7 +462,7 @@ {#if !$online}
  • - {@html $t("pages.wallet_info.offline_warning")} + {@html $t("wallet_sync.offline_warning")}
    • {/if} @@ -539,13 +539,15 @@
  • {@html $t("pages.wallet_info.gen_qr.notes")} +
    + {@html $t("wallet_sync.transfer_notice")}
    • {#if !$online}
  • - {@html $t("pages.wallet_info.offline_warning")} + {@html $t("wallet_sync.offline_warning")}
    • {/if} @@ -569,9 +571,8 @@ {:else} - - {@html generated_qr} - + {@html generated_qr} + + //
    + // + //
    + //
    + // {@html $t("pages.wallet_login_qr.scan.success")} + //
    + + // Sample textcode AABAOAAAAHNb4y7hdWADqFWDgER3J0xvD3K5D9pZ1wd7Bja4c9cWAOFNpmUIZOFRro0UIpZWr5Ah8U7PlRFe1GFZSKuIextFAA8A45zZUJmUPhfdBrcho1vYPfgda0BAgIT1qjzgEkBQAA" - // example of rendezvous for desktop and web without cam (please remove it) - // qrcode = await ng.wallet_import_rendezvous(300); - // try { - // let temp_wallet = await ng.wallet_import_from_code(qrcode[1]); - // // TODO: in 2 steps. first display: wallet was retrieved successfully. - // // then when user clicks on "continue to login", do: - // wallet = temp_wallet; - // importing = true; - // } catch (e) { - // error = e; - // } // TODO: display with QRcode with : // {#if qrcode} // {@html qrcode[0]} // {/if} }); + function loggedin() { step = "loggedin"; push("#/"); @@ -356,7 +338,7 @@ - {:else if scan_state === "success" || gen_state === "success"} - - - {/if} - {#if scan_state !== "success" && gen_state !== "success"} - - {/if} + - - -
    - {$t("pages.wallet_login_qr.scan.modal.loading")}... -
    -     diff --git a/ng-app/src/routes/WalletLoginTextCode.svelte b/ng-app/src/routes/WalletLoginTextCode.svelte index c5bb81a..8354b39 100644 --- a/ng-app/src/routes/WalletLoginTextCode.svelte +++ b/ng-app/src/routes/WalletLoginTextCode.svelte @@ -1,17 +1,6 @@ @@ -150,161 +39,64 @@ >
    -

    {$t("pages.wallet_login_qr.title")}

    +

    {$t("pages.wallet_login_textcode.title")}

    - - {#if login_method === undefined} - -
    - {:else if false} - - -
    +
    + + {@html $t("wallet_sync.textcode.usage_warning")} + +
    + + + {#if !connected} +
    - {@html $t("pages.wallet_login_qr.offline_warning")} + {@html $t("wallet_sync.offline_warning")}
    - {:else if login_method === "scan"} - - {#if scan_state === "before_start"} - -
    - {@html $t("pages.wallet_login_qr.scan.description")} -
    - {:else if scan_state === "scanning"} - - {:else if scan_state === "has_scanned"} - -
    - -
    -
    - {$t("pages.wallet_login_qr.scan.syncing")} -
    - {:else if scan_state === "success"} -
    - -
    -
    - {@html $t("pages.wallet_login_qr.scan.success")} -
    - {:else} - - {$t("pages.wallet_login_qr.scan.error", { - values: { error: $t("errors." + scan_state) }, - })} - {/if} - {:else if login_method === "gen"} - - {#if gen_state == "before_start"} - -
    - {@html $t("pages.wallet_login_qr.gen.description")} -
    - {:else if gen_state === "generating"} -
    - -
    - {:else if gen_state === "generated"} - -
    - {@html $t("pages.wallet_login_qr.gen.generated")} -
    - - -
    - {#if generated_qr === "dummy"} -
    - -
    - {:else} - pages.wallet_info.gen_qr_alt - {/if} -
    - {:else if gen_state === "success"} -
    - -
    -
    - {@html $t("pages.wallet_login_qr.gen.success")} -
    - {:else} - - {$t("pages.wallet_login_qr.gen.error")} - {/if} {/if} -
    -
    - {#if login_method === "scan" && scan_state === "before_start"} - - - {:else if login_method === "gen" && gen_state === "before_start"} - - - {:else if scan_state === "success" || gen_state === "success"} - - - - {/if} + +
    + {@html $t("pages.wallet_login_textcode.description")} +
    + {@html $t("wallet_sync.transfer_notice")} +
    + + +