{"id":7131,"date":"2025-12-19T00:45:39","date_gmt":"2025-12-19T00:45:39","guid":{"rendered":"https:\/\/realfiberbrows.com\/live\/?page_id=7131"},"modified":"2025-12-19T00:57:38","modified_gmt":"2025-12-19T00:57:38","slug":"login-register","status":"publish","type":"page","link":"https:\/\/realfiberbrows.com\/live\/login-register\/","title":{"rendered":""},"content":{"rendered":"    <style>\r\n        \/* Container Tengah *\/\r\n        .rfb-wrapper {\r\n            max-width: 450px;\r\n            margin: 40px auto;\r\n            padding: 0 15px;\r\n            font-family: inherit;\r\n        }\r\n        \r\n        \/* Judul *\/\r\n        .rfb-title {\r\n            text-align: center;\r\n            font-size: 32px;\r\n            margin-bottom: 30px;\r\n            font-weight: 400;\r\n        }\r\n\r\n        \/* Form Groups *\/\r\n        .rfb-form-group { margin-bottom: 20px; }\r\n        .rfb-form-group label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px; }\r\n        .rfb-form-group input { \r\n            width: 100%; \r\n            padding: 12px; \r\n            border: 1px solid #ddd; \r\n            border-radius: 0; \r\n            font-size: 14px;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        \/* Tombol Button Wrapper *\/\r\n        .rfb-btn-actions {\r\n            display: flex;\r\n            gap: 10px;\r\n            margin-top: 20px;\r\n        }\r\n\r\n        \/* Tombol Hitam (Primary) *\/\r\n        .rfb-btn { \r\n            background: #000; \r\n            color: #fff; \r\n            padding: 14px 20px; \r\n            border: 1px solid #000; \r\n            cursor: pointer; \r\n            flex: 1;\r\n            font-weight: 600;\r\n            transition: 0.3s;\r\n            text-align: center;\r\n        }\r\n        .rfb-btn:hover { background: #333; border-color: #333; color: #fff; }\r\n        .rfb-btn:disabled { background: #ccc; border-color: #ccc; cursor: not-allowed; }\r\n\r\n        \/* Tombol Putih (Secondary\/Toggle) *\/\r\n        .rfb-btn-outline {\r\n            background: #fff;\r\n            color: #000;\r\n            border: 1px solid #000;\r\n            flex: 1;\r\n        }\r\n        .rfb-btn-outline:hover { background: #f5f5f5; color: #000; }\r\n\r\n        \/* Button Kecil untuk OTP *\/\r\n        .rfb-btn-otp {\r\n            background: #444;\r\n            color: white;\r\n            padding: 8px 15px;\r\n            font-size: 12px;\r\n            border: none;\r\n            margin-top: 5px;\r\n            cursor: pointer;\r\n            width: 100%;\r\n        }\r\n\r\n        \/* Utilities *\/\r\n        .rfb-hidden { display: none; }\r\n        .rfb-message { margin-top: 15px; font-size: 13px; text-align: center; }\r\n        .success-msg { color: green; }\r\n        .error-msg { color: red; }\r\n        .otp-sent-info { font-size: 12px; color: green; margin-top: 5px; display:none; }\r\n        \r\n        \/* Link Lupa Password *\/\r\n        .rfb-lost-pass {\r\n            display: block;\r\n            text-align: right;\r\n            font-size: 12px;\r\n            margin-top: 5px;\r\n            color: #666;\r\n            text-decoration: underline;\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"rfb-wrapper\">\r\n        \r\n        <div id=\"view-login\">\r\n            <h2 class=\"rfb-title\">Login<\/h2>\r\n            <form id=\"rfb-login-form\">\r\n                <div class=\"rfb-form-group\">\r\n                    <label>Email address *<\/label>\r\n                    <input type=\"text\" name=\"log_username\" required>\r\n                <\/div>\r\n                <div class=\"rfb-form-group\">\r\n                    <label>Password *<\/label>\r\n                    <input type=\"password\" name=\"log_password\" required>\r\n                    <a href=\"\/my-account\/lost-password\/\" class=\"rfb-lost-pass\">Lost your password?<\/a>\r\n                <\/div>\r\n                \r\n                <div class=\"rfb-btn-actions\">\r\n                    <button type=\"submit\" class=\"rfb-btn\">Log in<\/button>\r\n                    <button type=\"button\" class=\"rfb-btn rfb-btn-outline\" onclick=\"toggleRFBForm('register')\">Register<\/button>\r\n                <\/div>\r\n                <div id=\"login-message\" class=\"rfb-message\"><\/div>\r\n            <\/form>\r\n        <\/div>\r\n\r\n        <div id=\"view-register\" class=\"rfb-hidden\">\r\n            <h2 class=\"rfb-title\">Register<\/h2>\r\n            <form id=\"rfb-register-form\">\r\n                <div class=\"rfb-form-group\">\r\n                    <label>Nama Lengkap *<\/label>\r\n                    <input type=\"text\" name=\"reg_name\" required>\r\n                <\/div>\r\n\r\n                <div class=\"rfb-form-group\">\r\n                    <label>Email (Gmail Only) *<\/label>\r\n                    <input type=\"email\" name=\"reg_email\" id=\"reg_email\" placeholder=\"example@gmail.com\" required>\r\n                    <button type=\"button\" id=\"send-otp-btn\" class=\"rfb-btn-otp\">Kirim Kode Verifikasi<\/button>\r\n                    <div class=\"otp-sent-info\" id=\"otp-info-text\">Kode terkirim! Cek Inbox\/Spam email kamu.<\/div>\r\n                <\/div>\r\n\r\n                <div class=\"rfb-form-group rfb-hidden\" id=\"otp-input-group\">\r\n                    <label>Kode Verifikasi *<\/label>\r\n                    <input type=\"text\" name=\"reg_otp\" placeholder=\"Masukan 6 digit kode dari email\">\r\n                <\/div>\r\n\r\n                <div class=\"rfb-form-group\">\r\n                    <label>No WhatsApp *<\/label>\r\n                    <input type=\"text\" name=\"reg_wa\" required>\r\n                <\/div>\r\n\r\n                <div class=\"rfb-form-group\">\r\n                    <label>Password *<\/label>\r\n                    <input type=\"password\" name=\"reg_password\" required>\r\n                <\/div>\r\n\r\n                <div class=\"rfb-btn-actions\">\r\n                    <button type=\"submit\" class=\"rfb-btn\" id=\"reg-submit-btn\" disabled>Daftar<\/button>\r\n                    <button type=\"button\" class=\"rfb-btn rfb-btn-outline\" onclick=\"toggleRFBForm('login')\">Login<\/button>\r\n                <\/div>\r\n                <div id=\"reg-message\" class=\"rfb-message\"><\/div>\r\n            <\/form>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <script>\r\n    \/\/ FUNGSI TOGGLE TAMPILAN\r\n    function toggleRFBForm(view) {\r\n        if(view === 'register') {\r\n            document.getElementById('view-login').style.display = 'none';\r\n            document.getElementById('view-register').style.display = 'block';\r\n        } else {\r\n            document.getElementById('view-register').style.display = 'none';\r\n            document.getElementById('view-login').style.display = 'block';\r\n        }\r\n    }\r\n\r\n    jQuery(document).ready(function($) {\r\n        \/\/ 1. PROSES LOGIN\r\n        $('#rfb-login-form').on('submit', function(e) {\r\n            e.preventDefault();\r\n            var form = $(this);\r\n            var btn = form.find('button[type=\"submit\"]');\r\n            btn.text('Loading...').prop('disabled', true);\r\n\r\n            $.post('https:\/\/realfiberbrows.com\/live\/wp-admin\/admin-ajax.php', {\r\n                action: 'rfb_process_login',\r\n                data: form.serialize()\r\n            }, function(response) {\r\n                if(response.success) {\r\n                    $('#login-message').html('<span class=\"success-msg\">Login sukses! Mengalihkan...<\/span>');\r\n                    window.location.href = response.data.redirect;\r\n                } else {\r\n                    btn.text('Log in').prop('disabled', false);\r\n                    $('#login-message').html('<span class=\"error-msg\">' + response.data + '<\/span>');\r\n                }\r\n            });\r\n        });\r\n\r\n        \/\/ 2. KIRIM OTP\r\n        $('#send-otp-btn').on('click', function(e) {\r\n            e.preventDefault();\r\n            var email = $('#reg_email').val();\r\n            \r\n            if(!email) { alert('Isi email dulu bro!'); return; }\r\n            if(!email.includes('@gmail.com')) { alert('Harus pakai @gmail.com bro!'); return; }\r\n\r\n            var btn = $(this);\r\n            btn.text('Mengirim Kode...').prop('disabled', true);\r\n\r\n            $.post('https:\/\/realfiberbrows.com\/live\/wp-admin\/admin-ajax.php', {\r\n                action: 'rfb_send_otp',\r\n                email: email\r\n            }, function(response) {\r\n                if(response.success) {\r\n                    btn.text('Kirim Ulang Kode').prop('disabled', false);\r\n                    $('#otp-info-text').show();\r\n                    $('#otp-input-group').slideDown();\r\n                    $('#reg-submit-btn').prop('disabled', false); \/\/ Aktifkan tombol daftar\r\n                } else {\r\n                    btn.text('Kirim Kode Verifikasi').prop('disabled', false);\r\n                    alert(response.data);\r\n                }\r\n            });\r\n        });\r\n\r\n        \/\/ 3. PROSES REGISTER\r\n        $('#rfb-register-form').on('submit', function(e) {\r\n            e.preventDefault();\r\n            var form = $(this);\r\n            var btn = form.find('button[type=\"submit\"]');\r\n            btn.text('Membuat Akun...').prop('disabled', true);\r\n\r\n            $.post('https:\/\/realfiberbrows.com\/live\/wp-admin\/admin-ajax.php', {\r\n                action: 'rfb_process_register',\r\n                data: form.serialize()\r\n            }, function(response) {\r\n                if(response.success) {\r\n                    $('#reg-message').html('<span class=\"success-msg\">Akun berhasil dibuat! Mengalihkan...<\/span>');\r\n                    window.location.href = response.data.redirect;\r\n                } else {\r\n                    btn.text('Daftar').prop('disabled', false);\r\n                    $('#reg-message').html('<span class=\"error-msg\">' + response.data + '<\/span>');\r\n                }\r\n            });\r\n        });\r\n    });\r\n    <\/script>\r\n    \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-7131","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/realfiberbrows.com\/live\/wp-json\/wp\/v2\/pages\/7131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/realfiberbrows.com\/live\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/realfiberbrows.com\/live\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/realfiberbrows.com\/live\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/realfiberbrows.com\/live\/wp-json\/wp\/v2\/comments?post=7131"}],"version-history":[{"count":2,"href":"https:\/\/realfiberbrows.com\/live\/wp-json\/wp\/v2\/pages\/7131\/revisions"}],"predecessor-version":[{"id":7134,"href":"https:\/\/realfiberbrows.com\/live\/wp-json\/wp\/v2\/pages\/7131\/revisions\/7134"}],"wp:attachment":[{"href":"https:\/\/realfiberbrows.com\/live\/wp-json\/wp\/v2\/media?parent=7131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}