{"id":1171,"date":"2025-08-31T14:18:00","date_gmt":"2025-08-31T14:18:00","guid":{"rendered":"https:\/\/ia-mp.org\/?page_id=1171"},"modified":"2025-10-12T00:02:52","modified_gmt":"2025-10-12T00:02:52","slug":"login","status":"publish","type":"page","link":"https:\/\/ia-mp.org\/?page_id=1171","title":{"rendered":"Login"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1171\" class=\"elementor elementor-1171\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-89caa14 e-flex e-con-boxed e-con e-parent\" data-id=\"89caa14\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e4a7e32 elementor-widget elementor-widget-html\" data-id=\"e4a7e32\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"auth-container\">\r\n  <div class=\"auth-box\">\r\n    <h2>Login to Your Account<\/h2>\r\n    <form id=\"login-form\">\r\n      <input type=\"email\" id=\"email\" placeholder=\"Email\" required>\r\n      <input type=\"password\" id=\"password\" placeholder=\"Password\" required>\r\n      <button type=\"\" id=\"login-btn\">Login<\/button>\r\n      <div class=\"link\">\r\n        <p>Don\u2019t have an account? <a href=\"https:\/\/ia-mp.org\/?page_id=1211\">Sign up here<\/a><\/p>\r\n        <p><a href=\"#\" id=\"forgot-link\">Forgot your password?<\/a><\/p>\r\n      <\/div>\r\n    <\/form>\r\n    <p id=\"error-message\" style=\"color: red; display: none;\">Please check your inputs.<\/p>\r\n    <p id=\"welcome-message\" style=\"color: green; display: none;\"><\/p>\r\n  <\/div>\r\n  <div class=\"auth-image\">\r\n    <img decoding=\"async\" src=\"https:\/\/ia-mp.org\/wp-content\/uploads\/2025\/08\/pexels-star-zhang-3254790-17485780-scaled-1.jpg\" alt=\"Login illustration\">\r\n  <\/div>\r\n<\/div>\r\n<!-- Modale mot de passe oubli\u00e9 -->\r\n<div id=\"forgot-password-modal\" class=\"modal\" style=\"display:none;\">\r\n  <div class=\"modal-content\">\r\n    <span class=\"close\">&times;<\/span>\r\n    <h3 style=\"color: #00538B;\">Reset Your Password<\/h3>\r\n    <p>Enter your email address below and we'll send you instructions to reset your password.<\/p>\r\n    <input type=\"email\" id=\"forgot-email\" placeholder=\"Your email\" required>\r\n    <button id=\"send-reset-btn\">Send Reset Link<\/button>\r\n    <p id=\"reset-message\" style=\"color: green; display:none;\"><\/p>\r\n    <p id=\"reset-error\" style=\"color: red; display:none;\"><\/p>\r\n  <\/div>\r\n<\/div>\r\n<style>\r\n  .auth-container {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    max-width: 900px;\r\n    margin: 0 auto;\r\n    background: white;\r\n    padding: 30px;\r\n    border-radius: 16px;\r\n    box-shadow: 0 6px 20px rgba(0,0,0,0.15);\r\n    gap: 30px;\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n    animation: fadeInUp 1s ease forwards;\r\n  }\r\n  @keyframes fadeInUp {\r\n    to {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n  }\r\n  .auth-box {\r\n    flex: 1;\r\n  }\r\n  .auth-box h2 {\r\n    text-align: center;\r\n    margin-bottom: 30px;\r\n    color: #00538B;\r\n    font-size: 28px;\r\n  }\r\n  form {\r\n    display: grid;\r\n    gap: 20px;\r\n  }\r\n  input {\r\n    padding: 12px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 8px;\r\n    font-size: 14px;\r\n    transition: border 0.3s, box-shadow 0.3s;\r\n    width: 100%;\r\n    box-sizing: border-box;\r\n  }\r\n  input:focus {\r\n    border-color: #0056b3;\r\n    box-shadow: 0 0 8px rgba(0,86,179,0.2);\r\n    outline: none;\r\n  }\r\n  button {\r\n    padding: 14px;\r\n    background: #0056b3;\r\n    color: white;\r\n    border: none;\r\n    border-radius: 8px;\r\n    font-size: 16px;\r\n    cursor: pointer;\r\n    transition: background 0.3s, transform 0.2s;\r\n  }\r\n  button:hover {\r\n    background: #003f80;\r\n    transform: translateY(-2px);\r\n  }\r\n  .link {\r\n    text-align: center;\r\n    margin-top: 10px;\r\n    font-size: 14px;\r\n  }\r\n  .link a {\r\n    color: #000;\r\n    text-decoration: none;\r\n    transition: color 0.3s;\r\n  }\r\n  .link a:hover {\r\n    color: ##9B3F00;\r\n  }\r\n  .auth-image img {\r\n    width: 100%;\r\n    max-width: 400px;\r\n    border-radius: 16px;\r\n    object-fit: cover;\r\n    transition: transform 0.3s ease;\r\n  }\r\n  .auth-image img:hover {\r\n    transform: rotate(10deg);\r\n  }\r\n  @media (max-width: 768px) {\r\n    .auth-container {\r\n      flex-direction: column;\r\n    }\r\n  }\r\n  \/* Modal styles *\/\r\n  .modal {\r\n    position: fixed;\r\n    z-index: 1000;\r\n    left: 0; top: 0; width: 100%; height: 100%;\r\n    background: rgba(0,0,0,0.5);\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n  .modal-content {\r\n    background: white;\r\n    padding: 30px 40px;\r\n    border-radius: 16px;\r\n    width: 90%;\r\n    max-width: 400px;\r\n    position: relative;\r\n    box-shadow: 0 6px 20px rgba(0,0,0,0.3);\r\n  }\r\n  .modal-content h3 {\r\n    margin-top: 0;\r\n    color: #003366;\r\n  }\r\n  .modal-content input {\r\n    width: 100%;\r\n    margin-top: 15px;\r\n    padding: 12px;\r\n    font-size: 14px;\r\n    border-radius: 8px;\r\n    border: 1px solid #ccc;\r\n    box-sizing: border-box;\r\n  }\r\n  .modal-content button {\r\n    margin-top: 20px;\r\n    padding: 14px;\r\n    width: 100%;\r\n    background: #0056b3;\r\n    color: white;\r\n    border: none;\r\n    border-radius: 8px;\r\n    font-size: 16px;\r\n    cursor: pointer;\r\n    transition: background 0.3s;\r\n  }\r\n  .modal-content button:hover {\r\n    background: #003f80;\r\n  }\r\n  .close {\r\n    position: absolute;\r\n    top: 12px;\r\n    right: 16px;\r\n    font-size: 28px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n    color: #555;\r\n  }\r\n<\/style>\r\n<script>\r\n  const loginForm = document.getElementById('login-form');\r\n  const loginBtn = document.getElementById('login-btn');\r\n  const errorMsg = document.getElementById('error-message');\r\n  const welcomeMsg = document.getElementById('welcome-message');\r\n  const modal = document.getElementById('forgot-password-modal');\r\n  const forgotLink = document.getElementById('forgot-link');\r\n  const closeModal = modal.querySelector('.close');\r\n  const sendResetBtn = document.getElementById('send-reset-btn');\r\n  const forgotEmailInput = document.getElementById('forgot-email');\r\n  const resetMessage = document.getElementById('reset-message');\r\n  const resetError = document.getElementById('reset-error');\r\n  loginForm.addEventListener('submit', function(e) {\r\n    e.preventDefault();\r\n    let email = document.getElementById('email').value;\r\n    let password = document.getElementById('password').value;\r\n    if (!validateEmail(email) || password.length < 6) {\r\n      errorMsg.style.display = 'block';\r\n      welcomeMsg.style.display = 'none';\r\n      return;\r\n    }\r\n    console.log('Form submitted with:', email, password);\r\n    welcomeMsg.style.display = 'block';\r\n    welcomeMsg.textContent = `Welcome, ${email.split('@')[0]}!`;\r\n    errorMsg.style.display = 'none';\r\n    loginBtn.style.backgroundColor = '#003f80';\r\n  });\r\n  forgotLink.addEventListener('click', function(e) {\r\n    e.preventDefault();\r\n    resetMessage.style.display = 'none';\r\n    resetError.style.display = 'none';\r\n    forgotEmailInput.value = '';\r\n    modal.style.display = 'flex';\r\n  });\r\n  closeModal.addEventListener('click', function() {\r\n    modal.style.display = 'none';\r\n  });\r\n  window.addEventListener('click', function(e) {\r\n    if (e.target === modal) {\r\n      modal.style.display = 'none';\r\n    }\r\n  });\r\n  sendResetBtn.addEventListener('click', function() {\r\n    const email = forgotEmailInput.value.trim();\r\n    if (!validateEmail(email)) {\r\n      resetError.style.display = 'block';\r\n      resetError.textContent = 'Please enter a valid email.';\r\n      resetMessage.style.display = 'none';\r\n      return;\r\n    }\r\n    resetError.style.display = 'none';\r\n    resetMessage.style.display = 'block';\r\n    resetMessage.textContent = `Reset instructions sent to ${email}. Please check your inbox.`;\r\n    setTimeout(() => {\r\n      modal.style.display = 'none';\r\n    }, 4000);\r\n  });\r\n  function validateEmail(email) {\r\n    const regex = \/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,6}$\/;\r\n    return regex.test(email);\r\n  }\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Login to Your Account Login Don\u2019t have an account? Sign up here Forgot your password? Please check your inputs. &times; Reset Your Password Enter your email address below and we&#8217;ll send you instructions to reset your password. Send Reset Link<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1171","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ia-mp.org\/index.php?rest_route=\/wp\/v2\/pages\/1171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ia-mp.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ia-mp.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ia-mp.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ia-mp.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1171"}],"version-history":[{"count":31,"href":"https:\/\/ia-mp.org\/index.php?rest_route=\/wp\/v2\/pages\/1171\/revisions"}],"predecessor-version":[{"id":1571,"href":"https:\/\/ia-mp.org\/index.php?rest_route=\/wp\/v2\/pages\/1171\/revisions\/1571"}],"wp:attachment":[{"href":"https:\/\/ia-mp.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}