From a3b88dba8dcc494cca74bbd13a6fc57090518be2 Mon Sep 17 00:00:00 2001
From: Aaron Lee <longyklee@gmail.com>
Date: Sun, 3 Oct 2021 22:33:53 +0800
Subject: [PATCH] Change UI

---
 static/allpages.css                | 25 ++++++++++
 templates/chgPassword.html         | 74 +++++++++++++++++++++++-------
 templates/forgotPassword.html      |  9 ++--
 templates/group_teach.html         |  2 +-
 templates/homeroom.html            |  2 +-
 templates/login.html               | 39 ++++++++++++----
 templates/selSubUser.html          |  5 +-
 templates/verifiedChgPassword.html | 32 +++++++++++--
 8 files changed, 151 insertions(+), 37 deletions(-)

diff --git a/static/allpages.css b/static/allpages.css
index 54e3bfe..372ca1e 100644
--- a/static/allpages.css
+++ b/static/allpages.css
@@ -5,6 +5,11 @@ body {
     font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", "sans-serif";
 }
 
+select option {
+    font-family: "Font Awesome 5 Free", "Lato", "Noto Sans TC", "Microsoft JhengHei", "sans-serif";
+    font-weight: 900;
+}
+
 div.col .row .col {
     border: 1px solid black;
     display: inline-block;
@@ -149,4 +154,24 @@ div.showTime {
     color: rgb(160, 160, 160);
     font-size: 0.7524em;
     margin-bottom: 20px;
+}
+
+.input-group-prepend .input-group-text, .input-group-append .input-group-text {
+    padding: 12px;
+}
+
+.toggle-password {
+    cursor: pointer;
+}
+
+label {
+    text-align: left;
+}
+
+.input-group.hasSmall {
+    margin-bottom: 0 !important;
+}
+
+#chgPasswordForm .form-group {
+    margin-bottom: 0 !important;
 }
\ No newline at end of file
diff --git a/templates/chgPassword.html b/templates/chgPassword.html
index 220349f..9433d16 100644
--- a/templates/chgPassword.html
+++ b/templates/chgPassword.html
@@ -24,6 +24,7 @@
             margin-bottom: 30px !important;
         }
     </style>
+    <script src="https://kit.fontawesome.com/52a3d6c810.js" crossorigin="anonymous"></script>
     <!-- <script src="https://www.google.com/recaptcha/api.js"></script> -->
 </head>
 
@@ -34,28 +35,39 @@
         <div class="row">
             <div class="col"></div>
             <div class="col-md-5">
-                <form action="/chgPassword" id="loginForm" method="post">
-                    <div class="form-group row" style="margin-bottom: 10px;">
-                        <div class="col-3 center"><label for="password" style="font-size: 19px">Old Password 舊密碼:
-                            </label>
+                <form action="/chgPassword" id="chgPasswordForm" method="post">
+                    <div class="form-group row">
+                        <label for="password">Old Password 舊密碼:</label><br>
+                        <div class="input-group mb-3">
+                            <input type="password" class="form-control" id="password" name="password" required>
+                            <div class="input-group-append">
+                                <span class="input-group-text toggle-password" onclick="password_show_hide(1);">
+                                    <i class="fas fa-eye" id="old_show_eye"></i>
+                                    <i class="fas fa-eye-slash d-none" id="old_hide_eye"></i>
+                                </span>
+                            </div>
                         </div>
-                        <div class="col-9 center-input"><input type="password" class="form-control" name="password"
-                                id="password" required></div>
                     </div>
-
-                    <div class="form-group row" style="margin-bottom: 10px;">
-                        <div class="col-3 center"><label for="password" style="font-size: 19px">New Username 新帳號:
-                            </label>
+                    <div class="form-group row">
+                        <label for="password">New Username 新帳號:</label><br>
+                        <div class="input-group mb-3">
+                            <input type="email" class="form-control" id="new_username" name="new_username" required>
                         </div>
-                        <div class="col-9 center-input"><input type="email" class="form-control" name="new_username"
-                                id="new_username" required></div>
                     </div>
-                    <div class="form-group row" style="margin-bottom: 10px;">
-                        <div class="col-3 center"><label for="password" style="font-size: 19px">New Password 新密碼:
-                            </label>
+                    <div class="form-group row">
+                        <label for="new_password">New Password 新密碼:</label><br>
+                        <div class="input-group mb-3 hasSmall">
+                            <input type="password" class="form-control" id="new_password" name="new_password"
+                                aria-describedby="passwordHelp" required>
+                            <div class="input-group-append">
+                                <span class="input-group-text toggle-password" onclick="password_show_hide(2);">
+                                    <i class="fas fa-eye" id="new_show_eye"></i>
+                                    <i class="fas fa-eye-slash d-none" id="new_hide_eye"></i>
+                                </span>
+                            </div>
                         </div>
-                        <div class="col-9 center-input"><input type="password" class="form-control" name="new_password"
-                                id="new_password" required></div>
+                        <small id="passwordHelp" class="form-text text-muted">6 characters
+                            minimum.</small>
                     </div>
                     <button class="btn btn-danger btn-block g-recaptcha" onclick="loadingAnimation()">Change Password
                         更改密碼</button>
@@ -97,6 +109,34 @@
                 $('.container').hide();
                 $('#loading').show();
             }
+        }
+
+        function password_show_hide(num) {
+            var x = '';
+            var show_eye = '';
+            var hide_eye = '';
+            if (num == 1) {
+                x = document.getElementById("password");
+                show_eye = document.getElementById("old_show_eye");
+                hide_eye = document.getElementById("old_hide_eye");
+            }
+            else {
+                x = document.getElementById("new_password");
+                show_eye = document.getElementById("new_show_eye");
+                hide_eye = document.getElementById("new_hide_eye");
+            }
+            hide_eye.classList.remove("d-none");
+            if (x.type === "password") {
+                x.type = "text";
+                show_eye.style.display = "none";
+                hide_eye.style.display = "block";
+            } else {
+                x.type = "password";
+                show_eye.style.display = "block";
+                hide_eye.style.display = "none";
+            }
+        }
+
     </script>
     <script src="/static/time.js"></script>
 </body>
diff --git a/templates/forgotPassword.html b/templates/forgotPassword.html
index b7142d3..01d56d8 100644
--- a/templates/forgotPassword.html
+++ b/templates/forgotPassword.html
@@ -19,6 +19,7 @@
 
         gtag('config', 'G-H6D61RSBHR');
     </script>
+    <script src="https://kit.fontawesome.com/52a3d6c810.js" crossorigin="anonymous"></script>
     <!-- <script src="https://www.google.com/recaptcha/api.js"></script> -->
 </head>
 
@@ -30,11 +31,11 @@
             <div class="col"></div>
             <div class="col-md-5">
                 <form action="/forgotPassword" id="forgotPassword_sel" method="post">
-                    <div class="form-group row" style="margin-bottom: 10px;">
-                        <div class="col-3 center"><label for="username" style="font-size: 19px">Username 帳號: </label>
+                    <div class="input-group mb-3">
+                        <div class="input-group-prepend">
+                            <span class="input-group-text"><i class="fa fa-user"></i></span>
                         </div>
-                        <div class="col-9 center-input"><input type="text" class="form-control" name="username"
-                                id="username"></div>
+                        <input type="text" class="form-control" name="username" id="username" placeholder="Username">
                     </div>
                     <button class="btn btn-warning btn-block g-recaptcha" onclick="loadingAnimation()">Confirm
                         確認</button>
diff --git a/templates/group_teach.html b/templates/group_teach.html
index 1d5ba42..1ed3e4f 100644
--- a/templates/group_teach.html
+++ b/templates/group_teach.html
@@ -29,7 +29,7 @@
         <h2 class="margin-top">{{cclass['category']}}: {{cclass['class_id']}}: {{cclass['name']}}</h2>
         <h2>[{{currDate}}]</h2>
         <a href="/logout"><button class="btn btn-primary margin-top logout">Logout 登出</button></a>
-        <a href="/select"><button class="btn btn-primary margin-top logout">選擇其他帳號 Choose Subuser</button></a>
+        <a href="/select"><button class="btn btn-primary margin-top logout">Choose Subuser 選擇其他帳號</button></a>
         <form action="/manage/date" id="dateSelForm" method="post">
             <select name="date" id="date" class="form-select logout" onchange="chgDate(this);">
                 {% for date in tmpAbsData %}
diff --git a/templates/homeroom.html b/templates/homeroom.html
index f6afe62..fae5e0a 100644
--- a/templates/homeroom.html
+++ b/templates/homeroom.html
@@ -30,7 +30,7 @@
         <h2 class="margin-top">{{homeroomCode[0]}}{{homeroomCode[1]}}</h2>
         <h2>[{{currDate}}]</h2>
         <a href="/logout"><button class="btn btn-primary logout margin-top">Logout 登出</button></a>
-        <a href="/select"><button class="btn btn-primary margin-top logout">選擇其他帳號 Choose Subuser</button></a>
+        <a href="/select"><button class="btn btn-primary margin-top logout">Choose Subuser 選擇其他帳號</button></a>
         <form action="/manage/date" id="dateSelForm" method="post">
             <select name="date" id="date" class="form-select logout" onchange="chgDate();">
                 {% for date in absData %}
diff --git a/templates/login.html b/templates/login.html
index d3176a0..329b0ce 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -19,6 +19,7 @@
 
         gtag('config', 'G-H6D61RSBHR');
     </script>
+    <script src="https://kit.fontawesome.com/52a3d6c810.js" crossorigin="anonymous"></script>
     <!-- <script src="https://www.google.com/recaptcha/api.js"></script> -->
 </head>
 
@@ -30,17 +31,24 @@
             <div class="col"></div>
             <div class="col-md-5">
                 <form action="/" id="loginForm" method="post">
-                    <div class="form-group row" style="margin-bottom: 10px;">
-                        <div class="col-3 center"><label for="username" style="font-size: 19px">Username 帳號: </label>
+                    <div class="input-group mb-3">
+                        <div class="input-group-prepend">
+                            <span class="input-group-text"><i class="fa fa-user"></i></span>
                         </div>
-                        <div class="col-9 center-input"><input type="text" class="form-control" name="username"
-                                id="username"></div>
+                        <input type="text" class="form-control" name="username" id="username" placeholder="Username">
                     </div>
-                    <div class="form-group row" style="margin-bottom: 10px;">
-                        <div class="col-3 center"><label for="password" style="font-size: 19px">Password 密碼: </label>
+                    <div class="input-group mb-3">
+                        <div class="input-group-prepend">
+                            <span class="input-group-text"><i class="fa fa-lock"></i></span>
+                        </div>
+                        <input type="password" class="form-control" name="password" id="password"
+                            placeholder="Password">
+                        <div class="input-group-append">
+                            <span class="input-group-text toggle-password" onclick="password_show_hide();">
+                                <i class="fas fa-eye" id="show_eye"></i>
+                                <i class="fas fa-eye-slash d-none" id="hide_eye"></i>
+                            </span>
                         </div>
-                        <div class="col-9 center-input"><input type="password" class="form-control" name="password"
-                                id="password"></div>
                     </div>
                     <button class="btn btn-primary btn-block g-recaptcha" onclick="loadingAnimation()">Login
                         登入</button>
@@ -75,6 +83,21 @@
             $('.container').hide();
             $('#loading').show();
         }
+        function password_show_hide() {
+            var x = document.getElementById("password");
+            var show_eye = document.getElementById("show_eye");
+            var hide_eye = document.getElementById("hide_eye");
+            hide_eye.classList.remove("d-none");
+            if (x.type === "password") {
+                x.type = "text";
+                show_eye.style.display = "none";
+                hide_eye.style.display = "block";
+            } else {
+                x.type = "password";
+                show_eye.style.display = "block";
+                hide_eye.style.display = "none";
+            }
+        }
     </script>
     <script src="/static/time.js"></script>
 </body>
diff --git a/templates/selSubUser.html b/templates/selSubUser.html
index 9185b96..7e07d0f 100644
--- a/templates/selSubUser.html
+++ b/templates/selSubUser.html
@@ -31,11 +31,12 @@
         <a href="/logout"><button class="btn btn-primary logout margin-top">Logout 登出</button></a>
         <form action="/select" id="subuser_form_sel" method="post">
             <select name="subuser_sel" id="subuser_sel" class="form-select logout" onchange="loadingAnimation();"
-                required>
+                required multiple>
                 <option value="" selected>Please select</option>
                 {% for key in data %}
                 {% if data[key]['type'] == 'homeroom' %}
-                <option value="homeroom^{{data[key]['homeroom']}}">Homeroom: {{data[key]['homeroom']}}</option>
+                <option value="homeroom^{{data[key]['homeroom']}}">HR: {{data[key]['homeroom']}}
+                </option>
                 {% else %}
                 {% for i in data[key] %}
                 {% if i == 'type' %}
diff --git a/templates/verifiedChgPassword.html b/templates/verifiedChgPassword.html
index 200b215..7591dcc 100644
--- a/templates/verifiedChgPassword.html
+++ b/templates/verifiedChgPassword.html
@@ -19,6 +19,7 @@
 
         gtag('config', 'G-H6D61RSBHR');
     </script>
+    <script src="https://kit.fontawesome.com/52a3d6c810.js" crossorigin="anonymous"></script>
     <!-- <script src="https://www.google.com/recaptcha/api.js"></script> -->
 </head>
 
@@ -31,11 +32,19 @@
             <div class="col-md-5">
                 <form action="/resetPassword" id="password_form" method="post">
                     <div class="form-group row" style="margin-bottom: 10px;">
-                        <div class="col-3 center"><label for="password" style="font-size: 19px">New Password 新密碼:
-                            </label>
+                        <label for="password">New Password 新密碼:</label><br>
+                        <div class="input-group mb-3 hasSmall">
+                            <input type="password" class="form-control" id="password" name="password"
+                                aria-describedby="passwordHelp" required>
+                            <div class="input-group-append">
+                                <span class="input-group-text toggle-password" onclick="password_show_hide();">
+                                    <i class="fas fa-eye" id="show_eye"></i>
+                                    <i class="fas fa-eye-slash d-none" id="hide_eye"></i>
+                                </span>
+                            </div>
                         </div>
-                        <div class="col-9 center-input"><input type="password" class="form-control" name="password"
-                                id="password"></div>
+                        <small id="passwordHelp" class="form-text text-muted">6 characters
+                            minimum.</small>
                     </div>
                     <button class="btn btn-warning btn-block g-recaptcha" onclick="loadingAnimation()">Confirm
                         確認</button>
@@ -64,6 +73,21 @@
             $('.container').hide();
             $('#loading').show();
         }
+        function password_show_hide() {
+            var x = document.getElementById("password");
+            var show_eye = document.getElementById("show_eye");
+            var hide_eye = document.getElementById("hide_eye");
+            hide_eye.classList.remove("d-none");
+            if (x.type === "password") {
+                x.type = "text";
+                show_eye.style.display = "none";
+                hide_eye.style.display = "block";
+            } else {
+                x.type = "password";
+                show_eye.style.display = "block";
+                hide_eye.style.display = "none";
+            }
+        }
     </script>
     <script src="/static/time.js"></script>
 </body>