From 886e63f12826034ec6535db64ca224a65b2a7f1b Mon Sep 17 00:00:00 2001
From: Jin <22962980+JYC333@users.noreply.github.com>
Date: Wed, 26 Mar 2025 01:48:42 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20SSO=20login=20butt?=
 =?UTF-8?q?on?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 images/google-logo.svg                      |  7 ++
 src/public/stylesheets/theme-next/pages.css | 25 +++++++
 src/routes/login.ts                         | 20 +++---
 src/views/login.ejs                         | 75 +++++++++++----------
 translations/en/server.json                 |  3 +-
 5 files changed, 83 insertions(+), 47 deletions(-)
 create mode 100644 images/google-logo.svg

diff --git a/images/google-logo.svg b/images/google-logo.svg
new file mode 100644
index 000000000..c69cd1e7f
--- /dev/null
+++ b/images/google-logo.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z" fill="#4285f4"/>
+    <path d="M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z" fill="#34a853"/>
+    <path d="M3.964 10.71c-.18-.54-.282-1.117-.282-1.71s.102-1.17.282-1.71V4.958H.957C.347 6.173 0 7.548 0 9s.348 2.827.957 4.042l3.007-2.332z" fill="#fbbc05"/>
+    <path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z" fill="#ea4335"/>
+</svg> 
\ No newline at end of file
diff --git a/src/public/stylesheets/theme-next/pages.css b/src/public/stylesheets/theme-next/pages.css
index e5778d4ce..7cc1ee77b 100644
--- a/src/public/stylesheets/theme-next/pages.css
+++ b/src/public/stylesheets/theme-next/pages.css
@@ -32,6 +32,31 @@
     color: var(--dropdown-item-icon-destructive-color) !important;
 }
 
+.google-login-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    color: #757575;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 10px 20px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    margin-bottom: 20px;
+    text-decoration: none;
+    transition: background-color 0.3s;
+}
+.google-login-btn:hover {
+    background-color: #f5f5f5;
+}
+.google-login-btn img {
+    margin-right: 10px;
+    width: 18px;
+    height: 18px;
+}
+
 /* 
  * SEARCH PAGE
  */
diff --git a/src/routes/login.ts b/src/routes/login.ts
index 311637e02..e0f297c0a 100644
--- a/src/routes/login.ts
+++ b/src/routes/login.ts
@@ -14,18 +14,14 @@ import totp from '../services/totp.js';
 import open_id from '../services/open_id.js';
 
 function loginPage(req: Request, res: Response) {
-    if (open_id.isOpenIDEnabled()) {
-        res.redirect('/authenticate');
-    } else {
-        res.render('login', {
-            wrongPassword: false,
-            wrongTotp: false,
-            totpEnabled: totp.isTotpEnabled(),
-            ssoEnabled: open_id.isOpenIDEnabled(),
-            assetPath: assetPath,
-            appPath: appPath,
-        });
-    }
+    res.render('login', {
+        wrongPassword: false,
+        wrongTotp: false,
+        totpEnabled: totp.isTotpEnabled(),
+        ssoEnabled: open_id.isOpenIDEnabled(),
+        assetPath: assetPath,
+        appPath: appPath,
+    });
 }
 
 function setPasswordPage(req: Request, res: Response) {
diff --git a/src/views/login.ejs b/src/views/login.ejs
index f07b924d2..56c2bf762 100644
--- a/src/views/login.ejs
+++ b/src/views/login.ejs
@@ -24,48 +24,55 @@
         <img class="img-fluid d-block mx-auto" style="height: 8rem;" src="<%= assetPath %>/images/icon-color.svg" aria-hidden="true" draggable="false" >
         <h1 class="text-center"><%= t("login.heading") %></h1>
 
-        <form action="login" method="POST">
-            <div class="form-group">
-                <label for="password"><%= t("login.password") %></label>
-                <div class="controls">
-                    <input id="password" name="password" placeholder="" class="form-control" type="password" autofocus>
-                </div>
-            </div>
-            <% if( totpEnabled ) { %>
+        <% if (ssoEnabled) { %>
+            <a href="/authenticate" class="google-login-btn">
+                <img src="<%= assetPath %>/images/google-logo.svg" alt="Google logo">
+                <%= t("login.sign_in_with_google") %>
+            </a>
+        <% } else { %>
+            <form action="login" method="POST">
                 <div class="form-group">
-                    <label for="totpToken">TOTP Token</label>
+                    <label for="password"><%= t("login.password") %></label>
                     <div class="controls">
-                        <input id="totpToken" name="totpToken" placeholder="" class="form-control" type="text" required />
+                        <input id="password" name="password" placeholder="" class="form-control" type="password" autofocus>
                     </div>
                 </div>
-            <% } %>
-
-            <% if ( wrongPassword ) { %>
-                <div class="alert alert-warning">
-                    <%= t("login.incorrect-password") %>
-                </div>
-            <% } %>
-            <% if ( totpEnabled ) { %>
-                <% if( wrongTotp ) { %>
-                    <div class="alert alert-warning">
-                        <%= t("login.incorrect-totp") %>
+                <% if( totpEnabled ) { %>
+                    <div class="form-group">
+                        <label for="totpToken">TOTP Token</label>
+                        <div class="controls">
+                            <input id="totpToken" name="totpToken" placeholder="" class="form-control" type="text" required />
+                        </div>
                     </div>
                 <% } %>
-            <% } %>
-                
 
-            <div class="form-group">
-                <div class="checkbox">
-                    <label class="tn-checkbox">
-                        <input id="remember-me" name="rememberMe" value="1" type="checkbox">
-                        <%= t("login.remember-me") %>
-                    </label>
+                <% if ( wrongPassword ) { %>
+                    <div class="alert alert-warning">
+                        <%= t("login.incorrect-password") %>
+                    </div>
+                <% } %>
+                <% if ( totpEnabled ) { %>
+                    <% if( wrongTotp ) { %>
+                        <div class="alert alert-warning">
+                            <%= t("login.incorrect-totp") %>
+                        </div>
+                    <% } %>
+                <% } %>
+                    
+
+                <div class="form-group">
+                    <div class="checkbox">
+                        <label class="tn-checkbox">
+                            <input id="remember-me" name="rememberMe" value="1" type="checkbox">
+                            <%= t("login.remember-me") %>
+                        </label>
+                    </div>
                 </div>
-            </div>
-            <div class="form-group">
-                <button class="btn btn-success"><%= t("login.button") %></button>
-            </div>
-        </form>
+                <div class="form-group">
+                    <button class="btn btn-success"><%= t("login.button") %></button>
+                </div>
+            </form>
+        <% } %>
     </div>
 </div>
 <script src="<%= appPath %>/login.js" crossorigin type="module"></script>
diff --git a/translations/en/server.json b/translations/en/server.json
index 3ad4b5d84..8e5633cd0 100644
--- a/translations/en/server.json
+++ b/translations/en/server.json
@@ -102,7 +102,8 @@
     "incorrect-password": "Password is incorrect. Please try again.",
     "password": "Password",
     "remember-me": "Remember me",
-    "button": "Login"
+    "button": "Login",
+    "sign_in_with_google": "Sign in with Google"
   },
   "set_password": {
     "title": "Set Password",