Password Toggle

'use client';

import { useEffect, useRef } from 'react';
import './FloatingPassword.css';

/**
 * FloatingPassword — A password input field featuring a reveal/hide toggle inside the frame.
 * 
 * @param {string} id - Unique identifier linking toggle state securely.
 * @param {string} placeholder - Default text visible when empty. Default is "Password".
 * @param {string} name - HTML name binding.
 * @param {boolean} required - HTML required indicator.
 */
export interface FloatingPasswordProps {
  id: string;
  placeholder?: string;
  name?: string;
  required?: boolean;
}

export function FloatingPassword({ id, placeholder = "Password", name, required = false }: FloatingPasswordProps) {

  // Ported from the Astro <script>: runs once after mount (DOM logic kept as in the Astro kit).
  const mounted = useRef(false);
  useEffect(() => {
    if (mounted.current) return;
    mounted.current = true;
    // Setup functional toggle without polluting global namespaces or clashing IDs
      document.querySelectorAll('.pass-wrap').forEach(wrap => {
        const btn = wrap.querySelector('[data-pwd-toggle]');
        const pass = wrap.querySelector('[data-pwd-input]') as HTMLInputElement;
        
        if (btn && pass) {
          btn.addEventListener('click', () => {
            const isPass = pass.type === 'password';
            pass.type = isPass ? 'text' : 'password';
            btn.textContent = isPass ? '🙈' : '👁️';
          });
        }
      });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <>
      <div className="pass-wrap" data-rk-1ae42d="">
        <input type="password" id={id} name={name} placeholder={placeholder} required={required} className="pass-input" data-pwd-input data-rk-1ae42d="" />
        <button type="button" className="toggle-pass" aria-label="Toggle password visibility" data-pwd-toggle data-rk-1ae42d="">👁️</button>
      </div>
    </>
  );
}

export default FloatingPassword;

/* FloatingPassword — ported from astro-component-kit (forms/FloatingPassword.astro) */

.pass-wrap:where([data-rk-1ae42d]) { position: relative; width: 100%; }
.pass-input:where([data-rk-1ae42d]) { 
  width: 100%; box-sizing: border-box;
  padding: 0.8rem 3rem 0.8rem 1rem; 
  background: var(--c-bg-elev, rgba(0,0,0,0.2)); 
  border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
  border-radius: var(--r-sm, 10px); 
  color: var(--c-text-1, #fff); outline: none; 
  font-family: inherit; transition: 0.2s;
}
.pass-input:focus:where([data-rk-1ae42d]) { border-color: var(--c-primary, #6366f1); }
.toggle-pass:where([data-rk-1ae42d]) { 
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); 
  background: none; border: none; cursor: pointer; opacity: 0.5; transition: 0.2s;
}
.toggle-pass:hover:where([data-rk-1ae42d]) { opacity: 1; }