From 9da2032bb8d9c45b8269629867c88dabb20f6db1 Mon Sep 17 00:00:00 2001
From: namasikanam <namasikanam@gmail.com>
Date: Mon, 6 Dec 2021 00:14:48 +0800
Subject: [PATCH] user button at homepage

---
 app.py              |  7 ++++++
 templates/home.html | 55 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+)

diff --git a/app.py b/app.py
index a265442..dc9669e 100644
--- a/app.py
+++ b/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())
 
 
diff --git a/templates/home.html b/templates/home.html
index c542965..e83f069 100644
--- a/templates/home.html
+++ b/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>