start on login

src/ui/settings/NumericSetting.svelte

@@ -10,27 +10,28 @@
     export let max = null;
     export let decimal = false;
 
+    console.log('min:', min);
+
     const dispatch = createEventDispatcher();
     let error = null;
+    let localValue = value.toString();
     function validate(event) {
-        let v = event.target.value;
-
-        if (v === '') {
+        localValue = localValue.replace(/[^-0-9.]/g, '');
+        // Don't update the value, but also don't error, if it's empty
+        // or if it could be the start of a negative or decimal number
+        if (localValue.match(/^$|^-$|^\.$/) !== null) {
             error = null;
             return;
         }
 
-        let num = parseFloat(v);
-        if (Number.isNaN(num)) {
-            error = `"${v}" is not a number`;
-        }
-        else if (num % 1 !== 0 && !decimal) {
+        let num = parseFloat(localValue);
+        if (num % 1 !== 0 && !decimal) {
             error = `${num} is not a whole number`;
         }
-        else if (min && num < min) {
+        else if (min !== null && num < min) {
             error = `Too low (minimum ${min})`;
         }
-        else if (max && num > max) {
+        else if (max !== null && num > max) {
             error = `Too large (maximum ${max})`
         }
         else {
@@ -47,12 +48,13 @@
         {#if unit}
             <span class="mr-2">{unit}:</span>
         {/if}
-        <div class="tooltip tooltip-error" class:tooltip-open={error !== null} data-tip={error}>
+        <div class="tooltip tooltip-error" class:tooltip-open={error !== null} data-tip="{error}">
             <input 
                 type="text" 
-                class="input input-sm input-bordered text-right max-w-[4rem]" 
+                class="input input-sm input-bordered text-right" 
+                size="{Math.max(5, localValue.length)}"
                 class:input-error={error} 
-                value={value} 
+                bind:value={localValue} 
                 on:input="{validate}"
             />
         </div>

src/ui/settings/Setting.svelte

@@ -12,6 +12,8 @@
     <slot name="input"></slot>
 </div>
 
-<p class="mt-3">
-    <slot name="description"></slot>
-</p>
+{#if $$slots.description}
+    <p class="mt-3">
+        <slot name="description"></slot>
+    </p>
+{/if}

src/views/Settings.svelte

@@ -20,6 +20,12 @@
     <div class="max-w-md mx-auto mt-1.5 p-4">
         <h2 class="text-2xl font-bold text-center">Settings</h2>
 
+        <ToggleSetting title="Start on login" bind:value={$appState.config.start_on_login} on:update={save}>
+            <svelte:fragment slot="description">
+                Start Creddy when you log in to your computer.
+            </svelte:fragment>
+        </ToggleSetting>
+
         <ToggleSetting title="Start minimized" bind:value={$appState.config.start_minimized} on:update={save}>
             <svelte:fragment slot="description">
                 Minimize to the system tray at startup.