From 27e15c63461c01d8488fac301cf2deaf25c6fee2 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 7 Jun 2022 22:20:22 -0400
Subject: [PATCH] validate jquery load and domain input

---
 users/templates/users/login.html | 51 ++++++++++++++++++++++++--------
 1 file changed, 39 insertions(+), 12 deletions(-)
diff --git a/users/templates/users/login.html b/users/templates/users/login.html
index 3b609043..3338ded8 100644
--- a/users/templates/users/login.html
+++ b/users/templates/users/login.html
@@ -1,4 +1,3 @@
-
 {% load i18n %}
 {% load static %}
 <!DOCTYPE html>
@@ -16,8 +15,38 @@
     <link rel="stylesheet" href="{% static 'css/boofilsic_box.css' %}">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script>
+    <script> $(document).ready( function() { $('.delayed').remove(); } ); </script>
     <title>{{ site_name }} - {% trans '登录' %}</title>
     <link rel="search"type="application/opensearchdescription+xml" title="NeoDB" href="{% static 'opensearch.xml' %}">
+    <style type="text/css">
+        .delayed {
+          animation: 10s fadeIn;
+          animation-fill-mode: forwards;
+          visibility: hidden;
+        }
+        @keyframes fadeIn {
+          99% {
+            visibility: hidden;
+          }
+          100% {
+            visibility: visible;
+            opacity: 1;
+          }
+        }
+        input, input[type='text']:focus, input[type='search']:focus{
+            border: #84C2FB solid 1px;
+        }
+        input[type='submit'] {
+            background: #84C2FB;
+            border: #84C2FB solid 1px;
+        }
+        input:invalid#domain {
+            border: #F9A879 dashed 1px;
+        }
+        a {
+            color: #84C2FB;
+        }
+    </style>
 </head>
 <body>
     <style>
@@ -28,20 +57,21 @@
         }
     </style>
     <div id="loginBox" class="box">
-
-            <img src="{% static 'img/logo.svg' %}" class="logo" alt="boofilsic logo">
-        
+        <img src="{% static 'img/logo.svg' %}" class="logo" alt="boofilsic logo">
         <div id="loginButton">
-            
-            
             {% if user.is_authenticated %}
             <a href="{% url 'common:home' %}" class="button">{% trans '前往首页' %}</a>
             {% elif allow_any_site %}
-            <form action="/users/connect" onsubmit="return /^(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,})$/.test($('#domain').val())">
-            <input type="search" name="domain" id="domain" placeholder="实例域名，如mastodon.social (不含@)" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
+            <form action="/users/connect">
+            <input type="search" name="domain" id="domain"
+                pattern="(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,})"
+                title="实例域名(不含@和@之前的部分)，如mastodon.social"
+                placeholder="实例域名(不含@和@之前的部分)，如mastodon.social"
+                autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
             <input type='submit' value="{% trans '授权登录' %}" />
             <br><a target="_blank" href="https://about.neodb.social/doc/howto/">{% trans '了解更多' %}</a>
             </form>
+            <script type="text/javascript">if (Cookies.get('mastodon_domain')) $('#domain').val(Cookies.get('mastodon_domain'));</script>
             {% else %}            
             <select name="sites" id="sitesSelect" placeholder="test">
                 {% for site in sites %}
@@ -50,13 +80,10 @@
             </select>
             <button name='login'>{% trans '授权登录' %}</button>
             {% endif %}
-                
+            <div class="delayed">网页加载超时，请检查网络（翻墙）设置。</div>
         </div>
-
     </div>
     {% if not user.is_authenticated and not allow_any_site %}
-    
-    
     <script>
         {% if selected_site %}
         $("#sitesSelect").val("{{ selected_site }}");
