Add dynamic password constraints
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
33bd5155e0
commit
707c439aae
|
@ -0,0 +1,49 @@
|
|||
<script lang="ts">
|
||||
let inputUsername: string = "";
|
||||
let inputPassword: string = "";
|
||||
|
||||
function submitLogin() {
|
||||
console.info(inputUsername);
|
||||
}
|
||||
|
||||
function conDone(v: boolean): string {
|
||||
return v ? "follows-constraint" : "missing-constraint";
|
||||
}
|
||||
</script>
|
||||
|
||||
<form class="login-form" method="post" on:submit|preventDefault={submitLogin}>
|
||||
<h1>Sign In</h1>
|
||||
|
||||
<section>
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" name="email" placeholder=" " autocomplete="username" required bind:value={inputUsername} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<label for="current-password">Password</label>
|
||||
<input id="current-password" name="current-password" type="password" autocomplete="current-password" aria-describedby="password-constraints" required bind:value={inputPassword} />
|
||||
<div id="password-constraints">
|
||||
<ul>
|
||||
<li class={conDone(inputPassword.length >= 8)}>Eight or more characters</li>
|
||||
<li class={conDone(inputPassword.toLocaleLowerCase() != inputPassword)}>Uppercase characters</li>
|
||||
<li class={conDone(inputPassword.toLocaleUpperCase() != inputPassword)}>Lowercase characters</li>
|
||||
<li class={conDone(/\d/.test(inputPassword))}>Numeric digit</li>
|
||||
<li class={conDone(/\W/.test(inputPassword))}>Special symbol</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<button type="submit" />
|
||||
</section>
|
||||
</form>
|
||||
|
||||
<style>
|
||||
#password-constraints > ul > li.follows-constraint {
|
||||
color: #bdd358;
|
||||
}
|
||||
|
||||
#password-constraints > ul > li.missing-constraint {
|
||||
color: #e5625e;
|
||||
}
|
||||
</style>
|
Reference in New Issue