AI_Spokesgirl/html/script_index.js

const btnLogin = document.querySelector('#btn_login');
const inputPassword = document.querySelector('#login #password');
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');

inputPassword.addEventListener('keyup', loginByEnter);
btnLogin.addEventListener('click', login);

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

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

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

function login(){
    console.log('login!');
    var url = "http://www.choozmo.com:8887/login";
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url);
    xhr.setRequestHeader("accept", "application/json");
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            console.log(xhr.responseText); // test
            responseOBJ = JSON.parse(xhr.responseText);
            // document.cookie = 'jwt_token='+responseOBJ.jwt_token    // access_token -> jwt_token
            document.cookie = 'jwt_token='+responseOBJ.access_token;
            console.log(responseOBJ);
            if (responseOBJ.access_token!=null)
                {
                    Swal.fire({
                        title: responseOBJ.username + " 登入成功",
                        icon: 'success',
                        confirmButtonColor: '#3085d6',
                    });
                    window.setTimeout(() => {
                        window.location.href = 'user_profile.html';
                    }, 2000);
                    btnLoginPage.style.display = 'none';
                }
            else{
                Swal.fire({
                    title: "登入失敗",
                    icon: 'error',
                    text: responseOBJ.detail,
                    confirmButtonColor: '#3085d6',
                });
            }          
        }
    };
    
    var data = "grant_type=&username=" + $('#username').val() + "&password="+$('#password').val()+"&scope=&client_id=&client_secret=";
    result = xhr.send(data);
    console.log(result);
}

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">請輸入正確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">密碼至少為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';
}

loginControl();