coinos-server.git - coinos server — legacy coinos.io backend (Lightning, on-chain, Liquid)

about summary refs log tree commit diff stats

path: root/routes/sessions.coffee

diff options

Diffstat (limited to 'routes/sessions.coffee')

0 files changed, 0 insertions, 0 deletions

7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80

<script>
	import { Left, Icon } from '$comp';
	import { focus, post, warning } from '$lib/utils';
	import { t } from '$lib/translations';

	export let v;
	export let cancel;

	let arrow = '<';
	let loading = false;

	const numPad = ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'C', '0', '<'];

	const handleInput = (n) => {
		v = (v || '').toString();
		if (n === 'C') return (v = '');
		if (n === '<') return (v = v.length > 1 ? Math.floor(v / 10) : '');
		if (v.length > 5) n = '';
		if (parseInt(n) >= 0) v += n;
	};

	let validate = (e) => {
		let k = e.key || e.code;
		if (k === 'Escape') cancel();
		if (e.key.length <= 1 && !(e.metaKey || e.ctrlKey || e.altKey) && !(k >= '0' && k <= '9')) {
			if (e.preventDefault) e.preventDefault();
			else e.returnValue = false;
		}
	};

	let hide = true;
</script>

<div class="flex justify-center items-center">
	<div class="space-y-5">
		<div class="text-5xl md:text-6xl font-semibold relative w-[300px]">
			{#if hide}
				<input
					on:keydown={validate}
					use:focus
					bind:value={v}
					type="password"
					class="outline-none border-0 text-center py-0"
					pattern="[0-9]+"
				/>
			{:else}
				<input
					on:keydown={validate}
					bind:value={v}
					class="outline-none border-0 text-center py-0"
					type="text"
					pattern="[0-9]+"
				/>
			{/if}
			<button type="button" on:click={() => (hide = !hide)} class="absolute -right-5 top-5">
				<Icon icon={hide ? 'eye-off' : 'eye'} style="w-8" />
			</button>
		</div>

		<div class="grid grid-cols-3 gap-2 w-[300px] mx-auto grayscale">
			{#each numPad as value}
				{#if value === arrow}
					<button
						type="button"
						class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center hover:opacity-80"
						on:click={() => handleInput(value)}
					>
						<Left />
					</button>
				{:else}
					<button
						type="button"
						class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
						on:click={() => handleInput(value)}>{value}</button
					>
				{/if}
			{/each}
		</div>
	</div>
</div>