91 lines
4.1 KiB
JavaScript
91 lines
4.1 KiB
JavaScript
import './order.scss'
|
|
import * as Turbo from "@hotwired/turbo"
|
|
import * as Sentry from "@sentry/browser";
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
let metaSentry = document.querySelector('meta[name="sentry"]');
|
|
if(metaSentry != undefined) {
|
|
Sentry.init({
|
|
dsn: "https://f134747cc727471fefb197ab5fd4b1b0@o4510197735948288.ingest.de.sentry.io/4510197772320848",
|
|
// Setting this option to true will send default PII data to Sentry.
|
|
// For example, automatic IP address collection on events
|
|
sendDefaultPii: true,
|
|
tunnel: "/tunnel",
|
|
integrations: [
|
|
Sentry.browserTracingIntegration(),
|
|
Sentry.replayIntegration()
|
|
],
|
|
// Tracing
|
|
tracesSampleRate: 1.0, // Capture 100% of the transactions
|
|
// Session Replay
|
|
replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
|
|
replaysOnErrorSampleRate: 1.0 // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
|
|
});
|
|
}
|
|
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');
|
|
}
|
|
});
|
|
})
|
|
})
|