104 lines
3.9 KiB
TypeScript
104 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { X, Shield, AlertTriangle, CheckCircle2, XCircle } from "lucide-react";
|
|
import styles from "./RememberMeInfoModal.module.css";
|
|
|
|
interface RememberMeInfoModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function RememberMeInfoModal({ isOpen, onClose }: RememberMeInfoModalProps) {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className={styles.modalOverlay} onClick={onClose}>
|
|
<div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
|
|
<div className={styles.modalHeader}>
|
|
<div className={styles.modalTitle}>
|
|
<Shield className={styles.titleIcon} />
|
|
<h2>À propos de "Rester connecté"</h2>
|
|
</div>
|
|
<button onClick={onClose} className={styles.closeButton} aria-label="Fermer">
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className={styles.modalBody}>
|
|
<section className={styles.section}>
|
|
<h3 className={styles.sectionTitle}>
|
|
<CheckCircle2 className={styles.iconGreen} />
|
|
Avantages
|
|
</h3>
|
|
<ul className={styles.list}>
|
|
<li>
|
|
<strong>Connexion automatique</strong> : Vous restez connecté pendant 30 jours, même après avoir fermé votre navigateur
|
|
</li>
|
|
<li>
|
|
<strong>Gain de temps</strong> : Plus besoin de vous reconnecter à chaque visite
|
|
</li>
|
|
<li>
|
|
<strong>Sécurisé</strong> : Vos identifiants restent protégés par des cookies cryptés
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section className={styles.section}>
|
|
<h3 className={styles.sectionTitle}>
|
|
<XCircle className={styles.iconRed} />
|
|
Risques sur ordinateur partagé
|
|
</h3>
|
|
<ul className={styles.list}>
|
|
<li>
|
|
<strong>Accès non autorisé</strong> : Toute personne utilisant le même navigateur pourrait accéder à votre compte
|
|
</li>
|
|
<li>
|
|
<strong>Données sensibles</strong> : Vos bulletins de paie et informations personnelles seraient accessibles
|
|
</li>
|
|
<li>
|
|
<strong>Session longue durée</strong> : La connexion persiste jusqu'à 30 jours ou déconnexion manuelle
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section className={styles.section}>
|
|
<h3 className={styles.sectionTitle}>
|
|
<AlertTriangle className={styles.iconOrange} />
|
|
Nos recommandations
|
|
</h3>
|
|
<div className={styles.recommendations}>
|
|
<div className={styles.recommendation}>
|
|
<CheckCircle2 className={styles.recommendationIcon} />
|
|
<div>
|
|
<strong>Cochez si :</strong>
|
|
<p>Vous utilisez votre ordinateur personnel ou professionnel non partagé</p>
|
|
</div>
|
|
</div>
|
|
<div className={styles.recommendation}>
|
|
<XCircle className={styles.recommendationIcon} />
|
|
<div>
|
|
<strong>Ne cochez pas si :</strong>
|
|
<p>Vous êtes sur un ordinateur public, partagé, ou dans un cybercafé</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div className={styles.securityNote}>
|
|
<Shield size={16} />
|
|
<p>
|
|
<strong>Note de sécurité :</strong> Pensez toujours à vous déconnecter manuellement
|
|
après utilisation sur un ordinateur partagé, même sans avoir coché cette option.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.modalFooter}>
|
|
<button onClick={onClose} className={styles.closeButtonFooter}>
|
|
J'ai compris
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|