WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(auth): secure hydration and align password forms
Quality / quality (ubuntu-latest) (push) Failing after 6m7s
Details
Quality / quality (windows-latest) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-11 17:05:04 +05:30
parent 743275e6fa
commit b1086d14e9
17 changed files with 77 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/StrongPassword.wrn
+13 -4
View File
@@ -174,7 +174,7 @@ component StrongPassword {
{#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}
{#if requireSpecialCharacter}<li class="wire-next__strong-password-special" 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}
@@ -205,7 +205,7 @@ component StrongPassword {
{#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}
{#if requireSpecialCharacter}<li class="wire-next__strong-password-special" 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}
@@ -236,8 +236,8 @@ component StrongPassword {
.wire-next--strong-password input {
width: 100%;
min-height: 2.75em;
padding: 0.68em 0.85em;
min-height: 2.65rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-sm);
outline: 0;
@@ -322,6 +322,15 @@ component StrongPassword {
line-height: 1.45;
}
.wire-next__strong-password-requirements .wire-next__strong-password-special {
grid-column: 1 / -1;
white-space: nowrap;
}
.wire-next__strong-password-special [data-text="specialCharactersSet"] {
white-space: nowrap;
}
.wire-next__strong-password-requirements li > span[aria-hidden="true"] {
position: relative;
width: 0.9rem;
packages/ui/components/TogglePassword.wrn
+30 -1
View File
@@ -29,6 +29,8 @@ component TogglePassword {
invalid: boolean = false
helpText: string = ""
validationMessage: string = ""
cornerHint: string = ""
cornerHref: string = ""
class: string = ""
}
@@ -98,7 +100,12 @@ component TogglePassword {
{/each}
</div>
{:else}
<label for="{name}-password">{label}</label>
<div class="wire-next__password-heading">
<label for="{name}-password">{label}</label>
{#if cornerHint}
{#if cornerHref}<a href="{cornerHref}">{cornerHint}</a>{:else}<span>{cornerHint}</span>{/if}
{/if}
</div>
<div class="wire-next__password-control">
<input
{...attrs}
@@ -172,6 +179,28 @@ component TogglePassword {
font-weight: 600;
}
.wire-next__password-heading {
display: flex;
min-width: 0;
align-items: center;
justify-content: space-between;
gap: 1rem;
color: var(--wire-color-text);
font-size: 0.75rem;
font-weight: 600;
}
.wire-next__password-heading :is(a, span) {
color: var(--wire-component-color);
font-size: 0.75rem;
font-weight: 500;
text-decoration: none;
}
.wire-next__password-heading a:hover {
text-decoration: underline;
}
.wire-next__password-fields {
display: grid;
gap: 1rem;