From ade5572473eb2cbdfc5c35b1fab7dc25fcb4454c Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 7 Nov 2023 15:31:51 +0100
Subject: [PATCH] SSO buttons UI in login and register pages

---
 customize.dist/pages/login.js                     | 14 +++++++++++---
 customize.dist/pages/register.js                  | 12 +++++++++---
 customize.dist/src/less2/pages/page-login.less    | 12 ++++++++++--
 customize.dist/src/less2/pages/page-register.less | 13 +++++++++++--
 4 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/customize.dist/pages/login.js b/customize.dist/pages/login.js
index 2db0743d5..9234a447f 100644
--- a/customize.dist/pages/login.js
+++ b/customize.dist/pages/login.js
@@ -7,13 +7,18 @@ define([
 ], function (h, UI, Msg, Pages, Config) {
     return function () {
         document.title = Msg.login_login;
+
+        var ssoEnabled = (Config.sso && Config.sso.list && Config.sso.list.length) ?'': '.cp-hidden';
+        var ssoEnforced = (Config.sso && Config.sso.force) ? '.cp-hidden' : '';
+        Msg.sso_login_description = "Login from SSO...."; // XXX
+
         return [h('div#cp-main', [
             Pages.infopageTopbar(),
             h('div.container.cp-container', [
                 h('div.row.cp-page-title', h('h1', Msg.login_login)),
                 h('div.row', [
-                    h('div.col-md-3'),
-                    h('div#userForm.form-group.hidden.col-md-6', [
+                    h('div.col-md-3'+ssoEnforced),
+                    h('div#userForm.form-group.col-md-6'+ssoEnforced, [
                         h('div.cp-login-instance', Msg._getKey('login_instance', [ Pages.Instance.name ])),
                         h('div.big-container', [
                             h('div.input-container', [
@@ -50,7 +55,10 @@ define([
                             ),
                             h('button.login', Msg.login_login),
                         ]),
-                        Config.sso ? h('div.cp-login-sso') : undefined
+                    ]),
+                    h('div.col-md-3'+ssoEnabled),
+                    h('div#ssoForm.form-group.col-md-6'+ssoEnabled, [
+                        h('div.cp-login-sso', Msg.sso_login_description)
                     ]),
                     h('div.col-md-3')
                 ]),
diff --git a/customize.dist/pages/register.js b/customize.dist/pages/register.js
index 7dff130f0..a2c6c2b0a 100644
--- a/customize.dist/pages/register.js
+++ b/customize.dist/pages/register.js
@@ -10,6 +10,10 @@ define([
         document.title = Msg.register_header;
         var tos = $(UI.createCheckbox('accept-terms')).find('.cp-checkmark-label').append(Msg.register_acceptTerms).parent()[0];
 
+        var ssoEnabled = (Config.sso && Config.sso.list && Config.sso.list.length) ?'': '.cp-hidden';
+        var ssoEnforced = (Config.sso && Config.sso.force) ? '.cp-hidden' : '';
+        Msg.sso_register_description = "Register from SSO...."; // XXX
+
         var termsLink = Pages.customURLs.terms;
         $(tos).find('a').attr({
             href: termsLink,
@@ -49,7 +53,7 @@ define([
                     Pages.setHTML(h('div.cp-register-notes'), Msg.register_notes)
                 ]),
                 h('div.cp-reg-form.col-md-6', [
-                    h('div#userForm.form-group.hidden', [
+                    h('div#userForm.form-group'+ssoEnforced, [
                         h('div.cp-register-instance', [
                             Msg._getKey('register_instance', [Pages.Instance.name]),
                             h('br'),
@@ -90,8 +94,10 @@ define([
                         ]),
                         termsCheck,
                         h('button#register', Msg.login_register),
-                        Config.sso ? h('div.cp-register-sso') : undefined
-                    ])
+                    ]),
+                    h('div#ssoForm.form-group.col-md-6'+ssoEnabled, [
+                        h('div.cp-register-sso', Msg.sso_register_description)
+                    ]),
                 ]),
             ])
         ]);
diff --git a/customize.dist/src/less2/pages/page-login.less b/customize.dist/src/less2/pages/page-login.less
index 1745fdb7e..655a418e5 100644
--- a/customize.dist/src/less2/pages/page-login.less
+++ b/customize.dist/src/less2/pages/page-login.less
@@ -19,13 +19,16 @@
         }
     }
     .cp-container {
-        #userForm {
+        .cp-hidden {
+            display: none !important;
+        }
+        #userForm, #ssoForm {
             .cp-shadow();
             background-color: @cp_static-card-bg;
             padding: 10px;
             margin: 0 10px 10px 10px;
             border-radius: @infopages-radius-L;
-            .cp-login-instance {
+            .cp-login-instance, .cp-login-sso-description {
                 margin-bottom: 5px;
             }
             .form-control {
@@ -42,6 +45,11 @@
                 color: @cryptpad_text_col;
             }
         }
+        #ssoForm {
+            button {
+                margin: 0 5px;
+            }
+        }
         .align-items-center {
             box-shadow: 0 5px 15px @cp_shadow-color;
             background: @cryptpad_color_white;
diff --git a/customize.dist/src/less2/pages/page-register.less b/customize.dist/src/less2/pages/page-register.less
index a0e4a0b21..662a03381 100644
--- a/customize.dist/src/less2/pages/page-register.less
+++ b/customize.dist/src/less2/pages/page-register.less
@@ -85,13 +85,17 @@
                 z-index: 0;
             }
         }
-        #userForm {
+        .cp-hidden {
+            display: none !important;
+        }
+        #userForm, #ssoForm {
             padding: 15px;
             background-color: @cp_static-card-bg;
             position: relative;
             z-index: 2;
-            margin-bottom: 100px;
+            //margin-bottom: 100px;
             border-radius: @infopages-radius-L;
+            max-width: 100%;
             .cp-shadow();
             .form-control {
                 border-radius: @infopages-radius;
@@ -111,6 +115,11 @@
                 margin-top: 10px;
             }
         }
+        #ssoForm {
+            button {
+                margin: 0 5px;
+            }
+        }
 
         .cp-register-notes {
             ul.cp-notes-list {