e-cosplay/assets/app.js

import './app.scss'
import * as Turbo from "@hotwired/turbo"


document.addEventListener('DOMContentLoaded', () => {
    function createSvgIconPassword(paths, classes) {
        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        svg.setAttribute("fill", "none");
        svg.setAttribute("stroke", "currentColor");
        svg.setAttribute("viewBox", "0 0 24 24");
        svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
        svg.classList.add(...classes); // Ajoute les classes CSS

        paths.forEach(d => {
            const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
            path.setAttribute("stroke-linecap", "round");
            path.setAttribute("stroke-linejoin", "round");
            path.setAttribute("stroke-width", "2");
            path.setAttribute("d", d);
            svg.appendChild(path);
        });
        return svg;
    }

    document.querySelectorAll('input[type="password"]').forEach(input=>{
// Crée un conteneur div pour l'input et l'icône
        const wrapperDiv = document.createElement('div');
        wrapperDiv.classList.add('relative'); // Ajoute la classe Tailwind pour le positionnement

        // Insère le wrapper avant l'input
        input.parentNode.insertBefore(wrapperDiv, input);
        // Déplace l'input à l'intérieur du wrapper
        wrapperDiv.appendChild(input);

        // Crée l'icône de bascule (span)
        const toggleIcon = document.createElement('span');
        toggleIcon.classList.add('password-toggle-icon');

        // Crée les icônes SVG (œil ouvert et œil fermé)
        const eyeOpenPaths = [
            "M15 12a3 3 0 11-6 0 3 3 0 016 0z",
            "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
        ];
        const eyeClosedPaths = [
            "M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.542-7 1.274-4.057 5.064-7 9.542-7 .965 0 1.902.13 2.799.375m-4.502 12.15A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.542-7 1.274-4.057 5.064-7 9.542-7 .965 0 1.902.13 2.799.375m-4.502 12.15L21 21"
        ];

        const eyeOpenIcon = createSvgIconPassword(eyeOpenPaths, ['eye-open']);
        const eyeClosedIcon = createSvgIconPassword(eyeClosedPaths, ['eye-closed', 'hidden']); // Caché par défaut

        toggleIcon.appendChild(eyeOpenIcon);
        toggleIcon.appendChild(eyeClosedIcon);

        // Ajoute l'icône de bascule au wrapper
        wrapperDiv.appendChild(toggleIcon);

        // Ajoute l'écouteur d'événements pour la bascule de visibilité
        toggleIcon.addEventListener('click', () => {
            if (input.type === 'password') {
                input.type = 'text';
                eyeOpenIcon.classList.add('hidden');
                eyeClosedIcon.classList.remove('hidden');
            } else {
                input.type = 'password';
                eyeOpenIcon.classList.remove('hidden');
                eyeClosedIcon.classList.add('hidden');
            }
        });
    })
})