From 63739fc49cd2b9e86bf75cc371669860bab8113a Mon Sep 17 00:00:00 2001
From: Zack <speed2exe@live.com.sg>
Date: Wed, 16 Oct 2024 14:00:03 +0800
Subject: [PATCH] feat: oauth login box (#874)

---
 admin_frontend/assets/login.css           |  1 +
 admin_frontend/templates/pages/login.html | 26 +++++++++++++++--------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/admin_frontend/assets/login.css b/admin_frontend/assets/login.css
index 3bcbd80c..d3fa11f5 100644
--- a/admin_frontend/assets/login.css
+++ b/admin_frontend/assets/login.css
@@ -28,6 +28,7 @@
   align-items: center;
   justify-content: center;
   width: 100%;
+  flex-wrap: wrap;
 }
 
 .oauth-icon {
diff --git a/admin_frontend/templates/pages/login.html b/admin_frontend/templates/pages/login.html
index 6b512d1e..f171bf7d 100644
--- a/admin_frontend/templates/pages/login.html
+++ b/admin_frontend/templates/pages/login.html
@@ -94,17 +94,25 @@
 
     <h3>OAuth Login</h3>
     <div id="oauth-container">
-      {% for provider in oauth_providers %}
-      <div class="oauth-icon">
-        <a href="/gotrue/authorize?provider={{ provider|escape }}&redirect_to={{ oauth_redirect_to|default("/web/login-callback")|escape }}">
-          <div
-            hx-get="../assets/{{ provider|escape }}/logo.html"
-            hx-trigger="load"
-            hx-swap="outerHTML"
-          ></div>
+      <div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: center">
+        {% for provider in oauth_providers %}
+        <a
+          href="/gotrue/authorize?provider={{ provider|escape }}&redirect_to={{ oauth_redirect_to|default("/web/login-callback")|escape }}"
+          style="text-decoration: none"
+        >
+          <div style="display: flex; align-items: center; border: 1px solid; margin: 4px; border-radius: 4px; height: 64px">
+            <div> &nbsp&nbsp{{ provider }} </div>
+            <div class="oauth-icon">
+              <div
+                hx-get="../assets/{{ provider|escape }}/logo.html"
+                hx-trigger="load"
+                hx-swap="outerHTML"
+              ></div>
+            </div>
+          </div>
         </a>
+        {% endfor %}
       </div>
-      {% endfor %}
     </div>
     {% endif %}