@sierra-95/svelte-scaffold 1.1.0 → 1.1.2

package/dist/Core/components/Form/Input/PasswordStrength/passwordStrength.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+    const {
+        minLength = 8,
+        new_password = $bindable(""),
+        confirm_password = $bindable("")
+    }=$props();
+
+    type PasswordStrengthResult = {
+        strength: "Weak" | "Medium" | "Strong";
+        suggestions: string[];
+        score: number;
+    }
+
+    let results: PasswordStrengthResult = $state({
+        strength: "Weak",
+        suggestions: [],
+        score: 0
+    })
+
+    const strengthColors = {
+        Weak: "var(--error-bg)",
+        Medium: "var(--warning-bg)",
+        Strong: "var(--primary-bg)"
+    } as const;
+
+    function passwordStrength(password: string): PasswordStrengthResult {
+        let suggestions: string[] = [];
+        let score = 0;
+
+        if (password.length >= minLength) score++;
+        else suggestions.push(`Use at least ${minLength} characters`);
+
+        if (/[a-z]/.test(password)) score++;
+        else suggestions.push("Add lowercase letters");
+
+        if (/[A-Z]/.test(password)) score++;
+        else suggestions.push("Add uppercase letters");
+
+        if (/[0-9]/.test(password)) score++;
+        else suggestions.push("Include numbers");
+
+        if (/[^A-Za-z0-9]/.test(password)) score++;
+        else suggestions.push("Use special characters");
+
+        let strength: PasswordStrengthResult["strength"] =
+            score <= 2 ? "Weak" :
+            score <= 4 ? "Medium" :
+            "Strong";
+        return { strength, suggestions, score };
+    }
+
+    function passwordsMatch() {
+        return new_password && confirm_password && new_password === confirm_password;
+    }
+    $effect(()=>{
+        if (new_password) {
+            const { strength, suggestions, score } = passwordStrength(new_password);
+            results = { strength, suggestions, score };
+        }
+    })
+</script>
+{#if new_password}
+    <p>
+        <span style="font-weight: bold;">Score: </span>
+        <span style="color: {strengthColors[results.strength]}">{results.score}</span><span style="color: var(--text-secondary);">/5</span>
+        <span style="color: {strengthColors[results.strength]}">{results.strength}</span>
+    </p>
+
+    {#if results.suggestions.length}
+        <p>
+            <span style="font-weight: bold;">Suggestions: </span>
+            <span style="color: var(--text-secondary);">
+                {#each results.suggestions as tip, index}
+                    {tip}{index < results.suggestions.length - 1 ? ", " : ""}
+                {/each}
+            </span>
+        </p>
+    {/if}
+{/if}
+
+{#if confirm_password}
+    {#if !passwordsMatch()}
+        <p style="color: var(--error-bg);">Passwords do not match</p>
+    {/if}
+{/if}

package/dist/Core/components/Form/Input/PasswordStrength/passwordStrength.svelte.d.ts

@@ -0,0 +1,7 @@
+declare const PasswordStrength: import("svelte").Component<{
+    minLength?: number;
+    new_password?: string;
+    confirm_password?: string;
+}, {}, "new_password" | "confirm_password">;
+type PasswordStrength = ReturnType<typeof PasswordStrength>;
+export default PasswordStrength;

package/dist/Core/features/ToastManager/toastManager.svelte

@@ -6,7 +6,7 @@
     let toastMessages=$state<Toast[]>([]);
 
     $effect(()=>{
-        toastMessages = $toasts.slice(0,5);
+        toastMessages = $toasts;
     })
 
     const getOffset = (index: number) => {

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export { default as SearchBar } from './Core/components/Form/Input/SearchBar/sea
 export { default as TextArea } from './Core/components/Form/Input/TextArea/textarea.svelte';
 export { default as DateInput } from './Core/components/Form/Input/Date/date.svelte';
 export { default as TimeInput } from './Core/components/Form/Input/Time/time.svelte';
+export { default as PasswordStrength } from './Core/components/Form/Input/PasswordStrength/passwordStrength.svelte';
 export { default as PreviewAudio } from './Core/components/others/Previews/Audio/audio.svelte';
 export { default as PreviewImage } from './Core/components/others/Previews/Image/image.svelte';
 export { default as PreviewVideo } from './Core/components/others/Previews/Video/video.svelte';

package/dist/index.js

@@ -22,6 +22,7 @@ export { default as SearchBar } from './Core/components/Form/Input/SearchBar/sea
 export { default as TextArea } from './Core/components/Form/Input/TextArea/textarea.svelte';
 export { default as DateInput } from './Core/components/Form/Input/Date/date.svelte';
 export { default as TimeInput } from './Core/components/Form/Input/Time/time.svelte';
+export { default as PasswordStrength } from './Core/components/Form/Input/PasswordStrength/passwordStrength.svelte';
 //Previews
 export { default as PreviewAudio } from './Core/components/others/Previews/Audio/audio.svelte';
 export { default as PreviewImage } from './Core/components/others/Previews/Image/image.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sierra-95/svelte-scaffold",
-	"version": "1.1.0",
+	"version": "1.1.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",