Basic working password meter impl

Author: hhvrc

src/lib/components/input/PasswordInput.svelte

@@ -100,8 +100,29 @@
   $effect(() => {
     valid = validationResult?.valid ?? false;
   });
+
+  // Logic to hide the popup after 3 seconds of inactivity
+  let showPopup = $state(false);
+  let typingTimeout: ReturnType<typeof setTimeout> | null = null;
+  $effect(() => {
+    // If value is not empty, set isTyping to true, then start a timeout to set it to false after 3 seconds
+    if (showStrengthMeter && value.length) {
+      showPopup = true;
+      if (typingTimeout) clearTimeout(typingTimeout);
+      typingTimeout = setTimeout(() => {
+        showPopup = false;
+      }, 500);
+    } else {
+      // If value is empty, set isTyping to false
+      showPopup = false;
+    }
+  });
 </script>
 
+{#snippet popup()}
+  <PasswordStrengthMeter password={value} />
+{/snippet}
+
 <TextInput
   type={valueShown ? 'text' : 'password'}
   {label}
@@ -115,10 +136,6 @@
     class: 'cursor-pointer',
     onClick: () => (valueShown = !valueShown),
   }}
->
-  {#snippet popup()}
-    {#if showStrengthMeter}
-      <PasswordStrengthMeter password={value} />
-    {/if}
-  {/snippet}
-</TextInput>
+  onblur={() => (showPopup = false)}
+  popup={showPopup ? popup : undefined}
+/>

src/lib/components/input/TextInput.svelte

@@ -4,7 +4,7 @@
   import type { AnyComponent } from '$lib/types/AnyComponent';
   import { GetValResColor, type ValidationResult } from '$lib/types/ValidationResult';
   import type { Snippet } from 'svelte';
-  import type { FullAutoFill } from 'svelte/elements';
+  import type { FocusEventHandler, FullAutoFill } from 'svelte/elements';
   import type { ButtonSettings } from './impl/ButtonSettings';
 
   interface Props {
@@ -17,6 +17,7 @@
     Icon?: AnyComponent;
     button?: ButtonSettings;
     popup?: Snippet;
+    onblur?: FocusEventHandler<HTMLInputElement> | null;
   }
 
   const id = $props.id();
@@ -32,6 +33,7 @@
     Icon,
     button,
     popup,
+    onblur,
   }: Props = $props();
 </script>
 
@@ -49,6 +51,7 @@
       {placeholder}
       {autocomplete}
       bind:value
+      {onblur}
       aria-invalid={validationResult ? !validationResult.valid : undefined}
       aria-describedby={validationResult ? validationId : undefined}
     />

src/lib/components/input/impl/PasswordStrengthMeter.svelte

@@ -10,7 +10,7 @@
   let { percent, text, color } = $derived(getPasswordStrength(password));
 </script>
 
-<div class="card w-72 p-4 shadow-xl">
+<div class="card w-72 p-4 shadow-xl" aria-hidden="true">
   <div class="flex flex-row items-center space-x-1">
     <p class="text-sm text-gray-500">Password strength:</p>
     <p class={`text-sm text-${color}`}>{text}</p>