@sierra-95/svelte-scaffold 1.1.1 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
const {
|
|
3
|
+
minLength = 8,
|
|
4
|
+
new_password = $bindable(""),
|
|
5
|
+
confirm_password = $bindable("")
|
|
6
|
+
}=$props();
|
|
7
|
+
|
|
8
|
+
type PasswordStrengthResult = {
|
|
9
|
+
strength: "Weak" | "Medium" | "Strong";
|
|
10
|
+
suggestions: string[];
|
|
11
|
+
score: number;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
let results: PasswordStrengthResult = $state({
|
|
15
|
+
strength: "Weak",
|
|
16
|
+
suggestions: [],
|
|
17
|
+
score: 0
|
|
18
|
+
})
|
|
19
|
+
|
|
20
|
+
const strengthColors = {
|
|
21
|
+
Weak: "var(--error-bg)",
|
|
22
|
+
Medium: "var(--warning-bg)",
|
|
23
|
+
Strong: "var(--primary-bg)"
|
|
24
|
+
} as const;
|
|
25
|
+
|
|
26
|
+
function passwordStrength(password: string): PasswordStrengthResult {
|
|
27
|
+
let suggestions: string[] = [];
|
|
28
|
+
let score = 0;
|
|
29
|
+
|
|
30
|
+
if (password.length >= minLength) score++;
|
|
31
|
+
else suggestions.push(`Use at least ${minLength} characters`);
|
|
32
|
+
|
|
33
|
+
if (/[a-z]/.test(password)) score++;
|
|
34
|
+
else suggestions.push("Add lowercase letters");
|
|
35
|
+
|
|
36
|
+
if (/[A-Z]/.test(password)) score++;
|
|
37
|
+
else suggestions.push("Add uppercase letters");
|
|
38
|
+
|
|
39
|
+
if (/[0-9]/.test(password)) score++;
|
|
40
|
+
else suggestions.push("Include numbers");
|
|
41
|
+
|
|
42
|
+
if (/[^A-Za-z0-9]/.test(password)) score++;
|
|
43
|
+
else suggestions.push("Use special characters");
|
|
44
|
+
|
|
45
|
+
let strength: PasswordStrengthResult["strength"] =
|
|
46
|
+
score <= 2 ? "Weak" :
|
|
47
|
+
score <= 4 ? "Medium" :
|
|
48
|
+
"Strong";
|
|
49
|
+
return { strength, suggestions, score };
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
function passwordsMatch() {
|
|
53
|
+
return new_password && confirm_password && new_password === confirm_password;
|
|
54
|
+
}
|
|
55
|
+
$effect(()=>{
|
|
56
|
+
if (new_password) {
|
|
57
|
+
const { strength, suggestions, score } = passwordStrength(new_password);
|
|
58
|
+
results = { strength, suggestions, score };
|
|
59
|
+
}
|
|
60
|
+
})
|
|
61
|
+
</script>
|
|
62
|
+
{#if new_password}
|
|
63
|
+
<p>
|
|
64
|
+
<span style="font-weight: bold;">Score: </span>
|
|
65
|
+
<span style="color: {strengthColors[results.strength]}">{results.score}</span><span style="color: var(--text-secondary);">/5</span>
|
|
66
|
+
<span style="color: {strengthColors[results.strength]}">{results.strength}</span>
|
|
67
|
+
</p>
|
|
68
|
+
|
|
69
|
+
{#if results.suggestions.length}
|
|
70
|
+
<p>
|
|
71
|
+
<span style="font-weight: bold;">Suggestions: </span>
|
|
72
|
+
<span style="color: var(--text-secondary);">
|
|
73
|
+
{#each results.suggestions as tip, index}
|
|
74
|
+
{tip}{index < results.suggestions.length - 1 ? ", " : ""}
|
|
75
|
+
{/each}
|
|
76
|
+
</span>
|
|
77
|
+
</p>
|
|
78
|
+
{/if}
|
|
79
|
+
{/if}
|
|
80
|
+
|
|
81
|
+
{#if confirm_password}
|
|
82
|
+
{#if !passwordsMatch()}
|
|
83
|
+
<p style="color: var(--error-bg);">Passwords do not match</p>
|
|
84
|
+
{/if}
|
|
85
|
+
{/if}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
declare const PasswordStrength: import("svelte").Component<{
|
|
2
|
+
minLength?: number;
|
|
3
|
+
new_password?: string;
|
|
4
|
+
confirm_password?: string;
|
|
5
|
+
}, {}, "new_password" | "confirm_password">;
|
|
6
|
+
type PasswordStrength = ReturnType<typeof PasswordStrength>;
|
|
7
|
+
export default PasswordStrength;
|
package/dist/index.d.ts
CHANGED
|
@@ -18,6 +18,7 @@ export { default as SearchBar } from './Core/components/Form/Input/SearchBar/sea
|
|
|
18
18
|
export { default as TextArea } from './Core/components/Form/Input/TextArea/textarea.svelte';
|
|
19
19
|
export { default as DateInput } from './Core/components/Form/Input/Date/date.svelte';
|
|
20
20
|
export { default as TimeInput } from './Core/components/Form/Input/Time/time.svelte';
|
|
21
|
+
export { default as PasswordStrength } from './Core/components/Form/Input/PasswordStrength/passwordStrength.svelte';
|
|
21
22
|
export { default as PreviewAudio } from './Core/components/others/Previews/Audio/audio.svelte';
|
|
22
23
|
export { default as PreviewImage } from './Core/components/others/Previews/Image/image.svelte';
|
|
23
24
|
export { default as PreviewVideo } from './Core/components/others/Previews/Video/video.svelte';
|
package/dist/index.js
CHANGED
|
@@ -22,6 +22,7 @@ export { default as SearchBar } from './Core/components/Form/Input/SearchBar/sea
|
|
|
22
22
|
export { default as TextArea } from './Core/components/Form/Input/TextArea/textarea.svelte';
|
|
23
23
|
export { default as DateInput } from './Core/components/Form/Input/Date/date.svelte';
|
|
24
24
|
export { default as TimeInput } from './Core/components/Form/Input/Time/time.svelte';
|
|
25
|
+
export { default as PasswordStrength } from './Core/components/Form/Input/PasswordStrength/passwordStrength.svelte';
|
|
25
26
|
//Previews
|
|
26
27
|
export { default as PreviewAudio } from './Core/components/others/Previews/Audio/audio.svelte';
|
|
27
28
|
export { default as PreviewImage } from './Core/components/others/Previews/Image/image.svelte';
|