Login/Sign up Form ajax
// Login form.height-form.uk-flex.uk-flex-middle.uk-padding-s.uk-padding-medium.uk-background-default.uk-box-shadow-medium(action='' method='post' style="border-radius: 20px; border: 1px solid #19233C") .uk-width-1-1 h3.uk-text-center.text-large.uk-text-primary.uk-margin-medium-bottom.text-small-spacing img.uk-margin-small-right.uk-position-relative(src='img/icon-user-circle.svg' style='top: 8px; width: 30px;') span.text-medium-weight 會員登入 .uk-margin-top input.uk-input.input-outline.uk-border-rounded#username(type='text' placeholder='輸入使用者名稱 or Email') .uk-margin-small-top input.uk-input.input-outline.uk-border-rounded#password(type='password' placeholder='密碼') p.uk-text-right.uk-margin-small-top a.text-xsmall.link-primary(href='#') 忘記密碼? .uk-margin-small-top a.uk-padding-remove.uk-width-1-1.uk-button.uk-button-primary.uk-border-rounded.text-white.uk-margin-small-bottom#btnLogin 登入 a.uk-padding-remove.uk-width-1-1.uk-button.button-outline.uk-border-rounded.uk-text-primary 還沒有帳號?點我註冊 .uk-margin-medium-top p.text-xsmall.uk-text-center.uk-margin-small-bottom.uk-heading-line span 或使用社群帳號登入 a.uk-position-relative.uk-padding-remove.uk-width-1-1.uk-button.uk-button-primary.uk-border-rounded.text-white.uk-margin-small-bottom.link-opacity(style='background-color: #1877f2;') i.uk-position-center-left.uk-position-small(uk-icon='facebook') | Facebook 登入 a.uk-position-relative.uk-padding-remove.uk-width-1-1.uk-button.uk-button-secondary.uk-border-rounded.text-white.uk-margin-small-bottom.link-opacity(style='background-color: #ea4235') i.uk-position-center-left.uk-position-small(uk-icon='google') | Google 登入 // Sign Up form.height-form-register.uk-flex.uk-flex-middle.uk-padding-s.uk-padding-medium.uk-background-default.uk-box-shadow-medium(action='' method='post' style="border-radius: 20px; border: 1px solid #19233C") .uk-width-1-1 h3.uk-text-center.text-large.uk-text-primary.uk-margin-medium-bottom.text-small-spacing img.uk-margin-small-right.uk-position-relative(src='img/icon-user-circle.svg' style='top: 8px; width: 30px;') span.text-medium-weight 免費申請 .uk-margin-top input.uk-input.input-outline.uk-border-rounded.text-small(type='text' placeholder='使用者名稱') .uk-margin-small-top input.uk-input.input-outline.uk-border-rounded.text-small(type='email' placeholder='Email') .uk-margin-small-top input.uk-input.input-outline.uk-border-rounded.text-small(type='text' placeholder='手機號碼') .uk-margin-small-top input.uk-input.input-outline.uk-border-rounded.text-small(type='password' placeholder='密碼') .uk-margin-small-top input.uk-input.input-outline.uk-border-rounded.text-small(type='password' placeholder='確認密碼') p.uk-text-right.uk-margin-small-top a.text-xsmall.link-primary(href='#') 已經有帳號了?點我登入 .uk-margin-small-top a.uk-padding-remove.uk-width-1-1.uk-button.uk-button-primary.uk-border-rounded.text-white.uk-margin-small-bottom#btnRegister 立即註冊 .uk-margin-medium-top p.text-xsmall.uk-text-center.uk-margin-small-bottom.uk-heading-line span 或使用社群帳號註冊 a.uk-position-relative.uk-padding-remove.uk-width-1-1.uk-button.uk-button-primary.uk-border-rounded.text-white.uk-margin-small-bottom.link-opacity(style='background-color: #1877f2;') i.uk-position-center-left.uk-position-small(uk-icon='facebook') | Facebook 註冊 a.uk-position-relative.uk-padding-remove.uk-width-1-1.uk-button.uk-button-secondary.uk-border-rounded.text-white.uk-margin-small-bottom.link-opacity(style='background-color: #ea4235') i.uk-position-center-left.uk-position-small(uk-icon='google') | Google 註冊 // reset password form.uk-margin-medium-top(action="<?php echo home_url(); ?>/wp-login.php?action=lostpassword" method="post") .uk-margin.uk-position-relative input.uk-input.uk-padding-small.uk-text-small(type="email" placeholder="電子郵件" required name="user_login") img.uk-position-small.uk-position-center-right(src="<?php echo get_template_directory_uri(); ?>/assets/img/icon-mail2.svg" uk-svg="" style="opacity: .9;") .uk-margin button.uk-button.uk-button-primary.uk-button-large.uk-width-1-1.text-small-spacing.text-white(type="submit" style="padding-left: 40px;") 索取新密碼
// Login <form class="ajax-auth height-form uk-flex uk-flex-middle uk-padding-s uk-padding-medium uk-background-default uk-box-shadow-medium" style="border-radius: 20px; border: 1px solid #19233C" action="login" method="post" id="login"> <div class="uk-width-1-1"> <h3 class="uk-text-center text-large uk-text-primary uk-margin-medium-bottom text-small-spacing"> <img class="uk-margin-small-right uk-position-relative" src="<?php echo get_template_directory_uri(); ?>/assets/img/icon-user-circle.svg" style="top: 8px; width: 30px;"><span class="text-medium-weight">會員登入</span></h3> <p id="messageLoginError" class="uk-background-secondary uk-padding-small uk-text-center uk-border-rounded text-small text-white" style="display:none;"></p> <div class="uk-margin-top"> <input class="uk-input input-outline uk-border-rounded text-small" type="text" name="username" id="username" required placeholder="輸入使用者名稱 or Email" maxlength=50> </div> <div class="uk-margin-small-top"> <input class="uk-input input-outline uk-border-rounded text-small" type="password" id="password" name="password" required placeholder="密碼" maxlength=50> </div> <p class="uk-text-right uk-margin-small-top"><a class="text-xsmall link-primary" href="<?php echo home_url(); ?>/reset">忘記密碼?</a></p> <div class="uk-margin-small-top"><button type='submit' class="uk-padding-remove uk-width-1-1 uk-button uk-button-primary uk-border-rounded text-white uk-margin-small-bottom" id="btnLogin">登入</button><a href="<?php echo home_url(); ?>/register" class="uk-padding-remove uk-width-1-1 uk-button button-outline uk-border-rounded uk-text-primary">還沒有帳號?點我註冊</a></div> <div class="uk-margin-medium-top"> <p class="text-xsmall uk-text-center uk-margin-small-bottom uk-heading-line"><span>或使用社群帳號登入</span></p><a class="uk-position-relative uk-padding-remove uk-width-1-1 uk-button uk-button-primary uk-border-rounded text-white uk-margin-small-bottom link-opacity" style="background-color: #1877f2;" alt="Login with Facebook" title="Login with Facebook" onclick="theChampInitiateLogin(this)"><i class="uk-position-center-left uk-position-small" uk-icon="facebook"></i>Facebook 登入</a> <!-- <a alt="Login with Google" title="Login with Google" onclick="theChampInitiateLogin(this)" class="uk-position-relative uk-padding-remove uk-width-1-1 uk-button uk-button-secondary uk-border-rounded text-white uk-margin-small-bottom link-opacity" style="background-color: #ea4235"><i class="uk-position-center-left uk-position-small" uk-icon="google"></i>Google 登入</a> --> </div> </div> <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?> </form> // Sign Up <form class="ajax-auth height-form-register uk-flex uk-flex-middle uk-padding-s uk-padding-medium uk-background-default uk-box-shadow-medium" action="register" method="post" id="register" style="border-radius: 20px; border: 1px solid #19233C"> <div class="uk-width-1-1"> <h3 class="uk-text-center text-large uk-text-primary uk-margin-medium-bottom text-small-spacing"> <img class="uk-margin-small-right uk-position-relative" src="<?php echo get_template_directory_uri(); ?>/assets/img/icon-gift-circle.svg" style="top: 8px; width: 30px;"><span class="text-medium-weight">免費申請</span></h3> <p id="messageSignupError" class="uk-background-secondary uk-padding-small uk-text-center uk-border-rounded text-small text-white" style="display:none;"></p> <div class="uk-margin-top"> <input class="uk-input input-outline uk-border-rounded text-small" type="text" pattern="[A-Za-z0-9]{1,}" title="請輸入英文或阿拉伯數字" placeholder="使用者名稱,限英數" id="signonname" name="signonname" required maxlength=50> </div> <div class="uk-margin-small-top"> <input class="uk-input input-outline uk-border-rounded text-small" type="email" placeholder="Email" id="email" name="email" required> </div> <div class="uk-margin-small-top"> <input class="uk-input input-outline uk-border-rounded text-small phone-format" type="text" placeholder="手機號碼" id="phone" name="phone"> </div> <div class="uk-margin-small-top"> <input class="uk-input input-outline uk-border-rounded text-small" type="password" placeholder="密碼" id="signonpassword" name="signonpassword" required maxlength=50 minlength=5> </div> <div class="uk-margin-small-top"> <input class="uk-input input-outline uk-border-rounded text-small" type="password" placeholder="確認密碼" id="password2" name="password2" oninput="check(this)" required maxlength=50> </div> <p class="uk-text-right uk-margin-small-top"><a class="text-xsmall link-primary" href="<?php echo home_url(); ?>/login">已經有帳號了?點我登入</a></p> <div class="uk-margin-small-top"><button type="submit" class="uk-padding-remove uk-width-1-1 uk-button uk-button-primary uk-border-rounded text-white uk-margin-small-bottom" id="btnRegister">立即註冊</button></div> <div class="uk-margin-medium-top"> <p class="text-xsmall uk-text-center uk-margin-small-bottom uk-heading-line"><span>或使用社群帳號登入</span></p><a class="uk-position-relative uk-padding-remove uk-width-1-1 uk-button uk-button-primary uk-border-rounded text-white uk-margin-small-bottom link-opacity" style="background-color: #1877f2;" alt="Login with Facebook" title="Login with Facebook" onclick="theChampInitiateLogin(this)"><i class="uk-position-center-left uk-position-small" uk-icon="facebook"></i>Facebook 登入</a> <!-- <a alt="Login with Google" title="Login with Google" onclick="theChampInitiateLogin(this)" class="uk-position-relative uk-padding-remove uk-width-1-1 uk-button uk-button-secondary uk-border-rounded text-white uk-margin-small-bottom link-opacity" style="background-color: #ea4235"><i class="uk-position-center-left uk-position-small" uk-icon="google"></i>Google 登入</a> --> </div> </div> <?php wp_nonce_field('ajax-register-nonce', 'signonsecurity'); ?> </form> // reset password <form class="uk-margin-medium-top" action="<?php echo home_url(); ?>/wp-login.php?action=lostpassword" method="post"> <div class="uk-margin uk-position-relative"><input class="uk-input uk-padding-small uk-text-small" type="email" placeholder="電子郵件" required name="user_login"><img class="uk-position-small uk-position-center-right" src="<?php echo get_template_directory_uri(); ?>/assets/img/icon-mail2.svg" uk-svg="" style="opacity: .9;"></div> <div class="uk-margin"><button class="uk-button uk-button-primary uk-button-large uk-width-1-1 text-small-spacing text-white" type="submit" style="padding-left: 40px;">索取新密碼 </button></div> </form>
function check(input) { if (input.value != document.getElementById("signonpassword").value) { input.setCustomValidity("密碼必須符合!"); } else { input.setCustomValidity(""); } } jQuery(document).ready(function ($) { var redirectURL = window.location.href; $(".phone-format").keypress(function (e) { if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) { return false; } var curchr = this.value.length; var curval = $(this).val(); if (curchr == 4) { $(this).val(curval + "-"); } else if (curchr == 8) { $(this).val(curval + "-"); } else if (curchr == 12) { $(this).attr('maxlength', '12'); } }); $('form#login, form#register').on('submit', function (e) { e.preventDefault(); ctrl = $(this); $('.uk-alert').fadeOut(); $('#btnLogin').text('登入中...'); $('#btnRegister').text('註冊中...'); if ($(this).attr('id') == 'register') { document.getElementById('messageSignupError').style.display = "none"; action = 'ajaxregister'; username = $('#signonname').val(); password = $('#signonpassword').val(); phone = $('#phone').val(); email = $('#email').val(); security = $('#signonsecurity').val(); $.ajax({ type: 'POST', dataType: 'json', url: ajax_auth_object.ajaxurl, data: { 'action': action, 'username': username, 'password': password, 'email': email, 'phone': phone, 'security': security }, success: function (data) { if (data.loggedin == true) { document.location.href = redirectURL; $("#btnLogin").text("轉頁中..."); } else { ctrl.prev().fadeIn("fast"); document.getElementById('messageSignupError').textContent = data.message; document.getElementById('messageSignupError').style.display = "block"; $("#btnRegister").text("立即註冊"); } } }); } else { action = 'ajaxlogin'; username = $('form#login #username').val(); password = $('form#login #password').val(); security = $('form#login #security').val(); $.ajax({ type: 'POST', dataType: 'json', url: ajax_auth_object.ajaxurl, data: { 'action': action, 'username': username, 'password': password, 'security': security }, success: function (data) { if (data.loggedin == true) { document.location.href = redirectURL; $("#btnLogin").text("轉頁中..."); } else { ctrl.prev().fadeIn("fast"); document.getElementById('messageLoginError').textContent = data.message; document.getElementById('messageLoginError').style.display = "block"; $("#btnLogin").text("登入"); } } }); } }); });
<?php function ajax_auth_init(){ wp_register_script('ajax-auth-script', get_template_directory_uri() . '/assets/js/ajax-login.js', array('jquery'), null,true ); wp_enqueue_script('ajax-auth-script'); wp_localize_script( 'ajax-auth-script', 'ajax_auth_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'redirecturl' => wp_get_referer(), 'loadingmessage' => __('登入中...') )); // Enable the user with no privileges to run ajax_login() in AJAX add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' ); // Enable the user with no privileges to run ajax_register() in AJAX add_action( 'wp_ajax_nopriv_ajaxregister', 'ajax_register' ); } // Execute the action only if the user isn't logged in if (!is_user_logged_in()) { add_action('init', 'ajax_auth_init'); } function ajax_login(){ // First check the nonce, if it fails the function will break check_ajax_referer( 'ajax-login-nonce', 'security' ); // Nonce is checked, get the POST data and sign user on // Call auth_user_login auth_user_login($_POST['username'], $_POST['password'], '登入成功!'); die(); } function ajax_register(){ // First check the nonce, if it fails the function will break check_ajax_referer( 'ajax-register-nonce', 'security' ); // Nonce is checked, get the POST data and sign user on $info = array(); $info['user_nicename'] = $info['first_name'] = $info['user_login'] = sanitize_user($_POST['username']) ; $info['nickname'] = $info['display_name'] = sanitize_text_field($_POST['nickname']) ; $info['user_pass'] = sanitize_text_field($_POST['password']); $info['user_email'] = sanitize_email( $_POST['email']); // Register the user $user_register = wp_insert_user( $info ); if ( is_wp_error($user_register) ){ $error = $user_register->get_error_codes() ; if(in_array('empty_user_login', $error)) echo json_encode(array('loggedin'=>false, 'message'=>__($user_register->get_error_message('empty_user_login')))); elseif(in_array('existing_user_login',$error)) echo json_encode(array('loggedin'=>false, 'message'=>__('該帳號已被註冊'))); elseif(in_array('existing_user_email',$error)) echo json_encode(array('loggedin'=>false, 'message'=>__('該郵件已被註冊'))); } else { $headers = 'From: Sender<[email protected]>' . "rn"; $message = ''; auth_user_login($info['user_login'], $info['user_pass'], '註冊完成!'); update_field('user_phone',$_POST['phone'],'user_'.$user_register); update_field('user_status','paid','user_'.$user_register); } die(); } function auth_user_login($user_login, $password, $login){ $info = array(); $info['user_login'] = $user_login; $info['user_password'] = $password; $info['remember'] = true; $user_signon = wp_signon( $info, false ); if ( is_wp_error($user_signon) ){ echo json_encode(array('loggedin'=>false, 'message'=>__('帳密有誤!請重新輸入'))); } else { wp_set_current_user($user_signon->ID); echo json_encode(array('loggedin'=>true, 'message'=>__($login.' 轉址中...'))); } die(); }
Tags:
- ajax
- /