enforce limits

frontend/src/lib/ui/TextInput.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
 	import { getRandomBytes, Hex } from '$lib/crypto'
-
-	import { fade } from 'svelte/transition'
-	import { t } from 'svelte-intl-precompile'
 	import copyToClipboard from 'copy-to-clipboard'
-
+	import { t } from 'svelte-intl-precompile'
+	import { fade } from 'svelte/transition'
 	import Icon from './Icon.svelte'
 
 	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
 
@@ -19,6 +17,8 @@
 	let notification: string | null = null
 	let notificationTimeout: NodeJS.Timeout | null = null
 
+	$: valid = validate(value)
+
 	$: if (isPassword) {
 		value
 		$$restProps.type = hidden ? initialType : 'text'
@@ -49,8 +49,11 @@
 <label>
 	<small disabled={$$restProps.disabled}>
 		{label}
+		{#if valid !== true}
+			<span class="error-text">{valid}</span>
+		{/if}
 	</small>
-	<input bind:value {...$$restProps} />
+	<input bind:value {...$$restProps} class:valid={valid === true} />
 	<div class="icons">
 		{#if isPassword}
 			<Icon class="icon" icon={hidden ? 'eye' : 'eye-off'} on:click={toggle} />
@@ -73,6 +76,10 @@
 		display: block;
 	}
 
+	label > small {
+		display: block;
+	}
+
 	input {
 		width: 100%;
 		margin: 0;
@@ -86,6 +93,10 @@
 		border-color: var(--ui-clr-primary);
 	}
 
+	input:not(.valid) {
+		border-color: var(--ui-clr-error);
+	}
+
 	.icons {
 		border: 1px red;
 		position: absolute;