View Issue Details

Jump to NotesJump to History
IDProjectCategoryView StatusDate SubmittedLast Update
0005687SOGoGUIpublic2023-01-26 19:392023-02-13 09:53
ReporterAlex Vogt Assigned Tosebastien  
PrioritynormalSeverityminorReproducibilityalways
Status assignedResolutionopen 
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

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