separate sign in/up

html/login.html

@@ -92,10 +92,6 @@
                             <button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login"
                                 type="button" role="tab" aria-controls="login" aria-selected="true">Login</button>
                         </li>
-                        <li class="nav-item" role="presentation">
-                            <button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button"
-                                role="tab" aria-controls="register" aria-selected="false">New Here? Register</button>
-                        </li>
                     </ul>
                     <div class="tab-content" id="myTabContent">
                         <div class="tab-pane fade p-lg-3 show active" id="login" role="tabpanel" aria-labelledby="login-tab">
@@ -108,11 +104,14 @@
                                     <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                                     <label for="password"><i class="fas fa-lock me-2"></i>Password</label>
                                 </div>
+                                <div>
+                                    <p>New Here?<a href="register.html">REGISTER</a></p>
+                                </div>
                                 <div class="d-flex justify-content-center">
                                     <button id="btn_login" class="">Login</button>
                                 </div>
                         </div>
-                        <div class="tab-pane fade p-lg-3" id="register" role="tabpanel" aria-labelledby="register-tab">
+                        <!-- <div class="tab-pane fade p-lg-3" id="register" role="tabpanel" aria-labelledby="register-tab">
                             <form>
                                 <div class="form-floating mb-3">
                                     <input type="text" class="form-control" id="username" name="username" placeholder="User name" required>
@@ -135,7 +134,7 @@
                                 </div>
         
                             </form>
-                        </div>
+                        </div> -->
                     </div>
                 </div>
             </div>
@@ -163,7 +162,7 @@
         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 src="login.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>
     <script src="static/common.js"></script>
 </body>

html/login.js

@@ -0,0 +1,66 @@
+const btnLogin = document.querySelector('#btn_login');
+const inputPassword = document.querySelector('#login #password');
+const btnLoginPage = document.querySelector('.btn-login');
+const btnUserProfile = document.querySelector('.btn-userProfile');
+const btnLogout = document.querySelector('.btn-logout');
+
+inputPassword.addEventListener('keyup', loginByEnter);
+btnLogin.addEventListener('click', login);
+
+function loginByEnter(e) {
+    if (e.keyCode === 13) {
+        e.preventDefault();
+        console.log('login!');
+        login();
+    }
+};
+
+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 loginControl() {
+    btnLoginPage.style.display = 'block';
+    btnLogout.style.display = 'none';
+    btnUserProfile.style.display = 'none';
+}
+
+loginControl();

html/register.html

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Spokesgirl</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
+      crossorigin="anonymous">
+    <link rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
+      crossorigin="anonymous">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"> 
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
+    <link rel="stylesheet" href="static/owl.carousel.min.css">
+    <link rel="stylesheet" href="static/owl.theme.default.min.css">
+    <link rel="stylesheet" href="static/scss/style.css">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <title>Register</title>
+</head>
+
+<body>
+    <!-- ================================================================= -->
+    <!-- navbar -->
+    <nav class="navbar navbar-expand-lg navbar-light">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="index.html">AI Spokesgirl</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+                aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link active btn-gocreate text-white me-2" aria-current="page" href="make_video.html" set-lan="html:make_video">製作影片</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active btn-gocreate text-white" aria-current="page" href="make_video_slide.html" set-lan="html:make_slides">SLIDE製作影片</a>                        
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active btn-gocreate text-white" aria-current="page" href="make_video_long.html" set-lan="html:make_slides">製作長影片</a>                        
+                    </li>
+                </ul>
+                
+                <ul class="navbar-nav mb-2 mb-lg-0">
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            中/En
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
+                            <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
+                        </ul>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active btn-login" aria-current="page" href="login.html" set-lan="html:login">登入</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-userProfile" aria-current="page" href="user_profile.html" set-lan="html:user_profile">會員資料</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- content -->
+    <div class="container-fluid px-0">
+        <div class="container-login">
+            <img class="img-wave" src="static/img/wave.png" alt="">
+            <div class="row-img">
+                <img src="static/img/undraw_video_upload_3d4u.svg" alt="">
+            </div>
+            <div class="row-login">
+                <div class="login-content">
+                    <!-- 已登入 {% if success %} -->
+                  <!-- 未登入 {% endif %} -->
+                    <img src="static/img/undraw_male_avatar_323b.svg" alt="">
+                    <h2 class="my-3">WELCOME</h2>
+                    <ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
+                        <li class="nav-item active" role="presentation">
+                            <button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button"
+                                role="tab" aria-controls="register" aria-selected="false">New Here? Register</button>
+                        </li>
+                    </ul>
+                    <div class="tab-content" id="myTabContent">
+                        <div class="tab-pane fade p-lg-3 show active" id="register" role="tabpanel" aria-labelledby="register-tab">
+                            <form>
+                                <div class="form-floating mb-3">
+                                    <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" 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" required>
+                                    <label for="password"><i class="fas fa-lock me-2"></i>Password</label>
+                                </div>
+                                <div class="mb-3">
+                                    <input type="checkbox" id="privacy" name="privacy" checked required>
+                                    <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="button" class="btn btn-primary align-items-center btn-register">Register</button>
+                                </div>
+        
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- footer -->
+    <footer class="fixed-bottom text-center py-2">
+
+    </footer>
+    <!-- ================================================================= -->
+  
+    <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/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="register.js"></script>
+    <script type="text/javascript" src="static/lan.js"></script>
+    <script src="static/common.js"></script>
+</body>
+
+</html>

html/register.js

@@ -0,0 +1,100 @@
+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');
+
+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">請輸入正確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();

html/script_index.js

@@ -1,149 +1,7 @@
-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() {

html/script_profile.js

@@ -14,7 +14,6 @@ function renderView() {
         url: 'http://www.choozmo.com:8887/user_profile',
         headers: { 
             'accept': 'text/html',
-            'Authorization' : `Bearer ${getCookie('jwt_token')}`
          }
     }).then(res => {
         console.log(res);