user profile, route protect

html/login.js

@@ -32,7 +32,7 @@ function login(){
             if (responseOBJ.access_token!=null)
                 {
                     Swal.fire({
-                        title: responseOBJ.username + " 登入成功",
+                        title: " 登入成功",
                         icon: 'success',
                         confirmButtonColor: '#3085d6',
                     });

html/script_profile.js

@@ -9,14 +9,34 @@ function getCookie(name) {
   }
 
 function renderView() {
+    let token = getCookie('jwt_token');
+    document.cookie = "access_token_cookie" + "=" + token;
+    // axios.defaults.withCredentials = false;
     axios({
-        method: 'get',
+        method: 'post',
         url: 'http://www.choozmo.com:8887/user_profile',
         headers: { 
             'accept': 'text/html',
+            'Authorization': `Bearer ${token}`
          }
     }).then(res => {
-        console.log(res);
+        console.log(res.data);
+        const userInfo = res.data;
+        const str = `<img src="static/img/undraw_male_avatar_323b.svg" alt="">
+            <p class="card-profile-txt">User Profile</p>
+            <p class="card-profile-cnt">${userInfo.user_info.userName}</p>
+            <p class="card-profile-cnt">${userInfo.user_info.email}</p>
+            <div class="d-flex justify-content-around">
+                <div>
+                    <p>已使用</p>
+                    <p><strong>${userInfo.user_info.total_sec}</strong>秒</p>
+                </div>
+                <div>
+                    <p>未使用</p>
+                    <p><strong>${userInfo.user_info.left_sec}</strong>秒</p>
+                </div>
+            </div>`;
+            $('.card-profile').html(str);
     }).catch(err => {
         console.log(err);
     })

html/static/script_util.js

@@ -1,3 +1,24 @@
+function checkRoute() {
+  jwt_token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'http://www.choozmo.com:8887/user_profile',
+    headers: { 
+        'accept': 'text/html',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    console.log(res.status);
+    if(res.status !== 200) {
+      window.location.href = 'login.html';
+    }
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+checkRoute();
+
 const btnLoginPage = document.querySelector('.btn-login');
 const btnUserProfile = document.querySelector('.btn-userProfile');
 const btnLogout = document.querySelector('.btn-logout');
@@ -39,7 +60,6 @@ addCardListener();
 function avatarChange() {
   var value = avatarSelector.options[avatarSelector.selectedIndex].text;
   $('.owl-carousel').trigger('to.owl.carousel', avatarSelector.selectedIndex);
-  console.log(value);
   for (let i = 0; i < card.length; i++) {
     card[i].classList.remove('active');
     if (card[i].dataset.avatar == value) {
@@ -118,7 +138,7 @@ $(".next").click(function () {
   console.log(dataOBJ)
   jwt_token =  get_jwt_token()
   var xhr = new XMLHttpRequest();
-  xhr.open("POST", "/make_anchor_video");
+  xhr.open("POST", "http://www.choozmo.com:8887/make_anchor_video");
   xhr.setRequestHeader("accept", "application/json");
   xhr.setRequestHeader("Authorization","Bearer "+jwt_token)
   xhr.setRequestHeader("Content-Type", "application/json");
@@ -225,9 +245,9 @@ $("#send_slide").click(function () {
   objstr = JSON.stringify(dataOBJ);
   jwt_token =  get_jwt_token()
   var xhr = new XMLHttpRequest();
-  xhr.open("POST", "/make_anchor_video_gSlide");
+  xhr.open("POST", "http://www.choozmo.com:8887/make_anchor_video_gSlide");
   xhr.setRequestHeader("accept", "application/json");
-  xhr.setRequestHeader("Authorization","Bearer "+jwt_token)
+  xhr.setRequestHeader("Authorization","Bearer "+jwt_token);
   xhr.setRequestHeader("Content-Type", "application/json");
   xhr.onreadystatechange = function () {
     if (xhr.readyState === 4) {
@@ -395,7 +415,6 @@ function load_data() {
 
 }
 
-
 var subtitleInputs = document.querySelector(".subtitle-inputs");
 var imgInputs = document.querySelector(".img-inputs");
 let length = 5;
@@ -479,4 +498,5 @@ $('.owl-carousel').owlCarousel({
       items: 4
     }
   }
-})
+});
+

html/static/scss/style.css

@@ -974,7 +974,7 @@ body {
 }
 
 .container-profile .card-profile {
-  width: 25%;
+  width: 30%;
   min-width: 320px;
   margin: auto;
   margin-top: 4rem;

html/static/scss/style.scss

@@ -901,7 +901,7 @@ body {
 }
 
 .container-profile .card-profile {
-	width: 25%;
+	width: 30%;
 	min-width: 320px;
 	margin: auto;
 	margin-top: 4rem;

html/user_profile.html

@@ -80,10 +80,7 @@
             <img class="img-wave img-wave-profile" src="static/img/wave.png" alt="">
             <img class="container-bg" src="static/img/undraw_mobile_user_7oqo.svg" alt="">
             <div class="card card-profile">
-                <img src="static/img/undraw_male_avatar_323b.svg" alt="">
-                <p class="card-profile-txt">User Profile</p>
-                <p class="card-profile-cnt">{{current_user}}</p>
-                <p class="card-profile-cnt">Email:</p>
+               
             </div>
         </div>        
     </div>