AI_Spokesgirl/html/register.js

const btnRegister = document.querySelector('.btn-register');
const btnLoginPage = document.querySelector('.btn-login');
const btnUserProfile = document.querySelector('.btn-userProfile');
const btnLogout = document.querySelector('.btn-logout');
const registerPassword = document.querySelector('#register #password');
const btnLoginPage_d = document.querySelector('.login-top .btn-login');
const btnUserProfile_d = document.querySelector('.login-top .btn-userProfile');
const btnLogout_d= document.querySelector('.login-top .btn-logout');

registerPassword.addEventListener('keyup', registerByEnter);
btnRegister.addEventListener('click', register);

function registerByEnter(e) {
    if (e.keyCode === 13) {
        e.preventDefault();
        console.log('login!');
        register();
    }
};

function validateEmail(email) {
    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if(re.test(String(email).toLowerCase()) === false) {
        $('#register [name = "email"]').addClass('error');
        if( !$('.error-text').length ) {
            $('input.error').after('<p class="error-text" set-lan="html:errorEmail">請輸入正確E-mail</p>');
        } 
    } else {
        $('#register [name = "email"]').removeClass('error');
        $('.error-text').remove();
    }
    
    return re.test(String(email).toLowerCase());
}

function validatePassword(psd) {
    if(psd.length >=4) {
        $('#register [name = "password"]').removeClass('error');
        $('.error-text').remove();
        return true;
    } else {
        $('#register [name = "password"]').addClass('error');
        if( !$('.error-text').length ) {
            $('input.error').after('<p class="error-text" set-lan="html:errorPsd">密碼至少為4個字元</p>');
        } 
        return false;
    }
}

function register() {
    const userName = $('#register [name = "username"]').val();
    const email = $('#register [name = "email"]').val();
    const password = $('#register [name = "password"]').val();
    if(userName && validateEmail(email) && validatePassword(password)) {
        let userObj = {
            username: userName,
            email,
            password
        }
        console.log(userObj);
        const headers = {
            "accept": "application/json",
            "Content-Type": "application/json"
        }
        axios({
            method: 'post',
            url: 'http://www.choozmo.com:8887/register',
            headers: headers,
            data: userObj
        }).then(res => {
            console.log(res.data.msg);
            if(res.data.msg == 'ok') {
                Swal.fire({
                    title: "註冊成功",
                    icon: 'success',
                    text: res.data.msg,
                    confirmButtonColor: '#3085d6',
                });
                window.setTimeout(() => {
                    window.location.href = 'login.html';
                }, 2000);
            } else {
                Swal.fire({
                    title: "註冊失敗",
                    icon: 'error',
                    text: res.data.msg,
                    confirmButtonColor: '#3085d6',
                });
            }
        }).catch(err => {
            console.log(err);
        })
    }
}


function loginControl() {
    btnLoginPage.style.display = 'block';
    btnLogout.style.display = 'none';
    btnUserProfile.style.display = 'none';
    btnLoginPage_d.style.display = 'block';
    btnLogout_d.style.display = 'none';
    btnUserProfile_d.style.display = 'none';
}

loginControl();