login/profile modification

api/templates/script_index.js

@@ -15,7 +15,7 @@ function loginByEnter(e) {
 
 function login(){
   console.log('login!');
-  var url = "login";
+  var url = "http://www.choozmo.com:8887/";
   var xhr = new XMLHttpRequest();
   xhr.open("POST", url);
   xhr.setRequestHeader("accept", "application/json");

html/login.html

@@ -58,13 +58,13 @@
                         </ul>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="./login.html" set-lan="html:login">登入</a>
+                        <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" aria-current="page" href="./user_profile.html" set-lan="html:user_profile">會員資料</a>
+                        <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" aria-current="page" href="./logout.html" set-lan="html:logout">登出</a>
+                        <a class="nav-link btn-logout" aria-current="page" href="./logout.html" set-lan="html:logout">登出</a>
                     </li>
                 </ul>
             </div>
@@ -84,22 +84,7 @@
             <div class="row-login">
                 <div class="login-content">
                     <!-- 已登入 {% if success %} -->
-                    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-                        <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
-                            <path
-                                d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
-                        </symbol>
-                    </svg>
-                    <div class="alert alert-success d-flex align-items-center alert-dismissible" role="alert">
-                        <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:">
-                            <use xlink:href="#check-circle-fill" />
-                        </svg>
-                        <div>
-                            Registered successfully!
-                        </div>
-                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                    </div>
-_                   <!-- 未登入 {% endif %} -->
+                  <!-- 未登入 {% 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">
@@ -126,8 +111,6 @@ _                   <!-- 未登入 {% endif %} -->
                                 <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">
                             <form method="post" action="register">
@@ -174,7 +157,6 @@ _                   <!-- 未登入 {% endif %} -->
     <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="static/owl.carousel.min.js"></script>
-    <script src="static/script_util.js"></script>
     <script src="script_index.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>
 </body>

html/script_index.js

@@ -1,5 +1,8 @@
 const btnLogin = document.querySelector('#btn_login');
 const inputPassword = document.querySelector('#password');
+const btnLoginPage = document.querySelector('.btn-login');
+const btnUserProfile = document.querySelector('.btn-userProfile');
+const btnLogout = document.querySelector('.btn-logout');
 
 inputPassword.addEventListener('keyup', loginByEnter);
 
@@ -15,7 +18,7 @@ function loginByEnter(e) {
 
 function login(){
     console.log('login!');
-    var url = "http://127.0.0.1:12456/login";
+    var url = "http://www.choozmo.com:8887/login";
     var xhr = new XMLHttpRequest();
     xhr.open("POST", url);
     xhr.setRequestHeader("accept", "application/json");
@@ -27,19 +30,19 @@ function login(){
             // document.cookie = 'jwt_token='+responseOBJ.jwt_token    // access_token -> jwt_token
             document.cookie = 'jwt_token='+responseOBJ.access_token;
             alert('document.cookie = ' + document.cookie); // test
+            console.log(responseOBJ);
             if (responseOBJ.access_token!=null)
-            {
-                Swal.fire({
-                    title: responseOBJ.username + " 登入成功",
-                    icon: 'success',
-                    confirmButtonColor: '#3085d6',
-                },function(isConfirm){
-                    console.log('isConfirm = ' + isConfirm); // test
-                    if(isConfirm){
-                      window.location.replace("./make_video.html");
-                    }
-                });
-            }
+                {
+                    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: "登入失敗",
@@ -56,3 +59,12 @@ function login(){
     console.log(result);
 }
 
+
+function loginControl() {
+    btnLoginPage.style.display = 'block';
+    btnLogout.style.display = 'none';
+    btnUserProfile.style.display = 'none';
+}
+
+loginControl();
+

html/script_profile.js

@@ -0,0 +1,25 @@
+const btnLoginPage = document.querySelector('.btn-login');
+const btnUserProfile = document.querySelector('.btn-userProfile');
+const btnLogout = document.querySelector('.btn-logout');
+
+function getCookie(name) {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop().split(';').shift();
+  }
+
+function checkLogin() {
+    let token = getCookie('jwt_token');
+    if(token) {
+        btnLoginPage.style.display = 'none';
+        btnLogout.style.display = 'block';
+        btnUserProfile.style.display = 'block';
+    } else {
+        window.location.href = 'login.html';
+        btnLoginPage.style.display = 'block';
+        btnLogout.style.display = 'none';
+        btnUserProfile.style.display = 'none';
+    }
+}
+
+checkLogin();

html/static/lan.js

@@ -74,7 +74,7 @@ var en = {
 
 // 4. 轉換
 function changeLan(val) {
-    var val = val.value;
+    // var val = val.value;
     console.log(`val: ${val}`);
     setCookie('lan', val);
     $('[set-lan]').each(function(){

html/user_profile.html

@@ -58,13 +58,13 @@
                         </ul>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="./login.html" set-lan="html:login">登入</a>
+                        <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" aria-current="page" href="./user_profile.html" set-lan="html:user_profile">會員資料</a>
+                        <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" aria-current="page" href="./logout.html" set-lan="html:logout">登出</a>
+                        <a class="nav-link btn-logout" aria-current="page" href="./logout.html" set-lan="html:logout">登出</a>
                     </li>
                 </ul>
             </div>
@@ -103,8 +103,7 @@
     <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="static/owl.carousel.min.js"></script>
-    <script src="static/script_util.js"></script>
-    <script src="templates/script_index.js"></script>
+    <script src="script_profile.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>
 </body>