fix(hub): improve login dark mode

Author: MioYuuIH

runtime/hub/frontend/packages/login-css/src/login.css

@@ -40,4 +40,5 @@
  * small login bundle doesn't need.
  */
 @import "tailwindcss" source(none);
+@custom-variant dark (&:where([data-bs-theme="dark"], [data-bs-theme="dark"] *));
 @source "../../../templates/**/*.html";

runtime/hub/frontend/templates/login.html

@@ -96,13 +96,16 @@ <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">AUP Learning Cloud</h
                 href='{{ authenticator_login_url | safe }}'>
                 Sign in with {{ login_service }}
             </a>
+            {% if 'github' in login_service|lower %}
+            <p class="text-sm text-blue-100 mt-3 mb-0">Start a free 2-hour trial with GitHub sign-in.</p>
+            {% endif %}
             {% endif %}
         </div>
     </div>
-    <div class="w-full md:w-3/5 flex items-center justify-center p-6 md:p-16">
+    <div class="w-full md:w-3/5 flex items-center justify-center p-6 md:p-16 bg-gray-50 dark:bg-gray-950">
         <div class="w-full max-w-md">
             {% block login_container %}
-            <div id="announcement-box" class="bg-blue-50 text-blue-900 border border-blue-200 p-4 mb-6 rounded-lg hidden"></div>
+            <div id="announcement-box" class="bg-blue-50 text-blue-900 border border-blue-200 dark:bg-blue-950 dark:text-blue-100 dark:border-blue-800 p-4 mb-6 rounded-lg hidden"></div>
 
             <script>
                 fetch("{{ static_url('announcement.txt') }}")
@@ -111,26 +114,28 @@ <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">AUP Learning Cloud</h
                         return resp.text();
                     })
                     .then(data => {
-                        if (data && data.trim()) {
-                            const box = document.getElementById("announcement-box");
-                            box.innerHTML = data;
-                            box.classList.remove("hidden");
-                        }
+                        const announcement = data.trim();
+                        const announcementText = announcement.replace(/<[^>]*>/g, "").trim().toLowerCase();
+                        if (!announcement || /^hello,\s*world!?$/.test(announcementText)) return;
+
+                        const box = document.getElementById("announcement-box");
+                        box.innerHTML = announcement;
+                        box.classList.remove("hidden");
                     })
                     .catch(err => {
                         console.warn("External announcement.txt load fail", err);
                     });
             </script>
-            <div class="bg-white rounded-xl shadow-lg p-8">
+            <div class="bg-white dark:bg-gray-900 border border-transparent dark:border-gray-700 rounded-xl shadow-lg dark:shadow-black/40 p-8">
                 <div class="text-center mb-8">
-                    <h1 class="text-2xl font-bold text-gray-800">Login to AUP Learning Cloud</h1>
+                    <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-50">Login to AUP Learning Cloud</h1>
                     {% if authenticator_mode == 'dummy' %}
-                    <p class="text-sm text-orange-600 mt-2">⚠️ Development Mode - Any username/password accepted</p>
+                    <p class="text-sm text-orange-600 dark:text-orange-300 mt-2">⚠️ Development Mode - Any username/password accepted</p>
                     {% endif %}
                 </div>
 
                 {% if login_error %}
-                <p class="text-red-500 font-medium mb-4 text-center">{{ login_error }}</p>
+                <p class="text-red-500 dark:text-red-300 font-medium mb-4 text-center">{{ login_error }}</p>
                 {% endif %}
 
                 {% if authenticator_mode == 'dummy' %}
@@ -139,21 +144,21 @@ <h1 class="text-2xl font-bold text-gray-800">Login to AUP Learning Cloud</h1>
                     <input type="hidden" name="_xsrf" value="{{ xsrf }}" />
 
                     <div>
-                        <label for="username_input" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
+                        <label for="username_input" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Username</label>
                         <input id="username_input" type="text" autocapitalize="off" autocorrect="off" autocomplete="username"
                             name="username" value="{{ username }}" autofocus="autofocus"
-                            class="block w-full pl-3 pr-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
+                            class="block w-full pl-3 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
                     </div>
 
                     <div>
-                        <label for="password_input" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
+                        <label for="password_input" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Password</label>
                         <input id="password_input" type="password" autocomplete="current-password" name="password"
-                            class="block w-full pl-3 pr-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
+                            class="block w-full pl-3 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
                     </div>
 
                     <div class="mt-6">
                         <button id="login_submit" type="submit"
-                            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300">
+                            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 transition duration-300">
                             Login
                         </button>
                     </div>
@@ -167,12 +172,13 @@ <h1 class="text-2xl font-bold text-gray-800">Login to AUP Learning Cloud</h1>
                      Form POST actions DO need urlencode due to different browser/server handling. -->
                 <div class="mb-6">
                     <a href="{{ base_url }}oauth_login?next={{ next }}"
-                       class="w-full flex justify-center items-center py-3 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300">
+                       class="w-full flex justify-center items-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-50 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 transition duration-300">
                         <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                             <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd"/>
                         </svg>
                         Sign in with GitHub
                     </a>
+                    <p class="text-sm text-gray-600 dark:text-gray-300 text-center mt-3 mb-0">Start a free 2-hour trial with GitHub sign-in.</p>
                 </div>
 
                 {% else %}
@@ -181,20 +187,21 @@ <h1 class="text-2xl font-bold text-gray-800">Login to AUP Learning Cloud</h1>
                 <!-- NOTE: Do NOT add "| urlencode" here - see comment above for explanation -->
                 <div class="mb-6">
                     <a href="{{ base_url }}github/oauth_login?next={{ next }}"
-                       class="w-full flex justify-center items-center py-3 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300">
+                       class="w-full flex justify-center items-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-50 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 transition duration-300">
                         <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                             <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd"/>
                         </svg>
                         Sign in with GitHub
                     </a>
+                    <p class="text-sm text-gray-600 dark:text-gray-300 text-center mt-3 mb-0">Start a free 2-hour trial with GitHub sign-in.</p>
                 </div>
 
                 <div class="relative mb-6">
                     <div class="absolute inset-0 flex items-center">
-                        <div class="w-full border-t border-gray-300"></div>
+                        <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
                     </div>
                     <div class="relative flex justify-center text-sm">
-                        <span class="px-2 bg-white text-gray-500">Or use local account</span>
+                        <span class="px-2 bg-white dark:bg-gray-900 text-gray-500 dark:text-gray-300">Or use local account</span>
                     </div>
                 </div>
 
@@ -203,21 +210,21 @@ <h1 class="text-2xl font-bold text-gray-800">Login to AUP Learning Cloud</h1>
                     <input type="hidden" name="_xsrf" value="{{ xsrf }}" />
 
                     <div>
-                        <label for="username_input" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
+                        <label for="username_input" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Username</label>
                         <input id="username_input" type="text" autocapitalize="off" autocorrect="off" autocomplete="username"
                             name="username" value="{{ username }}" autofocus="autofocus"
-                            class="block w-full pl-3 pr-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
+                            class="block w-full pl-3 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
                     </div>
 
                     <div>
-                        <label for="password_input" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
+                        <label for="password_input" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Password</label>
                         <input id="password_input" type="password" autocomplete="current-password" name="password"
-                            class="block w-full pl-3 pr-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
+                            class="block w-full pl-3 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
                     </div>
 
                     <div class="mt-6">
                         <button id="login_submit" type="submit"
-                            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300">
+                            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 transition duration-300">
                             Login
                         </button>
                     </div>