Question about gitlab icon

[sdesrozis]

Thank you for this awesome project.

Do you know if it's possible to replace gitlab icon and text in the mattermost login page ? I think it implies fork and work on mattermost official repo. Did you do that ?

Thanks in advance.

[Crivaledaz]

Hi,

I am looking for this since the project began. In fact this button is confusing for users who do not understand what is GitLab and what it is doing here. Unfortunately, I have never found a simple way to adapt the button, or even the text in it.

I am afraid it is hardcoded in Mattermost, so we need to edit the Mattermost server code and I do not want to do this to preserve independance between Mattermost-LDAP and Mattermost for maintainability purpose.

If you find a way to do this easily, I am interrested :)

Regards

[sdesrozis]

Thank you for the answer.

I checked a bit and gitlab icon is in clients... so impossible to fix.

Regards.

[atisne]

As stated, it's not a good practice to hack a third-party tool locally. For those who would like to do it anyway, here is how I did it:

cp logo-36.png /mattermost/client/files/logo-36.png
# Overload icon
find /mattermost/client -type f -exec grep -l '\.btn\.btn-custom-login\.gitlab \.icon{background-image:url(/static/files/' {} \; | xargs sed -i -e 's,\.btn\.btn-custom-login\.gitlab \.icon{background-image:url(/static/files/[^)]*)},.btn.btn-custom-login.gitlab .icon{background-image:url(/static/files/logo-36.png)},'

# Overload label
find /mattermost/client -type f -exec grep -l 'login\.gitlab"\?: *"\?GitLab' {} \; | xargs sed -i -e 's,\(login\.gitlab"\?: *"\?\)GitLab,\1My connect,'

# Overload colors
find /mattermost/client -type f -exec grep -l '.btn.btn-custom-login.gitlab{background:#' {} \; | xargs sed -i -e 's,.btn.btn-custom-login.gitlab{background:#[0-9]+},.btn.btn-custom-login.gitlab{background:#076889},' -e 's,.btn.btn-custom-login.gitlab:hover{background:#[0-9]+},.btn.btn-custom-login.gitlab:hover{background:#054f68},'

[grvsmth]

The Mattermost client is open source, and the Javascript/HTML/CSS can be modified and re-Webpacked. The Mattermost site gives instructions. Here's my fork where I removed the GitLab icon completely, but you can replace it by editing the _signup.scss.

[atisne]

The Mattermost client is open source, and the Javascript/HTML/CSS can be modified and re-Webpacked. The Mattermost site gives instructions. Here's my fork where I removed the GitLab icon completely, but you can replace it by editing the _signup.scss.

Surely a better option.

[mario-evangelista-silva]

As stated, it's not a good practice to hack a third-party tool locally. For those who would like to do it anyway, here is how I did it:

cp logo-36.png /mattermost/client/files/logo-36.png
# Overload icon
find /mattermost/client -type f -exec grep -l '\.btn\.btn-custom-login\.gitlab \.icon{background-image:url(/static/files/' {} \; | xargs sed -i -e 's,\.btn\.btn-custom-login\.gitlab \.icon{background-image:url(/static/files/[^)]*)},.btn.btn-custom-login.gitlab .icon{background-image:url(/static/files/logo-36.png)},'

# Overload label
find /mattermost/client -type f -exec grep -l 'login\.gitlab"\?: *"\?GitLab' {} \; | xargs sed -i -e 's,\(login\.gitlab"\?: *"\?\)GitLab,\1My connect,'

# Overload colors
find /mattermost/client -type f -exec grep -l '.btn.btn-custom-login.gitlab{background:#' {} \; | xargs sed -i -e 's,.btn.btn-custom-login.gitlab{background:#[0-9]+},.btn.btn-custom-login.gitlab{background:#076889},' -e 's,.btn.btn-custom-login.gitlab:hover{background:#[0-9]+},.btn.btn-custom-login.gitlab:hover{background:#054f68},'

@atisne Excellent, it really works, congratulations.

[mayqueen91]

I have something like this in my docker-compose file:

- 'MM_GITLABSETTINGS_BUTTONTEXT=${MM_GITLABSETTINGS_BUTTONTEXT:-Keycloak}'
- 'MM_GITLABSETTINGS_BUTTONCOLOR=#0ea8e1' 

it doesn't fix the icon, but at least the text and the color. On the server level!

[ihard]

@atisne Can you please tell me if this fix continues to work on the latest versions? I try on version 7.8 - the icon remains unchanged ...

[atisne]

@atisne Can you please tell me if this fix continues to work on the latest versions? I try on version 7.8 - the icon remains unchanged ...

I have not tried with new versions. Sorry.

[microbearlogist]

@atisne Can you please tell me if this fix continues to work on the latest versions? I try on version 7.8 - the icon remains unchanged ...

You can directly edit the "GitLabSettings" part of config.json (works up to Mattermost 8.0): (use docker volume to mount it /host/folder/config.json:/mattermost/config/config.json

...
    "GitLabSettings": {
        "Enable": true,
        ...
        "ButtonText": "YOUR TEXT",
        "ButtonColor": "#Hex Color Codes"
...

[microbearlogist]

Hi,

I am looking for this since the project began. In fact this button is confusing for users who do not understand what is GitLab and what it is doing here. Unfortunately, I have never found a simple way to adapt the button, or even the text in it.

I am afraid it is hardcoded in Mattermost, so we need to edit the Mattermost server code and I do not want to do this to preserve independance between Mattermost-LDAP and Mattermost for maintainability purpose.

If you find a way to do this easily, I am interrested :)

Regards

An alternative would be to use the Oauth-server-php as SSO for mattermost. Using nginx's auth_request function, any unidentified users will first be redirected to "https://mattermost.domain.org/oauth/gitlab/login", and identified users will be sent directly to "https://mattermost.domain.org".

It seems possible, but my understanding of the Oauth-server-php is far too limited to be sure.

In this way it will be possible to redesign index.php and authorize.php to make them look like (or even copy) the mattermost landpage and get rid of all this gitlab confusing login problem without touching mattermost (that's something I can do).

What do you think @Crivaledaz ?

[microbearlogist]

I've redesigned the login and access authorization page to match Mattermost's style.

By disabling login via Email and Username within Mattermost and changing the color and text of the Gitlab button (so only the Gitlab login button stay visible), here's the result of a login process:

The Gitlab icon remains, but the user experience is much more pleasant and only those familiar with gitlab will notice the oddity. I clean up the code and make a Pull request ASAP