Fix: signup page password field

This commit is contained in:
hyzen
2026-06-10 14:20:06 +05:30
parent 9414e98ecd
commit 687f3d6673
2 changed files with 50 additions and 47 deletions

View File

@@ -5,14 +5,17 @@
<a href=/signup/ class="auth-link auth-link--signup">Sign Up</a></div></div><div class=rss-subscribe><button class=rss-subscribe__btn aria-label="Subscribe via RSS" title="Subscribe via RSS"> <a href=/signup/ class="auth-link auth-link--signup">Sign Up</a></div></div><div class=rss-subscribe><button class=rss-subscribe__btn aria-label="Subscribe via RSS" title="Subscribe via RSS">
<svg viewBox="0 0 24 24" width="10" height="10" fill="currentColor" aria-hidden="true"><path d="M6.18 15.64a2.18 2.18.0 012.18 2.18c0 1.19-.98 2.18-2.18 2.18C4.98 20 4 19.01 4 17.82a2.18 2.18.0 012.18-2.18M4 4.44A15.56 15.56.0 0119.56 20h-2.83A12.73 12.73.0 004 7.27V4.44m0 5.66a9.9 9.9.0 019.9 9.9h-2.83A7.07 7.07.0 004 12.93V10.1z"/></svg> <svg viewBox="0 0 24 24" width="10" height="10" fill="currentColor" aria-hidden="true"><path d="M6.18 15.64a2.18 2.18.0 012.18 2.18c0 1.19-.98 2.18-2.18 2.18C4.98 20 4 19.01 4 17.82a2.18 2.18.0 012.18-2.18M4 4.44A15.56 15.56.0 0119.56 20h-2.83A12.73 12.73.0 004 7.27V4.44m0 5.66a9.9 9.9.0 019.9 9.9h-2.83A7.07 7.07.0 004 12.93V10.1z"/></svg>
<span>Subscribe</span></button><div class=rss-subscribe__dropdown><button class=rss-subscribe__item data-rss-url=https://freedoms4.org/index.xml>All updates</button> <span>Subscribe</span></button><div class=rss-subscribe__dropdown><button class=rss-subscribe__item data-rss-url=https://freedoms4.org/index.xml>All updates</button>
<button class=rss-subscribe__item data-rss-url=https://freedoms4.org/blog/index.xml>Blog posts</button></div></div></div></div><nav class="menu language"><ul class="menu__list language__list"><li class=menu__item><a class=menu__link href=/>Home</a></li><li class=menu__item><a class=menu__link href=/blog/>Blog</a></li><li class=menu__item><a class=menu__link href=/services/>Services</a></li><li class=menu__item><a class=menu__link href=/uninotes/>UniNotes</a></li><li class=menu__item><a class=menu__link href=/contact/>Contact</a></li></ul></nav></header><main class=main><div class=auth-page><h1 class=auth-page__title>Sign Up</h1><div class=auth-card><div id=auth-message class=auth-message aria-live=polite style=display:none></div><form id=signup-form class=auth-form novalidate><div class=auth-form__group><label class=auth-form__label for=signup-username>Username</label> <button class=rss-subscribe__item data-rss-url=https://freedoms4.org/blog/index.xml>Blog posts</button></div></div></div></div><nav class="menu language"><ul class="menu__list language__list"><li class=menu__item><a class=menu__link href=/>Home</a></li><li class=menu__item><a class=menu__link href=/blog/>Blog</a></li><li class=menu__item><a class=menu__link href=/services/>Services</a></li><li class=menu__item><a class=menu__link href=/uninotes/>UniNotes</a></li><li class=menu__item><a class=menu__link href=/contact/>Contact</a></li></ul></nav></header><main class=main><div class=auth-page><h1 class=auth-page__title>Sign Up</h1><div class=auth-card><div id=auth-message class=auth-message aria-live=polite style=display:none></div><form id=signup-form class=auth-form novalidate><div class=auth-form__input-wrap><div class=auth-form__group><label class=auth-form__label for=signup-username>Username</label>
<input class=auth-form__input type=text id=signup-username name=username autocomplete=username required minlength=3 maxlength=32 pattern=[a-zA-Z0-9_\-]+> <input class=auth-form__input type=text id=signup-username name=username autocomplete=username required minlength=3 maxlength=32 pattern=[a-zA-Z0-9_\-]+>
<span class=auth-form__hint>(3-32 characters; letters, numbers, _ and - only)</span></div><div class=auth-form__group><label class=auth-form__label for=signup-email>Email</label> <span class=auth-form__hint>(3-32 characters; letters, numbers, _ and - only)</span></div><div class=auth-form__group><label class=auth-form__label for=signup-email>Email</label>
<input class=auth-form__input type=email id=signup-email name=email autocomplete=email required></div><div class=auth-form__group><label class=auth-form__label for=signup-password>Password</label><div class=auth-form__input-wrap><input class=auth-form__input type=password id=signup-password name=password autocomplete=new-password required minlength=8> <input class=auth-form__input type=email id=signup-email name=email autocomplete=email required></div><div class=auth-form__group><label class=auth-form__label for=signup-password>Password</label>
<input class=auth-form__input type=password id=signup-password name=password autocomplete=new-password required minlength=8>
<button type=button class=auth-form__eye aria-label="Toggle password visibility" tabindex=-1> <button type=button class=auth-form__eye aria-label="Toggle password visibility" tabindex=-1>
<svg class="eye-show" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76.0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66.0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg> <svg class="eye-show" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76.0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66.0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
<svg class="eye-hide" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display:none"><path d="M12 7c2.76.0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4.0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55.0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65.0 1.66 1.34 3 3 3 .22.0.44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76.0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg></button></div><span class=auth-form__hint>(at least 8 characters)</span></div><div class=auth-form__group><label class=auth-form__label for=signup-confirm>Confirm Password</label> <svg class="eye-hide" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display:none"><path d="M12 7c2.76.0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4.0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55.0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65.0 1.66 1.34 3 3 3 .22.0.44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76.0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>
<input class=auth-form__input type=password id=signup-confirm name=confirm_password autocomplete=new-password required></div><button type=submit class=auth-form__submit id=signup-submit> </button>
<span class=auth-form__hint>(at least 8 characters)</span></div><div class=auth-form__group><label class=auth-form__label for=signup-confirm>Confirm Password</label>
<input class=auth-form__input type=password id=signup-confirm name=confirm_password autocomplete=new-password required></div></div><button type=submit class=auth-form__submit id=signup-submit>
<span class=auth-form__submit-text>Send verification code</span> <span class=auth-form__submit-text>Send verification code</span>
<span class=auth-form__submit-loader style=display:none><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" class="spin"><path d="M12 4V1L8 5l4 4V6c3.31.0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31.0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg></span></button></form><div id=otp-panel style=display:none><p class=otp-panel__hint>A 6-digit code was sent to <strong id=otp-email-display></strong>.<br>Enter it below. The code will expire in 10&nbsp;minutes.</p><div class=auth-form style=margin-top:1rem><div class=auth-form__group><label class=auth-form__label for=otp-input>Verification code</label> <span class=auth-form__submit-loader style=display:none><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" class="spin"><path d="M12 4V1L8 5l4 4V6c3.31.0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31.0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg></span></button></form><div id=otp-panel style=display:none><p class=otp-panel__hint>A 6-digit code was sent to <strong id=otp-email-display></strong>.<br>Enter it below. The code will expire in 10&nbsp;minutes.</p><div class=auth-form style=margin-top:1rem><div class=auth-form__group><label class=auth-form__label for=otp-input>Verification code</label>
<input class="auth-form__input otp-panel__input" type=text id=otp-input inputmode=numeric maxlength=6 pattern=\d{6} placeholder=000000 autocomplete=one-time-code></div><button type=button class=auth-form__submit id=otp-submit> <input class="auth-form__input otp-panel__input" type=text id=otp-input inputmode=numeric maxlength=6 pattern=\d{6} placeholder=000000 autocomplete=one-time-code></div><button type=button class=auth-form__submit id=otp-submit>

View File

@@ -7,39 +7,39 @@
<!-- ── STEP 1 — Account details ───────────────────────────────── --> <!-- ── STEP 1 — Account details ───────────────────────────────── -->
<form id="signup-form" class="auth-form" novalidate> <form id="signup-form" class="auth-form" novalidate>
<div class="auth-form__group"> <div class="auth-form__input-wrap">
<label class="auth-form__label" for="signup-username">Username</label> <div class="auth-form__group">
<input <label class="auth-form__label" for="signup-username">Username</label>
class="auth-form__input" <input
type="text" class="auth-form__input"
id="signup-username" type="text"
name="username" id="signup-username"
autocomplete="username" name="username"
required autocomplete="username"
minlength="3" required
maxlength="32" minlength="3"
pattern="[a-zA-Z0-9_\-]+" maxlength="32"
/> pattern="[a-zA-Z0-9_\-]+"
<span class="auth-form__hint" />
>(3-32 characters; letters, numbers, _ and - only)</span <span class="auth-form__hint"
> >(3-32 characters; letters, numbers, _ and - only)</span
</div> >
</div>
<div class="auth-form__group"> <div class="auth-form__group">
<label class="auth-form__label" for="signup-email">Email</label> <label class="auth-form__label" for="signup-email">Email</label>
<input <input
class="auth-form__input" class="auth-form__input"
type="email" type="email"
id="signup-email" id="signup-email"
name="email" name="email"
autocomplete="email" autocomplete="email"
required required
/> />
</div> </div>
<div class="auth-form__group"> <div class="auth-form__group">
<label class="auth-form__label" for="signup-password">Password</label> <label class="auth-form__label" for="signup-password">Password</label>
<div class="auth-form__input-wrap">
<input <input
class="auth-form__input" class="auth-form__input"
type="password" type="password"
@@ -81,20 +81,20 @@
/> />
</svg> </svg>
</button> </button>
<span class="auth-form__hint">(at least 8 characters)</span>
</div> </div>
<span class="auth-form__hint">(at least 8 characters)</span>
</div>
<div class="auth-form__group"> <div class="auth-form__group">
<label class="auth-form__label" for="signup-confirm">Confirm Password</label> <label class="auth-form__label" for="signup-confirm">Confirm Password</label>
<input <input
class="auth-form__input" class="auth-form__input"
type="password" type="password"
id="signup-confirm" id="signup-confirm"
name="confirm_password" name="confirm_password"
autocomplete="new-password" autocomplete="new-password"
required required
/> />
</div>
</div> </div>
<button type="submit" class="auth-form__submit" id="signup-submit"> <button type="submit" class="auth-form__submit" id="signup-submit">