{"id":22067,"date":"2023-11-08T06:37:18","date_gmt":"2023-11-08T06:37:18","guid":{"rendered":"https:\/\/uwisely.com\/%d8%aa%d8%b3%d8%ac%d9%8a%d9%84-%d8%af%d8%ae%d9%88%d9%84-%d8%a7%d9%84%d9%85%d8%b3%d8%aa%d8%ae%d8%af%d9%85\/"},"modified":"2025-12-03T22:29:57","modified_gmt":"2025-12-03T22:29:57","slug":"user-login","status":"publish","type":"page","link":"https:\/\/atoma-af-upst.uwisely.com\/ar\/user-login\/","title":{"rendered":"\u062a\u0633\u062c\u064a\u0644 \u062f\u062e\u0648\u0644 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645"},"content":{"rendered":"<p class=\"p1\" style=\"text-align: center;\">\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600&display=swap');\n\n.uw-af-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 0px 0px 15px;\n    gap: 25px;\n    width: 310px;\n    background: #FFFFFF;\n    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.08);\n    border-radius: 6px;\n    margin: 40px auto;\n    font-family: 'Poppins', sans-serif;\n    overflow: hidden;\n}\n\n.uw-af-header {\n    width: 100%;\n    height: 161px;\n    background: linear-gradient(180deg, #258EF1 0%, #3BABD1 43.27%, #1229B3 100%);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 15px;\n}\n\n.uw-af-header h1 {\n    color: #FFFFFF;\n    font-size: 24px;\n    font-weight: 600;\n    margin: 0;\n}\n\n.uw-af-body {\n    padding: 0 15px;\n    width: 100%;\n    box-sizing: border-box;\n    text-align: center;\n}\n\n.uw-af-instruction {\n    font-size: 13px;\n    line-height: 20px;\n    color: #181818;\n    margin-bottom: 25px;\n}\n\n.uw-af-msisdn-container {\n    display: flex;\n    align-items: center;\n    width: 272px;\n    height: 45px;\n    border: 1.5px solid #D5EBFF;\n    border-radius: 30px;\n    overflow: hidden;\n    margin: 0 auto;\n    transition: border-color 0.3s ease;\n}\n\n\/* Estado de error (Rojo) *\/\n.uw-af-msisdn-container.invalid { border-color: #EF4444 !important; }\n\/* Estado de \u00e9xito (Verde) *\/\n.uw-af-msisdn-container.valid { border-color: #10B981 !important; }\n\n.uw-af-msisdn-left {\n    display: flex;\n    align-items: center;\n    padding-left: 12px;\n    gap: 8px;\n    color: #808080;\n    font-size: 13px;\n}\n\n.uw-af-msisdn-input-box {\n    flex-grow: 1;\n    height: 100%;\n    border-left: 1.5px solid #D5EBFF;\n    margin-left: 10px;\n    display: flex;\n    align-items: center;\n}\n\n.uw-af-msisdn-input-box input {\n    width: 100%;\n    border: none;\n    outline: none;\n    padding-left: 10px;\n    font-family: 'Poppins';\n    font-size: 13px;\n    color: #181818;\n}\n\n.uw-af-btn-login {\n    width: 228px;\n    height: 50px;\n    background: #258EF1;\n    border-radius: 6px;\n    border: none;\n    color: #FFFFFF;\n    font-weight: 500;\n    font-size: 18px;\n    margin-top: 25px;\n    margin-bottom: 25px;\n    cursor: pointer;\n    opacity: 0.5;\n}\n\n.uw-af-btn-login.active { opacity: 1; }\n\n.uw-af-btn-subscribe {\n    width: 228px;\n    height: 50px;\n    background: #D5EBFF;\n    border-radius: 6px;\n    color: #258EF1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-decoration: none;\n    font-weight: 500;\n    font-size: 18px;\n    margin: 10px auto 0;\n}\n\n.uw-af-footer-text {\n    margin-top: 20px;\n    font-size: 13px;\n    color: #181818;\n}\n\n.uw-af-error-hint {\n    color: #EF4444;\n    font-size: 11px;\n    margin-top: 5px;\n    display: none;\n}\n.uw-af-error-hint.show { display: block; }\n<\/style>\n\n<div class=\"uw-af-wrapper\">\n    <div class=\"uw-af-header\">\n        <div class=\"uw-af-play-icon\">\n            <svg width=\"75\" height=\"75\" viewBox=\"0 0 75 75\" fill=\"none\">\n                <path d=\"M34.375 21.875L30 26.25L38.125 34.375H6.25V40.625H38.125L30 48.75L34.375 53.125L50 37.5L34.375 21.875ZM62.5 59.375H37.5V65.625H62.5C65.9375 65.625 68.75 62.8125 68.75 59.375V15.625C68.75 12.1875 65.9375 9.375 62.5 9.375H37.5V15.625H62.5V59.375Z\" fill=\"white\"\/>\n            <\/svg>\n        <\/div>\n        <h1>Log in<\/h1>\n    <\/div>\n\n    <div class=\"uw-af-body\">\n        <p class=\"uw-af-instruction\">Enter your ATOMA number to receive an OTP code via SMS.<\/p>\n\n        <form method=\"post\" id=\"af-login-form\">\n            <input type=\"hidden\" id=\"uw_af_nonce\" name=\"uw_af_nonce\" value=\"22759e5548\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/ar\/wp-json\/wp\/v2\/pages\/22067\" \/>            <input type=\"hidden\" name=\"uw_action_af\" value=\"1\">\n\n                            <div class=\"uw-af-msisdn-container\" id=\"box-container\">\n                    <div class=\"uw-af-msisdn-left\">\n                        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <path d=\"M22 16.92v3a2 2 0 01-2.18 2 19.86 19.86 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.86 19.86 0 012.08 4.18 2 2 0 014.06 2h3a2 2 0 012 1.72c.12.9.34 1.78.64 2.63a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.45-1.15a2 2 0 012.11-.45c.85.3 1.73.52 2.63.64A2 2 0 0122 16.92z\"\/>\n                        <\/svg>\n                        <span>+93<\/span>\n                    <\/div>\n                    <div class=\"uw-af-msisdn-input-box\">\n                        <input type=\"text\" name=\"msisdn\" id=\"msisdn-field\" placeholder=\"Enter phone number\" autocomplete=\"off\">\n                    <\/div>\n                <\/div>\n                <p id=\"error-msg\" class=\"uw-af-error-hint\">Invalid phone number. Please try again.<\/p>\n                \n                <div id=\"demouser-pass-container\" style=\"display:none; margin-top:15px; width:272px; margin-left:auto; margin-right:auto;\">\n                    <input type=\"password\" name=\"password\" id=\"demouser-pass\" placeholder=\"Enter password\" style=\"width:100%; height:45px; border-radius:30px; border:1.5px solid #D5EBFF; padding:0 15px; outline:none; font-family:'Poppins';\">\n                <\/div>\n\n                <button type=\"submit\" name=\"af_step\" value=\"get_otp\" id=\"login-btn\" class=\"uw-af-btn-login\" disabled>Log in<\/button>\n            \n             <!--<p class=\"uw-af-footer-text\">Not subscribed?<\/p>\n            <a href=\"\/subscribe\" class=\"uw-af-btn-subscribe\">Subscribe<\/a>-->\n        <\/form>\n    <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    const field = document.getElementById('msisdn-field');\n    const box = document.getElementById('box-container');\n    const btn = document.getElementById('login-btn');\n    const error = document.getElementById('error-msg');\n    const demoPass = document.getElementById('demouser-pass-container');\n    \n    if(!field) return;\n\n    field.addEventListener('input', function(e) {\n        const rawVal = e.target.value.trim();\n        const val = rawVal.replace(\/\\D\/g, '');\n\n        \/\/ L\u00f3gica DemoUser\n        if (rawVal.toLowerCase() === 'demouser') {\n            demoPass.style.display = 'block';\n            box.classList.add('valid');\n            box.classList.remove('invalid');\n            error.classList.remove('show');\n            btn.disabled = false;\n            btn.classList.add('active');\n            return;\n        } else {\n            demoPass.style.display = 'none';\n        }\n\n        \/\/ L\u00f3gica Atoma AF: 11 d\u00edgitos con prefijo 93 o 9 d\u00edgitos sin prefijo\n        const isLongValid = (val.length === 11 && val.startsWith('93'));\n        const isShortValid = (val.length === 9 && !val.startsWith('93'));\n        \n        if (val.length > 0) {\n            \/\/ Si tiene el largo correcto\n            if (isLongValid || isShortValid) {\n                box.classList.add('valid');\n                box.classList.remove('invalid');\n                error.classList.remove('show');\n                btn.disabled = false;\n                btn.classList.add('active');\n            } \n            \/\/ Si se pas\u00f3 de 11 d\u00edgitos o es inv\u00e1lido mientras escribe\n            else if (val.length > 11 || (val.length > 0 && val.length < 9)) {\n                box.classList.add('invalid');\n                box.classList.remove('valid');\n                error.classList.add('show');\n                btn.disabled = true;\n                btn.classList.remove('active');\n            }\n        } else {\n            box.classList.remove('valid', 'invalid');\n            error.classList.remove('show');\n            btn.disabled = true;\n            btn.classList.remove('active');\n        }\n    });\n});\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-22067","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/atoma-af-upst.uwisely.com\/ar\/wp-json\/wp\/v2\/pages\/22067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atoma-af-upst.uwisely.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/atoma-af-upst.uwisely.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/atoma-af-upst.uwisely.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atoma-af-upst.uwisely.com\/ar\/wp-json\/wp\/v2\/comments?post=22067"}],"version-history":[{"count":1,"href":"https:\/\/atoma-af-upst.uwisely.com\/ar\/wp-json\/wp\/v2\/pages\/22067\/revisions"}],"predecessor-version":[{"id":24307,"href":"https:\/\/atoma-af-upst.uwisely.com\/ar\/wp-json\/wp\/v2\/pages\/22067\/revisions\/24307"}],"wp:attachment":[{"href":"https:\/\/atoma-af-upst.uwisely.com\/ar\/wp-json\/wp\/v2\/media?parent=22067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}