feat: 🎸 Add SSO login button

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> 

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
  */

src/routes/login.ts

@@ -14,9 +14,6 @@ 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,
@@ -25,7 +22,6 @@ function loginPage(req: Request, res: Response) {
         assetPath: assetPath,
         appPath: appPath,
     });
-    }
 }
 
 function setPasswordPage(req: Request, res: Response) {

src/views/login.ejs

@@ -24,6 +24,12 @@
         <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>
 
+        <% 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="password"><%= t("login.password") %></label>
@@ -66,6 +72,7 @@
                     <button class="btn btn-success"><%= t("login.button") %></button>
                 </div>
             </form>
+        <% } %>
     </div>
 </div>
 <script src="<%= appPath %>/login.js" crossorigin type="module"></script>

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",