grav-svelte 0.0.24 → 0.0.26
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.
|
@@ -4,6 +4,44 @@
|
|
|
4
4
|
export let disabled = false;
|
|
5
5
|
export let obligatory = false;
|
|
6
6
|
export let icon: string | null = null;
|
|
7
|
+
export let validation: boolean = false;
|
|
8
|
+
|
|
9
|
+
let validationMessage = "";
|
|
10
|
+
let isValid = true;
|
|
11
|
+
|
|
12
|
+
$: {
|
|
13
|
+
if (valueVar) {
|
|
14
|
+
// Password validation rules
|
|
15
|
+
const hasMinLength = valueVar.length >= 8;
|
|
16
|
+
const hasUpperCase = /[A-Z]/.test(valueVar);
|
|
17
|
+
const hasLowerCase = /[a-z]/.test(valueVar);
|
|
18
|
+
const hasNumbers = /\d/.test(valueVar);
|
|
19
|
+
const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(valueVar);
|
|
20
|
+
|
|
21
|
+
if (!hasMinLength) {
|
|
22
|
+
validationMessage = "Password must be at least 8 characters long";
|
|
23
|
+
isValid = false;
|
|
24
|
+
} else if (!hasUpperCase) {
|
|
25
|
+
validationMessage = "Password must contain at least one uppercase letter";
|
|
26
|
+
isValid = false;
|
|
27
|
+
} else if (!hasLowerCase) {
|
|
28
|
+
validationMessage = "Password must contain at least one lowercase letter";
|
|
29
|
+
isValid = false;
|
|
30
|
+
} else if (!hasNumbers) {
|
|
31
|
+
validationMessage = "Password must contain at least one number";
|
|
32
|
+
isValid = false;
|
|
33
|
+
} else if (!hasSpecialChar) {
|
|
34
|
+
validationMessage = "Password must contain at least one special character";
|
|
35
|
+
isValid = false;
|
|
36
|
+
} else {
|
|
37
|
+
validationMessage = "Password is valid";
|
|
38
|
+
isValid = true;
|
|
39
|
+
}
|
|
40
|
+
} else {
|
|
41
|
+
validationMessage = "";
|
|
42
|
+
isValid = true;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
7
45
|
</script>
|
|
8
46
|
|
|
9
47
|
<div class="input-container">
|
|
@@ -29,6 +67,11 @@
|
|
|
29
67
|
>
|
|
30
68
|
</div>
|
|
31
69
|
</div>
|
|
70
|
+
{#if validation && validationMessage}
|
|
71
|
+
<div class="validation-message" class:valid={isValid} class:invalid={!isValid}>
|
|
72
|
+
{validationMessage}
|
|
73
|
+
</div>
|
|
74
|
+
{/if}
|
|
32
75
|
|
|
33
76
|
<style>
|
|
34
77
|
.input-container {
|
|
@@ -100,4 +143,18 @@
|
|
|
100
143
|
.required-mark {
|
|
101
144
|
color: #dc2626;
|
|
102
145
|
}
|
|
146
|
+
|
|
147
|
+
.validation-message {
|
|
148
|
+
font-size: 0.875rem;
|
|
149
|
+
margin-top: 0.25rem;
|
|
150
|
+
padding-left: 0.25rem;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.valid {
|
|
154
|
+
color: #059669;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.invalid {
|
|
158
|
+
color: #dc2626;
|
|
159
|
+
}
|
|
103
160
|
</style>
|