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

use API for qrscan on html, force rear camera

Browse Source
pull/37/head
Niko PLP 5 months ago
parent 4860a943bb
commit a403ea31e7
7 changed files with 79 additions and 42 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. 2
      ng-app/src/lib/NoWallet.svelte
  2. 20
      ng-app/src/locales/en.json
  3. 58
      ng-app/src/routes/ScanQR.svelte
  4. 9
      ng-app/src/routes/WalletInfo.svelte
  5. 1
      ng-app/src/routes/WalletLogin.svelte
  6. 8
      ng-app/src/routes/WalletLoginTextCode.svelte
  7. 11
      ng-app/src/styles.css

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

@ -39,7 +39,7 @@
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"
> >
<svg <svg
class="w-8 h-8 -ml-1" class="w-8 h-8 -ml-1 mr-2"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
stroke-width="1.5" stroke-width="1.5"

20
ng-app/src/locales/en.json
Unescape View File

@ -31,17 +31,17 @@
"scan_qr.title": "Export by scanning a QR-Code", "scan_qr.title": "Export by scanning a QR-Code",
"scan_qr.no_camera": "If to the contrary, the other device does not have a camera, ", "scan_qr.no_camera": "If to the contrary, the other device does not have a camera, ",
"scan_qr.other_has_camera": "If the other device where you want to import the Wallet, has a camera, then you can just click on the Back button and select <span class=\"path\">Generate QR to export</span>", "scan_qr.other_has_camera": "If the other device where you want to import the Wallet, has a camera, then you can just click on the Back button and select <span class=\"path\">Generate QR to export</span>",
"scan_qr.notes": "You will now scan the QR-Code that appears on the screen of the other device (the one you want to transfer your wallet to).", "scan_qr.notes": "You will now scan the QR-Code that appears on the screen of the other device (the one you want to transfer your wallet to). You will be asked to allow the app to use your camera.",
"scan_qr.scan_btn": "Scan QR-Code ", "scan_qr.scan_btn": "Scan QR-Code ",
"scan_qr.scanner.title": "Scan your QR Code", "scan_qr.scanner.title": "Scan your QR-Code",
"scan_qr.scanner.loading": "Loading scanner", "scan_qr.scanner.loading": "Loading scanner",
"scan_qr.syncing": "Synchronizing wallet", "scan_qr.syncing": "Synchronizing wallet",
"scan_qr.scan_successful": "Success!<br />Your wallet has been transferred to the new device.", "scan_qr.scan_successful": "Success!<br />Your wallet has been transferred to the other device.",
"gen_qr.title": "Export by generating QR-Code", "gen_qr.title": "Export by generating a QR-Code",
"gen_qr.notes": "In order to transfer your wallet to another device, you will now display a QR-Code here on this device, and you will then scan it with the other device where you want to transfer your wallet to.", "gen_qr.notes": "In order to transfer your wallet to another device, you will now display a QR-Code here on this device, and you will then scan it with the other device where you want to transfer your wallet to.",
"gen_qr.no_camera": "If the device where you want to import the Wallet, does not have a camera, then you will have to choose another method.", "gen_qr.no_camera": "If the device where you want to import the Wallet, does not have a camera, then you will have to choose another method.",
"gen_qr.img_title": "Your Export QR Code to Scan", "gen_qr.img_title": "Your Export QR-Code to Scan",
"gen_qr.img_alt": "Your Export QR Code to Scan", "gen_qr.img_alt": "Your Export QR-Code to Scan",
"gen_qr.gen_button": "Display QR-Code", "gen_qr.gen_button": "Display QR-Code",
"gen_text_code.title": "Export with TextCode", "gen_text_code.title": "Export with TextCode",
"gen_text_code.gen_btn": "Generate TextCode", "gen_text_code.gen_btn": "Generate TextCode",
@ -268,8 +268,9 @@
}, },
"wallet_login_textcode": { "wallet_login_textcode": {
"title": "Import Wallet from TextCode", "title": "Import Wallet from TextCode",
"description": "To generate a TextCode, open a logged in device and go to<br /><span class=\"path\">User Panel > Wallet > Generate TextCode</span> to export.", "description": "To generate a TextCode, open a logged in device and go to<br /><span class=\"path\">User Panel > Wallet > Generate TextCode to export</span>.",
"import_btn": "Import with TextCode" "import_btn": "Import with TextCode",
"enter_here": "Enter your TextCode here below and click on Import button"
}, },
"scan_qr": { "scan_qr": {
"scanning": "Scanning the QR-Code" "scanning": "Scanning the QR-Code"
@ -378,9 +379,10 @@
}, },
"wallet_sync": { "wallet_sync": {
"offline_warning": "You cannot transfer your wallet when offline.<br />Please make sure you are connected to the internet first.", "offline_warning": "You cannot transfer your wallet when offline.<br />Please make sure you are connected to the internet 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 the \"Import with QRCode\" option instead, as it is safer and simpler. 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.", "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 the \"Import with QR-Code\" option instead, as it is safer and simpler. 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.<br />During this wallet transfer, your wallet will be temporarily and securely stored on our servers for up to 5 minutes, using two levels of encryption.<br/> We at NextGraph will never be able to read your wallet, your PIN, your pazzle nor your mnemonic.", "server_transfer_notice": "Both devices need to be online.<br />During this wallet transfer, your wallet will be temporarily and securely stored on our servers for up to 5 minutes, using two levels of encryption.<br/> We at NextGraph will never be able to read your wallet, your PIN, your pazzle nor your mnemonic.",
"importing": "Importing wallet", "importing": "Importing wallet",
"expiry": "The TextCode will be valid for 5 minutes.",
"error": "An error occurred while synchronizing your wallet:<br />{error}", "error": "An error occurred while synchronizing your wallet:<br />{error}",
"no_camera": "Unfortunately, your device does not have a camera.<br /> You cannot scan any QR-Code.<br /> In order to export your wallet to another device, you will have to use another method.", "no_camera": "Unfortunately, your device does not have a camera.<br /> You cannot scan any QR-Code.<br /> In order to export your wallet to another device, you will have to use another method.",
"no_camera_alternatives": "You have 2 other options: \"Import a Wallet file\" (transfer it using a USB key by example, useful if you are offline) or \"Import a TextCode\" (which is a text you will have to transfer with another messaging app)." "no_camera_alternatives": "You have 2 other options: \"Import a Wallet file\" (transfer it using a USB key by example, useful if you are offline) or \"Import a TextCode\" (which is a text you will have to transfer with another messaging app)."

58
ng-app/src/routes/ScanQR.svelte
Unescape View File

@ -49,38 +49,58 @@
on_qr_scanned(result.content); on_qr_scanned(result.content);
} else { } else {
// Load Web Scanner // Load Web Scanner
const { Html5QrcodeScanner } = await import("html5-qrcode"); const { Html5QrcodeScanner, Html5Qrcode } = await import("html5-qrcode");
// Init scanner object // Init scanner object
webScanner = new Html5QrcodeScanner( // webScanner = new Html5QrcodeScanner(
"scanner-div", // "scanner-div",
{ fps: 10, qrbox: { width: 300, height: 300 }, formatsToSupport: [0] }, // { fps: 10, qrbox: { width: 300, height: 300 }, formatsToSupport: [0] },
false // false
); // );
webScanner = new Html5Qrcode ("scanner-div");
// Add scanner to Screen. webScanner.start({ facingMode: { exact: "environment"} }, { fps: 10, qrbox: { width: 300, height: 300 }, formatsToSupport: [0] }, (decoded_text, decoded_result) => {
webScanner.render((decoded_text, decoded_result) => { //console.log(decoded_result);
console.log(decoded_result);
// Handle scan result // Handle scan result
on_qr_scanned(decoded_text); on_qr_scanned(decoded_text);
}, (error) => {
console.error(error);
}); });
// // Add scanner to Screen.
// webScanner.render((decoded_text, decoded_result) => {
// //console.log(decoded_result);
// // Handle scan result
// on_qr_scanned(decoded_text);
// }, (error) => {
// //console.error(error);
// });
// Auto-Request camera permissions (there's no native way, unfortunately...) // Auto-Request camera permissions (there's no native way, unfortunately...)
setTimeout(() => { // setTimeout(() => {
// Auto-start by clicking button // // Auto-start by clicking button
document // document
.getElementById("html5-qrcode-button-camera-permission") // .getElementById("html5-qrcode-button-camera-permission")
?.click(); // ?.click();
}, 100); // }, 100);
// setTimeout(check_ready_and_start, 1000);
} }
}); });
// const check_ready_and_start = () => {
// // Auto-start by clicking button
// let start_btn = document
// .getElementById("html5-qrcode-button-camera-start");
// if (start_btn) {
// start_btn.click();
// } else {
// setTimeout(check_ready_and_start, 1000);
// }
// };
onDestroy(async () => { onDestroy(async () => {
if (mobile) { if (mobile) {
if (nativeScanner) await nativeScanner.cancel(); if (nativeScanner) await nativeScanner.cancel();
} else { } else {
if (webScanner) webScanner.clear(); if (webScanner) webScanner.stop();
} }
}); });
</script> </script>

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

@ -573,7 +573,7 @@
{:else if sub_menu === "text_code"} {:else if sub_menu === "text_code"}
<Sidebar {nonActiveClass}> <Sidebar {nonActiveClass}>
<SidebarWrapper <SidebarWrapper
divClass="bg-gray-60 overflow-y-auto py-4 px-3 rounded dark:bg-gray-800" divClass="mb-10 bg-gray-60 overflow-y-auto py-4 px-3 rounded dark:bg-gray-800"
> >
<SidebarGroup ulClass="space-y-2" role="menu"> <SidebarGroup ulClass="space-y-2" role="menu">
<li> <li>
@ -598,12 +598,13 @@
</li> </li>
<!-- Warning to prefer QR codes or wallet downloads --> <!-- Warning to prefer QR codes or wallet downloads -->
{#if generation_state === "before_start"}
<div class="text-left my-4"> <div class="text-left my-4">
<Alert color="yellow"> <Alert color="yellow">
{@html $t("wallet_sync.textcode.usage_warning")} {@html $t("wallet_sync.textcode.usage_warning")}
</Alert> </Alert>
</div> </div>
{/if}
<!-- Warning if offline --> <!-- Warning if offline -->
{#if !$online} {#if !$online}
<li class="text-left my-4"> <li class="text-left my-4">
@ -611,6 +612,10 @@
{@html $t("wallet_sync.offline_warning")} {@html $t("wallet_sync.offline_warning")}
</Alert> </Alert>
</li> </li>
{:else}
<li class="text-left my-4">
{@html $t("wallet_sync.expiry")}
</li>
{/if} {/if}
<div class="mt-4"> <div class="mt-4">

1
ng-app/src/routes/WalletLogin.svelte
Unescape View File

@ -101,7 +101,6 @@
if ($wallet_from_import) { if ($wallet_from_import) {
wallet = $wallet_from_import; wallet = $wallet_from_import;
importing = true; importing = true;
// TODO: Show component: "We got wallet from other device. Please log in to your wallet, to import the device."
} }
}); });

8
ng-app/src/routes/WalletLoginTextCode.svelte
Unescape View File

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { t } from "svelte-i18n"; import { t } from "svelte-i18n";
import { onMount } from "svelte";
import { Alert, Modal, Spinner } from "flowbite-svelte"; import { Alert, Modal, Spinner } from "flowbite-svelte";
import { import {
ArrowLeft, ArrowLeft,
@ -32,6 +33,11 @@
error = e; error = e;
} }
}; };
function scrollToTop() {
top.scrollIntoView();
}
onMount(() => scrollToTop());
</script> </script>
<CenteredLayout> <CenteredLayout>
@ -66,6 +72,8 @@
{@html $t("wallet_sync.server_transfer_notice")} {@html $t("wallet_sync.server_transfer_notice")}
</div> </div>
<p><br/>{@html $t("pages.wallet_login_textcode.enter_here")}</p>
<!-- TextCode Input --> <!-- TextCode Input -->
<textarea <textarea
rows="6" rows="6"

11
ng-app/src/styles.css
Unescape View File

@ -15,11 +15,11 @@
background-color: rgba(73, 114, 165, 0.1); background-color: rgba(73, 114, 165, 0.1);
} }
/* TODO: hide qr scanner and info button */ /*
#scanner-div { #scanner-div {
border: none !important; border: none !important;
} }
#scanner-div * { /* #scanner-div * {
display: none; display: none;
} }
#scanner-div__scan_region { #scanner-div__scan_region {
@ -28,7 +28,10 @@
#scanner-div__scan_region * { #scanner-div__scan_region * {
display: block; display: block;
} }
#scanner-div__dashboard_section_csr { #html5-qrcode-button-camera-permission {
display: none !important;
}
/* #scanner-div__dashboard_section_csr {
display: none !important; display: none !important;
} }
#html5-qrcode-anchor-scan-type-change { #html5-qrcode-anchor-scan-type-change {
@ -39,7 +42,7 @@
} }
[alt="Info icon"] { [alt="Info icon"] {
display: none !important; display: none !important;
} }*/
.logo { .logo {
padding: 1.5em; padding: 1.5em;

Write Preview
Loading…
Cancel
Save