Password Recovery Showcase

1. Email Recovery Form

Premium glass card designed to send password recovery links with custom loading spinners and float inputs.

Premium

Forgot Password

Enter your account email below to dispatch a secure password reset link.

Back to Login

<div class="rec-card-wrapper">
  <div class="rec-card-header">
    <div class="rec-icon-box"><i class="fa-regular fa-envelope"></i></div>
    <h3>Forgot Password</h3>
    <p>Enter your account email below to dispatch a secure password reset link.</p>
  </div>
  <form class="email-recovery-form" onsubmit="handleEmailRecovery(event)">
    <div class="rec-form-group">
      <input type="email" id="email" class="rec-input" placeholder=" " required>
      <label for="email">Email Address</label>
    </div>
    <button type="submit" class="rec-submit-btn">
      <i class="fa-solid fa-paper-plane"></i> Send Reset Link
    </button>
  </form>
</div>

2. Reset Password Interface

New password entry panel loaded with a dynamic, real-time password strength analyzer checklist.

Create New Password

Choose a complex password to protect your user account database access.

<div class="rec-card-wrapper">
  <div class="rec-card-header">
    <div class="rec-icon-box"><i class="fa-solid fa-lock-open"></i></div>
    <h3>Create New Password</h3>
    <p>Choose a complex password to protect your user account database access.</p>
  </div>
  <form onsubmit="handleReset(event)">
    <div class="rec-form-group">
      <input type="password" id="new-pwd" class="rec-input" oninput="analyzeStrength(this.value)" placeholder=" " required>
      <label for="new-pwd">New Password</label>
    </div>
    <div class="pwd-strength-container">
      <div class="pwd-strength-header">
        <span>Password Security:</span>
        <span id="strength-label">None</span>
      </div>
      <div class="pwd-strength-track">
        <div class="pwd-strength-fill" id="strength-fill"></div>
      </div>
      <div class="pwd-checklist">
        <div class="pwd-checklist-item invalid" id="req-length"><i class="fa-solid fa-circle-xmark"></i> 8+ Characters</div>
        <div class="pwd-checklist-item invalid" id="req-number"><i class="fa-solid fa-circle-xmark"></i> One Number</div>
        <div class="pwd-checklist-item invalid" id="req-capital"><i class="fa-solid fa-circle-xmark"></i> One Capital</div>
        <div class="pwd-checklist-item invalid" id="req-symbol"><i class="fa-solid fa-circle-xmark"></i> One Symbol</div>
      </div>
    </div>
    <button type="submit" class="rec-submit-btn">Reset &amp; Update</button>
  </form>
</div>

3. Password Update Panel

A user profile config settings form designed for active sessions with real-time text matching validation badges.

Match Validator

Change Password

Update your active account password. Enter your current credentials first.

<div class="rec-card-wrapper">
  <div class="rec-card-header">
    <div class="rec-icon-box"><i class="fa-solid fa-key"></i></div>
    <h3>Change Password</h3>
    <p>Update your active account password.</p>
  </div>
  <form onsubmit="handleUpdate(event)">
    <div class="rec-form-group">
      <input type="password" id="curr-pwd" class="rec-input" placeholder=" " required>
      <label for="curr-pwd">Current Password</label>
    </div>
    <div class="rec-form-group">
      <input type="password" id="new-pwd" class="rec-input" oninput="verifyMatch()" placeholder=" " required>
      <label for="new-pwd">New Password</label>
    </div>
    <div class="rec-form-group">
      <input type="password" id="conf-pwd" class="rec-input" oninput="verifyMatch()" placeholder=" " required>
      <label for="conf-pwd">Confirm Password</label>
    </div>
    <div class="validation-match-badge" id="match-badge">
      <i class="fa-solid fa-circle-info"></i> <span>Passwords match</span>
    </div>
    <button type="submit" class="rec-submit-btn">Update Credentials</button>
  </form>
</div>

4. OTP Recovery Interface

Mobile-responsive segmented numeric 2FA input grid with dynamic countdown ticking resend handles.

Two Factor OTP

Verify Identity

Enter the 4-digit security code received via your mobile device.

<div class="rec-card-wrapper rec-inline-style-center">
  <div class="rec-card-header">
    <div class="rec-icon-box"><i class="fa-solid fa-user-shield"></i></div>
    <h3>Verify Identity</h3>
    <p>Enter the 4-digit code sent to your device.</p>
  </div>
  <form onsubmit="handleOtpSubmit(event)">
    <div class="rec-otp-row">
      <input type="text" class="rec-input rec-otp-digit" maxlength="1" oninput="handleAutofocus(this)">
      <input type="text" class="rec-input rec-otp-digit" maxlength="1" oninput="handleAutofocus(this)">
      <input type="text" class="rec-input rec-otp-digit" maxlength="1" oninput="handleAutofocus(this)">
      <input type="text" class="rec-input rec-otp-digit" maxlength="1" oninput="handleAutofocus(this)">
    </div>
    <button type="submit" class="rec-submit-btn">Authenticate &amp; Access</button>
  </form>
</div>

5. Success Confirmation Layout

High-fidelity workflow conclusion screen featuring pulsing concentric rings and a bouncing success checkmark.

Success State

Password Updated!

Your account security keys were rebuilt successfully. You can now access all databases utilizing your brand-new credentials.

<div class="rec-card-wrapper rec-success-card">
  <div class="rec-success-illustration">
    <div class="success-pulse-ring"></div>
    <div class="success-pulse-ring"></div>
    <div class="success-check-circle">
      <i class="fa-solid fa-check"></i>
    </div>
  </div>
  <h3 class="rec-success-title">Password Updated!</h3>
  <p class="rec-success-body-p">Your security keys were rebuilt successfully. You can now log in.</p>
  <button type="button" class="rec-submit-btn">Return to Portal</button>
</div>