Laurin Weger
4 months ago
parent
6f818448b3
commit
e68bc0c4d6
@ -0,0 +1,310 @@ |
||||
<script lang="ts"> |
||||
import { t } from "svelte-i18n"; |
||||
import { |
||||
type Html5QrcodeResult, |
||||
type Html5QrcodeScanner, |
||||
} from "html5-qrcode"; |
||||
import { |
||||
Alert, |
||||
Modal, |
||||
Sidebar, |
||||
SidebarGroup, |
||||
SidebarWrapper, |
||||
Spinner, |
||||
} from "flowbite-svelte"; |
||||
import { |
||||
ArrowLeft, |
||||
ArrowRightCircle, |
||||
Camera, |
||||
CheckBadge, |
||||
QrCode, |
||||
} from "svelte-heros-v2"; |
||||
import CenteredLayout from "../lib/CenteredLayout.svelte"; |
||||
import { onMount } from "svelte"; |
||||
import { push } from "svelte-spa-router"; |
||||
|
||||
let WebQRScannerClassPromise: Promise<typeof Html5QrcodeScanner>; |
||||
let html5QrcodeScanner: Html5QrcodeScanner; |
||||
async function load_qr_scanner_lib() { |
||||
// Load in browser only |
||||
if (!tauri_platform && !WebQRScannerClassPromise) { |
||||
WebQRScannerClassPromise = new Promise((resolve) => { |
||||
import("html5-qrcode").then((lib) => resolve(lib.Html5QrcodeScanner)); |
||||
}); |
||||
} |
||||
// TODO: Load alternative for native apps? |
||||
} |
||||
|
||||
let top; |
||||
const tauri_platform: string | undefined = import.meta.env.TAURI_PLATFORM; |
||||
let has_camera: boolean | "checking" = "checking"; |
||||
let login_method: "scan" | "gen" | undefined = undefined; |
||||
|
||||
let scan_state: |
||||
| "before_start" |
||||
| "scanning" |
||||
| "has_scanned" |
||||
| "success" |
||||
| Error = "before_start"; |
||||
let scanned_qr: string | undefined = undefined; |
||||
|
||||
let gen_state: |
||||
| "before_start" |
||||
| "generating" |
||||
| "generated" |
||||
| "success" |
||||
| Error = "before_start"; |
||||
let generated_qr: string | undefined = undefined; |
||||
|
||||
const check_has_camera = async () => { |
||||
if (!tauri_platform) { |
||||
// If there is a camera, go to scan mode, else gen mode. |
||||
try { |
||||
const devices = await navigator.mediaDevices.enumerateDevices(); |
||||
has_camera = |
||||
devices.filter((device) => device.kind === "videoinput").length > 0; |
||||
} catch { |
||||
has_camera = false; |
||||
} |
||||
login_method = has_camera ? "scan" : "gen"; |
||||
// Load Scanner lib, if necessary. |
||||
if (has_camera) load_qr_scanner_lib(); |
||||
} else { |
||||
// TODO: rust API @niko |
||||
} |
||||
}; |
||||
check_has_camera(); |
||||
|
||||
function on_qr_scanned(text: string) { |
||||
scan_state = "has_scanned"; |
||||
scanned_qr = text; |
||||
// TODO: API calls for synchronization @niko |
||||
// ToRemove: |
||||
setTimeout(() => { |
||||
scan_state = "success"; |
||||
}, 2_000); |
||||
} |
||||
|
||||
function clear_scanner() { |
||||
if (html5QrcodeScanner) html5QrcodeScanner.clear(); |
||||
html5QrcodeScanner = null; |
||||
} |
||||
|
||||
async function open_scanner() { |
||||
scan_state = "scanning"; |
||||
|
||||
const WebQRScanner = await WebQRScannerClassPromise; |
||||
html5QrcodeScanner = new WebQRScanner( |
||||
"scanner-div", |
||||
{ fps: 10, qrbox: { width: 300, height: 300 }, formatsToSupport: [0] }, |
||||
false |
||||
); |
||||
|
||||
html5QrcodeScanner.render((decoded_text, decoded_result) => { |
||||
// Handle scan result |
||||
on_qr_scanned(decoded_text); |
||||
clear_scanner(); |
||||
}, undefined); |
||||
|
||||
// Auto-Request camera permissions (there's no native way, unfortunately...) |
||||
setTimeout(() => { |
||||
// Auto-start by clicking button |
||||
document.getElementById("html5-qrcode-button-camera-permission")?.click(); |
||||
}, 100); |
||||
} |
||||
|
||||
function close_scanner_modal() { |
||||
clear_scanner(); |
||||
if (scanned_qr) { |
||||
scan_state = "has_scanned"; |
||||
} else { |
||||
scan_state = "before_start"; |
||||
} |
||||
} |
||||
|
||||
function generate_qr() { |
||||
gen_state = "generating"; |
||||
// TODO: @niko generated_qr = await ng.generate_export_qr(); |
||||
// ToRemove: |
||||
setTimeout(() => { |
||||
gen_state = "generated"; |
||||
generated_qr = "dummy"; |
||||
}, 1500); |
||||
setTimeout(() => { |
||||
gen_state = "success"; |
||||
}, 3500); |
||||
} |
||||
|
||||
function continue_to_login(wallet) {} |
||||
|
||||
function scrollToTop() { |
||||
top.scrollIntoView(); |
||||
} |
||||
onMount(() => scrollToTop()); |
||||
</script> |
||||
|
||||
<CenteredLayout> |
||||
<div class="container3" bind:this={top}> |
||||
<div |
||||
class="flex flex-col justify-center max-w-md mx-6 mb-20 bg-gray-60 overflow-y-auto py-4 dark:bg-gray-800" |
||||
> |
||||
<!-- Title --> |
||||
<div> |
||||
<h2 class="text-xl mb-6">{$t("pages.wallet_login_qr.title")}</h2> |
||||
</div> |
||||
|
||||
<!-- Checking, if camera is available... --> |
||||
{#if login_method === undefined} |
||||
<!-- TODO: Check connectivity here--> |
||||
<div><Spinner /></div> |
||||
{:else if false} |
||||
<!-- Warning, if offline --> |
||||
<!-- TODO: get connection status to nextgraph.one --> |
||||
<div class="text-left"> |
||||
<Alert color="red"> |
||||
{@html $t("pages.wallet_login_qr.offline_warning")} |
||||
</Alert> |
||||
</div> |
||||
{:else if login_method === "scan"} |
||||
<!-- Scan Mode --> |
||||
{#if scan_state === "before_start"} |
||||
<!-- Notes about QR --> |
||||
<div class="text-left text-sm"> |
||||
{@html $t("pages.wallet_login_qr.scan.description")} |
||||
</div> |
||||
{:else if scan_state === "scanning"} |
||||
<!-- Modal is down at the bottom --> |
||||
{:else if scan_state === "has_scanned"} |
||||
<!-- Scanned QR --> |
||||
<div> |
||||
<Spinner /> |
||||
</div> |
||||
<div class="mt-2"> |
||||
{$t("pages.wallet_login_qr.scan.syncing")} |
||||
</div> |
||||
{:else if scan_state === "success"} |
||||
<div class="mt-4"> |
||||
<CheckBadge class="w-full" color="green" size="3em" /> |
||||
</div> |
||||
<div class="mt-4"> |
||||
{@html $t("pages.wallet_login_qr.scan.success")} |
||||
</div> |
||||
{:else} |
||||
<!-- Error --> |
||||
{$t("pages.wallet_login_qr.scan.error", { |
||||
values: { error: $t("errors." + scan_state) }, |
||||
})} |
||||
{/if} |
||||
{:else if login_method === "gen"} |
||||
<!-- Generate QR Code to log in with another device --> |
||||
{#if gen_state == "before_start"} |
||||
<!-- Notes about QR Generation --> |
||||
<div class="text-left text-sm"> |
||||
{@html $t("pages.wallet_login_qr.gen.description")} |
||||
</div> |
||||
{:else if gen_state === "generating"} |
||||
<div> |
||||
<Spinner class="w-full" /> |
||||
</div> |
||||
{:else if gen_state === "generated"} |
||||
<!-- Notes about generated QR --> |
||||
<div class="text-left text-sm"> |
||||
{@html $t("pages.wallet_login_qr.gen.generated")} |
||||
</div> |
||||
|
||||
<!-- Generated QR Code --> |
||||
<div> |
||||
{#if generated_qr === "dummy"} |
||||
<div title={$t("pages.wallet_info.gen_qr.img_title")}> |
||||
<QrCode class="w-full h-full" /> |
||||
</div> |
||||
{:else} |
||||
<img |
||||
src={generated_qr} |
||||
title={$t("pages.wallet_info.gen_qr.img_title")} |
||||
alt="pages.wallet_info.gen_qr_alt" |
||||
class="w-full h-full" |
||||
/> |
||||
{/if} |
||||
</div> |
||||
{:else if gen_state === "success"} |
||||
<div class="mt-4"> |
||||
<CheckBadge class="w-full" color="green" size="3em" /> |
||||
</div> |
||||
<div class="mt-4"> |
||||
{@html $t("pages.wallet_login_qr.gen.success")} |
||||
</div> |
||||
{:else} |
||||
<!-- gen_state has Error --> |
||||
{$t("pages.wallet_login_qr.gen.error")} |
||||
{/if} |
||||
{/if} |
||||
|
||||
<div class="mx-auto"> |
||||
<div class="my-4"> |
||||
{#if login_method === "scan" && scan_state === "before_start"} |
||||
<!-- Open Scanner Button--> |
||||
<button |
||||
on:click={open_scanner} |
||||
class="mt-4 w-full 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 mb-2" |
||||
> |
||||
<Camera |
||||
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" |
||||
/> |
||||
{$t("pages.wallet_login_qr.scan.button")} |
||||
</button> |
||||
{:else if login_method === "gen" && gen_state === "before_start"} |
||||
<!-- Generate QR Button --> |
||||
<button |
||||
on:click={generate_qr} |
||||
class="mt-4 w-full 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 mb-2" |
||||
> |
||||
<QrCode |
||||
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" |
||||
/> |
||||
{$t("pages.wallet_login_qr.gen.button")} |
||||
</button> |
||||
{:else if scan_state === "success" || gen_state === "success"} |
||||
<a href="#/wallet/login"> |
||||
<button |
||||
class="mt-4 w-full 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 mb-2" |
||||
> |
||||
<ArrowRightCircle |
||||
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" |
||||
/> |
||||
{$t("pages.wallet_login_qr.success_btn")} |
||||
</button> |
||||
</a> |
||||
{/if} |
||||
|
||||
<!-- Go Back --> |
||||
{#if scan_state !== "success" && gen_state !== "success"} |
||||
<button |
||||
on:click={() => window.history.go(-1)} |
||||
class="mt-8 w-full text-gray-500 dark:text-gray-400 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" |
||||
><ArrowLeft |
||||
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" |
||||
/>{$t("buttons.back")}</button |
||||
> |
||||
{/if} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- Scanner Open--> |
||||
<Modal |
||||
title={$t("pages.wallet_login_qr.scan.modal.title")} |
||||
placement="center" |
||||
on:hide={close_scanner_modal} |
||||
open={scan_state === "scanning"} |
||||
class="h-[85vh]" |
||||
> |
||||
<div id="scanner-div" class="h-full"> |
||||
{$t("pages.wallet_login_qr.scan.modal.loading")}... |
||||
</div> |
||||
</Modal> |
||||
</div> |
||||
</CenteredLayout> |
||||
@ -0,0 +1,310 @@ |
||||
<script lang="ts"> |
||||
import { t } from "svelte-i18n"; |
||||
import { |
||||
type Html5QrcodeResult, |
||||
type Html5QrcodeScanner, |
||||
} from "html5-qrcode"; |
||||
import { |
||||
Alert, |
||||
Modal, |
||||
Sidebar, |
||||
SidebarGroup, |
||||
SidebarWrapper, |
||||
Spinner, |
||||
} from "flowbite-svelte"; |
||||
import { |
||||
ArrowLeft, |
||||
ArrowRightCircle, |
||||
Camera, |
||||
CheckBadge, |
||||
QrCode, |
||||
} from "svelte-heros-v2"; |
||||
import CenteredLayout from "../lib/CenteredLayout.svelte"; |
||||
import { onMount } from "svelte"; |
||||
import { push } from "svelte-spa-router"; |
||||
|
||||
let WebQRScannerClassPromise: Promise<typeof Html5QrcodeScanner>; |
||||
let html5QrcodeScanner: Html5QrcodeScanner; |
||||
async function load_qr_scanner_lib() { |
||||
// Load in browser only |
||||
if (!tauri_platform && !WebQRScannerClassPromise) { |
||||
WebQRScannerClassPromise = new Promise((resolve) => { |
||||
import("html5-qrcode").then((lib) => resolve(lib.Html5QrcodeScanner)); |
||||
}); |
||||
} |
||||
// TODO: Load alternative for native apps? |
||||
} |
||||
|
||||
let top; |
||||
const tauri_platform: string | undefined = import.meta.env.TAURI_PLATFORM; |
||||
let has_camera: boolean | "checking" = "checking"; |
||||
let login_method: "scan" | "gen" | undefined = undefined; |
||||
|
||||
let scan_state: |
||||
| "before_start" |
||||
| "scanning" |
||||
| "has_scanned" |
||||
| "success" |
||||
| Error = "before_start"; |
||||
let scanned_qr: string | undefined = undefined; |
||||
|
||||
let gen_state: |
||||
| "before_start" |
||||
| "generating" |
||||
| "generated" |
||||
| "success" |
||||
| Error = "before_start"; |
||||
let generated_qr: string | undefined = undefined; |
||||
|
||||
const check_has_camera = async () => { |
||||
if (!tauri_platform) { |
||||
// If there is a camera, go to scan mode, else gen mode. |
||||
try { |
||||
const devices = await navigator.mediaDevices.enumerateDevices(); |
||||
has_camera = |
||||
devices.filter((device) => device.kind === "videoinput").length > 0; |
||||
} catch { |
||||
has_camera = false; |
||||
} |
||||
login_method = has_camera ? "scan" : "gen"; |
||||
// Load Scanner lib, if necessary. |
||||
if (has_camera) load_qr_scanner_lib(); |
||||
} else { |
||||
// TODO: rust API @niko |
||||
} |
||||
}; |
||||
check_has_camera(); |
||||
|
||||
function on_qr_scanned(text: string) { |
||||
scan_state = "has_scanned"; |
||||
scanned_qr = text; |
||||
// TODO: API calls for synchronization @niko |
||||
// ToRemove: |
||||
setTimeout(() => { |
||||
scan_state = "success"; |
||||
}, 2_000); |
||||
} |
||||
|
||||
function clear_scanner() { |
||||
if (html5QrcodeScanner) html5QrcodeScanner.clear(); |
||||
html5QrcodeScanner = null; |
||||
} |
||||
|
||||
async function open_scanner() { |
||||
scan_state = "scanning"; |
||||
|
||||
const WebQRScanner = await WebQRScannerClassPromise; |
||||
html5QrcodeScanner = new WebQRScanner( |
||||
"scanner-div", |
||||
{ fps: 10, qrbox: { width: 300, height: 300 }, formatsToSupport: [0] }, |
||||
false |
||||
); |
||||
|
||||
html5QrcodeScanner.render((decoded_text, decoded_result) => { |
||||
// Handle scan result |
||||
on_qr_scanned(decoded_text); |
||||
clear_scanner(); |
||||
}, undefined); |
||||
|
||||
// Auto-Request camera permissions (there's no native way, unfortunately...) |
||||
setTimeout(() => { |
||||
// Auto-start by clicking button |
||||
document.getElementById("html5-qrcode-button-camera-permission")?.click(); |
||||
}, 100); |
||||
} |
||||
|
||||
function close_scanner_modal() { |
||||
clear_scanner(); |
||||
if (scanned_qr) { |
||||
scan_state = "has_scanned"; |
||||
} else { |
||||
scan_state = "before_start"; |
||||
} |
||||
} |
||||
|
||||
function generate_qr() { |
||||
gen_state = "generating"; |
||||
// TODO: @niko generated_qr = await ng.generate_export_qr(); |
||||
// ToRemove: |
||||
setTimeout(() => { |
||||
gen_state = "generated"; |
||||
generated_qr = "dummy"; |
||||
}, 1500); |
||||
setTimeout(() => { |
||||
gen_state = "success"; |
||||
}, 3500); |
||||
} |
||||
|
||||
function continue_to_login(wallet) {} |
||||
|
||||
function scrollToTop() { |
||||
top.scrollIntoView(); |
||||
} |
||||
onMount(() => scrollToTop()); |
||||
</script> |
||||
|
||||
<CenteredLayout> |
||||
<div class="container3" bind:this={top}> |
||||
<div |
||||
class="flex flex-col justify-center max-w-md mx-6 mb-20 bg-gray-60 overflow-y-auto py-4 dark:bg-gray-800" |
||||
> |
||||
<!-- Title --> |
||||
<div> |
||||
<h2 class="text-xl mb-6">{$t("pages.wallet_login_qr.title")}</h2> |
||||
</div> |
||||
|
||||
<!-- Checking, if camera is available... --> |
||||
{#if login_method === undefined} |
||||
<!-- TODO: Check connectivity here--> |
||||
<div><Spinner /></div> |
||||
{:else if false} |
||||
<!-- Warning, if offline --> |
||||
<!-- TODO: get connection status to nextgraph.one --> |
||||
<div class="text-left"> |
||||
<Alert color="red"> |
||||
{@html $t("pages.wallet_login_qr.offline_warning")} |
||||
</Alert> |
||||
</div> |
||||
{:else if login_method === "scan"} |
||||
<!-- Scan Mode --> |
||||
{#if scan_state === "before_start"} |
||||
<!-- Notes about QR --> |
||||
<div class="text-left text-sm"> |
||||
{@html $t("pages.wallet_login_qr.scan.description")} |
||||
</div> |
||||
{:else if scan_state === "scanning"} |
||||
<!-- Modal is down at the bottom --> |
||||
{:else if scan_state === "has_scanned"} |
||||
<!-- Scanned QR --> |
||||
<div> |
||||
<Spinner /> |
||||
</div> |
||||
<div class="mt-2"> |
||||
{$t("pages.wallet_login_qr.scan.syncing")} |
||||
</div> |
||||
{:else if scan_state === "success"} |
||||
<div class="mt-4"> |
||||
<CheckBadge class="w-full" color="green" size="3em" /> |
||||
</div> |
||||
<div class="mt-4"> |
||||
{@html $t("pages.wallet_login_qr.scan.success")} |
||||
</div> |
||||
{:else} |
||||
<!-- Error --> |
||||
{$t("pages.wallet_login_qr.scan.error", { |
||||
values: { error: $t("errors." + scan_state) }, |
||||
})} |
||||
{/if} |
||||
{:else if login_method === "gen"} |
||||
<!-- Generate QR Code to log in with another device --> |
||||
{#if gen_state == "before_start"} |
||||
<!-- Notes about QR Generation --> |
||||
<div class="text-left text-sm"> |
||||
{@html $t("pages.wallet_login_qr.gen.description")} |
||||
</div> |
||||
{:else if gen_state === "generating"} |
||||
<div> |
||||
<Spinner class="w-full" /> |
||||
</div> |
||||
{:else if gen_state === "generated"} |
||||
<!-- Notes about generated QR --> |
||||
<div class="text-left text-sm"> |
||||
{@html $t("pages.wallet_login_qr.gen.generated")} |
||||
</div> |
||||
|
||||
<!-- Generated QR Code --> |
||||
<div> |
||||
{#if generated_qr === "dummy"} |
||||
<div title={$t("pages.wallet_info.gen_qr.img_title")}> |
||||
<QrCode class="w-full h-full" /> |
||||
</div> |
||||
{:else} |
||||
<img |
||||
src={generated_qr} |
||||
title={$t("pages.wallet_info.gen_qr.img_title")} |
||||
alt="pages.wallet_info.gen_qr_alt" |
||||
class="w-full h-full" |
||||
/> |
||||
{/if} |
||||
</div> |
||||
{:else if gen_state === "success"} |
||||
<div class="mt-4"> |
||||
<CheckBadge class="w-full" color="green" size="3em" /> |
||||
</div> |
||||
<div class="mt-4"> |
||||
{@html $t("pages.wallet_login_qr.gen.success")} |
||||
</div> |
||||
{:else} |
||||
<!-- gen_state has Error --> |
||||
{$t("pages.wallet_login_qr.gen.error")} |
||||
{/if} |
||||
{/if} |
||||
|
||||
<div class="mx-auto"> |
||||
<div class="my-4"> |
||||
{#if login_method === "scan" && scan_state === "before_start"} |
||||
<!-- Open Scanner Button--> |
||||
<button |
||||
on:click={open_scanner} |
||||
class="mt-4 w-full 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 mb-2" |
||||
> |
||||
<Camera |
||||
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" |
||||
/> |
||||
{$t("pages.wallet_login_qr.scan.button")} |
||||
</button> |
||||
{:else if login_method === "gen" && gen_state === "before_start"} |
||||
<!-- Generate QR Button --> |
||||
<button |
||||
on:click={generate_qr} |
||||
class="mt-4 w-full 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 mb-2" |
||||
> |
||||
<QrCode |
||||
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" |
||||
/> |
||||
{$t("pages.wallet_login_qr.gen.button")} |
||||
</button> |
||||
{:else if scan_state === "success" || gen_state === "success"} |
||||
<a href="#/wallet/login"> |
||||
<button |
||||
class="mt-4 w-full 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 mb-2" |
||||
> |
||||
<ArrowRightCircle |
||||
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" |
||||
/> |
||||
{$t("pages.wallet_login_qr.success_btn")} |
||||
</button> |
||||
</a> |
||||
{/if} |
||||
|
||||
<!-- Go Back --> |
||||
{#if scan_state !== "success" && gen_state !== "success"} |
||||
<button |
||||
on:click={() => window.history.go(-1)} |
||||
class="mt-8 w-full text-gray-500 dark:text-gray-400 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" |
||||
><ArrowLeft |
||||
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" |
||||
/>{$t("buttons.back")}</button |
||||
> |
||||
{/if} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- Scanner Open--> |
||||
<Modal |
||||
title={$t("pages.wallet_login_qr.scan.modal.title")} |
||||
placement="center" |
||||
on:hide={close_scanner_modal} |
||||
open={scan_state === "scanning"} |
||||
class="h-[85vh]" |
||||
> |
||||
<div id="scanner-div" class="h-full"> |
||||
{$t("pages.wallet_login_qr.scan.modal.loading")}... |
||||
</div> |
||||
</Modal> |
||||
</div> |
||||
</CenteredLayout> |
||||
Loading…
Reference in new issue