register

html/login.html

@@ -113,17 +113,17 @@
                                 </div>
                         </div>
                         <div class="tab-pane fade p-lg-3" id="register" role="tabpanel" aria-labelledby="register-tab">
-                            <form method="post" action="register">
+                            <form>
                                 <div class="form-floating mb-3">
-                                    <input type="text" class="form-control" id="username" name="username" placeholder="User name">
+                                    <input type="text" class="form-control" id="username" name="username" placeholder="User name" required>
                                     <label for="username"><i class="fas fa-user me-2"></i>User name</label>
                                 </div>
                                 <div class="form-floating mb-3">
-                                    <input type="email" class="form-control" id="email" name="email" placeholder="name@example.com">
+                                    <input type="email" class="form-control" id="email" name="email" placeholder="name@example.com" required>
                                     <label for="email"><i class="fas fa-envelope me-2"></i>Email address</label>
                                 </div>
                                 <div class="form-floating mb-3">
-                                    <input type="password" class="form-control" id="password" name="password"  placeholder="Password">
+                                    <input type="password" class="form-control" id="password" name="password"  placeholder="Password" required>
                                     <label for="password"><i class="fas fa-lock me-2"></i>Password</label>
                                 </div>
                                 <div class="mb-3">
@@ -131,7 +131,7 @@
                                     <label for="privacy"><a href="./privacy.html" class="link_privacy" target="_blank" set-lan="html:privacy_term">同意隱私政策及使用條款</a></label>
                                 </div>
                                 <div class="d-flex justify-content-center">
-                                    <button type="submit" class="btn btn-primary align-items-center">Register</button>
+                                    <button type="button" class="btn btn-primary align-items-center btn-register">Register</button>
                                 </div>
         
                             </form>
@@ -153,9 +153,15 @@
   
     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> 
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" 
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> 
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/validatorjs/2.0.0/validator.min.js" 
+        integrity="sha512-Y/Pox7RqKmT84klgmJCva3drWoXQWO42oHiWWhb9zd1pkIH60NF2SamgBrFHOTzrzHJhwgPGNGjNJ5ZmxLpUAQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="static/owl.carousel.min.js"></script>
     <script src="script_index.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>

html/script_index.js

@@ -1,13 +1,17 @@
 const btnLogin = document.querySelector('#btn_login');
-const inputPassword = document.querySelector('#password');
+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();
@@ -16,6 +20,14 @@ function loginByEnter(e) {
     }
 };
 
+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";
@@ -59,6 +71,65 @@ function login(){
     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,}))$/;
+    return re.test(String(email).toLowerCase());
+}
+
+function validatePassword(psd) {
+    if(psd.length >=4) {
+        return true;
+    } else {
+        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';