{"id":10585,"date":"2026-07-09T23:05:14","date_gmt":"2026-07-09T15:05:14","guid":{"rendered":"https:\/\/ecc.ph\/?page_id=10585"},"modified":"2026-08-02T07:44:18","modified_gmt":"2026-08-01T23:44:18","slug":"portal","status":"publish","type":"page","link":"https:\/\/ecc.ph\/tl\/portal\/","title":{"rendered":"Portal"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10585\" class=\"elementor elementor-10585\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d320bec e-flex e-con-boxed e-con e-parent\" data-id=\"d320bec\" 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-7648cc7 elementor-widget elementor-widget-shortcode\" data-id=\"7648cc7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div id=\"eccph-main-system-container\"><div class=\"eccph-auth-wrapper container py-5\">\r\n    <div class=\"row justify-content-center\">\r\n        <div class=\"col-md-7 col-lg-5\">\r\n            <div class=\"card border-0 shadow-lg p-4 bg-white rounded-4 eccph-card\">\r\n                <div class=\"card-body p-2\">\r\n                    \r\n                    <div id=\"eccph-alert-container\" class=\"alert d-none mb-3 py-2 px-3 small\"><\/div>\r\n\r\n                    <!-- Step 1: Input Email Form -->\r\n                    <form id=\"eccph-check-email-form\" class=\"\">\r\n                        <div class=\"text-center mb-4\">\r\n                            <h4 class=\"fw-bold text-eccph-maroon\">ECCPH Authentication<\/h4>\r\n                            <p class=\"text-eccph-gray small\">Enter your email address to proceed<\/p>\r\n                        <\/div>\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"eccph-email-input\" class=\"form-label small fw-semibold text-eccph-gray\">Email Address<\/label>\r\n                            <input type=\"email\" class=\"form-control\" id=\"eccph-email-input\" required placeholder=\"user@eccph.org\">\r\n                        <\/div>\r\n                        <button type=\"submit\" class=\"btn btn-eccph-maroon w-100 py-2 fw-semibold mb-2\" id=\"eccph-check-email-btn\">Next<\/button>\r\n                    <\/form>\r\n\r\n                    <!-- Step 2: Login Form -->\r\n                    <form id=\"eccph-login-form\" class=\"d-none\">\r\n                        <div class=\"text-center mb-4\">\r\n                            <h4 class=\"fw-bold text-eccph-maroon\">Account Login<\/h4>\r\n                            <p class=\"text-eccph-gray small\">Provide your login credentials<\/p>\r\n                        <\/div>\r\n                        <div class=\"mb-3\">\r\n                            <label class=\"form-label small fw-semibold text-eccph-gray\">Account Email<\/label>\r\n                            <input type=\"text\" class=\"form-control-plaintext text-eccph-maroon fw-bold py-0\" id=\"eccph-login-email-display\" readonly>\r\n                        <\/div>\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"eccph-login-password\" class=\"form-label small fw-semibold text-eccph-gray\">Password<\/label>\r\n                            <input type=\"password\" class=\"form-control\" id=\"eccph-login-password\" required>\r\n                        <\/div>\r\n                        <button type=\"submit\" class=\"btn btn-eccph-maroon w-100 py-2 fw-semibold mb-2\">Verify Password<\/button>\r\n                        <button type=\"button\" class=\"btn btn-eccph-gray w-100 py-2 fw-semibold mb-2 eccph-back-to-email\">Go Back<\/button>\r\n                    <\/form>\r\n\r\n                    <!-- Step 2.5: Force Password Change Intercept -->\r\n                    <form id=\"eccph-force-password-form\" class=\"d-none\">\r\n                        <div class=\"text-center mb-4\">\r\n                            <h4 class=\"fw-bold text-eccph-maroon\">Update Password<\/h4>\r\n                            <p class=\"text-eccph-gray small\">For administrative security, you must update your temporary credentials<\/p>\r\n                        <\/div>\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"eccph-force-new-password\" class=\"form-label small fw-semibold text-eccph-gray\">New Password<\/label>\r\n                            <input type=\"password\" class=\"form-control\" id=\"eccph-force-new-password\" required minlength=\"8\">\r\n                        <\/div>\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"eccph-force-confirm-password\" class=\"form-label small fw-semibold text-eccph-gray\">Confirm New Password<\/label>\r\n                            <input type=\"password\" class=\"form-control\" id=\"eccph-force-confirm-password\" required minlength=\"8\">\r\n                        <\/div>\r\n                        <button type=\"submit\" class=\"btn btn-eccph-maroon w-100 py-2 fw-semibold mb-2\">Save and Authenticate<\/button>\r\n                        <button type=\"button\" class=\"btn btn-eccph-gray w-100 py-2 fw-semibold mb-2 eccph-back-to-email\">Abort<\/button>\r\n                    <\/form>\r\n\r\n                    <!-- Step 3: Registration Form -->\r\n                    <form id=\"eccph-register-form\" class=\"d-none\">\r\n                        <div class=\"text-center mb-4\">\r\n                            <h4 class=\"fw-bold text-eccph-maroon\">Sign Up<\/h4>\r\n                            <p class=\"text-eccph-gray small\">All fields except Middle Name are required<\/p>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"row\">\r\n                            <div class=\"col-md-6 mb-3\">\r\n                                <label for=\"eccph-reg-firstname\" class=\"form-label small fw-semibold text-eccph-gray\">First Name<\/label>\r\n                                <input type=\"text\" class=\"form-control\" id=\"eccph-reg-firstname\" required>\r\n                            <\/div>\r\n                            <div class=\"col-md-6 mb-3\">\r\n                                <label for=\"eccph-reg-lastname\" class=\"form-label small fw-semibold text-eccph-gray\">Last Name<\/label>\r\n                                <input type=\"text\" class=\"form-control\" id=\"eccph-reg-lastname\" required>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"eccph-reg-middlename\" class=\"form-label small fw-semibold text-eccph-gray\">Middle Name <span class=\"text-muted\">(Optional)<\/span><\/label>\r\n                            <input type=\"text\" class=\"form-control\" id=\"eccph-reg-middlename\">\r\n                        <\/div>\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"eccph-reg-email\" class=\"form-label small fw-semibold text-eccph-gray\">Email Address<\/label>\r\n                            <input type=\"email\" class=\"form-control bg-light\" id=\"eccph-reg-email\" required readonly>\r\n                        <\/div>\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"eccph-reg-password\" class=\"form-label small fw-semibold text-eccph-gray\">Password<\/label>\r\n                            <input type=\"password\" class=\"form-control\" id=\"eccph-reg-password\" required>\r\n                        <\/div>\r\n                        <div class=\"mb-3\">\r\n                            <label for=\"eccph-reg-confirm-password\" class=\"form-label small fw-semibold text-eccph-gray\">Confirm Password<\/label>\r\n                            <input type=\"password\" class=\"form-control\" id=\"eccph-reg-confirm-password\" required>\r\n                        <\/div>\r\n                        \r\n                        <button type=\"submit\" class=\"btn btn-eccph-maroon w-100 py-2 fw-semibold mb-2\">Create Account<\/button>\r\n                        <button type=\"button\" class=\"btn btn-eccph-gray w-100 py-2 fw-semibold mb-2 eccph-back-to-email\">Cancel<\/button>\r\n                    <\/form>\r\n\r\n                    <!-- Step 4: First Time \/ Forced Setup 2FA Form -->\r\n                    <div id=\"eccph-2fa-setup-form\" class=\"d-none text-center\">\r\n                        <h4 class=\"fw-bold text-eccph-maroon mb-2\">Setup 2FA Security<\/h4>\r\n                        <p class=\"text-eccph-gray small mb-3\">Enforce mandatory multi-factor device configuration authentication parameters<\/p>\r\n                        \r\n                        <div class=\"text-start bg-light p-3 rounded border mb-3 small\">\r\n                            <p class=\"mb-2\"><strong>Device Onboarding Steps:<\/strong><\/p>\r\n                            <ol class=\"mb-0 ps-3\">\r\n                                <li class=\"mb-1\">Install Google Authenticator via your mobile device app store ecosystem.<\/li>\r\n                                <li class=\"mb-1\">Select the plus (+) trigger inside the client dashboard and choose Scan a QR code.<\/li>\r\n                                <li class=\"mb-0\">Point your device camera at the matrix code representation below, and enter your verification token.<\/li>\r\n                            <\/ol>\r\n                        <\/div>\r\n\r\n                        <div class=\"p-3 bg-light rounded-3 d-inline-block border mb-3\">\r\n                            <img decoding=\"async\" id=\"eccph-2fa-qr\" src=\"\" alt=\"Google Authenticator QR Code\" class=\"img-fluid\" style=\"width:180px; height:180px;\">\r\n                        <\/div>\r\n                        \r\n                        <p class=\"text-muted small mb-1\">Or enter this setup key manually:<\/p>\r\n                        <div class=\"mb-3 d-flex flex-column align-items-center\">\r\n                            <span id=\"eccph-secret-text\" class=\"eccph-secret-code fw-semibold mb-2\"><\/span>\r\n                            <button type=\"button\" id=\"eccph-copy-secret-btn\" class=\"btn btn-sm btn-outline-secondary px-3\">Copy Key<\/button>\r\n                        <\/div>\r\n                        \r\n                        <form id=\"eccph-2fa-setup-action-form\">\r\n                            <input type=\"hidden\" id=\"eccph-setup-secret-hidden\" value=\"\">\r\n                            <div class=\"mb-3\">\r\n                                <label for=\"eccph-setup-code-input\" class=\"form-label small fw-semibold text-eccph-gray\">6-Digit Google Authenticator Code<\/label>\r\n                                <input type=\"text\" id=\"eccph-setup-code-input\" class=\"form-control eccph-otp-input\" placeholder=\"000000\" maxlength=\"6\" pattern=\"[0-9]{6}\" inputmode=\"numeric\" required>\r\n                            <\/div>\r\n                            <button type=\"submit\" class=\"btn btn-eccph-maroon w-100 py-2 fw-semibold\">Pair Device & Login<\/button>\r\n                                                    <\/form>\r\n                    <\/div>\r\n\r\n                    <!-- Step 5: Returning User 2FA Verification -->\r\n                    <div id=\"eccph-2fa-verify-form\" class=\"d-none text-center\">\r\n                        <h4 class=\"fw-bold text-eccph-maroon mb-2\">Security Verification<\/h4>\r\n                        <p class=\"text-eccph-gray small mb-4\">Provide your active Google Authenticator TOTP token<\/p>\r\n                        \r\n                        <form id=\"eccph-2fa-verify-action-form\">\r\n                            <div class=\"mb-4\">\r\n                                <label for=\"eccph-verify-code-input\" class=\"form-label small fw-semibold text-eccph-gray\">Authentication Code<\/label>\r\n                                <input type=\"text\" id=\"eccph-verify-code-input\" class=\"form-control eccph-otp-input\" placeholder=\"000000\" maxlength=\"6\" pattern=\"[0-9]{6}\" inputmode=\"numeric\" required>\r\n                            <\/div>\r\n                            <button type=\"submit\" class=\"btn btn-eccph-maroon w-100 py-2 fw-semibold mb-2\">Confirm Code<\/button>\r\n                            <button type=\"button\" class=\"btn btn-eccph-gray w-100 py-2 fw-semibold mb-2 eccph-back-to-email\">Abort<\/button>\r\n                        <\/form>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div><\/div><\/div>\n\t\t\t\t\t\t<\/div>\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":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/template-pagebuilder-full-width.php","meta":{"_acf_changed":false,"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-10585","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/ecc.ph\/tl\/wp-json\/wp\/v2\/pages\/10585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ecc.ph\/tl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ecc.ph\/tl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ecc.ph\/tl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ecc.ph\/tl\/wp-json\/wp\/v2\/comments?post=10585"}],"version-history":[{"count":22,"href":"https:\/\/ecc.ph\/tl\/wp-json\/wp\/v2\/pages\/10585\/revisions"}],"predecessor-version":[{"id":10886,"href":"https:\/\/ecc.ph\/tl\/wp-json\/wp\/v2\/pages\/10585\/revisions\/10886"}],"wp:attachment":[{"href":"https:\/\/ecc.ph\/tl\/wp-json\/wp\/v2\/media?parent=10585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}