enforce limits

frontend/src/lib/ui/Switch.svelte

@@ -49,7 +49,7 @@
 		height: 2rem;
 		width: 1.25rem;
 		left: 0.125rem;
-		bottom: 0.1rem;
+		bottom: 0.125rem;
 		background-color: var(--ui-bg-1);
 		-webkit-transition: 0.4s;
 		transition: var(--ui-anim);

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;

frontend/src/lib/views/Create.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { create, Note, PayloadToLargeError } from '$lib/api'
 	import { encrypt, getKeyFromString, getRandomBytes, Hex } from '$lib/crypto'
+	import { status } from '$lib/stores/status'
 	import Button from '$lib/ui/Button.svelte'
 	import FileUpload from '$lib/ui/FileUpload.svelte'
 	import MaxSize from '$lib/ui/MaxSize.svelte'
 	import Switch from '$lib/ui/Switch.svelte'
 	import TextArea from '$lib/ui/TextArea.svelte'
 	import TextInput from '$lib/ui/TextInput.svelte'
-	import { blur } from 'svelte/transition'
 	import { t } from 'svelte-intl-precompile'
+	import { blur } from 'svelte/transition'
 
 	let note: Note = {
 		contents: '',
@@ -107,7 +108,9 @@
 
 			<div class="bottom">
 				<Switch class="file" label={$t('common.file')} bind:value={file} />
-				<Switch label={$t('common.advanced')} bind:value={advanced} />
+				{#if $status?.allow_advanced}
+					<Switch label={$t('common.advanced')} bind:value={advanced} />
+				{/if}
 				<div class="grow" />
 				<div class="tr">
 					<small>{$t('common.max')}: <MaxSize /> </small>
@@ -138,7 +141,10 @@
 							label={$t('common.views', { values: { n: 0 } })}
 							bind:value={note.views}
 							disabled={timeExpiration}
-							max={100}
+							max={$status?.max_views}
+							validate={(v) =>
+								($status && v < $status?.max_views) ||
+								$t('home.errors.max', { values: { n: $status?.max_views ?? 0 } })}
 						/>
 						<div class="middle-switch">
 							<Switch label={$t('common.mode')} bind:value={timeExpiration} color={false} />
@@ -148,7 +154,10 @@
 							label={$t('common.minutes', { values: { n: 0 } })}
 							bind:value={note.expiration}
 							disabled={!timeExpiration}
-							max={360}
+							max={$status?.max_expiration}
+							validate={(v) =>
+								($status && v < $status?.max_expiration) ||
+								$t('home.errors.max', { values: { n: $status?.max_expiration ?? 0 } })}
 						/>
 					</div>
 				</div>