layout, lan, route protect

html/index.html

@@ -35,19 +35,7 @@
                 <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">
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                     <li class="nav-item">
                         <a class="nav-link active" aria-current="page" href="pricing.html" set-lan="html:pricing">早鳥方案</a>
                     </li>

html/login.html

@@ -35,19 +35,7 @@
                 <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">
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                     <li class="nav-item">
                         <a class="nav-link active" aria-current="page" href="pricing.html" set-lan="html:pricing">早鳥方案</a>
                     </li>
@@ -80,9 +68,12 @@
     <!-- 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 class="row-img-box text-center">
+                    <h2>將你的生活、創作 、宣傳做成影片</h2>
+                    <h4>開始使用 AI Spokesgirl</h4>
+                </div>
+                <div class="row-img-txt text-center">ChoozMo AI Spokesgirl</div>
             </div>
             <div class="row-login">
                 <div class="login-content">

html/register.html

@@ -35,19 +35,7 @@
                 <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">
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                     <li class="nav-item">
                         <a class="nav-link active" aria-current="page" href="pricing.html" set-lan="html:pricing">早鳥方案</a>
                     </li>
@@ -80,9 +68,12 @@
     <!-- 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 class="row-img-box text-center">
+                    <h2>將你的生活、創作 、宣傳做成影片</h2>
+                    <h4>開始使用 AI Spokesgirl</h4>
+                </div>
+                <div class="row-img-txt text-center">ChoozMo AI Spokesgirl</div>
             </div>
             <div class="row-login">
                 <div class="login-content">

html/register.js

@@ -20,7 +20,7 @@ function validateEmail(email) {
     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>');
+            $('input.error').after('<p class="error-text" set-lan="html:errorEmail">請輸入正確E-mail</p>');
         } 
     } else {
         $('#register [name = "email"]').removeClass('error');
@@ -38,7 +38,7 @@ function validatePassword(psd) {
     } else {
         $('#register [name = "password"]').addClass('error');
         if( !$('.error-text').length ) {
-            $('input.error').after('<p class="error-text">密碼至少為4個字元</p>');
+            $('input.error').after('<p class="error-text" set-lan="html:errorPsd">密碼至少為4個字元</p>');
         } 
         return false;
     }

html/script_profile.js

@@ -10,7 +10,9 @@ function getCookie(name) {
 
 function renderView() {
     let token = getCookie('jwt_token');
-    document.cookie = "access_token_cookie" + "=" + token;
+    if(!token) {
+        return;
+    }
     // axios.defaults.withCredentials = false;
     axios({
         method: 'post',

html/static/lan.js

@@ -45,6 +45,8 @@ var zh = {
     "newHere": "還沒有帳號？",
     "goRegister": "註冊",
     "pricing" : "早鳥方案",
+    "errorEmail": "請輸入正確E-mail",
+    "errorPsd": "密碼至少為4個字元"
 };
 
 var en = {
@@ -74,7 +76,9 @@ var en = {
     "privacy_term": "I Agree to privacy policy and terms of use.",
     "newHere": "New here?",
     "goRegister": "REGISTER",
-    "pricing" : "Pricing"
+    "pricing" : "Pricing",
+    "errorEmail": "Please enter valid Email format.",
+    "errorPsd": "Passwords must be at least 4 characters long."
 };
 
 
@@ -167,4 +171,4 @@ function get_lan(m)
 // 預設中文版
 var lan = getCookie('lan');
 console.log(`目前語言版本: ${lan}`);
-changeLan(lan);
+changeLan('zh');

html/static/script_util.js

@@ -1,5 +1,8 @@
 function checkRoute() {
   jwt_token = get_jwt_token();
+  if(jwt_token == undefined) {
+    window.location.replace("login.html");
+  }
   axios({
     method: 'post',
     url: 'http://www.choozmo.com:8887/user_profile',
@@ -10,7 +13,7 @@ function checkRoute() {
   }).then(res => {
     console.log(res.status);
     if(res.status !== 200) {
-      window.location.href = 'login.html';
+      window.location.replace("login.html");
     }
   }).catch(err => {
     console.log(err);
@@ -357,8 +360,9 @@ function renderXHR_data(jsonObj) {
 }
 
 function get_jwt_token(){
-  jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0]
-  return jwt_raw.split('=')[1]
+  jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0];
+  if(!jwt_raw) {return}
+  return jwt_raw.split('=')[1];
 }
 
 function load_data() {

html/static/scss/style.css

@@ -796,7 +796,7 @@ body {
   -ms-grid-columns: (1fr)[2];
       grid-template-columns: repeat(2, 1fr);
   grid-gap: 7rem;
-  padding: 0 2rem;
+  padding: 0rem;
 }
 
 .navbar-nav button {
@@ -818,15 +818,32 @@ body {
 }
 
 .row-img {
+  position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(16, 68, 142, 0.7)), to(rgba(16, 68, 142, 0.7))), url("../img/sideImg.png");
+  background-image: linear-gradient(to right bottom, rgba(16, 68, 142, 0.7), rgba(16, 68, 142, 0.7)), url("../img/sideImg.png");
+  background-size: cover;
+  background-position: center;
+}
+
+.row-img .row-img-box {
+  color: white;
+}
+
+.row-img .row-img-txt {
+  position: absolute;
+  bottom: 2rem;
+  color: white;
+  left: 2rem;
+  font-size: 1.3rem;
 }
 
 .row-login {

html/static/scss/style.scss

@@ -749,7 +749,7 @@ body {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-gap :7rem;
-	padding: 0 2rem;
+	padding: 0rem;
 }
 
 .navbar-nav button {
@@ -771,9 +771,26 @@ body {
 }
 
 .row-img {
+	position: relative;
 	display: flex;
-	justify-content: flex-end;
+	justify-content: center;
 	align-items: center;
+	background-image: linear-gradient(to right bottom,
+    rgba(#10448E, 0.7),
+    rgba(#10448E, 0.7)
+	), url('../img/sideImg.png');
+	background-size: cover;
+    background-position: center;
+	.row-img-box {
+		color: white;
+	}
+	.row-img-txt {
+		position: absolute;
+		bottom: 2rem;
+		color: white;
+		left: 2rem;
+		font-size: 1.3rem;
+	}
 }
 
 .row-login {