{"id":57,"date":"2026-02-09T11:20:05","date_gmt":"2026-02-09T11:20:05","guid":{"rendered":"http:\/\/wheelfront.teeztech.com\/?page_id=57"},"modified":"2026-03-28T22:01:29","modified_gmt":"2026-03-28T22:01:29","slug":"auth","status":"publish","type":"page","link":"https:\/\/wheelfront.com\/marketplace\/auth\/","title":{"rendered":"Login &#038; Registration"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"57\" class=\"elementor elementor-57\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-730c9f5 e-flex e-con-boxed e-con e-parent\" data-id=\"730c9f5\" 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-b02ac49 elementor-widget elementor-widget-shortcode\" data-id=\"b02ac49\" 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\">        <div class=\"wheelfront-auth-wrap\"\n            style=\"max-width: 580px; margin: 40px auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\">\n\n            <!-- Login Container -->\n            <div id=\"wheelfront-login-box\" class=\"auth-card\"\n                style=\"background: transparent; padding: 40px; border-radius: 16px; border: 1px solid #525f7a; box-shadow: 0 4px 20px rgba(0,0,0,0.05);\">\n                <div id=\"login-success-msg\"\n                    style=\"display: none; margin-bottom: 25px; padding: 15px; background: #e8f5e9; border: 1px solid #525f7a; border-radius: 8px; color: #2e7d32; font-size: 14px; font-weight: 500; line-height: 1.4; text-align: center;\">\n                <\/div>\n\n                <h1 style=\"font-size: 32px; font-weight: 700; color: #E1E4EB; margin: 0 0 30px 0;\">Log in<\/h1>\n\n                <div class=\"auth-field\" style=\"margin-bottom: 20px;\">\n                    <label\n                        style=\"display: block; font-size: 14px; font-weight: 600; color: #E1E4EB; margin-bottom: 8px;\">Username\n                        or Email address<\/label>\n                    <input type=\"text\" id=\"login-user\"\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0  style=\"width: 100%; padding: 10px 16px; background: transparent; border: 1px solid #525f7a; border-radius: 8px; font-size: 16px; color: #E1E4EB; outline: none;\">\n                <\/div>\n\n                <div class=\"auth-field\" style=\"margin-bottom: 20px; position: relative;\">\n                    <label\n                        style=\"display: block; font-size: 14px; font-weight: 600; color: #E1E4EB; margin-bottom: 8px;\">Password<\/label>\n                    <div style=\"position: relative;\">\n                        <input type=\"password\" id=\"login-pass\"\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0  style=\"width: 100%; padding: 10px 45px 12px 16px; background: transparent; border: 1px solid #525f7a; border-radius: 8px; font-size: 16px; color: #E1E4EB; outline: none;\">\n                        <span class=\"password-toggle\" onclick=\"togglePassword('login-pass')\"\n                            style=\"position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #E1E4EB;\">\n                            <span class=\"dashicons dashicons-visibility\"><\/span>\n                        <\/span>\n                    <\/div>\n                <\/div>\n\n                <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;\">\n                    <label style=\"display: flex; align-items: center; font-size: 14px; color: #E1E4EB; cursor: pointer;\">\n                        <input type=\"checkbox\" id=\"login-remember\"\n                            style=\"margin-right: 10px; width: 18px; height: 18px; border-radius: 4px;\">\n                        Stay logged in\n                    <\/label>\n                    <a href=\"javascript:void(0)\" onclick=\"toggleView('forgot')\"\n                        style=\"font-size: 14px; color: #E1E4EB; text-decoration: underline; font-weight: 500;\">Forgot your\n                        password?<\/a>\n                <\/div>\n\n                <button onclick=\"handleLogin()\"\n                    style=\"width: 100%; background: #336ecc; color: #fff; border: none; padding: 14px; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.2s;\" class=\"wf-btn-auth\">Log\n                    in<\/button>\n\n                <div class=\"wf-social-separator\" style=\"display: flex; align-items: center; margin: 25px 0;\">\n                    <div style=\"flex: 1; height: 1px; background: #525f7a;\"><\/div>\n                    <span\n                        style=\"padding: 0 15px; font-size: 14px; font-weight: 600; color: #E1E4EB; text-transform: uppercase;\">OR<\/span>\n                    <div style=\"flex: 1; height: 1px; background: #525f7a;\"><\/div>\n                <\/div>\n\n                <div class=\"wf-social-logins\">\n                    <a href=\"https:\/\/wheelfront.com\/marketplace\/?wf_social_login=google\" class=\"wf-social-btn google\"\n                        style=\"text-decoration: none; width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; background: transparent; color: #E1E4EB; border: 1px solid #E1E4EB; padding: 12px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; margin-bottom: 12px; transition: all 0.2s;\">\n                        <img decoding=\"async\" src=\"https:\/\/www.gstatic.com\/firebasejs\/ui\/2.0.0\/images\/auth\/google.svg\" width=\"20\" height=\"20\">\n                        Continue with Google\n                    <\/a>\n                    <!-- <a href=\"https:\/\/wheelfront.com\/marketplace\/?wf_social_login=apple\" class=\"wf-social-btn apple\"\n                        style=\"text-decoration: none; width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; background: #1a253c; color: #fff; border: none; padding: 12px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s;\">\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 384 512\" fill=\"currentColor\">\n                            <path\n                                d=\"M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41-84.5-44-35.3-3.1-65.4 20.1-83.6 20.1-18.2 0-43.1-19.4-72.1-19.4-38.3 0-73.4 21.6-93.5 56.4-40.6 70-10.4 174.5 28.9 231.2 19.3 27.8 42.4 55.4 72.8 54.4 29-1 40.1-18.8 75.3-18.8 35.2 0 45.1 18.8 75.3 17.6 31-.9 51.1-24.9 70.3-52.7 22-31.9 31.1-62.8 31.5-64.4-1.1-.5-60.6-23.2-61.3-95.2zM245.9 76.1c15.7-19 26.4-45.5 23.5-72.1-22.8 1-50.6 15.3-66.9 34.4-14.7 17.1-27.5 44.2-24 70.1 25.4 1.9 51.6-13.4 67.4-32.4z\" \/>\n                        <\/svg>\n                        Continue with Apple\n                    <\/a> -->\n                <\/div>\n\n                <div style=\"margin-top: 30px; text-align: center; padding-top: 25px;\">\n                    <p style=\"font-size: 14px; color: #E1E4EB;\">New to WheelFront? <a href=\"javascript:void(0)\"\n                            onclick=\"toggleView('register')\"\n                            style=\"color: #E1E4EB; text-decoration: underline; font-weight: 600;\">Create a free account\n                            now<\/a>\n                    <\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Forgot Password Container -->\n            <div id=\"wheelfront-forgot-box\" class=\"auth-card\"\n                style=\"display: none; background: transparent; padding: 40px; border-radius: 16px; border: 1px solid #525f7a; box-shadow: 0 4px 20px rgba(0,0,0,0.05);\">\n                <h1 style=\"font-size: 32px; font-weight: 700; color: #E1E4EB; margin: 0 0 20px 0;\">Forgot Password<\/h1>\n                <p style=\"margin-bottom: 25px; color: #E1E4EB; font-size: 14px;\">Enter your username or email address and we will send you a link to reset your password.<\/p>\n\n                <div class=\"auth-field\" style=\"margin-bottom: 25px;\">\n                    <label style=\"display: block; font-size: 14px; font-weight: 600; color: #E1E4EB; margin-bottom: 8px;\">Username or Email<\/label>\n                    <input type=\"text\" id=\"forgot-user\"\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0  style=\"width: 100%; padding: 10px 16px; background: transparent; border: 1px solid #525f7a; border-radius: 8px; font-size: 16px;color: #E1E4EB;\">\n                <\/div>\n\n                <button onclick=\"handleForgot()\"\n                    style=\"width: 100%; background: #336ecc; color: #fff; border: none; padding: 14px; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer;\" class=\"wf-btn-auth\">Send Reset Link<\/button>\n\n                <div style=\"margin-top: 30px; text-align: center;\">\n                    <p style=\"font-size: 14px; color: #E1E4EB;\">Back to <a href=\"javascript:void(0)\"\n                            onclick=\"toggleView('login')\"\n                            style=\"color: #E1E4EB; text-decoration: underline; font-weight: 600;\" class=\"wf-btn-auth\">Log in<\/a><\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Reset Password Container -->\n            <div id=\"wheelfront-reset-box\" class=\"auth-card\"\n                style=\"display: none; background: transparent; padding: 40px; border-radius: 16px; border: 1px solid #525f7a; box-shadow: 0 4px 20px rgba(0,0,0,0.05);\">\n                <h1 style=\"font-size: 32px; font-weight: 700; color: #E1E4EB; margin: 0 0 20px 0;\">New Password<\/h1>\n                <p style=\"margin-bottom: 25px; color: #E1E4EB; font-size: 14px;\">Please enter your new password below.<\/p>\n\n                <div class=\"auth-field\" style=\"margin-bottom: 20px;\">\n                    <label style=\"display: block; font-size: 14px; font-weight: 600; color: #E1E4EB; margin-bottom: 8px;\">New Password<\/label>\n                    <div style=\"position: relative;\">\n                        <input type=\"password\" id=\"reset-pass\" oninput=\"checkPasswordStrength(this.value, 'reset-')\"\n                            style=\"width: 100%; padding: 10px 45px 12px 16px; background: transparent; border: 1px solid #525f7a; border-radius: 8px; font-size: 16px;color:#E1E4EB;\">\n                        <span class=\"password-toggle\" onclick=\"togglePassword('reset-pass')\"\n                            style=\"position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #E1E4EB;\">\n                            <span class=\"dashicons dashicons-visibility\"><\/span>\n                        <\/span>\n                    <\/div>\n                    \n                    <!-- Password strength indicator for Reset -->\n                    <div id=\"reset-pwd-strength-wrap\" style=\"display: none; margin-top: 10px;\">\n                        <div style=\"display: flex; gap: 4px; margin-bottom: 8px;\">\n                            <div id=\"reset-pwd-bar-1\" style=\"flex: 1; height: 4px; border-radius: 2px; background: #3a4560; transition: background 0.3s;\"><\/div>\n                            <div id=\"reset-pwd-bar-2\" style=\"flex: 1; height: 4px; border-radius: 2px; background: #3a4560; transition: background 0.3s;\"><\/div>\n                            <div id=\"reset-pwd-bar-3\" style=\"flex: 1; height: 4px; border-radius: 2px; background: #3a4560; transition: background 0.3s;\"><\/div>\n                            <div id=\"reset-pwd-bar-4\" style=\"flex: 1; height: 4px; border-radius: 2px; background: #3a4560; transition: background 0.3s;\"><\/div>\n                        <\/div>\n                        <div id=\"reset-pwd-strength-label\" style=\"font-size: 12px; font-weight: 600; color: #888; transition: color 0.3s;\"><\/div>\n                        <ul id=\"reset-pwd-requirements\" style=\"list-style: none; padding: 0; margin: 6px 0 0 0; font-size: 12px; color: #8a94a6;\">\n                            <li id=\"reset-pwd-req-length\" style=\"margin-bottom: 3px;\">At least 8 characters<\/li>\n                            <li id=\"reset-pwd-req-upper\" style=\"margin-bottom: 3px;\">One uppercase letter<\/li>\n                            <li id=\"reset-pwd-req-lower\" style=\"margin-bottom: 3px;\">One lowercase letter<\/li>\n                            <li id=\"reset-pwd-req-number\" style=\"margin-bottom: 3px;\">One number<\/li>\n                            <li id=\"reset-pwd-req-special\" style=\"margin-bottom: 3px;\">One special character (!@#$%^&*)<\/li>\n                        <\/ul>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"auth-field\" style=\"margin-bottom: 25px;\">\n                    <label style=\"display: block; font-size: 14px; font-weight: 600; color: #E1E4EB; margin-bottom: 8px;\">Confirm Password<\/label>\n                    <div style=\"position: relative;\">\n                        <input type=\"password\" id=\"reset-pass-confirm\"\n                            style=\"width: 100%; padding: 10px 45px 12px 16px; background: transparent; border: 1px solid #525f7a; border-radius: 8px; font-size: 16px;color:#E1E4EB;\">\n                        <span class=\"password-toggle\" onclick=\"togglePassword('reset-pass-confirm')\"\n                            style=\"position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #E1E4EB;\">\n                            <span class=\"dashicons dashicons-visibility\"><\/span>\n                        <\/span>\n                    <\/div>\n                <\/div>\n\n                <button onclick=\"handleReset()\"\n                    style=\"width: 100%; background: #336ecc; color: #fff; border: none; padding: 14px; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer;\" class=\"wf-btn-auth\">Reset Password<\/button>\n            <\/div>\n\n            <!-- Register Container -->\n            <div id=\"wheelfront-register-box\" class=\"auth-card\"\n                style=\"display: none; background: transparent; padding: 40px; border-radius: 16px; border: 1px solid #525f7a; box-shadow: 0 4px 20px rgba(0,0,0,0.05);\">\n                <h1 style=\"font-size: 32px; font-weight: 700; color: #E1E4EB; margin: 0 0 30px 0;\">Sign up<\/h1>\n                <p style=\"margin-bottom: 25px; color: #E1E4EB; font-size: 14px;\">Join the leading marketplace for high-end wheels.\n                <\/p>\n\n                <div class=\"auth-field\" style=\"margin-bottom: 20px;\">\n                    <label\n                        style=\"display: block; font-size: 14px; font-weight: 600; color: #E1E4EB; margin-bottom: 8px;\">Username<\/label>\n                    <input type=\"text\" id=\"reg-user\"\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0  style=\"width: 100%; padding: 10px 16px; background: transparent; border: 1px solid #525f7a; border-radius: 8px; font-size: 16px;color:#E1E4EB;\">\n                <\/div>\n\n                <div class=\"auth-field\" style=\"margin-bottom: 20px;\">\n                    <label style=\"display: block; font-size: 14px; font-weight: 600; color: #E1E4EB; margin-bottom: 8px;\">Email\n                        address<\/label>\n                    <input type=\"email\" id=\"reg-email\"\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0  style=\"width: 100%; padding: 10px 16px; background: transparent; border: 1px solid #525f7a; border-radius: 8px; font-size: 16px;color:#E1E4EB;\">\n                <\/div>\n\n                <div class=\"auth-field\" style=\"margin-bottom: 25px;\">\n                    <label\n                        style=\"display: block; font-size: 14px; font-weight: 600; color: #E1E4EB; margin-bottom: 8px;\">Password<\/label>\n                    <div style=\"position: relative;\">\n                        <input type=\"password\" id=\"reg-pass\" oninput=\"checkPasswordStrength(this.value)\"\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0  style=\"width: 100%; padding: 10px 45px 12px 16px; background: transparent; border: 1px solid #525f7a; border-radius: 8px; font-size: 16px;color:#E1E4EB;\">\n                        <span class=\"password-toggle\" onclick=\"togglePassword('reg-pass')\"\n                            style=\"position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #E1E4EB;\">\n                            <span class=\"dashicons dashicons-visibility\"><\/span>\n                        <\/span>\n                    <\/div>\n                    <!-- Password strength indicator -->\n                    <div id=\"pwd-strength-wrap\" style=\"display: none; margin-top: 10px;\">\n                        <div style=\"display: flex; gap: 4px; margin-bottom: 8px;\">\n                            <div id=\"pwd-bar-1\" style=\"flex: 1; height: 4px; border-radius: 2px; background: #3a4560; transition: background 0.3s;\"><\/div>\n                            <div id=\"pwd-bar-2\" style=\"flex: 1; height: 4px; border-radius: 2px; background: #3a4560; transition: background 0.3s;\"><\/div>\n                            <div id=\"pwd-bar-3\" style=\"flex: 1; height: 4px; border-radius: 2px; background: #3a4560; transition: background 0.3s;\"><\/div>\n                            <div id=\"pwd-bar-4\" style=\"flex: 1; height: 4px; border-radius: 2px; background: #3a4560; transition: background 0.3s;\"><\/div>\n                        <\/div>\n                        <div id=\"pwd-strength-label\" style=\"font-size: 12px; font-weight: 600; color: #888; transition: color 0.3s;\"><\/div>\n                        <ul id=\"pwd-requirements\" style=\"list-style: none; padding: 0; margin: 6px 0 0 0; font-size: 12px; color: #8a94a6;\">\n                            <li id=\"pwd-req-length\" style=\"margin-bottom: 3px;\">\u2717 At least 8 characters<\/li>\n                            <li id=\"pwd-req-upper\" style=\"margin-bottom: 3px;\">\u2717 One uppercase letter<\/li>\n                            <li id=\"pwd-req-lower\" style=\"margin-bottom: 3px;\">\u2717 One lowercase letter<\/li>\n                            <li id=\"pwd-req-number\" style=\"margin-bottom: 3px;\">\u2717 One number<\/li>\n                            <li id=\"pwd-req-special\" style=\"margin-bottom: 3px;\">\u2717 One special character (!@#$%^&*)<\/li>\n                        <\/ul>\n                    <\/div>\n                <\/div>\n\n                <div style=\"margin-bottom: 20px; font-size: 13px; color: #444; line-height: 1.6;\">\n                    <label style=\"display: flex; align-items: flex-start; gap: 10px; margin-bottom: 25px; cursor: pointer;\">\n    <input type=\"checkbox\" id=\"reg-agree-tos\"\n        style=\"margin-top: 2px; min-width: 18px; height: 18px; accent-color: #1a253c;\">\n    <span style=\"line-height:22px; font-size:15px; color:#E1E4EB;\">\n        I agree with Platform's \n        <a href=\"https:\/\/wheelfront.com\/marketplace\/privacy-policy\/\" target=\"_blank\" style=\"color: #E1E4EB; text-decoration: underline; font-weight: 600;\">Privacy Policy<\/a> \n        and \n        <a href=\"https:\/\/wheelfront.com\/marketplace\/terms-of-service\/\" target=\"_blank\" style=\"color: #E1E4EB; text-decoration: underline; font-weight: 600;\">Terms of Service<\/a>.\n    <\/span>\n<\/label>\n                <\/div>\n\n                <button onclick=\"handleRegister()\"\n                    style=\"width: 100%; background: #336ecc; color: #fff; border: none; padding: 14px; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer;\" class=\"wf-btn-auth\">Register<\/button>\n\n                <div class=\"wf-social-separator\" style=\"display: flex; align-items: center; margin: 25px 0;\">\n                    <div style=\"flex: 1; height: 1px; background: #525f7a;\"><\/div>\n                    <span\n                        style=\"padding: 0 15px; font-size: 14px; font-weight: 600; color: #E1E4EB; text-transform: uppercase;\">OR<\/span>\n                    <div style=\"flex: 1; height: 1px; background: #525f7a;\"><\/div>\n                <\/div>\n\n                <div class=\"wf-social-logins\">\n                    <a href=\"https:\/\/wheelfront.com\/marketplace\/?wf_social_login=google\" class=\"wf-social-btn google\"\n                        style=\"text-decoration: none; width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; background: transparent; color: #E1E4EB; border: 1px solid #E1E4EB; padding: 12px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; margin-bottom: 12px; transition: all 0.2s;\">\n                        <img decoding=\"async\" src=\"https:\/\/www.gstatic.com\/firebasejs\/ui\/2.0.0\/images\/auth\/google.svg\" width=\"20\" height=\"20\">\n                        Continue with Google\n                    <\/a>\n                    <!-- <a href=\"https:\/\/wheelfront.com\/marketplace\/?wf_social_login=apple\" class=\"wf-social-btn apple\"\n                        style=\"text-decoration: none; width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; background: #1a253c; color: #fff; border: none; padding: 12px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s;\">\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 384 512\" fill=\"currentColor\">\n                            <path\n                                d=\"M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41-84.5-44-35.3-3.1-65.4 20.1-83.6 20.1-18.2 0-43.1-19.4-72.1-19.4-38.3 0-73.4 21.6-93.5 56.4-40.6 70-10.4 174.5 28.9 231.2 19.3 27.8 42.4 55.4 72.8 54.4 29-1 40.1-18.8 75.3-18.8 35.2 0 45.1 18.8 75.3 17.6 31-.9 51.1-24.9 70.3-52.7 22-31.9 31.1-62.8 31.5-64.4-1.1-.5-60.6-23.2-61.3-95.2zM245.9 76.1c15.7-19 26.4-45.5 23.5-72.1-22.8 1-50.6 15.3-66.9 34.4-14.7 17.1-27.5 44.2-24 70.1 25.4 1.9 51.6-13.4 67.4-32.4z\" \/>\n                        <\/svg>\n                        Continue with Apple\n                    <\/a> -->\n                <\/div>\n\n                <div style=\"margin-top: 30px; text-align: center; padding-top: 25px;\">\n                    <p style=\"font-size: 14px; color: #E1E4EB;\">Already have an account? <a href=\"javascript:void(0)\"\n                            onclick=\"toggleView('login')\"\n                            style=\"color: #E1E4EB; text-decoration: underline; font-weight: 600;\">Log in here<\/a><\/p>\n                <\/div>\n            <\/div>\n\n            <div id=\"auth-msg\" style=\"margin-top: 20px; text-align: center; font-weight: 600; min-height: 24px;\"><\/div>\n        <\/div>\n\n        <style>\n            .wf-btn-auth:hover {\n                background: #7e93c1ff!important;\n            }\n        <\/style>\n\n        <script>\n            function toggleView(view) {\n                const loginBox = document.getElementById('wheelfront-login-box');\n                const registerBox = document.getElementById('wheelfront-register-box');\n                const forgotBox = document.getElementById('wheelfront-forgot-box');\n                const resetBox = document.getElementById('wheelfront-reset-box');\n                const msg = document.getElementById('auth-msg');\n                msg.innerText = '';\n\n                \/\/ Hide all\n                loginBox.style.display = 'none';\n                registerBox.style.display = 'none';\n                forgotBox.style.display = 'none';\n                resetBox.style.display = 'none';\n\n                if (view === 'login') {\n                    loginBox.style.display = 'block';\n                } else if (view === 'register') {\n                    registerBox.style.display = 'block';\n                } else if (view === 'forgot') {\n                    forgotBox.style.display = 'block';\n                } else if (view === 'reset') {\n                    resetBox.style.display = 'block';\n                }\n            }\n\n            function decodeHtml(html) {\n                var txt = document.createElement(\"textarea\");\n                txt.innerHTML = html;\n                return txt.value;\n            }\n\n            \/\/ Initialization based on URL\n            jQuery(document).ready(function() {\n                const urlParams = new URLSearchParams(window.location.search);\n                const action = urlParams.get('action');\n                if (action === 'forgot') {\n                    toggleView('forgot');\n                } else if (action === 'reset') {\n                    toggleView('reset');\n                }\n            });\n\n            function togglePassword(id) {\n                const el = document.getElementById(id);\n                const isPassword = el.getAttribute('type') === 'password';\n                el.setAttribute('type', isPassword ? 'text' : 'password');\n\n                \/\/ Update the eye icon\n                const toggleBtn = el.parentElement.querySelector('.password-toggle .dashicons');\n                if (toggleBtn) {\n                    toggleBtn.classList.remove('dashicons-visibility', 'dashicons-hidden');\n                    toggleBtn.classList.add(isPassword ? 'dashicons-hidden' : 'dashicons-visibility');\n                }\n            }\n\n            function handleLogin() {\n                const username = jQuery('#login-user').val();\n                const password = jQuery('#login-pass').val();\n                const remember = jQuery('#login-remember').is(':checked');\n                const msg = jQuery('#auth-msg');\n\n                msg.text('Logging in...').css('color', '#666');\n\n                jQuery.ajax({\n                    url: 'https:\/\/wheelfront.com\/marketplace\/wp-admin\/admin-ajax.php',\n                    type: 'POST',\n                    data: {\n                        action: 'wheelfront_login',\n                        username: username,\n                        password: password,\n                        remember: remember,\n                        nonce: '9a6fb2b4d6'\n                    },\n                    success: function (res) {\n                        if (res.success) {\n                            msg.html(decodeHtml(res.data)).css('color', '#4caf50');\n                            const urlParams = new URLSearchParams(window.location.search);\n                            const redirectTo = urlParams.get('redirect_to');\n                            if (redirectTo) {\n                                window.location.href = decodeURIComponent(redirectTo);\n                            } else {\n                                window.location.href = 'https:\/\/wheelfront.com\/marketplace\/user\/';\n                            }\n                        } else {\n                            msg.html(decodeHtml(res.data)).css('color', '#d32f2f');\n                        }\n                    }\n                });\n            }\n\n            function validatePassword(password) {\n                const errors = [];\n                if (password.length < 8) errors.push('Password must be at least 8 characters long.');\n                if (!\/[A-Z]\/.test(password)) errors.push('Password must contain at least one uppercase letter.');\n                if (!\/[a-z]\/.test(password)) errors.push('Password must contain at least one lowercase letter.');\n                if (!\/[0-9]\/.test(password)) errors.push('Password must contain at least one number.');\n                if (!\/[^A-Za-z0-9]\/.test(password)) errors.push('Password must contain at least one special character (e.g. !@#$%^&*).');\n                return errors;\n            }\n\n            function checkPasswordStrength(password, prefix = '') {\n                const wrap = document.getElementById(prefix + 'pwd-strength-wrap');\n                if (!password) { if(wrap) wrap.style.display = 'none'; return; }\n                if(wrap) wrap.style.display = 'block';\n\n                const checks = {\n                    length: password.length >= 8,\n                    upper:  \/[A-Z]\/.test(password),\n                    lower:  \/[a-z]\/.test(password),\n                    number: \/[0-9]\/.test(password),\n                    special:\/[^A-Za-z0-9]\/.test(password)\n                };\n\n                const passColor = '#4caf50';\n                const failColor = '#8a94a6';\n\n                \/\/ Update requirement list\n                const updateReq = (id, check, text) => {\n                    const el = document.getElementById(prefix + id);\n                    if(el) {\n                        el.innerHTML = (check ? '\u2713' : '\u2717') + ' ' + text;\n                        el.style.color = check ? passColor : failColor;\n                    }\n                };\n                updateReq('pwd-req-length', checks.length, 'At least 8 characters');\n                updateReq('pwd-req-upper',  checks.upper,  'One uppercase letter');\n                updateReq('pwd-req-lower',  checks.lower,  'One lowercase letter');\n                updateReq('pwd-req-number', checks.number, 'One number');\n                updateReq('pwd-req-special',checks.special,'One special character (!@#$%^&*)');\n\n                \/\/ Count passed\n                const passed = Object.values(checks).filter(Boolean).length;\n                const bars = ['pwd-bar-1','pwd-bar-2','pwd-bar-3','pwd-bar-4'];\n                const inactive = '#3a4560';\n                let barColor, label;\n\n                if (passed <= 1)      { barColor = '#d32f2f'; label = 'Very weak'; }\n                else if (passed === 2) { barColor = '#ff9800'; label = 'Weak'; }\n                else if (passed === 3) { barColor = '#ffc107'; label = 'Fair'; }\n                else if (passed === 4) { barColor = '#8bc34a'; label = 'Good'; }\n                else                   { barColor = '#4caf50'; label = 'Strong'; }\n\n                const filledBars = passed <= 1 ? 1 : (passed === 2 ? 2 : (passed === 3 ? 2 : (passed === 4 ? 3 : 4)));\n                bars.forEach((id, i) => {\n                    const el = document.getElementById(prefix + id);\n                    if(el) el.style.background = i < filledBars ? barColor : inactive;\n                });\n\n                const strengthLabel = document.getElementById(prefix + 'pwd-strength-label');\n                if(strengthLabel) {\n                    strengthLabel.textContent = label;\n                    strengthLabel.style.color = barColor;\n                }\n            }\n\n            function handleRegister() {\n                const username = jQuery('#reg-user').val();\n                const email = jQuery('#reg-email').val();\n                const password = jQuery('#reg-pass').val();\n                const msg = jQuery('#auth-msg');\n\n                \/\/ Validate T&C checkboxes\n                const agreeTos = jQuery('#reg-agree-tos').is(':checked');\n\n                if (!agreeTos) {\n                    msg.text('You must agree to the Terms of Service before registering.').css('color', '#d32f2f');\n                    return;\n                }\n\n                \/\/ Client-side password validation\n                const pwdErrors = validatePassword(password);\n                if (pwdErrors.length > 0) {\n                    msg.text(pwdErrors[0]).css('color', '#d32f2f');\n                    return;\n                }\n\n                msg.text('Creating account...').css('color', '#666');\n\n                jQuery.ajax({\n                    url: 'https:\/\/wheelfront.com\/marketplace\/wp-admin\/admin-ajax.php',\n                    type: 'POST',\n                    data: {\n                        action: 'wheelfront_register',\n                        username: username,\n                        email: email,\n                        password: password,\n                        agree_tos: agreeTos ? 1 : 0,\n                        nonce: '9a6fb2b4d6'\n                    },\n                    success: function (res) {\n                        if (res.success) {\n                            \/\/ Clear fields\n                            jQuery('#reg-user').val('');\n                            jQuery('#reg-email').val('');\n                            jQuery('#reg-pass').val('');\n\n                            \/\/ Show success message on login form\n                            jQuery('#login-success-msg').html(decodeHtml(res.data)).show();\n\n                            \/\/ Switch to login view\n                            toggleView('login');\n                        } else {\n                            msg.html(decodeHtml(res.data)).css('color', '#d32f2f');\n                        }\n                    }\n                });\n            }\n\n            function handleForgot() {\n                const userLogin = jQuery('#forgot-user').val();\n                const msg = jQuery('#auth-msg');\n\n                if (!userLogin) {\n                    msg.text('Please enter your username or email.').css('color', '#d32f2f');\n                    return;\n                }\n\n                msg.text('Processing...').css('color', '#666');\n\n                jQuery.ajax({\n                    url: 'https:\/\/wheelfront.com\/marketplace\/wp-admin\/admin-ajax.php',\n                    type: 'POST',\n                    data: {\n                        action: 'wheelfront_forgot_password',\n                        user_login: userLogin,\n                        nonce: '9a6fb2b4d6'\n                    },\n                    success: function (res) {\n                        if (res.success) {\n                            msg.html(decodeHtml(res.data)).css('color', '#4caf50');\n                            jQuery('#forgot-user').val('');\n                        } else {\n                            msg.html(decodeHtml(res.data)).css('color', '#d32f2f');\n                        }\n                    }\n                });\n            }\n\n            function handleReset() {\n                const urlParams = new URLSearchParams(window.location.search);\n                const key = urlParams.get('key');\n                const login = urlParams.get('login');\n                const password = jQuery('#reset-pass').val();\n                const confirmPassword = jQuery('#reset-pass-confirm').val();\n                const msg = jQuery('#auth-msg');\n\n                if (!password) {\n                    msg.text('Please enter a new password.').css('color', '#d32f2f');\n                    return;\n                }\n                \n                if (password !== confirmPassword) {\n                    msg.text('Passwords do not match.').css('color', '#d32f2f');\n                    return;\n                }\n\n                \/\/ Client-side password validation on reset\n                const pwdErrors = validatePassword(password);\n                if (pwdErrors.length > 0) {\n                    msg.text(pwdErrors[0]).css('color', '#d32f2f');\n                    return;\n                }\n\n                msg.text('Resetting password...').css('color', '#666');\n\n                jQuery.ajax({\n                    url: 'https:\/\/wheelfront.com\/marketplace\/wp-admin\/admin-ajax.php',\n                    type: 'POST',\n                    data: {\n                        action: 'wheelfront_reset_password',\n                        key: key,\n                        login: login,\n                        password: password,\n                        nonce: '9a6fb2b4d6'\n                    },\n                    success: function (res) {\n                        if (res.success) {\n                            msg.html(decodeHtml(res.data)).css('color', '#4caf50');\n                            jQuery('#reset-pass').val('');\n                            jQuery('#reset-pass-confirm').val('');\n                            setTimeout(() => {\n                                toggleView('login');\n                                \/\/ Clean up URL\n                                window.history.replaceState({}, document.title, window.location.pathname);\n                            }, 2000);\n                        } else {\n                            msg.html(decodeHtml(res.data)).css('color', '#d32f2f');\n                        }\n                    }\n                });\n            }\n        <\/script>\n        <\/div>\n\t\t\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":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-57","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Login &amp; Registration - Wheel Front Marketplace<\/title>\n<meta name=\"description\" content=\"Login &amp; Registration - Wheel Front Marketplace . Buy &amp; Sell Wheels like a professional. Turn your wheels into profit in the largest marketplace.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wheelfront.com\/marketplace\/auth\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Login &amp; Registration - Wheel Front Marketplace\" \/>\n<meta property=\"og:description\" content=\"Login &amp; Registration - Wheel Front Marketplace . Buy &amp; Sell Wheels like a professional. Turn your wheels into profit in the largest marketplace.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wheelfront.com\/marketplace\/auth\/\" \/>\n<meta property=\"og:site_name\" content=\"Wheel Front Marketplace\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wheelfront\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-28T22:01:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wheelfront.com\/marketplace\/wp-content\/uploads\/2026\/03\/WFlogo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wheelfront.com\\\/marketplace\\\/auth\\\/\",\"url\":\"https:\\\/\\\/wheelfront.com\\\/marketplace\\\/auth\\\/\",\"name\":\"Login & Registration - Wheel Front Marketplace\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wheelfront.com\\\/marketplace\\\/#website\"},\"datePublished\":\"2026-02-09T11:20:05+00:00\",\"dateModified\":\"2026-03-28T22:01:29+00:00\",\"description\":\"Login & Registration - Wheel Front Marketplace . Buy & Sell Wheels like a professional. Turn your wheels into profit in the largest marketplace.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wheelfront.com\\\/marketplace\\\/auth\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wheelfront.com\\\/marketplace\\\/auth\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wheelfront.com\\\/marketplace\\\/auth\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wheelfront.com\\\/marketplace\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Login &#038; Registration\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wheelfront.com\\\/marketplace\\\/#website\",\"url\":\"https:\\\/\\\/wheelfront.com\\\/marketplace\\\/\",\"name\":\"Wheel Front Marketplace\",\"description\":\"OEM &amp; Aftermarket Wheel Marketplace\",\"publisher\":{\"@id\":\"https:\\\/\\\/wheelfront.com\\\/marketplace\\\/#organization\"},\"alternateName\":\"Wheel Front Marketplace\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wheelfront.com\\\/marketplace\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wheelfront.com\\\/marketplace\\\/#organization\",\"name\":\"Wheel Front\",\"url\":\"https:\\\/\\\/wheelfront.com\\\/marketplace\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wheelfront.com\\\/marketplace\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wheelfront.com\\\/marketplace\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Untitled-design-13.png\",\"contentUrl\":\"https:\\\/\\\/wheelfront.com\\\/marketplace\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Untitled-design-13.png\",\"width\":500,\"height\":500,\"caption\":\"Wheel Front\"},\"image\":{\"@id\":\"https:\\\/\\\/wheelfront.com\\\/marketplace\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/wheelfront\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/wheel-front-4a65a93a2\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCl-Wgoq8L-YovGmjMLGKwgg\\\/videos\",\"https:\\\/\\\/instagram.com\\\/wheel_front\\\/\",\"https:\\\/\\\/www.pinterest.com\\\/wheelfront\\\/\"],\"description\":\"Wheel Front was established in 2018, fully concentrate on OEM & Aftermarket Wheel Marketplace, Auto Parts and Automotive industry.\",\"email\":\"info@wheelfront.com\",\"telephone\":\"+1 (307) 333-9930\",\"legalName\":\"Wheel Front Ltd. Liability Company\",\"foundingDate\":\"2024-12-02\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"1\",\"maxValue\":\"10\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Login & Registration - Wheel Front Marketplace","description":"Login & Registration - Wheel Front Marketplace . Buy & Sell Wheels like a professional. Turn your wheels into profit in the largest marketplace.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wheelfront.com\/marketplace\/auth\/","og_locale":"en_US","og_type":"article","og_title":"Login & Registration - Wheel Front Marketplace","og_description":"Login & Registration - Wheel Front Marketplace . Buy & Sell Wheels like a professional. Turn your wheels into profit in the largest marketplace.","og_url":"https:\/\/wheelfront.com\/marketplace\/auth\/","og_site_name":"Wheel Front Marketplace","article_publisher":"https:\/\/www.facebook.com\/wheelfront\/","article_modified_time":"2026-03-28T22:01:29+00:00","og_image":[{"width":400,"height":100,"url":"https:\/\/wheelfront.com\/marketplace\/wp-content\/uploads\/2026\/03\/WFlogo.png","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wheelfront.com\/marketplace\/auth\/","url":"https:\/\/wheelfront.com\/marketplace\/auth\/","name":"Login & Registration - Wheel Front Marketplace","isPartOf":{"@id":"https:\/\/wheelfront.com\/marketplace\/#website"},"datePublished":"2026-02-09T11:20:05+00:00","dateModified":"2026-03-28T22:01:29+00:00","description":"Login & Registration - Wheel Front Marketplace . Buy & Sell Wheels like a professional. Turn your wheels into profit in the largest marketplace.","breadcrumb":{"@id":"https:\/\/wheelfront.com\/marketplace\/auth\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wheelfront.com\/marketplace\/auth\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wheelfront.com\/marketplace\/auth\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wheelfront.com\/marketplace\/"},{"@type":"ListItem","position":2,"name":"Login &#038; Registration"}]},{"@type":"WebSite","@id":"https:\/\/wheelfront.com\/marketplace\/#website","url":"https:\/\/wheelfront.com\/marketplace\/","name":"Wheel Front Marketplace","description":"OEM &amp; Aftermarket Wheel Marketplace","publisher":{"@id":"https:\/\/wheelfront.com\/marketplace\/#organization"},"alternateName":"Wheel Front Marketplace","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wheelfront.com\/marketplace\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wheelfront.com\/marketplace\/#organization","name":"Wheel Front","url":"https:\/\/wheelfront.com\/marketplace\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wheelfront.com\/marketplace\/#\/schema\/logo\/image\/","url":"https:\/\/wheelfront.com\/marketplace\/wp-content\/uploads\/2026\/05\/Untitled-design-13.png","contentUrl":"https:\/\/wheelfront.com\/marketplace\/wp-content\/uploads\/2026\/05\/Untitled-design-13.png","width":500,"height":500,"caption":"Wheel Front"},"image":{"@id":"https:\/\/wheelfront.com\/marketplace\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/wheelfront\/","https:\/\/www.linkedin.com\/in\/wheel-front-4a65a93a2\/","https:\/\/www.youtube.com\/channel\/UCl-Wgoq8L-YovGmjMLGKwgg\/videos","https:\/\/instagram.com\/wheel_front\/","https:\/\/www.pinterest.com\/wheelfront\/"],"description":"Wheel Front was established in 2018, fully concentrate on OEM & Aftermarket Wheel Marketplace, Auto Parts and Automotive industry.","email":"info@wheelfront.com","telephone":"+1 (307) 333-9930","legalName":"Wheel Front Ltd. Liability Company","foundingDate":"2024-12-02","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"1","maxValue":"10"}}]}},"_links":{"self":[{"href":"https:\/\/wheelfront.com\/marketplace\/wp-json\/wp\/v2\/pages\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wheelfront.com\/marketplace\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wheelfront.com\/marketplace\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wheelfront.com\/marketplace\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wheelfront.com\/marketplace\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":0,"href":"https:\/\/wheelfront.com\/marketplace\/wp-json\/wp\/v2\/pages\/57\/revisions"}],"wp:attachment":[{"href":"https:\/\/wheelfront.com\/marketplace\/wp-json\/wp\/v2\/media?parent=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}