Fixes #4263 - Possibility to define a custom text for the SAML login button

LICENSE-ICONS-3RD-PARTY.json

@@ -639,6 +639,11 @@
         "url": "",
         "license": "MIT"
     },
+    "saml-button.svg": {
+        "author": "Zammad",
+        "url": "",
+        "license": "MIT"
+    },
     "search.svg": {
         "author": "",
         "url": "",

app/assets/javascripts/app/views/login.jst.eco

@@ -49,7 +49,7 @@
               <button class="btn btn--primary" type="submit"><%- @T('Sign in') %></button>
 
               <% if @C('user_lost_password'): %>
-                <a href="#password_reset" class="btn btn--text btn--secondary align-right"><%- @T('Forgot password?') %></a>
+                <a href="#password_reset" class="btn btn--text btn--secondary align-center"><%- @T('Forgot password?') %></a>
               <% end %>
             </div>
 
@@ -79,7 +79,7 @@
                 <button type="submit" class="auth-provider auth-provider--<%= auth_provider.class %>">
                   <%- @Icon("#{auth_provider.class}-button", 'provider-icon') %>
                   <span class="provider-name">
-                    <%- @T(auth_provider.name) %>
+                    <%- @C("#{auth_provider.config}_display_name") || @T(auth_provider.name) %>
                   </span>
                 </button>
               </form>

app/assets/javascripts/app/views/profile/linked_accounts.jst.eco

@@ -6,7 +6,7 @@
 <div class="page-content">
   <ul>
     <% for key, provider of @auth_providers: %>
-      <li> <%- @T( provider.name ) %>
+      <li> <%- @C("#{provider.config}_display_name") || @T( provider.name ) %>
         <% if !@user['accounts'] || !@user['accounts'][key]: %>
           <form method="post" class="hidden js-addForm-<%= key %>" action="<%= provider.url %>">
             <input type="hidden" name="authenticity_token" value="<%= Spine.Ajax.defaults.headers['X-CSRF-Token'] %>">

app/assets/stylesheets/svg-dimensions.css

@@ -129,6 +129,7 @@
 .icon-reply-all { width: 16px; height: 17px; }
 .icon-reply { width: 16px; height: 17px; }
 .icon-report { width: 20px; height: 20px; }
+.icon-saml-button { width: 29px; height: 24px; }
 .icon-search { width: 24px; height: 24px; }
 .icon-searchdetail { width: 18px; height: 14px; }
 .icon-signed { width: 14px; height: 14px; }

app/assets/stylesheets/zammad.scss

@@ -3250,8 +3250,16 @@ kbd {
 }
 
 .login {
-  .btn:not(.btn--text) {
-    min-width: calc(33.33% - 6px); // auth provider width
+  .btn {
+    width: 100%;
+  }
+
+  .btn--text {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: unset;
+    text-align: center;
   }
 }
 
@@ -3583,28 +3591,30 @@ ol.tabs li {
 .auth-providers {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
-  margin-bottom: -10px;
+  gap: 14px;
 
   > form {
-    width: calc(33.33% - 6px);
-    padding: 1%;
+    display: flex;
+    flex-grow: 1;
+    min-width: calc(100% / 2 - 8px);
   }
 }
 
 .auth-provider {
-  width: 100%;
   height: 40px;
   padding: 0 10px 0 7px;
-  margin-bottom: 10px;
   color: white !important;
   line-height: 23px;
   border-radius: 4px;
   display: flex;
+  flex-grow: 1;
+  justify-content: center;
   align-items: center;
   text-decoration: none;
   border: none;
   text-align: initial;
+  white-space: nowrap;
+  overflow: hidden;
 
   @extend %clickable;
 
@@ -3658,16 +3668,18 @@ ol.tabs li {
     background: #454545;
   }
 
-  .provider-name {
-    flex: 1;
-  }
-
   .provider-icon {
     width: 29px;
     height: 24px;
+    flex-shrink: 0;
 
     @include bidi-style(margin-right, 10px, margin-left, 0);
   }
+
+  .provider-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 /*
@@ -3972,12 +3984,9 @@ ol.tabs li {
   @extend .clearfix;
 
   display: flex;
+  flex-direction: column;
   align-items: center;
   margin-top: 10px;
-
-  .btn + .btn:not(.align-right) {
-    @include bidi-style(margin-left, 20px, margin-right, 10px);
-  }
 }
 
 .form-buttons {

app/controllers/sessions_controller.rb

@@ -251,6 +251,12 @@ class SessionsController < ApplicationController
       config[setting.name] = value
     end
 
+    # NB: Explicitly include SAML display name config
+    #   This is needed because the setting is not frontend related,
+    #   but we still to display one of the options
+    # https://github.com/zammad/zammad/issues/4263
+    config['auth_saml_display_name'] = Setting.get('auth_saml_credentials')[:display_name]
+
     # remember if we can switch back to user
     if session[:switched_from_user_id]
       config['switch_back_to_possible'] = true

app/models/setting.rb

@@ -9,6 +9,7 @@ class Setting < ApplicationModel
   after_create  :reset_change_id, :reset_cache, :check_broadcast
   before_update :state_check
   after_update  :reset_change_id, :reset_cache, :check_broadcast
+  after_commit  :check_refresh
 
   attr_accessor :state
 
@@ -202,4 +203,14 @@ reload config settings
     Gql::Subscriptions::ConfigUpdates.trigger(self)
     true
   end
+
+  # NB: Force users to reload on SAML credentials config changes
+  #   This is needed because the setting is not frontend related,
+  #   so we can't rely on 'config_update_local' mechanism to kick in
+  # https://github.com/zammad/zammad/issues/4263
+  def check_refresh
+    return if ['auth_saml_credentials'].exclude?(name)
+
+    AppVersion.set(true, AppVersion::MSG_CONFIG_CHANGED)
+  end
 end

db/migrate/20220922125446_issue4263_saml_display_name.rb

@@ -0,0 +1,21 @@
+# Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/
+
+class Issue4263SamlDisplayName < ActiveRecord::Migration[6.1]
+  def change
+    # return if it's a new setup
+    return if !Setting.exists?(name: 'system_init_done')
+
+    saml_setting = Setting.find_by(name: 'auth_saml_credentials')
+    return if !saml_setting
+
+    saml_setting.options[:form].unshift({
+                                          display:     'Display name',
+                                          null:        true,
+                                          name:        'display_name',
+                                          tag:         'input',
+                                          placeholder: 'SAML',
+                                        })
+
+    saml_setting.save!
+  end
+end

db/seeds/settings.rb

@@ -1802,6 +1802,13 @@ Setting.create_if_not_exists(
   description: __('Enables user authentication via SAML.'),
   options:     {
     form: [
+      {
+        display:     __('Display name'),
+        null:        true,
+        name:        'display_name',
+        tag:         'input',
+        placeholder: __('SAML'),
+      },
       {
         display:     __('IDP SSO target URL'),
         null:        true,

i18n/zammad.pot

@@ -3577,6 +3577,7 @@ msgid "Display in new tab"
 msgstr ""
 
 #: app/assets/javascripts/app/models/email_address.coffee
+#: db/seeds/settings.rb
 msgid "Display name"
 msgstr ""
 
@@ -8312,6 +8313,7 @@ msgid "S/MIME integration"
 msgstr ""
 
 #: app/assets/javascripts/app/controllers/_profile/linked_accounts.coffee
+#: db/seeds/settings.rb
 msgid "SAML"
 msgstr ""