Laurin Weger
3 months ago
parent
6667fcd37f
commit
e985d8abbc
@ -0,0 +1,57 @@ |
||||
<!-- |
||||
// Copyright (c) 2022-2024 Niko Bonnieure, Par le Peuple, NextGraph.org developers |
||||
// All rights reserved. |
||||
// Licensed under the Apache License, Version 2.0 |
||||
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0> |
||||
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>, |
||||
// at your option. All files in the project carrying such |
||||
// notice may not be copied, modified, or distributed except |
||||
// according to those terms. |
||||
--> |
||||
|
||||
<!-- |
||||
@component DeviceIcon |
||||
Display an icon for a device class provided by the `device` attribute. |
||||
Pass `config` for custom attributes. |
||||
--> |
||||
|
||||
<script lang="ts"> |
||||
import { |
||||
Icon, |
||||
Cube, |
||||
GlobeAlt, |
||||
QuestionMarkCircle, |
||||
DevicePhoneMobile, |
||||
ComputerDesktop, |
||||
ServerStack, |
||||
Key, |
||||
CommandLine, |
||||
} from "svelte-heros-v2"; |
||||
|
||||
export let config = {}; |
||||
export let device: string; |
||||
|
||||
const mapping = { |
||||
Web: GlobeAlt, |
||||
NativeIos: DevicePhoneMobile, |
||||
NativeAndroid: DevicePhoneMobile, |
||||
NativeMacOS: ComputerDesktop, |
||||
NativeLinux: ComputerDesktop, |
||||
NativeWin: ComputerDesktop, |
||||
NativeService: ServerStack, |
||||
NodeService: ServerStack, |
||||
Verifier: ServerStack, |
||||
VerifierLocal: ServerStack, |
||||
ClientBroker: ServerStack, |
||||
WalletMaster: ServerStack, |
||||
Box: Cube, |
||||
Stick: Key, // VerifierStick |
||||
Cli: CommandLine, |
||||
}; |
||||
|
||||
const find = (dataClass: string) => { |
||||
return mapping[dataClass] || QuestionMarkCircle; |
||||
}; |
||||
</script> |
||||
|
||||
<Icon {...config} variation="outline" color="black" icon={find(device)} /> |
||||
@ -0,0 +1,351 @@ |
||||
<!-- |
||||
// Copyright (c) 2022-2024 Niko Bonnieure, Par le Peuple, NextGraph.org developers |
||||
// All rights reserved. |
||||
// Licensed under the Apache License, Version 2.0 |
||||
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0> |
||||
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>, |
||||
// at your option. All files in the project carrying such |
||||
// notice may not be copied, modified, or distributed except |
||||
// according to those terms. |
||||
--> |
||||
|
||||
<!-- |
||||
@component |
||||
"Wallet Info" user panel sub menu. |
||||
Provides info about wallet, broker, etc. and download option. |
||||
--> |
||||
|
||||
<script> |
||||
import { Modal } from "flowbite-svelte"; |
||||
import { link, push } from "svelte-spa-router"; |
||||
import CenteredLayout from "../lib/CenteredLayout.svelte"; |
||||
import { |
||||
ArrowLeft, |
||||
Trash, |
||||
DocumentArrowDown, |
||||
NoSymbol, |
||||
QrCode, |
||||
Link, |
||||
ArrowDownOnSquare, |
||||
} from "svelte-heros-v2"; |
||||
import { onMount, tick } from "svelte"; |
||||
import { Sidebar, SidebarGroup, SidebarWrapper } from "flowbite-svelte"; |
||||
|
||||
import { close_active_wallet, active_session, active_wallet } from "../store"; |
||||
|
||||
import { default as ng } from "../api"; |
||||
|
||||
let tauri_platform = import.meta.env.TAURI_PLATFORM; |
||||
let error; |
||||
let nonActiveClass = |
||||
"flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"; |
||||
|
||||
let top; |
||||
|
||||
async function scrollToTop() { |
||||
await tick(); |
||||
top.scrollIntoView(); |
||||
} |
||||
onMount(async () => { |
||||
if (!$active_session) { |
||||
push("#/"); |
||||
} else { |
||||
await scrollToTop(); |
||||
} |
||||
}); |
||||
|
||||
let downloading = false; |
||||
let wallet_file_ready = false; |
||||
let download_link = false; |
||||
let download_error = false; |
||||
async function download_wallet() { |
||||
try { |
||||
downloading = true; |
||||
let file = await ng.wallet_get_file($active_wallet.id); |
||||
// @ts-ignore |
||||
wallet_file_ready = "wallet-" + $active_wallet.id + ".ngw"; |
||||
if (!tauri_platform) { |
||||
const blob = new Blob([file], { |
||||
type: "application/octet-stream", |
||||
}); |
||||
// @ts-ignore |
||||
download_link = URL.createObjectURL(blob); |
||||
} else { |
||||
download_link = true; |
||||
} |
||||
} catch (e) { |
||||
download_error = e; |
||||
} |
||||
} |
||||
|
||||
let wallet_remove_modal_open = false; |
||||
async function remove_wallet_clicked() { |
||||
wallet_remove_modal_open = true; |
||||
} |
||||
// TODO: WTF, this does not close the modal??? |
||||
const close_modal = () => { |
||||
wallet_remove_modal_open = false; |
||||
}; |
||||
|
||||
async function remove_wallet_confirmed() { |
||||
if (!active_wallet) return; |
||||
// TODO: Wait for implementation |
||||
// ng.wallet_remove($active_wallet.id); |
||||
close_active_wallet(); |
||||
} |
||||
</script> |
||||
|
||||
<CenteredLayout> |
||||
<div class="container3" bind:this={top}> |
||||
<div class="row mb-20"> |
||||
<Sidebar {nonActiveClass}> |
||||
<SidebarWrapper |
||||
divClass="bg-gray-60 overflow-y-auto py-4 px-3 rounded dark:bg-gray-800" |
||||
> |
||||
<SidebarGroup ulClass="space-y-2"> |
||||
<li> |
||||
<h2 class="text-xl mb-6">Wallet Info</h2> |
||||
</li> |
||||
|
||||
<!-- Go Back --> |
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex --> |
||||
<li |
||||
tabindex="0" |
||||
class="text-left text-left flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" |
||||
on:keypress={() => window.history.go(-1)} |
||||
on:click={() => window.history.go(-1)} |
||||
> |
||||
<ArrowLeft |
||||
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" |
||||
/> |
||||
<span class="ml-3">Back</span> |
||||
</li> |
||||
|
||||
<!-- Download Wallet --> |
||||
|
||||
{#if !downloading} |
||||
<li |
||||
tabindex="0" |
||||
role="menuitem" |
||||
class="flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" |
||||
on:keypress={download_wallet} |
||||
on:click={download_wallet} |
||||
> |
||||
<div> |
||||
<DocumentArrowDown |
||||
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" |
||||
/> |
||||
</div> |
||||
<span class="ml-3">Download Wallet File</span> |
||||
</li> |
||||
{:else if download_error} |
||||
<li |
||||
tabindex="-1" |
||||
class="flex items-center p-2 text-base font-normal text-red-700 rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" |
||||
> |
||||
<div> |
||||
<NoSymbol |
||||
tabindex="-1" |
||||
class="w-7 h-7 text-red-700 transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" |
||||
/> |
||||
</div> |
||||
<span class="ml-3 text-left" |
||||
>Download failed:<br /> {download_error}</span |
||||
> |
||||
</li> |
||||
{:else if !wallet_file_ready} |
||||
<li |
||||
tabindex="-1" |
||||
class="flex items-center p-2 text-base font-normal text-blue-700 rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" |
||||
> |
||||
<div> |
||||
<DocumentArrowDown |
||||
tabindex="-1" |
||||
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> |
||||
<span class="ml-3 text-left">Download in progress...</span> |
||||
</li> |
||||
{:else if download_link === true} |
||||
<li |
||||
tabindex="-1" |
||||
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 |
||||
>You will find the file named "{wallet_file_ready}" <br />in |
||||
your Downloads folder</span |
||||
> |
||||
</li> |
||||
{:else} |
||||
<li |
||||
tabindex="-1" |
||||
class="flex items-center text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" |
||||
> |
||||
<a |
||||
href={download_link} |
||||
target="_blank" |
||||
download={wallet_file_ready} |
||||
> |
||||
<button |
||||
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" |
||||
> |
||||
<div> |
||||
<DocumentArrowDown |
||||
tabindex="-1" |
||||
class="w-14 h-14 transition duration-75 dark:text-white dark:group-hover:text-white" |
||||
/> |
||||
</div> |
||||
Click here to download the wallet file |
||||
</button> |
||||
</a> |
||||
</li> |
||||
{/if} |
||||
|
||||
<!-- Remove Wallet --> |
||||
<li |
||||
tabindex="0" |
||||
class="text-left flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" |
||||
on:keypress={remove_wallet_clicked} |
||||
on:click={remove_wallet_clicked} |
||||
> |
||||
<div> |
||||
<Trash |
||||
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" |
||||
/> |
||||
</div> |
||||
<span class="ml-3">Remove Wallet from Device</span> |
||||
<Modal |
||||
autoclose |
||||
outsideclose |
||||
bind:open={wallet_remove_modal_open} |
||||
title="Remove Wallet" |
||||
> |
||||
<p class="mt-4"> |
||||
Are you sure you want to remove this wallet from your device? |
||||
</p> |
||||
<div class="mt-4 flex justify-end"> |
||||
<button on:click={close_modal}> Cancel </button> |
||||
|
||||
<button |
||||
class="mr-2 bg-primary-700 text-white" |
||||
on:click={remove_wallet_confirmed} |
||||
> |
||||
Remove |
||||
</button> |
||||
</div> |
||||
</Modal> |
||||
</li> |
||||
|
||||
<!-- TODO: Show QR-Code --> |
||||
{#if false} |
||||
<li |
||||
tabindex="0" |
||||
class="text-left flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" |
||||
> |
||||
<div> |
||||
<QrCode |
||||
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" |
||||
/> |
||||
</div> |
||||
<span class="ml-3">Wallet QR-Code</span> |
||||
<Modal autoclose outsideclose title="My Wallet QR-Code" |
||||
>Use this QR-Code to log in with your wallet on new devices. |
||||
</Modal> |
||||
</li> |
||||
{/if} |
||||
|
||||
<!-- TODO: Copy Wallet Link --> |
||||
{#if false} |
||||
<li |
||||
tabindex="0" |
||||
class="text-left flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" |
||||
> |
||||
<div> |
||||
<Link |
||||
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" |
||||
/> |
||||
</div> |
||||
<span class="ml-3">Copy Wallet Link</span> |
||||
</li> |
||||
{/if} |
||||
|
||||
<!-- TODO: Save to Device --> |
||||
{#if false} |
||||
<li |
||||
tabindex="0" |
||||
class="text-left flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" |
||||
> |
||||
<!-- TODO: Same as with the trash icon, this is not same-sized as the others. --> |
||||
<ArrowDownOnSquare |
||||
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" |
||||
/> |
||||
<span class="ml-3">Save to Device for Future Logins</span> |
||||
</li> |
||||
{/if} |
||||
</SidebarGroup> |
||||
</SidebarWrapper> |
||||
</Sidebar> |
||||
</div> |
||||
{#if error} |
||||
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-red-800"> |
||||
<svg |
||||
class="animate-bounce mt-10 h-16 w-16 mx-auto" |
||||
fill="none" |
||||
stroke="currentColor" |
||||
stroke-width="1.5" |
||||
viewBox="0 0 24 24" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
aria-hidden="true" |
||||
> |
||||
<path |
||||
stroke-linecap="round" |
||||
stroke-linejoin="round" |
||||
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" |
||||
/> |
||||
</svg> |
||||
{#if error == "AlreadyExists"} |
||||
<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 |
||||
in instead |
||||
</p> |
||||
<a use:link href="/"> |
||||
<button |
||||
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" |
||||
> |
||||
Login |
||||
</button> |
||||
</a> |
||||
{:else} |
||||
<p class="max-w-xl md:mx-auto lg:max-w-2xl mb-5"> |
||||
An error occurred:<br />{error} |
||||
</p> |
||||
<a use:link href="/"> |
||||
<button |
||||
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" |
||||
> |
||||
Go back to homepage |
||||
</button> |
||||
</a> |
||||
{/if} |
||||
</div> |
||||
{/if} |
||||
</div> |
||||
</CenteredLayout> |
||||
|
||||
<style> |
||||
li.clickable { |
||||
cursor: pointer; |
||||
} |
||||
.site-cnx-details { |
||||
@apply mt-0 !important; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue