/** * 2010-2026 SwissGeek | Web Developer Freelance * * NOTICE OF LICENSE * * This source file is subject to the Open Software License (OSL 3.0) * that is bundled with this package in the file LICENSE.md. * It is also available through the world-wide-web at this URL: * https:// opensource.org/licenses/OSL-3.0 * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@prestashop.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to https:// devdocs.prestashop.com/ for more information. * * @Module SGK PassMagic * @Description Passwordless login (Email code, Magic Link, Google Sign-In, Passkeys) with trusted devices, IP+email rate limiting and a login journal. * @Version 1.2.0 * @Copyright SwissGeek | Web Developer Freelance * @support Support Requests * @Blog Breaking News * @Addons Developments * * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) * Valid for 1 website (or project) for each purchase of license International Registered * Trademark & Property of SwissGeek. More information on */ /* Le document entier est rendu par ce module (pas de layout de theme) : pas besoin d'un scope .sgkpm-auth sur chaque regle, mais on le pose quand meme sur pour permettre une eventuelle integration en overlay dans un theme personnalise. */ .sgkpm-auth, .sgkpm-auth * , .sgkpm-auth *::before, .sgkpm-auth *::after { box-sizing: border-box; } .sgkpm-auth { --sgkpm-accent: #2563EB; --sgkpm-ink: #111827; --sgkpm-ink-soft: #6B7280; --sgkpm-ink-faint: #9CA3AF; --sgkpm-bg: #F4F5F7; --sgkpm-surface: #FFFFFF; --sgkpm-border: #E5E7EB; --sgkpm-danger: #DC2626; --sgkpm-radius: 14px; --sgkpm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--sgkpm-bg); font-family: var(--sgkpm-font); color: var(--sgkpm-ink); display: flex; align-items: center; justify-content: center; padding: 24px 16px; -webkit-font-smoothing: antialiased; } .sgkpm-card { width: 100%; max-width: 400px; background: var(--sgkpm-surface); border-radius: var(--sgkpm-radius); padding: 32px 28px 28px; position: relative; min-height: 320px; } .sgkpm-brand { text-align: center; margin-bottom: 24px; } .sgkpm-brand__logo { max-height: 44px; max-width: 200px; } .sgkpm-brand__name { font-size: 17px; font-weight: 700; color: var(--sgkpm-ink); } .sgkpm-alert { background: #FEF2F2; color: #7F1D1D; border-radius: 10px; padding: 12px 14px; font-size: 13px; margin-bottom: 20px; } .sgkpm-screen { display: none; animation: sgkpmFade .18s ease; } .sgkpm-screen.is-active { display: block; } @keyframes sgkpmFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .sgkpm-title { font-size: 21px; font-weight: 700; margin: 0 0 6px 0; text-align: center; line-height: 1.3; } .sgkpm-sub { font-size: 14px; color: var(--sgkpm-ink-soft); text-align: center; margin: 0 0 20px 0; line-height: 1.5; } .sgkpm-sub--muted { color: var(--sgkpm-ink-faint); font-size: 13px; margin-top: -12px; } .sgkpm-form { display: flex; flex-direction: column; gap: 6px; } .sgkpm-label { font-size: 13px; font-weight: 600; color: var(--sgkpm-ink-soft); margin-top: 10px; } .sgkpm-input { width: 100%; min-height: 48px !important; border: 1.5px solid var(--sgkpm-border); border-radius: 10px; padding: 0 14px; font-size: 16px; color: var(--sgkpm-ink); background: var(--sgkpm-surface); outline: none; transition: border-color .15s ease; } .sgkpm-input:focus { border-color: var(--sgkpm-accent); } .sgkpm-input.is-invalid { border-color: var(--sgkpm-danger); } .sgkpm-error { color: var(--sgkpm-danger); font-size: 13px; margin: 4px 0 0 0; text-align: center; } .sgkpm-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 48px !important; width: 100%; border: none; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 16px; transition: opacity .15s ease, transform .05s ease; -webkit-tap-highlight-color: transparent; } .sgkpm-btn:active { transform: scale(.99); } .sgkpm-btn:disabled { opacity: .5; cursor: not-allowed; } .sgkpm-btn--primary { background: var(--sgkpm-accent); color: #fff; } .sgkpm-btn--primary:hover:not(:disabled) { opacity: .92; } .sgkpm-btn--secondary { background: var(--sgkpm-surface); color: var(--sgkpm-ink); border: 1.5px solid var(--sgkpm-border); } .sgkpm-btn--secondary:hover:not(:disabled) { border-color: var(--sgkpm-accent); } .sgkpm-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: sgkpmSpin .7s linear infinite; } @keyframes sgkpmSpin { to { transform: rotate(360deg); } } .sgkpm-classic-link, .sgkpm-link-btn { display: block; text-align: center; margin-top: 18px; font-size: 13px; color: var(--sgkpm-ink-soft); text-decoration: none; background: none; border: none; width: 100%; cursor: pointer; padding: 8px; } .sgkpm-classic-link:hover, .sgkpm-link-btn:hover:not(:disabled) { color: var(--sgkpm-accent); } .sgkpm-link-btn:disabled { color: var(--sgkpm-ink-faint); cursor: default; } .sgkpm-divider { display: flex; align-items: center; gap: 10px; color: var(--sgkpm-ink-faint); font-size: 12px; margin: 18px 0; } .sgkpm-divider::before, .sgkpm-divider::after { content: ""; flex: 1; height: 1px; background: var(--sgkpm-border); } .sgkpm-google-btn { display: flex; justify-content: center; min-height: 44px !important; } .sgkpm-back { position: absolute; top: 24px; left: 24px; width: 32px !important; height: 32px !important; min-height: 32px !important; border: none; background: var(--sgkpm-bg); border-radius: 50%; font-size: 16px; cursor: pointer; color: var(--sgkpm-ink-soft); display: inline-flex; align-items: center; justify-content: center; } .sgkpm-otp-boxes { display: flex; gap: 8px; justify-content: center; margin: 4px 0 4px 0; } .sgkpm-otp-boxes input { width: 44px !important; height: 52px !important; min-height: 52px !important; text-align: center; font-size: 22px; font-weight: 700; border: 1.5px solid var(--sgkpm-border); border-radius: 10px; outline: none; font-family: 'Courier New', monospace; } .sgkpm-otp-boxes input:focus { border-color: var(--sgkpm-accent); } .sgkpm-otp-boxes input.is-invalid { border-color: var(--sgkpm-danger); animation: sgkpmShake .3s; } @keyframes sgkpmShake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } .sgkpm-check { display: flex !important; align-items: center; gap: 8px; font-size: 13px; color: var(--sgkpm-ink-soft); margin: 14px 0 4px 0; cursor: pointer; } .sgkpm-check input[type=checkbox] { width: 18px !important; height: 18px !important; min-height: 18px !important; accent-color: var(--sgkpm-accent); } .sgkpm-check-mark { width: 56px; height: 56px; border-radius: 50%; background: #ECFDF5; color: #059669; font-size: 26px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px auto; } @media (max-width: 380px) { .sgkpm-card { padding: 26px 18px 22px; } .sgkpm-otp-boxes { gap: 6px; } .sgkpm-otp-boxes input { width: 38px !important; height: 48px !important; min-height: 48px !important; font-size: 19px; } } @media (prefers-color-scheme: dark) { .sgkpm-auth { --sgkpm-bg: #0B0D12; --sgkpm-surface: #15181F; --sgkpm-ink: #F3F4F6; --sgkpm-ink-soft: #A3A9B7; --sgkpm-ink-faint: #6B7280; --sgkpm-border: #262B36; } .sgkpm-back { background: #1E222C; } .sgkpm-input { color: var(--sgkpm-ink); } }