{"id":640,"date":"2024-11-27T19:15:22","date_gmt":"2024-11-27T18:15:22","guid":{"rendered":"https:\/\/prefrlime.mk\/?page_id=640"},"modified":"2025-04-11T15:27:00","modified_gmt":"2025-04-11T13:27:00","slug":"login","status":"publish","type":"page","link":"https:\/\/prefrlime.mk\/sr\/login\/","title":{"rendered":"\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u0435 \u0441\u0432\u043e\u043c \u043d\u0430\u043b\u043e\u0433\u0443"},"content":{"rendered":"        <style>\n        .auth-container {\n            max-width: 400px;\n            margin: 0 auto;\n            font-family: Arial, sans-serif;\n        }\n        .auth-tabs {\n            display: flex;\n            margin-bottom: -1px;\n        }\n        .auth-tab-btn {\n            padding: 12px 20px;\n            background: #f5f5f5;\n            border: 1px solid #ddd;\n            border-bottom: none;\n            border-radius: 5px 5px 0 0;\n            cursor: pointer;\n            font-size: 15px;\n            margin-right: 5px;\n        }\n        .auth-tab-btn.active {\n            background: #fff;\n            border-bottom: 1px solid #fff;\n            position: relative;\n        }\n        .auth-tab-btn.active::after {\n            content: '';\n            position: absolute;\n            bottom: -1px;\n            left: 0;\n            right: 0;\n            height: 2px;\n            background: #3498db;\n        }\n        .auth-form {\n            background: #fff;\n            padding: 20px;\n            border: 1px solid #ddd;\n            border-radius: 0 5px 5px 5px;\n        }\n        .form-title {\n            margin: 0 0 20px 0;\n            padding: 0;\n            font-size: 20px;\n            color: #333;\n            font-weight: 600;\n        }\n\n        .auth-form input:not([type=\"file\"]):not([type=\"checkbox\"]) {\n            width: calc(100% - 24px);\n            padding: 10px 12px;\n            margin: 8px 0;\n            border: 1px solid #ddd;\n            border-radius: 4px;\n            font-size: 14px;\n        }\n        .file-input-wrapper {\n            display: flex;\n            align-items: center;\n            margin: 8px 0;\n        }\n        .file-input-wrapper label {\n            flex: 1;\n            padding: 10px 12px;\n            border: 1px solid #ddd;\n            border-radius: 4px 0 0 4px;\n            background: #f9f9f9;\n            margin-right: -1px;\n            font-size: 14px;\n            color: #555;\n        }\n        .file-input-wrapper button {\n            padding: 10px 15px;\n            background: #f0f0f0;\n            border: 1px solid #ddd;\n            border-radius: 0 4px 4px 0;\n            cursor: pointer;\n            font-size: 14px;\n        }\n        .file-input-wrapper button:hover {\n            background: #e9e9e9;\n        }\n        .file-name {\n            font-size: 12px;\n            color: #666;\n            margin-top: -5px;\n            margin-bottom: 5px;\n        }\n        \/* Role selection styling *\/\n        .role-option {\n            display: flex;\n            align-items: center;\n            cursor: pointer;\n            padding: 10px 15px;\n            border: 2px solid #ddd;\n            border-radius: 6px;\n            transition: all 0.3s ease;\n        }\n        .role-option:hover {\n            border-color: #3498db;\n        }\n        .role-option input[type=\"radio\"] {\n            display: none;\n        }\n        .role-label {\n            position: relative;\n            padding-left: 30px;\n            font-size: 14px;\n            color: #555;\n        }\n        .role-label::before {\n            content: '';\n            position: absolute;\n            left: 0;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 18px;\n            height: 18px;\n            border: 2px solid #ddd;\n            border-radius: 50%;\n            background: white;\n            transition: all 0.3s ease;\n        }\n        .role-option input[type=\"radio\"]:checked + .role-label::before {\n            border-color: #3498db;\n            background: #3498db;\n            box-shadow: inset 0 0 0 3px white;\n        }\n        .role-option input[type=\"radio\"]:checked + .role-label {\n            color: #3498db;\n            font-weight: 600;\n        }\n\n        .auth-form button[type=\"submit\"] {\n            width: 100%;\n            padding: 12px;\n            margin-top: 15px;\n            background: #3498db;\n            color: white;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n            font-size: 15px;\n        }\n        .auth-footer {\n            font-size: 13px;\n            margin-top: 15px;\n            text-align: center;\n        }\n        .auth-footer a {\n            color: #3498db;\n            text-decoration: none;\n        }\n        .gdpr-checkbox {\n            margin: 15px 0;\n            display: flex;\n            align-items: center;\n        }\n        .gdpr-checkbox input {\n            width: auto;\n            margin-right: 8px;\n        }\n        .gdpr-checkbox label {\n            font-size: 13px;\n        }\n        .gdpr-checkbox a {\n            color: #3498db;\n            text-decoration: none;\n        }\n        .auth-error {\n            color: #1d2327;\n            background: #f0f6fc;\n            padding: 12px 15px;\n            margin-bottom: 15px;\n            border-radius: 4px;\n            font-size: 14px;\n            line-height: 1.5;\n            border-left: 3px solid #72aee6;\n        }\n        .auth-error a {\n            color: #3498db;\n            text-decoration: none;\n        }\n        .auth-error a:hover {\n            text-decoration: underline;\n        }\n        .auth-success {\n            color: #00a32a;\n            background: #f0f7f1;\n            padding: 10px 15px;\n            margin-bottom: 15px;\n            border-radius: 4px;\n            font-size: 14px;\n        }\n        .back-to-login {\n            margin: 15px 0;\n            text-align: center;\n            font-size: 13px;\n        }\n        .back-to-login a {\n            color: #3498db;\n            text-decoration: none;\n        }\n            .remember-me {\n                display: flex;\n                align-items: center;\n                margin: 15px 0;\n           }\n           .remember-me input {\n                width: auto;\n                margin-right: 8px;\n           }\n           .remember-me label {\n                font-size: 13px;\n                color: #555;\n           }\n        #resend-verification-form,\n        #reset-password-form {\n            padding: 20px;\n        }\n        .forgot-password {\n            margin-left: auto;\n            color: #3498db;\n            text-decoration: none;\n            font-size: 13px;\n        }\n        <\/style>\n\n        <div class=\"auth-container\">\n            <!-- Tabs -->\n            <div class=\"auth-tabs\">\n                <button class=\"auth-tab-btn active\" data-tab=\"login\">Login<\/button>\n                <button class=\"auth-tab-btn\" data-tab=\"register\">Register<\/button>\n            <\/div>\n\n            <!-- Login Form -->\n            <form id=\"login-form\" class=\"auth-form\" method=\"POST\">\n                <h2 class=\"form-title\">Login to your account<\/h2>\n                <input type=\"email\" name=\"login_email\" placeholder=\"Email *\" required>\n                <input type=\"password\" name=\"login_password\" placeholder=\"Password *\" required>\n                      <div class=\"remember-me\">\n                           <input type=\"checkbox\" id=\"remember\" name=\"remember\" value=\"1\">\n                           <label for=\"remember\">Remember me<\/label>\n                           <a href=\"#\" onclick=\"showResetPasswordForm(); return false;\" class=\"forgot-password\">Forgot password?<\/a>\n                      <\/div>\n                      <button type=\"submit\" name=\"login\">Login<\/button>\n            <\/form>\n\n            <!-- Registration Form -->\n            <form id=\"register-form\" class=\"auth-form\" method=\"POST\" enctype=\"multipart\/form-data\" style=\"display:none\">\n                <h2 class=\"form-title\">Create new account<\/h2>\n                <!-- Username field removed - will be generated from email -->\n                <input type=\"text\" name=\"display_name\" placeholder=\"User Name *\" required>\n                <input type=\"email\" name=\"email\" placeholder=\"Email *\" required>\n                <input type=\"password\" name=\"password\" placeholder=\"Password *\" required>\n                <input type=\"tel\" name=\"profile_number\" placeholder=\"Phone Number *\" required>\n                <div class=\"field-description\" style=\"font-size: 12px; color: #666; margin-top: -5px; margin-bottom: 10px;\">\n                    Phone number is only shared between drivers and passengers who will share a ride.\n                    <a href=\"https:\/\/prefrlime.mk\/index.php\/faq\/\" target=\"_blank\" style=\"color: #3498db; text-decoration: none;\">More info<\/a>\n                <\/div>\n\n                <input type=\"url\" name=\"facebook_profile\" placeholder=\"Paste your Facebook link here\">\n                <div class=\"field-description\" style=\"font-size: 12px; color: #666; margin-top: -5px; margin-bottom: 10px;\">\n                    Your Facebook profile helps build trust with other users\n                <\/div>\n\n                <!-- User Role Selection -->\n                <div style=\"margin: 15px 0;\">\n                    <div style=\"font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #333;\">I will use Prefrlime primarily as: <span style=\"color: #d63638;\">*<\/span><\/div>\n                    <div style=\"display: flex; gap: 20px; margin-bottom: 5px;\">\n                        <label class=\"role-option\">\n                            <input type=\"radio\" name=\"user_role\" value=\"passenger\" required>\n                            <span class=\"role-label\">Passenger<\/span>\n                        <\/label>\n                        <label class=\"role-option\">\n                            <input type=\"radio\" name=\"user_role\" value=\"driver\" required>\n                            <span class=\"role-label\">Driver<\/span>\n                        <\/label>\n                    <\/div>\n                    <div style=\"font-size: 12px; color: #666;\">\n                        You can change this later in your account settings\n                    <\/div>\n                <\/div>\n\n                <div class=\"file-input-wrapper\">\n                    <label for=\"profile_picture\">Profile Picture<\/label>\n                    <input type=\"file\" name=\"profile_picture\" id=\"profile_picture\" accept=\"image\/*\" style=\"display: none;\">\n                    <button type=\"button\" onclick=\"document.getElementById('profile_picture').click()\">Browse<\/button>\n                <\/div>\n                <div id=\"file-name\" class=\"file-name\"><\/div>\n                <div style=\"font-size: 12px; color: #666; margin-top: -5px; margin-bottom: 10px;\">\n                    Maximum file size: 1MB\n                <\/div>\n\n                <div class=\"gdpr-checkbox\">\n                    <input type=\"checkbox\" id=\"gdpr_consent\" name=\"gdpr_consent\" required>\n                    <label for=\"gdpr_consent\">\n                        I agree to the <a href=\"\/index.php\/terms\" target=\"_blank\">Terms<\/a>\n                        and <a href=\"\/index.php\/privacy-policy\" target=\"_blank\">Privacy Policy<\/a>\n                    <\/label>\n                <\/div>\n\n                <button type=\"submit\" name=\"register\">Register<\/button>\n            <\/form>\n            <!-- Reset Password Form -->\n            <form id=\"reset-password-form\" class=\"auth-form\" method=\"POST\" style=\"display:none;\">\n                <h2 class=\"form-title\">Reset your password<\/h2>\n                <input type=\"email\" name=\"reset_email\" placeholder=\"Your email *\" required>\n                <button type=\"submit\" name=\"request_reset\">Request Reset Link<\/button>\n                <div class=\"back-to-login\">\n                    <a href=\"#\" onclick=\"showLoginForm()\">\u2190 Back to login<\/a>\n                <\/div>\n            <\/form>\n\n            <!-- Resend Verification Form -->\n            <form id=\"resend-verification-form\" class=\"auth-form\" method=\"POST\" style=\"display:none;\">\n                <h2 class=\"form-title\">Resend activation link<\/h2>\n                <p style=\"margin:-10px 0 15px 0; color:#666; font-size:14px;\">\n                    Enter your email to receive a new verification link\n                <\/p>\n                <input type=\"email\" name=\"email\" placeholder=\"Your email *\" required>\n                <button type=\"submit\" name=\"resend_verification\">Resend Verification<\/button>\n                <div class=\"back-to-login\">\n                    <a href=\"#\" onclick=\"showLoginForm()\">\u2190 Back to login<\/a>\n                <\/div>\n            <\/form>\n        <\/div>\n\n        <script>\n        \/\/ Tab switching\n        document.querySelectorAll('.auth-tab-btn').forEach(btn => {\n            btn.addEventListener('click', function() {\n                \/\/ Update active tab styling\n                document.querySelectorAll('.auth-tab-btn').forEach(t => t.classList.remove('active'));\n                this.classList.add('active');\n\n                \/\/ Show selected form\n                document.querySelector('.auth-tabs').style.display = 'flex';\n                document.querySelectorAll('.auth-form').forEach(f => f.style.display = 'none');\n                document.getElementById(this.dataset.tab + '-form').style.display = 'block';\n            });\n        });\n\n        \/\/ Show selected filename and validate size\n        document.getElementById('profile_picture').addEventListener('change', function(e) {\n            if (e.target.files[0]) {\n                var fileName = e.target.files[0].name;\n                var fileSize = e.target.files[0].size;\n                var maxSize = 1048576; \/\/ 1MB in bytes\n\n                if (fileSize > maxSize) {\n                    alert('File size must be less than 1MB. Please choose a smaller file.');\n                    e.target.value = ''; \/\/ Clear the file input\n                    document.getElementById('file-name').textContent = 'No file selected';\n                    return;\n                }\n\n                document.getElementById('file-name').textContent = fileName;\n            } else {\n                document.getElementById('file-name').textContent = 'No file selected';\n            }\n        });\n\n        \/\/ Show resend verification form and hide tabs\n        function showResendVerification() {\n            document.querySelector('.auth-tabs').style.display = 'none';\n            document.querySelectorAll('.auth-form').forEach(f => f.style.display = 'none');\n            document.getElementById('resend-verification-form').style.display = 'block';\n        }\n\n        \/\/ Show login form and tabs\n        function showLoginForm() {\n            document.querySelector('.auth-tabs').style.display = 'flex';\n            document.querySelectorAll('.auth-form').forEach(f => f.style.display = 'none');\n            document.getElementById('login-form').style.display = 'block';\n        }\n\n        \/\/ Show reset password form\n        function showResetPasswordForm() {\n            document.querySelector('.auth-tabs').style.display = 'none';\n            document.querySelectorAll('.auth-form').forEach(f => f.style.display = 'none');\n            document.getElementById('reset-password-form').style.display = 'block';\n        }\n\n        \/\/ Form validation for role selection\n        document.getElementById('register-form').addEventListener('submit', function(e) {\n            var roleSelected = document.querySelector('input[name=\"user_role\"]:checked');\n            if (!roleSelected) {\n                e.preventDefault();\n                alert('Please select if you are a driver or passenger.');\n                return false;\n            }\n        });\n        <\/script>\n        \n\n\n\n<p class=\"wp-block-paragraph\"><\/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":"wp-custom-template-login-and-account-pages","meta":{"footnotes":""},"class_list":["post-640","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/prefrlime.mk\/sr\/wp-json\/wp\/v2\/pages\/640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prefrlime.mk\/sr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/prefrlime.mk\/sr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/prefrlime.mk\/sr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prefrlime.mk\/sr\/wp-json\/wp\/v2\/comments?post=640"}],"version-history":[{"count":0,"href":"https:\/\/prefrlime.mk\/sr\/wp-json\/wp\/v2\/pages\/640\/revisions"}],"wp:attachment":[{"href":"https:\/\/prefrlime.mk\/sr\/wp-json\/wp\/v2\/media?parent=640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}