release: WRNexusJS 0.3.5
This commit is contained in:
@@ -0,0 +1,215 @@
|
||||
component StrongPassword {
|
||||
props {
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Password"
|
||||
name = "password"
|
||||
value = ""
|
||||
placeholder = "Create a strong password"
|
||||
autocomplete = "new-password"
|
||||
minLength = 8
|
||||
specialCharactersSet = "!@#$%^&*()_+-=[]{}|;:,.<>?"
|
||||
requireLowercase = true
|
||||
requireUppercase = true
|
||||
requireNumber = true
|
||||
requireSpecialCharacter = true
|
||||
showRequirements = true
|
||||
presentation = "inline"
|
||||
hintText = "Use a unique password you do not use elsewhere."
|
||||
emptyLabel = "Enter a password"
|
||||
weakLabel = "Weak"
|
||||
fairLabel = "Fair"
|
||||
goodLabel = "Good"
|
||||
strongLabel = "Strong"
|
||||
disabled = false
|
||||
readonly = false
|
||||
required = false
|
||||
invalid = false
|
||||
validationMessage = ""
|
||||
class = ""
|
||||
@event input = function
|
||||
@event change = function
|
||||
@event strength = function
|
||||
}
|
||||
|
||||
state password = value
|
||||
state detailsOpen = false
|
||||
|
||||
functions {
|
||||
function hasMinimumLength() {
|
||||
return password.length >= Number(minLength)
|
||||
}
|
||||
|
||||
function hasLowercase() {
|
||||
return password !== password.toUpperCase()
|
||||
}
|
||||
|
||||
function hasUppercase() {
|
||||
return password !== password.toLowerCase()
|
||||
}
|
||||
|
||||
function hasNumber() {
|
||||
return containsCharacterAt("0123456789", 0)
|
||||
}
|
||||
|
||||
function hasSpecialCharacter() {
|
||||
return containsCharacterAt(specialCharactersSet, 0)
|
||||
}
|
||||
|
||||
function containsCharacterAt(characters, index) {
|
||||
if (index >= characters.length) {
|
||||
return false
|
||||
}
|
||||
if (password.includes(characters[index])) {
|
||||
return true
|
||||
}
|
||||
return containsCharacterAt(characters, index + 1)
|
||||
}
|
||||
|
||||
function score() {
|
||||
return (hasMinimumLength() ? 1 : 0) + (requireLowercase && hasLowercase() ? 1 : 0) + (requireUppercase && hasUppercase() ? 1 : 0) + (requireNumber && hasNumber() ? 1 : 0) + (requireSpecialCharacter && hasSpecialCharacter() ? 1 : 0)
|
||||
}
|
||||
|
||||
function maximumScore() {
|
||||
return 1 + (requireLowercase ? 1 : 0) + (requireUppercase ? 1 : 0) + (requireNumber ? 1 : 0) + (requireSpecialCharacter ? 1 : 0)
|
||||
}
|
||||
|
||||
function strengthPercent() {
|
||||
return Math.round(score() / maximumScore() * 100)
|
||||
}
|
||||
|
||||
function strengthLevel() {
|
||||
if (!password) {
|
||||
return "empty"
|
||||
}
|
||||
if (strengthPercent() <= 25) {
|
||||
return "weak"
|
||||
}
|
||||
if (strengthPercent() <= 50) {
|
||||
return "fair"
|
||||
}
|
||||
if (strengthPercent() < 100) {
|
||||
return "good"
|
||||
}
|
||||
return "strong"
|
||||
}
|
||||
|
||||
function strengthLabel() {
|
||||
if (strengthLevel() === "weak") {
|
||||
return weakLabel
|
||||
}
|
||||
if (strengthLevel() === "fair") {
|
||||
return fairLabel
|
||||
}
|
||||
if (strengthLevel() === "good") {
|
||||
return goodLabel
|
||||
}
|
||||
if (strengthLevel() === "strong") {
|
||||
return strongLabel
|
||||
}
|
||||
return emptyLabel
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
view {
|
||||
<div
|
||||
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--strong-password wire-next--strong-password-{presentation} {invalid ? 'wire-next--invalid' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
|
||||
data-wrn-strong-password
|
||||
data-strength="{password ? strengthLevel() : 'empty'}"
|
||||
data-score="{password ? score() : 0}"
|
||||
>
|
||||
<label for="{name}-strong-password">{label}</label>
|
||||
<div class="wire-next__strong-password-anchor">
|
||||
<input
|
||||
{...attrs}
|
||||
id="{name}-strong-password"
|
||||
type="password"
|
||||
name="{name}"
|
||||
value="{password}"
|
||||
placeholder="{placeholder}"
|
||||
autocomplete="{autocomplete}"
|
||||
minlength="{minLength}"
|
||||
disabled="{disabled}"
|
||||
readonly="{readonly}"
|
||||
required="{required}"
|
||||
aria-invalid="{invalid ? 'true' : 'false'}"
|
||||
aria-describedby="{validationMessage ? name + '-validation' : hintText ? name + '-hint' : ''}"
|
||||
@focus="detailsOpen = true"
|
||||
@blur="detailsOpen = false"
|
||||
@input="password = event.target.value; $emit('input', { value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() }); $emit('strength', { value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() })"
|
||||
@change="$emit('change', { value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() })"
|
||||
/>
|
||||
|
||||
{#if presentation === "popover"}
|
||||
<div
|
||||
class="wire-next__strong-password-popover"
|
||||
data-open="{detailsOpen ? 'true' : 'false'}"
|
||||
role="status"
|
||||
>
|
||||
<div class="wire-next__strong-password-popover-arrow" aria-hidden="true"></div>
|
||||
<div class="wire-next__strong-password-details">
|
||||
<div class="wire-next__strong-password-summary">
|
||||
<span>Password strength</span>
|
||||
<strong>{password ? strengthLabel() : emptyLabel}</strong>
|
||||
</div>
|
||||
<div
|
||||
class="wire-next__strong-password-meter"
|
||||
role="progressbar"
|
||||
aria-label="Password strength"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
aria-valuenow="{password ? strengthPercent() : 0}"
|
||||
>
|
||||
<span style="width: {password ? strengthPercent() : 0}%"></span>
|
||||
</div>
|
||||
{#if showRequirements}
|
||||
<ul class="wire-next__strong-password-requirements">
|
||||
<li data-met="{password && hasMinimumLength() ? 'true' : 'false'}">
|
||||
<span aria-hidden="true"></span>At least {minLength} characters
|
||||
</li>
|
||||
{#if requireLowercase}<li data-met="{password && hasLowercase() ? 'true' : 'false'}"><span aria-hidden="true"></span>One lowercase letter</li>{/if}
|
||||
{#if requireUppercase}<li data-met="{password && hasUppercase() ? 'true' : 'false'}"><span aria-hidden="true"></span>One uppercase letter</li>{/if}
|
||||
{#if requireNumber}<li data-met="{password && hasNumber() ? 'true' : 'false'}"><span aria-hidden="true"></span>One number</li>{/if}
|
||||
{#if requireSpecialCharacter}<li data-met="{password && hasSpecialCharacter() ? 'true' : 'false'}"><span aria-hidden="true"></span>One special character: {specialCharactersSet}</li>{/if}
|
||||
</ul>
|
||||
{/if}
|
||||
{#if hintText}<small id="{name}-hint">{hintText}</small>{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if presentation !== "popover"}
|
||||
<div class="wire-next__strong-password-details">
|
||||
<div class="wire-next__strong-password-summary">
|
||||
<span>Password strength</span>
|
||||
<strong>{password ? strengthLabel() : emptyLabel}</strong>
|
||||
</div>
|
||||
<div
|
||||
class="wire-next__strong-password-meter"
|
||||
role="progressbar"
|
||||
aria-label="Password strength"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
aria-valuenow="{password ? strengthPercent() : 0}"
|
||||
>
|
||||
<span style="width: {password ? strengthPercent() : 0}%"></span>
|
||||
</div>
|
||||
{#if showRequirements}
|
||||
<ul class="wire-next__strong-password-requirements">
|
||||
<li data-met="{password && hasMinimumLength() ? 'true' : 'false'}"><span aria-hidden="true"></span>At least {minLength} characters</li>
|
||||
{#if requireLowercase}<li data-met="{password && hasLowercase() ? 'true' : 'false'}"><span aria-hidden="true"></span>One lowercase letter</li>{/if}
|
||||
{#if requireUppercase}<li data-met="{password && hasUppercase() ? 'true' : 'false'}"><span aria-hidden="true"></span>One uppercase letter</li>{/if}
|
||||
{#if requireNumber}<li data-met="{password && hasNumber() ? 'true' : 'false'}"><span aria-hidden="true"></span>One number</li>{/if}
|
||||
{#if requireSpecialCharacter}<li data-met="{password && hasSpecialCharacter() ? 'true' : 'false'}"><span aria-hidden="true"></span>One special character: {specialCharactersSet}</li>{/if}
|
||||
</ul>
|
||||
{/if}
|
||||
{#if hintText}<small id="{name}-hint">{hintText}</small>{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<small id="{name}-validation" class="wire-next__validation" data-error="{name}">{validationMessage}</small>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user