<script context="module">
    import { passwordStrength } from "check-password-strength";
    export function password_strong_enough(password_change) {
        let strength = passwordStrength(password_change);
        return (
            strength?.contains.includes("lowercase") &&
            strength?.contains.includes("uppercase") &&
            strength?.contains.includes("number") &&
            strength?.length > 9
        );
    }
    export function password_strong_enough_and_equal(
        password_change,
        password_confirm
    ) {
        return (
            password_strong_enough(password_change) &&
            password_change === password_confirm
        );
    }
</script>

<script>
    import { getLocaleFromNavigator, _ } from "svelte-i18n";
    import { passwordStrength as Strength } from "check-password-strength";
    export let password_change;
    export let password_confirm;

    $: strength = Strength(password_change);
    $: passwords_match =
        !password_confirm || password_confirm === password_change;
</script>

<div class="ml-4">
    <ul class="list-disc font-medium tracking-wide text-red-500 text-xs">
        {#if !strength.contains.includes('lowercase')}
            <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')}</li>
        {/if}
        {#if !(strength.length > 9)}
            <li>{$_('must-be-at-least-10-characters-long')}</li>
        {/if}
        {#if !(passwords_match == true)}
            <li>{$_('passwords-dont-match')}</li>
        {/if}
    </ul>
</div>
