user button at homepage

app.py

@@ -209,6 +209,13 @@ def logout():
 @cache.cached(timeout=10)
 def home():
     stories = Story.query.order_by(Story.total_like_num.desc()).all()
+
+    username = session.get('username', '')
+    avatar = session.get('avatar', C.guest_avatar)
+    cs_login_url = MAST_LOGIN_URL
+    guest_login_url = url_for('main_bp.guest_login')
+    verify_questions = sample_question(C.verify_questions)
+    
     return render_template('home.html', **locals())
 
 

templates/home.html

@@ -24,6 +24,15 @@
       <img src="static/img/logo.png" width="200px" />
     </div>
 
+    <div class="user-info">
+      <div class="btn-group">
+        <button type="button" class="btn btn-dark rounded-0 p-1 pl-2">
+          <img class="rounded-circle" src="{{avatar}}" width="24">
+          <span class="username ml-2">{{username or '未登录'}}</span>
+        </button>
+      </div>
+    </div>
+
     {% for story in stories %}
       <a href="{{story.id}}">
       <div class="card story-card" data-story-id="{{story.id}}">
@@ -38,6 +47,41 @@
       </a>
     {% endfor %}
 
+    <div class="modal fade" id="loginModal" tabindex="-1">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h3 class="modal-title">登录</h3>
+          </div>
+          <div class="modal-body">
+  
+            <div class="text-center mb-4">
+              <a href="{{cs_login_url}}" target="_blank" class="btn btn-link">闭社帐号登录</a>
+            </div>
+  
+            <div class="text-center mb-4">
+              <a href="#answerLogin" data-bs-toggle="collapse" class="btn btn-link" role="button">答题验证登录</a>
+              <div class="collapse" id="answerLogin">
+                <form action="{{guest_login_url}}" method="post">
+                  {% for id, question, hint, answer in verify_questions %}
+                    <div class="form-group row">
+                      <label for="{{id}}" class="col-sm-8 col-form-label">{{question}}</label>
+                      <div class="col-sm-4">
+                        <input type="text" class="form-control" name="{{id}}" id="{{id}}" placeholder="{{hint}}" required="required">
+                      </div>
+                    </div>
+                  {% endfor %}
+                  <button type="submit" class="btn btn-link btn-lg mb-3">提交</button>
+                </form>
+              </div>
+              <p>
+            </div>
+  
+          </div>
+        </div>
+      </div>
+    </div>
+
   </div>
 
 
@@ -52,4 +96,15 @@
 <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 
+<script>
+  function check_login() {
+    if (! "{{username}}") {
+      new bootstrap.Modal(document.getElementById('loginModal')).show();
+      return true;
+    }
+  }
+  
+  $('.user-info .btn').click(check_login);
+</script>
+
 </html>