View Issue Details

Jump to NotesJump to History
IDProjectCategoryView StatusDate SubmittedLast Update
0005687SOGoGUIpublic2023-01-26 19:392023-05-03 13:41
ReporterAlex Vogt Assigned To 
PrioritynormalSeverityminorReproducibilityalways
Status newResolutionopen 
Platform[Server] LinuxOSRHEL/CentOSOS Version7
Product Version5.8.0 
Summary0005687: Login page does not honor the color theme
Description

Follow-up from https://www.mail-archive.com/users%40sogo.nu/msg32113.html

The login page seems to have the font color hardcoded to black/dark grey and does not follow the defined color theme.
This is visible in the default configuration, where the following accent color theme is defined

/usr/lib64/GNUstep/SOGo/WebServerResources/js/Common/Common.app.js

//...
// Accent palette
$mdThemingProvider.definePalette('sogo-green', {
'50': 'eaf5e9',
'100': 'cbe5c8',
'200': 'aad6a5',
'300': '88c781',
'400': '66b86a',
'500': '56b04c',
'600': '4da143',
'700': '388e3c',
'800': '367d2e',
'900': '225e1b',
// 'A100': 'b9f6ca',
'A100': 'fafafa', // assigned to md-hue-1, equivalent to grey-50 (default background palette)
'A200': '69f0ae',
'A400': '00e676',
'A700': '00c853',
'contrastDefaultColor': 'dark',
// 'contrastDarkColors': ['50', '100', '200', 'A100'],
'contrastLightColors': ['300', '400', '500', '600', '700', '800', '900']
});
//...
// Default theme definition
$mdThemingProvider.theme('default')
.primaryPalette('sogo-blue', {
'default': '900',
'hue-1': '400',
'hue-2': '800',
'hue-3': 'A700'
})
.accentPalette('sogo-green', {
'default': '500',
// 'hue-1': '200',
'hue-1': 'A100', // grey-50
'hue-2': '300',
'hue-3': 'A700'
})
.backgroundPalette('sogo-grey');

So, the default accent specifies a light color although a dark one is used on the login page.

TagsNo tags attached.

Activities

Alex Vogt

Alex Vogt

2023-01-26 19:45

reporter   ~0016612

I have a partial solution by specifying the theme and accent color manually (see attached patch). However, this is only working partially and in particular the user/password hints and the drop-down menu are still in dark.
Please note this is my first time coding in AngularJS. I strongly believe there is a more elegant solution.

SOGoRootPage.wox.patch (6,240 bytes)    
--- /var/lib/sogo/GNUstep/Library/SOGo/Templates/MainUI/SOGoRootPage.wox	2023-01-25 16:42:33.203025915 -0500
+++ /usr/lib64/GNUstep/SOGo/Templates/MainUI/SOGoRootPage.wox	2023-01-25 17:22:22.000000000 -0500
@@ -43,24 +43,24 @@
             </var:if>
             <div ng-if="!app.loginState">
               <md-input-container class="md-block">
-                <label class="md-default-theme md-accent md-bg"><var:string label:value="Username"/></label>
-                <md-icon class="material-icons md-default-theme md-accent md-bg">person</md-icon>
-                <input class="md-default-theme md-accent md-bg" autocorrect="off" autocapitalize="off" type="text" ng-model="app.creds.username" ng-required="true" ng-change="app.usernameChanged()" ng-blur="app.retrievePasswordRecoveryEnabled()" />
+                <label><var:string label:value="Username"/></label>
+                <md-icon>person</md-icon>
+                <input autocorrect="off" autocapitalize="off" type="text" ng-model="app.creds.username" ng-required="true" ng-change="app.usernameChanged()" ng-blur="app.retrievePasswordRecoveryEnabled()" />
               </md-input-container>
               <md-input-container class="md-block">
-                <label class="md-default-theme md-accent md-bg"><var:string label:value="Password"/></label>
-                <md-icon class="material-icons md-default-theme md-accent md-bg">email</md-icon>
-                <input class="md-default-theme md-accent md-bg" id="passwordField" type="password" ng-model="app.creds.password" ng-required="true"/>
-                <md-icon class="material-icons md-default-theme md-accent md-bg" id="password-visibility-icon" ng-click="app.changePasswordVisibility()">visibility</md-icon>
+                <label><var:string label:value="Password"/></label>
+                <md-icon>email</md-icon>
+                <input id="passwordField" type="password" ng-model="app.creds.password" ng-required="true"/>
+                <md-icon id="password-visibility-icon" ng-click="app.changePasswordVisibility()">visibility</md-icon>
               </md-input-container>
               
 
               <!-- LANGUAGES SELECT -->
               <div layout="row" layout-align="start end">
-                <md-icon class="material-icons md-default-theme md-accent md-bg">language</md-icon>
-                <md-input-container class="md-default-theme md-accent md-bg md-flex">
-                  <label class="md-default-theme md-accent md-bg"><var:string label:value="choose"/></label>
-                  <md-select md-container-class="md-default-theme md-accent md-bg" ng-model="app.creds.language"
+                <md-icon>language</md-icon>
+                <md-input-container class="md-flex">
+                  <label><var:string label:value="choose"/></label>
+                  <md-select ng-model="app.creds.language"
                             var:placeholder="localizedLanguage"
                             ng-change="app.changeLanguage($event)">
                     <var:foreach list="languages" item="item">
@@ -75,7 +75,7 @@
               <!-- DOMAINS SELECT -->
               <var:if condition="hasLoginDomains">
                 <div layout="row" layout-align="start end">
-                  <md-icon class="material-icons md-default-theme md-accent md-bg">domain</md-icon>
+                  <md-icon>domain</md-icon>
                         <md-input-container class="md-flex">
                           <md-select class="md-flex" ng-model="app.creds.domain" label:placeholder="choose" ng-change="app.retrievePasswordRecoveryEnabled()">
                             <var:foreach list="loginDomains" item="item">
@@ -109,7 +109,7 @@
               <md-button class="md-icon-button"
                          label:aria-label="About"
                          ng-click="app.showAbout()">
-                <md-icon class="material-icons md-default-theme md-accent md-bg">info</md-icon>
+                <md-icon>info</md-icon>
               </md-button>
               <div>
                 <md-button class="md-fab md-accent md-hue-2" type="submit"
@@ -146,7 +146,7 @@
               <div flex="80" flex-sm="50" flex-gt-sm="40">
                 <md-input-container class="md-block">
                   <label><var:string label:value="Verification Code"/></label>
-                  <md-icon class="material-icons md-default-theme md-accent md-bg">lock</md-icon>
+                  <md-icon>lock</md-icon>
                   <input type="text"
                          ng-pattern="app.verificationCodePattern"
                          ng-model="app.creds.verificationCode"
@@ -159,14 +159,14 @@
                              label:aria-label="Cancel"
                              ng-click="app.restoreLogin()"
                              sg-ripple-click="loginContent">
-                    <md-icon class="material-icons md-default-theme md-accent md-bg">arrow_backward</md-icon>
+                    <md-icon>arrow_backward</md-icon>
                   </md-button>
                   <md-button class="md-fab md-accent md-hue-2" type="submit"
                              label:aria-label="Connect"
                              ng-if="app.loginState == 'totpcode'"
                              ng-disabled="loginForm.$invalid"
                              ng-click="app.login()">
-                    <md-icon class="material-icons md-default-theme md-accent md-bg">arrow_forward</md-icon>
+                    <md-icon>arrow_forward</md-icon>
                   </md-button>
                 </div>
               </div>
@@ -180,7 +180,7 @@
                   <var:string label:value="Welcome"/> {{app.cn}}
                 </div>
                 <div class="md-padding" layout="row" layout-align="start center">
-                  <md-icon class="material-icons md-default-theme md-accent md-bg">priority_high</md-icon>
+                  <md-icon>priority_high</md-icon>
                   <div class="md-padding">
                     <var:string label:value="Two-factor authentication has been disabled. Visit the Preferences module to restore two-factor authentication and reconfigure your TOTP application."/>
                   </div>
SOGoRootPage.wox.patch (6,240 bytes)   
Alex Vogt

Alex Vogt

2023-01-26 19:47

reporter   ~0016613

New patch in the correct direction :)

SOGoRootPage.wox-2.patch (6,239 bytes)    
--- /usr/lib64/GNUstep/SOGo/Templates/MainUI/SOGoRootPage.wox	2023-01-25 17:22:22.000000000 -0500
+++ /var/lib/sogo/GNUstep/Library/SOGo/Templates/MainUI/SOGoRootPage.wox	2023-01-25 16:42:33.203025915 -0500
@@ -43,24 +43,24 @@
             </var:if>
             <div ng-if="!app.loginState">
               <md-input-container class="md-block">
-                <label><var:string label:value="Username"/></label>
-                <md-icon>person</md-icon>
-                <input autocorrect="off" autocapitalize="off" type="text" ng-model="app.creds.username" ng-required="true" ng-change="app.usernameChanged()" ng-blur="app.retrievePasswordRecoveryEnabled()" />
+                <label class="md-default-theme md-accent md-bg"><var:string label:value="Username"/></label>
+                <md-icon class="material-icons md-default-theme md-accent md-bg">person</md-icon>
+                <input class="md-default-theme md-accent md-bg" autocorrect="off" autocapitalize="off" type="text" ng-model="app.creds.username" ng-required="true" ng-change="app.usernameChanged()" ng-blur="app.retrievePasswordRecoveryEnabled()" />
               </md-input-container>
               <md-input-container class="md-block">
-                <label><var:string label:value="Password"/></label>
-                <md-icon>email</md-icon>
-                <input id="passwordField" type="password" ng-model="app.creds.password" ng-required="true"/>
-                <md-icon id="password-visibility-icon" ng-click="app.changePasswordVisibility()">visibility</md-icon>
+                <label class="md-default-theme md-accent md-bg"><var:string label:value="Password"/></label>
+                <md-icon class="material-icons md-default-theme md-accent md-bg">email</md-icon>
+                <input class="md-default-theme md-accent md-bg" id="passwordField" type="password" ng-model="app.creds.password" ng-required="true"/>
+                <md-icon class="material-icons md-default-theme md-accent md-bg" id="password-visibility-icon" ng-click="app.changePasswordVisibility()">visibility</md-icon>
               </md-input-container>
               
 
               <!-- LANGUAGES SELECT -->
               <div layout="row" layout-align="start end">
-                <md-icon>language</md-icon>
-                <md-input-container class="md-flex">
-                  <label><var:string label:value="choose"/></label>
-                  <md-select ng-model="app.creds.language"
+                <md-icon class="material-icons md-default-theme md-accent md-bg">language</md-icon>
+                <md-input-container class="md-default-theme md-accent md-bg md-flex">
+                  <label class="md-default-theme md-accent md-bg"><var:string label:value="choose"/></label>
+                  <md-select md-container-class="md-default-theme md-accent md-bg" ng-model="app.creds.language"
                             var:placeholder="localizedLanguage"
                             ng-change="app.changeLanguage($event)">
                     <var:foreach list="languages" item="item">
@@ -75,7 +75,7 @@
               <!-- DOMAINS SELECT -->
               <var:if condition="hasLoginDomains">
                 <div layout="row" layout-align="start end">
-                  <md-icon>domain</md-icon>
+                  <md-icon class="material-icons md-default-theme md-accent md-bg">domain</md-icon>
                         <md-input-container class="md-flex">
                           <md-select class="md-flex" ng-model="app.creds.domain" label:placeholder="choose" ng-change="app.retrievePasswordRecoveryEnabled()">
                             <var:foreach list="loginDomains" item="item">
@@ -109,7 +109,7 @@
               <md-button class="md-icon-button"
                          label:aria-label="About"
                          ng-click="app.showAbout()">
-                <md-icon>info</md-icon>
+                <md-icon class="material-icons md-default-theme md-accent md-bg">info</md-icon>
               </md-button>
               <div>
                 <md-button class="md-fab md-accent md-hue-2" type="submit"
@@ -146,7 +146,7 @@
               <div flex="80" flex-sm="50" flex-gt-sm="40">
                 <md-input-container class="md-block">
                   <label><var:string label:value="Verification Code"/></label>
-                  <md-icon>lock</md-icon>
+                  <md-icon class="material-icons md-default-theme md-accent md-bg">lock</md-icon>
                   <input type="text"
                          ng-pattern="app.verificationCodePattern"
                          ng-model="app.creds.verificationCode"
@@ -159,14 +159,14 @@
                              label:aria-label="Cancel"
                              ng-click="app.restoreLogin()"
                              sg-ripple-click="loginContent">
-                    <md-icon>arrow_backward</md-icon>
+                    <md-icon class="material-icons md-default-theme md-accent md-bg">arrow_backward</md-icon>
                   </md-button>
                   <md-button class="md-fab md-accent md-hue-2" type="submit"
                              label:aria-label="Connect"
                              ng-if="app.loginState == 'totpcode'"
                              ng-disabled="loginForm.$invalid"
                              ng-click="app.login()">
-                    <md-icon>arrow_forward</md-icon>
+                    <md-icon class="material-icons md-default-theme md-accent md-bg">arrow_forward</md-icon>
                   </md-button>
                 </div>
               </div>
@@ -180,7 +180,7 @@
                   <var:string label:value="Welcome"/> {{app.cn}}
                 </div>
                 <div class="md-padding" layout="row" layout-align="start center">
-                  <md-icon>priority_high</md-icon>
+                  <md-icon class="material-icons md-default-theme md-accent md-bg">priority_high</md-icon>
                   <div class="md-padding">
                     <var:string label:value="Two-factor authentication has been disabled. Visit the Preferences module to restore two-factor authentication and reconfigure your TOTP application."/>
                   </div>
SOGoRootPage.wox-2.patch (6,239 bytes)   
sebastien

sebastien

2023-01-30 08:47

administrator   ~0016623

Hi Alex,

Could you do a PR on github following those guidelines : https://github.com/Alinto/sogo/blob/master/.github/CONTRIBUTING.md

Thanks

Sebastien
Alex Vogt

Alex Vogt

2023-01-31 18:48

reporter   ~0016631

Here you go https://github.com/Alinto/sogo/pull/341
sebastien

sebastien

2023-02-01 08:31

administrator   ~0016632

Thanks for contributing ! Just a question, what is missing in your fix (you specified 'partially') ?
Alex Vogt

Alex Vogt

2023-02-01 18:30

reporter   ~0016638

The user/password hints and the drop-down menu are still in dark. This appears to be a particular AngularJS-related technology that I am not familiar with.
Alex Vogt

Alex Vogt

2023-02-05 12:41

reporter   ~0016646

The PR fixes a good portion of the described issue. It would be great to merge that PR and defer the remainder to someone that is more proficient in AngularJS than I am. Thanks.
sebastien

sebastien

2023-02-13 09:53

administrator   ~0016655

https://github.com/Alinto/sogo/pull/341 merged thanks
sebastien

sebastien

2023-05-03 12:32

administrator   ~0016941

Last edited: 2023-05-03 13:40

Unfortunately, due to customers feedback, this merge has introduced some regressions. Code will be reverted.
Your suggestion is right, and it is the good way to do this. However this breaks existing customizations.
If you want to change this, please use the following css in theme-custom.js :

.sg-login.md-default-theme.md-accent.md-bg {
color: #FFFFFF !important;
}`, 20);

[EDIT] : https://github.com/Alinto/sogo/commit/d802b92a131b26a220c05f90e0dc0cf621e8aef7

Sebastien

Issue History

Date Modified Username Field Change
2023-01-26 19:39 Alex Vogt New Issue
2023-01-26 19:45 Alex Vogt Note Added: 0016612
2023-01-26 19:45 Alex Vogt File Added: SOGoRootPage.wox.patch
2023-01-26 19:47 Alex Vogt Note Added: 0016613
2023-01-26 19:47 Alex Vogt File Added: SOGoRootPage.wox-2.patch
2023-01-30 08:47 sebastien Note Added: 0016623
2023-01-30 08:47 sebastien Assigned To => sebastien
2023-01-30 08:47 sebastien Status new => feedback
2023-01-31 18:48 Alex Vogt Note Added: 0016631
2023-01-31 18:48 Alex Vogt Status feedback => assigned
2023-02-01 08:31 sebastien Note Added: 0016632
2023-02-01 18:30 Alex Vogt Note Added: 0016638
2023-02-05 12:41 Alex Vogt Note Added: 0016646
2023-02-13 09:53 sebastien Note Added: 0016655
2023-05-03 12:32 sebastien Note Added: 0016941
2023-05-03 13:40 sebastien Note Edited: 0016941
2023-05-03 13:41 sebastien Assigned To sebastien =>
2023-05-03 13:41 sebastien Status assigned => new