{"id":2330,"date":"2025-11-28T22:25:49","date_gmt":"2025-11-28T22:25:49","guid":{"rendered":"https:\/\/plum-hedgehog-609780.hostingersite.com\/?page_id=2330"},"modified":"2025-11-28T23:14:08","modified_gmt":"2025-11-28T23:14:08","slug":"login","status":"publish","type":"page","link":"https:\/\/jazlyperfum.com\/ar\/login\/","title":{"rendered":"login"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"2330\" class=\"elementor elementor-2330\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f7a8bad e-con-full e-flex lakit-col-width-auto-no e-container e-root-container elementor-top-section e-con e-parent\" data-id=\"f7a8bad\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cbaa55c elementor-widget elementor-widget-shortcode\" data-id=\"cbaa55c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <!-- HTML Structure -->\n    <div class=\"jazly-full-wrapper\">\n        <div class=\"jazly-card-container\">\n            \n            <!-- STEP 1: EMAIL -->\n            <div id=\"jazly-step-1\" class=\"jazly-step\">\n                <img decoding=\"async\" src=\"https:\/\/jazlyperfum.com\/wp-content\/uploads\/2025\/11\/cropped-3d561833cf8260a6f5b5ea09bc2f4359986b08bf-1-scaled-1.png\" alt=\"Jazly Logo\" class=\"jazly-logo\">\n                <h2>Sign In<\/h2>\n                <p class=\"header-desc\">Welcome back to Jazly Perfumes<\/p>\n                \n                <form id=\"jazly-email-form\" action=\"\">\n                    <div class=\"input-group\">\n                        <input type=\"email\" id=\"user_email\" name=\"email\" placeholder=\"name@example.com\" required>\n                    <\/div>\n                    <button type=\"submit\" class=\"jazly-btn\" id=\"btn-send-otp\">\n                        <span class=\"btn-text\">Continue<\/span>\n                        <span class=\"loader\"><\/span>\n                    <\/button>\n                    <div class=\"jazly-message\" id=\"msg-step-1\"><\/div>\n                <input type=\"hidden\" name=\"trp-form-language\" value=\"ar\"\/><\/form>\n            <\/div>\n\n            <!-- STEP 2: OTP VERIFICATION -->\n            <div id=\"jazly-step-2\" class=\"jazly-step\" style=\"display: none;\">\n                <img decoding=\"async\" src=\"https:\/\/jazlyperfum.com\/wp-content\/uploads\/2025\/11\/cropped-3d561833cf8260a6f5b5ea09bc2f4359986b08bf-1-scaled-1.png\" alt=\"Jazly Logo\" class=\"jazly-logo\">\n                <h2>Verify Code<\/h2>\n                <p class=\"header-desc\">Enter the 6-digit code sent to <br><span id=\"display-user-email\"><\/span><\/p>\n                \n                <form id=\"jazly-otp-form\" action=\"\">\n                    <div class=\"input-group\">\n                        <input type=\"text\" id=\"otp_code\" name=\"otp\" placeholder=\"XXXXXX\" maxlength=\"6\" pattern=\"\\d*\" required autocomplete=\"off\">\n                    <\/div>\n                    <button type=\"submit\" class=\"jazly-btn\" id=\"btn-verify-otp\">\n                        <span class=\"btn-text\">Submit & Login<\/span>\n                        <span class=\"loader\"><\/span>\n                    <\/button>\n                    <div class=\"jazly-message\" id=\"msg-step-2\"><\/div>\n                    <a href=\"#\" id=\"back-to-email\" class=\"jazly-link\">Change email address<\/a>\n                <input type=\"hidden\" name=\"trp-form-language\" value=\"ar\"\/><\/form>\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n    <!-- CSS Styling (Wide & Professional) -->\n    <style>\n        :root {\n            --jazly-brand: #013B46; \/* \u0644\u0648\u0646 \u0627\u0644\u0628\u0631\u0627\u0646\u062f \u0627\u0644\u0643\u062d\u0644\u064a *\/\n            --border-color: #E2E8F0;\n            --shadow: 0 10px 40px -10px rgba(0,0,0,0.08);\n        }\n\n        .jazly-full-wrapper {\n            width: 100%;\n            min-height: 80vh; \/* \u0645\u0644\u0621 \u0627\u0644\u0634\u0627\u0634\u0629 \u062a\u0642\u0631\u064a\u0628\u0627\u064b *\/\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 0 10px;\n            box-sizing: border-box;\n            direction: ltr;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        }\n\n        .jazly-card-container {\n            background: #ffffff;\n            width: 100%;\n            max-width: 500px; \/* \u0639\u0631\u0636 \u0648\u0627\u0633\u0639 *\/\n            padding: 50px 40px;\n            border: 1px solid var(--border-color); \/* \u062d\u062f\u0648\u062f \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 *\/\n            border-radius: 12px;\n            box-shadow: var(--shadow); \/* \u0638\u0644 \u0646\u0627\u0639\u0645 *\/\n            text-align: center;\n            position: relative;\n        }\n\n        .jazly-logo { width: 140px; height: auto; margin-bottom: 25px; }\n\n        .jazly-card-container h2 { font-size: 28px; font-weight: 700; color: #1a202c; margin: 0 0 10px 0; }\n        \n        .header-desc { color: #718096; font-size: 15px; margin-bottom: 30px; }\n        \n        #display-user-email { color: var(--jazly-brand); font-weight: 600; }\n\n        .input-group { margin-bottom: 20px; }\n        \n        .input-group input {\n            width: 100%;\n            height: 55px;\n            padding: 0 20px;\n            font-size: 16px;\n            border: 1px solid #CBD5E0;\n            border-radius: 8px;\n            background-color: #FAFAFA;\n            box-sizing: border-box;\n            transition: 0.3s;\n        }\n        .input-group input:focus { border-color: var(--jazly-brand); outline: none; background-color: #fff; }\n\n        .jazly-btn {\n            width: 100%;\n            height: 55px;\n            background-color: #013B46 !important; \/* \u0627\u062c\u0628\u0627\u0631 \u0627\u0644\u0644\u0648\u0646 *\/\n            color: #ffffff !important;\n            font-size: 17px;\n            font-weight: 600;\n            border: none;\n            border-radius: 8px;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            gap: 10px;\n            transition: 0.3s;\n        }\n        .jazly-btn:hover { opacity: 0.95; }\n\n        .jazly-message { margin-top: 20px; font-size: 14px; min-height: 20px; }\n        .jazly-message.error { color: #E53E3E; }\n        .jazly-message.success { color: #38A169; }\n\n        .jazly-link { display: inline-block; margin-top: 25px; color: #718096; text-decoration: none; font-size: 14px; }\n        .jazly-link:hover { text-decoration: underline; }\n\n        .loader {\n            width: 20px; height: 20px;\n            border: 3px solid rgba(255,255,255,0.3);\n            border-top: 3px solid #fff;\n            border-radius: 50%;\n            animation: spin 0.8s linear infinite;\n            display: none;\n        }\n        @keyframes spin { to { transform: rotate(360deg); } }\n    <\/style>\n\n    <!-- JavaScript Logic -->\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        const ajaxUrl = 'https:\/\/jazlyperfum.com\/wp-admin\/admin-ajax.php';\n        const step1 = document.getElementById('jazly-step-1');\n        const step2 = document.getElementById('jazly-step-2');\n        \n        let currentEmail = '';\n\n        function setLoading(btnId, isLoading) {\n            const btn = document.getElementById(btnId);\n            const text = btn.querySelector('.btn-text');\n            const loader = btn.querySelector('.loader');\n            btn.disabled = isLoading;\n            if(isLoading) { text.style.display='none'; loader.style.display='block'; } \n            else { text.style.display='block'; loader.style.display='none'; }\n        }\n\n        function showMsg(id, msg, type) {\n            const el = document.getElementById(id);\n            el.innerHTML = msg;\n            el.className = 'jazly-message ' + type;\n        }\n\n        \/\/ 1. Send OTP\n        document.getElementById('jazly-email-form').addEventListener('submit', function(e) {\n            e.preventDefault();\n            const email = document.getElementById('user_email').value;\n            setLoading('btn-send-otp', true);\n            showMsg('msg-step-1', '', '');\n\n            const formData = new FormData();\n            formData.append('action', 'jazly_native_send');\n            formData.append('email', email);\n            \n            fetch(ajaxUrl, { method: 'POST', body: formData })\n            .then(res => res.json())\n            .then(data => {\n                setLoading('btn-send-otp', false);\n                if(data.success) {\n                    currentEmail = email;\n                    document.getElementById('display-user-email').innerText = email;\n                    step1.style.display = 'none';\n                    step2.style.display = 'block';\n                } else {\n                    showMsg('msg-step-1', data.data, 'error');\n                }\n            })\n            .catch(err => {\n                setLoading('btn-send-otp', false);\n                showMsg('msg-step-1', 'Network error. Please try again.', 'error');\n            });\n        });\n\n        \/\/ 2. Verify OTP\n        document.getElementById('jazly-otp-form').addEventListener('submit', function(e) {\n            e.preventDefault();\n            const otp = document.getElementById('otp_code').value;\n            setLoading('btn-verify-otp', true);\n            showMsg('msg-step-2', '', '');\n\n            const formData = new FormData();\n            formData.append('action', 'jazly_native_verify');\n            formData.append('email', currentEmail);\n            formData.append('otp', otp);\n            \n            fetch(ajaxUrl, { method: 'POST', body: formData })\n            .then(res => res.json())\n            .then(data => {\n                if(data.success) {\n                    showMsg('msg-step-2', 'Login successful! Redirecting...', 'success');\n                    window.location.href = '\/'; \/\/ \u0627\u0644\u0630\u0647\u0627\u0628 \u0644\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\n                } else {\n                    setLoading('btn-verify-otp', false);\n                    showMsg('msg-step-2', data.data, 'error');\n                }\n            })\n            .catch(err => {\n                setLoading('btn-verify-otp', false);\n                showMsg('msg-step-2', 'Something went wrong.', 'error');\n            });\n        });\n\n        document.getElementById('back-to-email').addEventListener('click', function(e){\n            e.preventDefault();\n            step2.style.display='none';\n            step1.style.display='block';\n            showMsg('msg-step-1', '', '');\n        });\n    });\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-2330","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jazlyperfum.com\/ar\/wp-json\/wp\/v2\/pages\/2330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jazlyperfum.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jazlyperfum.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jazlyperfum.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jazlyperfum.com\/ar\/wp-json\/wp\/v2\/comments?post=2330"}],"version-history":[{"count":13,"href":"https:\/\/jazlyperfum.com\/ar\/wp-json\/wp\/v2\/pages\/2330\/revisions"}],"predecessor-version":[{"id":2348,"href":"https:\/\/jazlyperfum.com\/ar\/wp-json\/wp\/v2\/pages\/2330\/revisions\/2348"}],"wp:attachment":[{"href":"https:\/\/jazlyperfum.com\/ar\/wp-json\/wp\/v2\/media?parent=2330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}