94 lines
3.2 KiB
TypeScript
94 lines
3.2 KiB
TypeScript
import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';
|
|
import { state } from '@/store';
|
|
import { CURRENT_MODULE } from '@/types';
|
|
|
|
@Component({
|
|
tag: 'nl-loading',
|
|
styleUrl: 'nl-loading.css',
|
|
shadow: false,
|
|
})
|
|
export class NlLoading {
|
|
@Event() stopFetchHandler: EventEmitter<boolean>;
|
|
@Event() handleContinue: EventEmitter<boolean>;
|
|
@Prop() path: string;
|
|
|
|
handleStop(e) {
|
|
e.preventDefault();
|
|
this.stopFetchHandler.emit();
|
|
}
|
|
|
|
handleContinueClick(e) {
|
|
e.preventDefault();
|
|
// reset();
|
|
this.handleContinue.emit();
|
|
}
|
|
|
|
render() {
|
|
let title = 'Connecting...';
|
|
let text = 'Establishing connection to your key storage.';
|
|
if (state.njumpIframe) {
|
|
title = '';
|
|
text = '';
|
|
} else if (this.path === CURRENT_MODULE.LOCAL_SIGNUP) {
|
|
title = 'Creating...';
|
|
text = 'Publishing your profile on Nostr.';
|
|
} else if (state.authUrl) {
|
|
if (state.isLoading) {
|
|
title = 'Confirming...';
|
|
text = 'Please confirm the connection in your key storage app.';
|
|
} else {
|
|
title = 'Almost ready!';
|
|
text = 'Continue to confirm the connection to your key storage.';
|
|
}
|
|
}
|
|
|
|
const showButton = this.path !== CURRENT_MODULE.LOCAL_SIGNUP;
|
|
const showIframe = !state.isLoading && state.iframeUrl && state.authUrl;
|
|
const iframeUrl = state.iframeUrl ? `${state.iframeUrl}?connect=${encodeURIComponent(state.authUrl)}` : '';
|
|
|
|
return (
|
|
<div class="p-4 overflow-y-auto">
|
|
{title && (<h1 class="nl-title font-bold text-center text-4xl">{title}</h1>)}
|
|
{text && (<p class="nl-description font-light text-center text-lg pt-2 max-w-96 mx-auto">{text}</p>)}
|
|
{!state.njumpIframe && !state.authUrl && state.isLoading && (
|
|
<div class="mt-10 mb-10 ml-auto mr-auto w-20">
|
|
<span
|
|
slot="icon-start"
|
|
class="animate-spin-loading ml-auto mr-auto inline-block w-20 h-20 border-[4px] border-current border-t-transparent text-slate-900 dark:text-gray-300 rounded-full"
|
|
role="status"
|
|
aria-label="loading"
|
|
></span>
|
|
</div>
|
|
)}
|
|
<div class="ps-4 pe-4 overflow-y-auto">
|
|
<p class="nl-error font-light text-center text-sm max-w-96 mx-auto">{state.error}</p>
|
|
</div>
|
|
{iframeUrl && (
|
|
<div class="mt-3 ml-auto mr-auto w-72 flex justify-center">
|
|
<iframe src={iframeUrl} width="180px" height="80px" style={{ display: showIframe ? 'block' : 'none', border: '0' }}></iframe>
|
|
</div>
|
|
)}
|
|
{state.njumpIframe && (
|
|
<div class="mt-3 ml-auto mr-auto flex justify-center">
|
|
<iframe srcdoc={state.njumpIframe} width="600px" style={{ border: '0', height: "80vh", borderRadius: "8px" }}></iframe>
|
|
</div>
|
|
)}
|
|
{!showIframe && showButton && (
|
|
<div class="mt-3 ml-auto mr-auto w-72">
|
|
<button-base
|
|
onClick={e => {
|
|
if (state.authUrl && !state.isLoading) {
|
|
this.handleContinueClick(e);
|
|
} else {
|
|
this.handleStop(e);
|
|
}
|
|
}}
|
|
titleBtn={!state.isLoading ? 'Continue' : 'Cancel'}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|