register/login test

html/login.js

@@ -7,6 +7,20 @@ const btnLoginPage_d = document.querySelector('.login-top .btn-login');
 const btnUserProfile_d = document.querySelector('.login-top .btn-userProfile');
 const btnLogout_d= document.querySelector('.login-top .btn-logout');
 
+$('.psd_visible').hide();
+
+$('.psd_invisible').click(function(){
+    $(this).prev().toggle();
+    $(this).toggle();
+    $(this).parent().children(':first').attr('type', 'text');
+})
+
+$('.psd_visible').click(function(){
+    $(this).toggle();
+    $(this).next().toggle();
+    $(this).parent().children(':first').attr('type', 'password');
+})
+
 inputPassword.addEventListener('keyup', loginByEnter);
 btnLogin.addEventListener('click', login);
 

html/loginB.html

@@ -199,12 +199,20 @@
                             <div class="form-floating mb-3">
                                 <input type="text" class="form-control" id="username" name="username"
                                     placeholder="User name">
-                                <label for="username"><i class="fas fa-user me-2"></i>User name</label>
+                                <label for="username">
+                                    <i class="fas fa-user me-2"></i>
+                                    <lan set-lan="html:userName">User Name</lan>
+                                </label>
                             </div>
-                            <div class="form-floating mb-3">
+                            <div class="form-floating mb-3 position-relative">
                                 <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>
+                                <label for="password">
+                                    <i class="fas fa-lock me-2"></i>
+                                    <lan set-lan="html:register_password">Password</lan>
+                                </label>
+                                <i class="fas fa-eye psd_visible position-absolute"></i>
+                                <i class="fas fa-eye-slash psd_invisible position-absolute"></i>
                             </div>
                             <div class="d-flex justify-content-center">
                                 <p set-lan="html:newHere">還沒有帳號？</p>

html/make_video.html

@@ -285,7 +285,7 @@
                         <!-- fieldsets -->
                         <fieldset>
                             <h3 class="fs-subtitle"><lan set-lan="html:video_title">標題</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的內嵌標題 The title of your video"></h3>            
-                            <input id=title type="text" name='t1' class='title_new' value="" set-lan="placeholder:video_title" /> <br/>
+                            <input id=title type="text" name='t1' class='title_new' set-lan="placeholder:video_title" /> <br/>
                         </fieldset>
                         <fieldset>
                             <h3  class="fs-subtitle"><lan set-lan="html:choose_character">選擇人物</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者 The spokesgirl of your video"></h3>            

html/register.html

@@ -224,16 +224,32 @@
                         <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>
+                                    <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><lan set-lan="html:userName">User Name</lan></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>
+                                    <label for="email"><i class="fas fa-envelope me-2"></i><lan set-lan="html:emailAddress">Email address</lan></label>
                                 </div>
-                                <div class="form-floating mb-3">
+                                <div class="form-floating mb-3 position-relative">
                                     <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>
+                                    <label for="password">
+                                        <i class="fas fa-lock me-2"></i>
+                                        <lan set-lan="html:register_password">Password</lan>
+                                        <lan style="font-size: 12px;" set-lan="html:password_length">(4-12位數密碼)</lan>
+                                    </label>
+                                    <i class="fas fa-eye psd_visible position-absolute"></i>
+                                    <i class="fas fa-eye-slash psd_invisible position-absolute"></i>
+                                </div>
+                                <div class="form-floating mb-3 position-relative">
+                                    <input type="password" class="form-control" id="confirm_password" name="confirm_password"  placeholder="Password" required>
+                                    <label for="confirm_password">
+                                        <i class="fas fa-lock me-2"></i>
+                                        <lan set-lan="html:confirm_password">Password</lan>
+                                        <lan style="font-size: 12px;" set-lan="html:password_confirm_txt">(再次輸入您的密碼)</lan>
+                                    </label>
+                                    <i class="fas fa-eye psd_visible position-absolute"></i>
+                                    <i class="fas fa-eye-slash psd_invisible position-absolute"></i>
                                 </div>
                                 <!-- <div class="mb-3">
                                     <input type="checkbox" id="privacy" name="privacy" checked required>
@@ -246,6 +262,10 @@
                                 <div class="mb-3 d-flex justify-content-center">
                                     <button type="button" class="btn btn-primary align-items-center btn-register" set-lan="html:goRegister_link">立即註冊</button>
                                 </div>
+                                <small class="register__policies" set-lan="html:policies">
+                                    註冊即表示您已閱讀並同意 <a href="" onclick="window.open('./privacy.html')">服務條款</a>
+                                     及 <a href="" onclick="window.open('./privacy.html')">隱私權政策</a>
+                                </small>
                             </form>
                         </div>
                     </div>
@@ -276,8 +296,8 @@
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="static/owl.carousel.min.js"></script>
     <script src="static/loading-overlay.js"></script>
-    <script src="register.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>
+    <script src="register.js"></script>
     <script src="static/common.js"></script>
     <script>
         $(".menu-bar").click(function () {

html/register.js

@@ -6,6 +6,19 @@ const registerPassword = document.querySelector('#register #password');
 const btnLoginPage_d = document.querySelector('.login-top .btn-login');
 const btnUserProfile_d = document.querySelector('.login-top .btn-userProfile');
 const btnLogout_d= document.querySelector('.login-top .btn-logout');
+$('.psd_visible').hide();
+
+$('.psd_invisible').click(function(){
+    $(this).prev().toggle();
+    $(this).toggle();
+    $(this).parent().children(':first').attr('type', 'text');
+})
+
+$('.psd_visible').click(function(){
+    $(this).toggle();
+    $(this).next().toggle();
+    $(this).parent().children(':first').attr('type', 'password');
+})
 
 registerPassword.addEventListener('keyup', registerByEnter);
 btnRegister.addEventListener('click', register);
@@ -53,10 +66,25 @@ function validatePassword(psd) {
     }
 }
 
+function validateConfirmPsd(psd1, psd2) {
+    if(psd1 == psd2) {
+        $('#register #confirm_password').removeClass('error');
+        $('.error-text').remove();
+        return true;
+    } else {
+        $('#register #confirm_password').addClass('error');
+        if( !$('.error-text').length ) {
+            $('input.error').after('<p class="error-text" set-lan="html:errorConsistentPsd">密碼輸入需一致</p>');
+        } 
+        return false;
+    }
+}
+
 function register() {
     let userName = $('#register [name = "username"]').val();
     let email = $('#register [name = "email"]').val();
     let password = $('#register [name = "password"]').val();
+    let confirm_psd = $('#register #confirm_password').val();
 
     // 註冊資料檢查
     if (username == '' || password == '') {
@@ -78,7 +106,7 @@ function register() {
         return;
     }
 
-    if(userName && validateEmail(email) && validatePassword(password)) {
+    if(userName && validateEmail(email) && validatePassword(password) && validateConfirmPsd(password, confirm_psd)) {
         JsLoadingOverlay.show({
             "overlayBackgroundColor": "#666666",
             "overlayOpacity": 0.6,

html/static/lan.js

@@ -57,6 +57,12 @@ var zh = {
     "login_link" : "立即登入",
     "user_profile": "會員資料",
     "logout": "登出",
+    "userName": "使用者名稱",
+    "emailAddress": "電子信箱",
+    "register_password": "設定密碼",
+    "confirm_password": "確認密碼",
+    "password_length": "(4-12位數密碼)",
+    "password_confirm_txt": "(再次輸入您的密碼)",
     "logout-m": "<i class='fas fa-sign-out-alt text-white me-3'></i>登&emsp;&ensp;出",
     "en": "English",
     "zh": "中文",
@@ -86,6 +92,7 @@ var zh = {
     "pricing-m" : "<i class='fas fa-tags me-2'></i>&ensp;早鳥方案",
     "errorEmail": "請輸入正確E-mail",
     "errorPsd": "密碼至少為4個字元",
+    "errorConsistentPsd": "密碼輸入需一致",
     "used": "已使用",
     "left": "未使用",
     "sec": "秒",
@@ -147,7 +154,6 @@ var zh = {
     "Virtual_Anchor_text":"匯集多種AI智能技術、能說各種國外語言、技術強大快速部屬、影片經濟效益大、無論內銷外銷、嘴型真實感。",
     "index-sec02":"static/img/index/组 29.webp",
     "index-sec02-m":"static/img/index/组 29-m.webp",
-    
 
 };
 
@@ -162,6 +168,12 @@ var en = {
     "login_link" : "Login",
     "user_profile": "User Profile",
     "logout": "Logout",
+    "userName": "User name",
+    "emailAddress": "Email Address",
+    "register_password": "Password",
+    "confirm_password": "Confirm Password",
+    "password_length": "(4-12 Characters long)",
+    "password_confirm_txt": "(Type your password again)",
     "en": "English",
     "zh": "中文",
     "choose_character": "Choose Character",
@@ -189,6 +201,7 @@ var en = {
     "pricing" : "Pricing",
     "errorEmail": "Please enter valid Email format.",
     "errorPsd": "Passwords must be at least 4 characters long.",
+    "errorConsistentPsd": "Two input password must be consistent.",
     "used": "Already Used",
     "left": "Left",
     "sec": "Sec",

html/static/scss/style.css

@@ -1243,6 +1243,19 @@ body {
   }
 }
 
+.psd_visible,
+.psd_invisible {
+  right: .5rem;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+
+.register__policies {
+  font-size: 12px;
+  color: gray;
+}
+
 @media screen and (max-height: 450px) {
   .sidenav {
     padding-top: 15px;

html/static/scss/style.scss

@@ -1162,6 +1162,18 @@ body {
 	}
 }
 
+.psd_visible,
+.psd_invisible {
+	right: .5rem;
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+.register__policies {
+	font-size: 12px;
+	color: gray;
+}
+
 @media screen and (max-height: 450px) {
 	.sidenav {
 		padding-top: 15px;