parent
7331289e0f
commit
6aa87f1467
@ -0,0 +1,319 @@ |
|||||||
|
<!-- |
||||||
|
// Copyright (c) 2022-2025 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. |
||||||
|
--> |
||||||
|
|
||||||
|
<script lang="ts"> |
||||||
|
import { t, format } from "svelte-i18n"; |
||||||
|
import { Alert, Spinner } from "flowbite-svelte"; |
||||||
|
import { |
||||||
|
ArrowLeft, |
||||||
|
ExclamationTriangle, |
||||||
|
Cloud, |
||||||
|
ChevronDoubleRight, |
||||||
|
} from "svelte-heros-v2"; |
||||||
|
import { onDestroy, onMount, tick } from "svelte"; |
||||||
|
import { push } from "svelte-spa-router"; |
||||||
|
import CenteredLayout from "../lib/CenteredLayout.svelte"; |
||||||
|
import PasswordInput from "../lib/components/PasswordInput.svelte"; |
||||||
|
import { wallet_from_import, display_error } from "../store"; |
||||||
|
import ng from "../api"; |
||||||
|
|
||||||
|
let top: HTMLElement; |
||||||
|
|
||||||
|
const set_online = () => { connected = true; }; |
||||||
|
const set_offline = () => { connected = false; }; |
||||||
|
|
||||||
|
let error; |
||||||
|
let connected = true; |
||||||
|
let tauri_platform = import.meta.env.TAURI_PLATFORM; |
||||||
|
let pre_invitation = false; |
||||||
|
let domain = undefined; |
||||||
|
let for_opaque = undefined ; |
||||||
|
let state: "username" | "password" | "connecting" = "username"; |
||||||
|
|
||||||
|
function scrollToTop() { |
||||||
|
top.scrollIntoView(); |
||||||
|
} |
||||||
|
|
||||||
|
onMount(async () => { |
||||||
|
connected = window.navigator.onLine; |
||||||
|
window.addEventListener("offline", set_offline); |
||||||
|
window.addEventListener("online", set_online); |
||||||
|
state = "username"; |
||||||
|
username = ""; |
||||||
|
if (!tauri_platform) { |
||||||
|
let res = await ng.get_local_bootstrap_and_domain( |
||||||
|
import.meta.env.PROD ? location.href : "http://localhost:14400" |
||||||
|
); |
||||||
|
pre_invitation = res[0]; |
||||||
|
domain = res[1]; |
||||||
|
console.log("pre_invitation", pre_invitation, domain); |
||||||
|
} |
||||||
|
scrollToTop(); |
||||||
|
await tick(); |
||||||
|
username_input.focus(); |
||||||
|
}); |
||||||
|
onDestroy(() => { |
||||||
|
window.removeEventListener("offline", set_offline); |
||||||
|
window.removeEventListener("online", set_online); |
||||||
|
}); |
||||||
|
|
||||||
|
let password = ""; |
||||||
|
const validate_password = async () => { |
||||||
|
|
||||||
|
console.log(password, for_opaque); |
||||||
|
|
||||||
|
} |
||||||
|
let username_input; |
||||||
|
let username = ""; |
||||||
|
let redirect = undefined; |
||||||
|
const domainRegex = /^((?=[a-z0-9-]{1,63}\.)(xn--)?[a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,63}$/i; |
||||||
|
const usernameRegex = /^[a-zA-Z_]+[a-zA-Z0-9_-]*$/; |
||||||
|
const validate_username = async (e: any) => { |
||||||
|
if (!e || e.key == "Enter" || e.keyCode == 13) { |
||||||
|
username_input.blur(); |
||||||
|
if (pre_invitation) { |
||||||
|
if (!domain) { |
||||||
|
let u = username.trim(); |
||||||
|
if (u.includes("@")) { |
||||||
|
syntax_error = $t("pages.wallet_login_username.error.nodomainplease"); |
||||||
|
} else if (!usernameRegex.test(u)) { |
||||||
|
syntax_error = $t("pages.wallet_login_username.error.username"); |
||||||
|
} else { |
||||||
|
for_opaque = pre_invitation.V0.bootstrap; |
||||||
|
for_opaque.username = u; |
||||||
|
next(); |
||||||
|
} |
||||||
|
} else { |
||||||
|
let parts = username.trim().split("@"); |
||||||
|
if (!usernameRegex.test(parts[0])) { |
||||||
|
syntax_error = $t("pages.wallet_login_username.error.username"); |
||||||
|
} |
||||||
|
else if ( parts[1] === domain || !parts[1] ) { |
||||||
|
username = parts[0]; |
||||||
|
for_opaque = pre_invitation.V0.bootstrap; |
||||||
|
for_opaque.username = username; |
||||||
|
next(); |
||||||
|
} else { |
||||||
|
// testing that domain is valid |
||||||
|
if (!domainRegex.test(parts[1])) { |
||||||
|
syntax_error = $t("pages.wallet_login_username.error.invalid_domain"); |
||||||
|
} else { |
||||||
|
redirect = `https://${parts[1]}/#/wallet/username?u=${parts[0]}`; |
||||||
|
syntax_error = $t("pages.wallet_login_username.error.need_redirect"); |
||||||
|
// TODO: when receiving a ?u=... after fetching it with opaque, if the wallet is already present locally, dont show an error, just log in with the username/password. |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} else if (tauri_platform) { |
||||||
|
let parts = username.trim().split("@"); |
||||||
|
if (!usernameRegex.test(parts[0])) { |
||||||
|
syntax_error = $t("pages.wallet_login_username.error.username"); |
||||||
|
} |
||||||
|
else if (!parts[1]) { |
||||||
|
syntax_error = $t("pages.wallet_login_username.error.mandatory_domain"); |
||||||
|
} else { |
||||||
|
// testing that domain is valid |
||||||
|
if (!domainRegex.test(parts[1])) { |
||||||
|
syntax_error = $t("pages.wallet_login_username.error.invalid_domain"); |
||||||
|
} else { |
||||||
|
// fetching the .ng_bootstrap of the domain |
||||||
|
state = "connecting"; |
||||||
|
try { |
||||||
|
let bootstrap_info = await ng.retrieve_ng_bootstrap(`https://${parts[1]}`); |
||||||
|
for_opaque = bootstrap_info.V0.bootstrap; |
||||||
|
for_opaque.username = parts[0]; |
||||||
|
// do opaque with that |
||||||
|
next(); |
||||||
|
} catch (e) { |
||||||
|
error = e; |
||||||
|
return; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} else { |
||||||
|
syntax_error = "your local broker cannot be found (unexpected error)"; |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
let placeholder = ""; |
||||||
|
$: placeholder = pre_invitation ? domain ? $format("pages.wallet_login_username.username_placeholder_without_domain", { |
||||||
|
values: { domain }}) : $t("pages.wallet_login_username.username_placeholder_without_at") : |
||||||
|
$t("pages.wallet_login_username.username_placeholder_domain"); |
||||||
|
let warning = ""; |
||||||
|
$: warning = domain && username.trim().endsWith("@"+domain) && $format("pages.wallet_login_username.warning.nospecificdomainplease", { |
||||||
|
values: { domain }}) || pre_invitation && !domain && username.includes("@") |
||||||
|
&& $t("pages.wallet_login_username.warning.nodomainplease") || ""; |
||||||
|
const next = () => { |
||||||
|
for_opaque.username = for_opaque.username.toLowerCase(); |
||||||
|
state = "password"; |
||||||
|
} |
||||||
|
|
||||||
|
let syntax_error = ""; |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<CenteredLayout> |
||||||
|
<div class="container3" bind:this={top}> |
||||||
|
<div |
||||||
|
class="flex flex-col justify-center max-w-md mb-5 bg-gray-60 overflow-y-auto py-4 dark:bg-gray-800" |
||||||
|
> |
||||||
|
<!-- Title --> |
||||||
|
<div class="mx-6"> |
||||||
|
<h2 class="text-xl mb-6">{$t("pages.wallet_login_username.title")}</h2> |
||||||
|
</div> |
||||||
|
|
||||||
|
{#if !connected} |
||||||
|
<!-- Warning, if offline --> |
||||||
|
<div class="text-left mx-6"> |
||||||
|
<Alert color="red"> |
||||||
|
{@html $t("wallet_sync.offline_warning")} |
||||||
|
</Alert> |
||||||
|
<Alert color="blue" class="mt-4"> |
||||||
|
{@html $t("pages.wallet_login.offline_advice")} |
||||||
|
</Alert> |
||||||
|
<!-- Go Back --> |
||||||
|
<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 |
||||||
|
> |
||||||
|
</div> |
||||||
|
{:else if error} |
||||||
|
<div class="max-w-6xl lg:px-8 mx-auto px-4 text-red-800"> |
||||||
|
<ExclamationTriangle class="animate-bounce mt-10 h-16 w-16 mx-auto" /> |
||||||
|
<p class="max-w-xl md:mx-auto lg:max-w-2xl mb-5"> |
||||||
|
{@html $t("errors.error_occurred", { |
||||||
|
values: { message: display_error(error) }, |
||||||
|
})} |
||||||
|
</p> |
||||||
|
<button |
||||||
|
on:click={() => window.history.go(-1)} |
||||||
|
class="mt-8 mr-2 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 |
||||||
|
> |
||||||
|
</div> |
||||||
|
{:else} |
||||||
|
{#if state == "username"} |
||||||
|
<div class="mx-6"> |
||||||
|
<div class="mx-auto"> |
||||||
|
<div class="my-4 mx-1 mt-4"> |
||||||
|
{#if syntax_error} |
||||||
|
<Alert color="red" class="mb-3"> |
||||||
|
{syntax_error} |
||||||
|
</Alert> |
||||||
|
{/if} |
||||||
|
{#if warning} |
||||||
|
<Alert color="blue" class="mb-3"> |
||||||
|
{warning} |
||||||
|
</Alert> |
||||||
|
{/if} |
||||||
|
{$t("pages.wallet_login_username.username")} : |
||||||
|
<input |
||||||
|
bind:this={username_input} |
||||||
|
class="w-[240px] mr-0" |
||||||
|
id="username_input" |
||||||
|
placeholder={placeholder} |
||||||
|
bind:value={username} |
||||||
|
on:keypress={validate_username} |
||||||
|
on:focus={()=>{syntax_error="";redirect=undefined;}} |
||||||
|
/> |
||||||
|
<!-- Go Back --> |
||||||
|
<button |
||||||
|
on:click={() => {if (redirect) {username_input.focus();} else {window.history.go(-1)}}} |
||||||
|
class="mt-8 mr-2 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 redirect} |
||||||
|
<button |
||||||
|
on:click={() => {window.location.href = redirect;}} |
||||||
|
class="mt-4 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" |
||||||
|
> |
||||||
|
<ChevronDoubleRight |
||||||
|
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_username.redirect")} |
||||||
|
</button> |
||||||
|
{:else} |
||||||
|
<button |
||||||
|
on:click={() => validate_username(null)} |
||||||
|
class="mt-4 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" |
||||||
|
> |
||||||
|
<ChevronDoubleRight |
||||||
|
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_username.next")} |
||||||
|
</button> |
||||||
|
{/if} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{:else if state === "password"} |
||||||
|
<div class="mx-6"> |
||||||
|
<div class="mx-auto"> |
||||||
|
<div class="my-4 mx-1 mt-4"> |
||||||
|
{$t("pages.wallet_login_username.password")} : |
||||||
|
<!-- <input |
||||||
|
bind:this={password_input} |
||||||
|
class="w-[240px] mr-0" |
||||||
|
id="password_input" |
||||||
|
bind:value={password} |
||||||
|
on:keypress={validate_password} |
||||||
|
/> --> |
||||||
|
<PasswordInput |
||||||
|
id="password_input" |
||||||
|
placeholder={$t("pages.wallet_login_username.password_placeholder")} |
||||||
|
bind:value={password} |
||||||
|
on:enter={validate_password} |
||||||
|
classNameToggle="right-[-26px]" |
||||||
|
className="w-[240px] bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" |
||||||
|
/> |
||||||
|
<!-- Go Back --> |
||||||
|
<button |
||||||
|
on:click={async () => {state = "username";for_opaque = undefined; await tick(); username_input.focus();}} |
||||||
|
class="mt-8 mr-1 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 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white" |
||||||
|
/>{$t("buttons.back")}</button |
||||||
|
> |
||||||
|
<button |
||||||
|
on:click={validate_password} |
||||||
|
class="mt-4 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" |
||||||
|
> |
||||||
|
<ChevronDoubleRight |
||||||
|
tabindex="-1" |
||||||
|
class="w-8 h-8 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white" |
||||||
|
/> |
||||||
|
{$t("pages.wallet_login_username.connect")} |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{:else if state === "connecting"} |
||||||
|
<div> |
||||||
|
<Spinner class="w-full" /> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
{/if} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</CenteredLayout> |
||||||
Loading…
Reference in new issue