lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

Added more cirteria to the password strength component

Browse Source 
ref #106
This commit is contained in:
Nicolai Ort 2021-03-26 19:02:09 +01:00
parent 4956bb0e9c
commit 5fa9939696
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/auth/PasswordStrength.svelte
View File

@ -2,13 +2,28 @@
import { getLocaleFromNavigator, _ } from "svelte-i18n"; import { getLocaleFromNavigator, _ } from "svelte-i18n";
import { passwordStrength } from "check-password-strength"; import { passwordStrength } from "check-password-strength";
export let password_change; export let password_change;
export let password_confirm;
$: strength = passwordStrength(password_change); $: strength = passwordStrength(password_change);
$: passwords_match = (!password_confirm || (password_confirm === password_change))
</script> </script>
<div> <div class="ml-4">
<ul> {(passwords_match)}
<ul class="list-disc font-medium tracking-wide text-red-500 text-xs">
{#if !strength.contains.includes('lowercase')} {#if !strength.contains.includes('lowercase')}
<li>Must contain a lowercase letter</li> <li>Must contain a lowercase letter!</li>
{/if}
{#if !strength.contains.includes('uppercase')}
<li>Must contain a uppercase letter!</li>
{/if}
{#if !strength.contains.includes('number')}
<li>Must contain a number letter!</li>
{/if}
{#if !(strength.length>9)}
<li>Must be at least 10 characters long!</li>
{/if}
{#if !(passwords_match==true)}
<li>Passwords don't match!</li>
{/if} {/if}
</ul> </ul>
</div> </div>