restructuring (#56)

* restructuring

* pin svelte kit version & parallel execution

* update svelte kit

* correct test result assets

* add timeout

* correct locale path

* simplify crypto

* fix for #58

* add verbosity flag

* disable flaky test

packages/frontend/src/lib/ui/TextInput.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { Crypto, Hex } from '$lib/crypto'
+	import Icon from '$lib/ui/Icon.svelte'
+	import { copy as copyFN } from '$lib/utils'
+
+	export let label: string = ''
+	export let value: any
+	export let validate: (value: any) => boolean | string = () => true
+	export let copy: boolean = false
+	export let random: boolean = false
+
+	const initialType = $$restProps.type
+	const isPassword = initialType === 'password'
+	let hidden = true
+
+	$: valid = validate(value)
+
+	$: if (isPassword) {
+		value
+		$$restProps.type = hidden ? initialType : 'text'
+	}
+
+	function toggle() {
+		hidden = !hidden
+	}
+	function randomFN() {
+		value = Hex.encode(Crypto.getRandomBytes(32))
+	}
+</script>
+
+<label>
+	<small disabled={$$restProps.disabled}>
+		{label}
+		{#if valid !== true}
+			<span class="error-text">{valid}</span>
+		{/if}
+	</small>
+	<input bind:value {...$$restProps} class:valid={valid === true} />
+	<div class="icons">
+		{#if isPassword}
+			<Icon class="icon" icon={hidden ? 'eye' : 'eye-off'} on:click={toggle} />
+		{/if}
+		{#if random}
+			<Icon class="icon" icon="dice" on:click={randomFN} />
+		{/if}
+		{#if copy}
+			<Icon class="icon" icon="copy" on:click={() => copyFN(value.toString())} />
+		{/if}
+	</div>
+</label>
+
+<style>
+	label {
+		position: relative;
+		display: block;
+	}
+
+	label > small {
+		display: block;
+	}
+
+	input {
+		width: 100%;
+		margin: 0;
+		border: 2px solid var(--ui-bg-1);
+		outline: none;
+		padding: 0.5rem;
+		height: 2.5rem;
+	}
+	input:hover,
+	input:focus {
+		border-color: var(--ui-clr-primary);
+	}
+
+	input:not(.valid) {
+		border-color: var(--ui-clr-error);
+	}
+
+	.icons {
+		border: 1px red;
+		position: absolute;
+		right: 0.3rem;
+		bottom: 0.3rem;
+		display: flex;
+		color: var(--ui-clr-primary);
+	}
+	.icons > :global(.icon) {
+		width: 1.5rem;
+		height: 1.5rem;
+		background-color: var(--ui-bg-1);
+		border: 2px solid var(--ui-bg-2);
+		padding: 1px;
+		cursor: pointer;
+		margin-left: 0.25rem;
+	}
+	.icons > :global(.icon:hover) {
+		border-color: var(--ui-clr-primary);
+	}
+</style>