update loading

html/login.html

@@ -39,6 +39,7 @@
   
     <!-- ================================================================= -->
     <!-- navbar -->
+    <div class="loading"></div>
     <nav class="navbar navbar-expand-lg navbar-light d-block d-md-none">
         <div class="container-fluid">
             <!-- <a class="navbar-brand d-block d-md-none" href="index.html">AI Spokesgirl</a> -->

html/login.js

@@ -8,6 +8,7 @@ const btnUserProfile_d = document.querySelector('.login-top .btn-userProfile');
 const btnLogout_d= document.querySelector('.login-top .btn-logout');
 
 $('.psd_visible').hide();
+$('.loading').hide();
 
 $('.psd_invisible').click(function(){
     $(this).prev().toggle();
@@ -76,28 +77,14 @@ function login(){
         return;
     }
 
-    JsLoadingOverlay.show({
-        "overlayBackgroundColor": "#666666",
-        "overlayOpacity": 0.6,
-        "spinnerIcon": "ball-circus",
-        "spinnerColor": "#000",
-        "spinnerSize": "3x",
-        "overlayIDName": "overlay",
-        "spinnerIDName": "spinner",
-        "offsetX": 0,
-        "offsetY": 0,
-        "containerID": null,
-        "lockScroll": false,
-        "overlayZIndex": 10,
-        "spinnerZIndex": 11
-    });
     
     var data = "grant_type=&username=" + username + "&password="+password+"&scope=&client_id=&client_secret=";
     const headers = {
         "accept": "application/json",
         "Content-Type": "application/x-www-form-urlencoded"
     }
-    
+    $('.loading').show();
+    console.log(data);
     axios({
         method: 'post',
         url: url,
@@ -106,7 +93,6 @@ function login(){
     }).then(res => {
         console.log(res.data);
         document.cookie = 'jwt_token='+res.data.access_token;
-        JsLoadingOverlay.hide();
         if(res.data.access_token!=null && res.data.veri == 'ok') {
             var title = "登入成功";
             if (lang == 'en') { // 英文版訊息
@@ -118,13 +104,15 @@ function login(){
                 icon: 'success',
                 confirmButtonColor: '#3085d6',
             });
+            $('.loading').hide();
             window.setTimeout(() => {
                 window.location.href = 'user_profile2.html';
             }, 2000);
             btnLoginPage.style.display = 'none';
+            
         } else if (res.data.access_token!=null && res.data.veri != 'ok') {
             var title = "請前往信箱完成驗證";
-            JsLoadingOverlay.hide();
+            $('.loading').hide();
             if (lang == 'en') { // 英文版訊息
                 title = "Please check your email box to get validated!"
             }
@@ -137,7 +125,7 @@ function login(){
             });
         } else {
             var title = "登入失敗";
-            JsLoadingOverlay.hide();
+            $('.loading').hide();
             if (lang == 'en') { // 英文版訊息
                 title = "Login Failed!"
             }
@@ -147,9 +135,7 @@ function login(){
                 text: responseOBJ.detail,
                 confirmButtonColor: '#3085d6',
             });
-            window.setTimeout(() => {
-                location.reload();
-            }, 4000)
+            
         }
         
     }).catch(err => {
@@ -164,9 +150,7 @@ function login(){
             icon: 'error',
             confirmButtonColor: '#3085d6',
         });
-        window.setTimeout(() => {
-            location.reload();
-        }, 4000)
+        $('.loading').hide();
     })
 }
 /*     var xhr = new XMLHttpRequest();

html/loginB.html

@@ -36,7 +36,7 @@
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH"
     height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
-
+    <div class="loading"></div>
     <!-- ================================================================= -->
     <div class="card">
         <img class="profile-bgimg-m img-fluid" src="./static/img/userprofile/banner-m.png" class="card-img" alt="...">

html/register.html

@@ -39,6 +39,7 @@
 
     <!-- ================================================================= -->
     <!-- navbar -->
+    <div class="loading"></div>
     <div class="card">
         <img class="profile-bgimg-m img-fluid" src="./static/img/userprofile/banner-m.png" class="card-img" alt="...">
         <!-- 行動版選單 -->

html/register.js

@@ -8,6 +8,8 @@ const btnUserProfile_d = document.querySelector('.login-top .btn-userProfile');
 const btnLogout_d= document.querySelector('.login-top .btn-logout');
 $('.psd_visible').hide();
 
+$('.loading').hide();
+
 $('.psd_invisible').click(function(){
     $(this).prev().toggle();
     $(this).toggle();
@@ -142,21 +144,7 @@ function register() {
     }
 
     if(userName && validateConfirmName() && validateEmail(email) && validatePassword(password) && validateConfirmPsd(password, confirm_psd)) {
-        JsLoadingOverlay.show({
-            "overlayBackgroundColor": "#666666",
-            "overlayOpacity": 0.6,
-            "spinnerIcon": "ball-circus",
-            "spinnerColor": "#000",
-            "spinnerSize": "3x",
-            "overlayIDName": "overlay",
-            "spinnerIDName": "spinner",
-            "offsetX": 0,
-            "offsetY": 0,
-            "containerID": null,
-            "lockScroll": false,
-            "overlayZIndex": 10,
-            "spinnerZIndex": 11
-        });
+        $('.loading').show();
         let userObj = {
             username: userName,
             email,
@@ -174,7 +162,7 @@ function register() {
             data: userObj
         }).then(res => {
             console.log(res.data.msg);
-            JsLoadingOverlay.hide();
+            $('.loading').hide();
             let text;
             if (lang == 'en') { 
                 text = res.data.msg.eng;
@@ -188,6 +176,7 @@ function register() {
             });
         }).catch(err => {
             console.log(err);
+            $('.loading').hide();
             var title = "錯誤處理中，請稍後再試";
 
             if (lang == 'en') { // 英文版訊息
@@ -198,9 +187,7 @@ function register() {
                 icon: 'error',
                 confirmButtonColor: '#3085d6',
             });
-            window.setTimeout(() => {
-                location.reload();
-            }, 4000);
+            $('.loading').hide();
         })
     }
 }

html/static/scss/style.css

@@ -23,6 +23,22 @@ body {
   font-size: 1.05rem;
 }
 
+.loading {
+  width: 100%;
+  height: 100%;
+  opacity: 0.8;
+  background-color: white;
+  z-index: 10000;
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(225, 225, 225, 0.8);
+  background-image: url("../img/Cube-0.9s-197px.gif");
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+}
+
 .ml {
   margin-left: 10px;
 }

html/static/scss/style.scss

@@ -27,6 +27,22 @@ body {
 	font-size: 1.05rem;
 }
 
+.loading{
+	width:100%;
+	height:100%;
+	opacity:0.8;
+	background-color:white;
+	z-index:10000;
+	display:block;
+	position:fixed;
+	top:0;
+	left:0;
+	background-color: rgba(#e1e1e1, 0.8);
+	background-image: url('../img/Cube-0.9s-197px.gif');
+	background-repeat: no-repeat;
+	background-position: 50% 50%;
+}
+
 .ml {
 	margin-left: 10px;
 }