Skip to content

Pending Review

Pending Review from User Experience (UX)

Password Component

Overview

The PWC Password is a specialized input component designed specifically for secure password entry with enhanced user experience features. It provides password visibility toggle functionality, automatic security settings, and comprehensive form integration while maintaining accessibility and usability standards. This component ensures secure password handling with user-friendly interaction patterns.

Core Capabilities

  • Password Visibility Toggle - Built-in show/hide functionality with eye icon controls
  • Security Features - Automatic disabling of autocomplete, autocorrect, and capitalization
  • Form Integration - Native form context awareness with validation support
  • Clear Functionality - One-click password clearing with integrated clear button
  • Validation Support - Pattern-based validation with real-time feedback
  • Accessibility Features - Full keyboard navigation and screen reader compatibility

When to Use Password

  • User Authentication - Login forms and authentication interfaces
  • Account Creation - Registration forms requiring password input
  • Security Settings - Password change and update forms
  • Profile Management - User account settings with password fields
  • Administrative Forms - System configuration requiring secure input

When Not to Use Password

  • Non-Sensitive Text - Use regular Input component for general text entry
  • Confirmation Fields - Consider separate password confirmation patterns
  • Display Only - Use Display Field component for showing masked values
  • Multi-Line Content - Use Textarea for longer text content

Basic Implementation

import { useState } from 'react';
import { PwcPassword } from "@progress-i360/pwc-react";

function PasswordForm() {
  const [passwords, setPasswords] = useState({
    current: '',
    next: ''
  });

  const handlePasswordChange = (field: 'current' | 'next', value: string) => {
    setPasswords((prev) => ({ ...prev, [field]: value }));
  };

  return (
    <>
      <PwcPassword
        name="currentPassword"
        label="Current Password"
        hint="Enter your current password"
        placeholder="Current password"
        required
        onChange={(event) => handlePasswordChange('current', event.detail)}
      />

      <PwcPassword
        name="newPassword"
        label="New Password"
        hint="Enter your new password"
        placeholder="New password"
        required
        onChange={(event) => handlePasswordChange('next', event.detail)}
      />
    </>
  );
}

import { useEffect, useRef, useState } from 'react';
import '@progress-i360/progress-web-components/password';

type PasswordElement = HTMLElement & { value?: string };

function PasswordForm() {
  const currentRef = useRef<PasswordElement | null>(null);
  const nextRef = useRef<PasswordElement | null>(null);
  const [passwords, setPasswords] = useState({ current: '', next: '' });

  useEffect(() => {
    const currentElement = currentRef.current;
    const nextElement = nextRef.current;

    if (!currentElement || !nextElement) {
      return;
    }

    const handleCurrentChange = (event: Event) => {
      const detail = (event as CustomEvent<string>).detail;
      setPasswords((prev) => ({ ...prev, current: detail }));
    };

    const handleNextChange = (event: Event) => {
      const detail = (event as CustomEvent<string>).detail;
      setPasswords((prev) => ({ ...prev, next: detail }));
    };

    currentElement.addEventListener('pwc-change', handleCurrentChange);
    nextElement.addEventListener('pwc-change', handleNextChange);

    return () => {
      currentElement.removeEventListener('pwc-change', handleCurrentChange);
      nextElement.removeEventListener('pwc-change', handleNextChange);
    };
  }, []);

  useEffect(() => {
    if (currentRef.current) {
      currentRef.current.value = passwords.current;
    }
    if (nextRef.current) {
      nextRef.current.value = passwords.next;
    }
  }, [passwords]);

  return (
    <>
      <pwc-password
        ref={currentRef}
        name="current-password"
        label="Current Password"
        placeholder="Current password"
        required
      ></pwc-password>

      <pwc-password
        ref={nextRef}
        name="new-password"
        label="New Password"
        hint="Use at least 8 characters"
        placeholder="New password"
        required
      ></pwc-password>
    </>
  );
}

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@progress-i360/progress-web-components/password";

@Component({
  selector: 'password-demo',
  template: `
    <pwc-password 
      label="Current Password" 
      placeholder="Enter current password"
      required
      (pwc-change)="updateCurrentPassword($event)">
    </pwc-password>

    <pwc-password 
      label="New Password" 
      placeholder="Create new password"
      pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{8,}$"
      hint="Must contain uppercase, lowercase, number, and special character"
      [long]="true"
      required
      (pwc-change)="updateNewPassword($event)">
    </pwc-password>

    <pwc-password 
      label="Confirm Password" 
      placeholder="Confirm new password"
      [disabled]="!newPasswordValid"
      required
      (pwc-change)="confirmPassword($event)">
    </pwc-password>

    <div class="password-status" *ngIf="showStatus">
      <p>Password strength: {{ getPasswordStrength() }}</p>
      <p>Passwords match: {{ passwordsMatch ? 'Yes' : 'No' }}</p>
    </div>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class PasswordDemo {
  currentPassword = '';
  newPassword = '';
  confirmedPassword = '';
  newPasswordValid = false;
  passwordsMatch = false;

  get showStatus() {
    return this.newPassword.length > 0;
  }

  updateCurrentPassword(event: any) {
    this.currentPassword = event.detail || '';
  }

  updateNewPassword(event: any) {
    this.newPassword = event.detail || '';
    this.newPasswordValid = this.validatePasswordStrength(this.newPassword);
    this.checkPasswordMatch();
  }

  confirmPassword(event: any) {
    this.confirmedPassword = event.detail || '';
    this.checkPasswordMatch();
  }

  validatePasswordStrength(password: string): boolean {
    const pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
    return pattern.test(password);
  }

  checkPasswordMatch() {
    this.passwordsMatch = this.newPassword === this.confirmedPassword && this.confirmedPassword.length > 0;
  }

  getPasswordStrength(): string {
    if (this.newPassword.length < 8) return 'Too short';
    if (this.newPasswordValid) return 'Strong';
    return 'Weak';
  }
}

import '@progress-i360/progress-web-components/password';

const password = document.createElement('pwc-password');
password.setAttribute('label', 'Account Password');
password.setAttribute('placeholder', 'Enter a secure password');
password.setAttribute('required', 'true');

password.addEventListener('pwc-change', (event) => {
  console.log('Password value updated', event.detail);
});

document.body.appendChild(password);

Usage Patterns

Authentication Flow Patterns

Implement password fields in authentication contexts:

  • Login Forms - Single password field with visibility toggle
  • Registration Forms - Password and confirmation field pairs
  • Password Recovery - New password creation with strength indicators
  • Multi-Factor Authentication - Password combined with additional verification

Security Enhancement Patterns

Enhance password security and user guidance: - Strength Indicators - Real-time password strength visualization - Pattern Validation - Requirements display and real-time checking - Confirmation Matching - Live validation between password fields - Security Guidelines - Contextual help for password requirements

User Experience Patterns

Optimize password input for better usability: - Progressive Disclosure - Show requirements only when needed - Auto-Focus Management - Logical tab order in multi-field scenarios - Error Recovery - Clear guidance for validation failures - Mobile Optimization - Touch-friendly visibility controls

Common Use Cases

User Account Management

  • Login and authentication interfaces
  • Account registration and setup
  • Password change and reset flows
  • Administrative user management

Troubleshooting

Common Issues

Show/Hide Toggle Not Working

Problem: Password visibility toggle doesn't function Solution: Check toggle handler implementation and ensure proper state management

Validation Not Triggering

Problem: Password strength validation doesn't work Solution: Verify validation rules are configured and strength meter is connected

Auto-complete Issues

Problem: Browser auto-complete doesn't work properly Solution: Use proper autocomplete attributes and test across different browsers

Copy/Paste Problems

Problem: Users can't copy or paste passwords Solution: Check if copy/paste restrictions are necessary and implement appropriately

Accessibility Issues

Problem: Screen readers don't announce password state changes Solution: Use proper ARIA attributes and announce visibility state changes

Implementation Support

  • Form Architecture - Integration patterns for authentication flows, validation, and secure password handling workflows
  • Accessibility Compliance - WCAG implementation strategies for password input, visibility toggle, and screen reader support
  • Security Best Practices - Guidance for validation patterns, strength indicators, and secure password storage integration

Resources

Storybook Documentation

For comprehensive API documentation, interactive examples, and testing tools: 📖 View Complete API Documentation in Storybook →

This guide provides high-level implementation guidance. For detailed API specifications and interactive examples, visit our Storybook documentation.