Page MenuHomePhabricator

Wikimedia theme for SSO login page
Closed, ResolvedPublic

Assigned To
Authored By
MoritzMuehlenhoff
Sep 26 2019, 1:04 PM
Referenced Files
F31768111: loginform4.png
Apr 20 2020, 11:21 AM
F31754712: loginform3.png
Apr 13 2020, 12:38 PM
F31744707: loginform2.png
Apr 8 2020, 10:50 PM
F31744577: toplogo.png
Apr 8 2020, 10:33 PM
F31744254: loginform1.png
Apr 8 2020, 8:00 PM
F31743655: loginform.png
Apr 8 2020, 3:05 PM
F31646710: image.png
Feb 27 2020, 11:39 AM
F31631841: image.png
Feb 26 2020, 12:22 PM

Description

Eventually SSO will also extend to more community-facing services, so we might want to theme the SSO login page with a Wikimedia logo or similar.

https://apereo.github.io/cas/6.0.x/ux/User-Interface-Customization-Themes.html

Related Objects

StatusSubtypeAssignedTask
OpenNone
Resolvedjbond

Event Timeline

herron triaged this task as Medium priority.Sep 26 2019, 5:17 PM

When we do this it may be worth considering overriding <Property name="baseDir">/tmp/logs</Property> in WEB-INF/classes/log4j2.xml. We do override this in /etc/cas/config/log4j2.xml however it seems when the service is (re)started the value in the embedded file is used for a period until the config file in /etc/cas is read. you can see this by listing values in /tmp/logs

Change 574809 had a related patch set uploaded (by Jbond; owner: John Bond):
[operations/software/cas-overlay-template@master] style: remove branding

https://gerrit.wikimedia.org/r/574809

Change 574888 had a related patch set uploaded (by Jbond; owner: John Bond):
[operations/software/cas-overlay-template@master] templates: add initial templates to provide git history

https://gerrit.wikimedia.org/r/574888

Change 574889 had a related patch set uploaded (by Jbond; owner: John Bond):
[operations/software/cas-overlay-template@master] style: remove branding

https://gerrit.wikimedia.org/r/574889

Change 574809 abandoned by Jbond:
style: remove branding

Reason:
use 574889 which has more context

https://gerrit.wikimedia.org/r/574809

This comment was removed by jbond.

FWIW I think it would make sense to at least stick a Wikimedia logo there sooner rather than later.

Change 575118 had a related patch set uploaded (by CDanis; owner: CDanis):
[operations/software/cas-overlay-template@master] style: add Wikimedia Foundation logo

https://gerrit.wikimedia.org/r/575118

Change 574888 merged by Jbond:
[operations/software/cas-overlay-template@master] templates: add initial templates to provide git history

https://gerrit.wikimedia.org/r/574888

Change 574889 merged by Jbond:
[operations/software/cas-overlay-template@master] style: remove branding

https://gerrit.wikimedia.org/r/574889

Change 575214 had a related patch set uploaded (by Jbond; owner: John Bond):
[operations/software/cas-overlay-template@master] templates: add templates base templates used for cas pages

https://gerrit.wikimedia.org/r/575214

Change 575118 merged by Jbond:
[operations/software/cas-overlay-template@master] style: add Wikimedia Foundation logo

https://gerrit.wikimedia.org/r/575118

Change 575214 merged by Jbond:
[operations/software/cas-overlay-template@master] templates: add templates base templates used for cas pages

https://gerrit.wikimedia.org/r/575214

Change 587538 had a related patch set uploaded (by Jbond; owner: John Bond):
[operations/software/cas-overlay-template@master] apereo_cas: update templates login page

https://gerrit.wikimedia.org/r/587538

For colors and such, you may want to use this:
https://design.wikimedia.org/style-guide/visual-style.html

Thanks @Krinkle ill take a look in a bit, I'm a long way from a front end dev so if you have specific recommendations i would very much appreciate them either here or https://gerrit.wikimedia.org/r/587538

We don't have a specific dev environment Wikimedia style, nonetheless some of the solutions shared in the Design Style Guide should and could be seen as universal for our environments, a few to mention:

  • minimum font-size of 13px equivalent for small font for accessibility reasons
  • color contrasts (placeholder text)

I've seen in the code that the labels stay in and are marked as screenreader only, that's acceptable.

In a less universal, still advisable for our tech env:

  • Use the same icon for the same thing (help)
  • Is the Wikimedia Single Sign on icon used in several places already?
  • Logo and headline position, advise on centering logo in box and left-align heading underneath
  • Logo is not official Foundation logo (that's black/transparent), or is it meant to be the Movement logo?

first off thanks for the review defiantly appreciated and please keep with me, CSS is not my area :)

We don't have a specific dev environment Wikimedia style, nonetheless some of the solutions shared in the Design Style Guide should and could be seen as universal for our environments, a few to mention:

  • minimum font-size of 13px equivalent for small font for accessibility reasons

I have updated from smaller to body {font-size: small} is this sufficient?

  • color contrasts (placeholder text)

Can you be more specific im not sure i get what you mean

In a less universal, still advisable for our tech env:

the code currently uses <span class="fa fa-question-circle"></span> how can i update this to use the correct icons?

  • Is the Wikimedia Single Sign on icon used in several places already?

i think you are referring to the icon next to "Wikimedia single sign on"? this is again is just the bootstrap style inherited from the apero cas vanilla template as <i class="fas fa-id-card"></i> we can replace this with whatever or just drop it completely

  • Logo and headline position, advise on centering logo in box and left-align heading underneath

Do you mean something like this?

toplogo.png (871×1 px, 58 KB)

I added this with the following however the logo is not responsive so on small resolutoins you just have a massive logo so i assume i did something wrong

--- a/src/main/resources/templates/fragments/loginform.html
+++ b/src/main/resources/templates/fragments/loginform.html
@@ -14,7 +14,9 @@
         <div class="col-md">
             <!-- Login form template begins here -->
             <div th:fragment="loginform" class="card">
-                <div class="card-body" style="width: 35rem;">
+                <a title="Logo and trademark of the Wikimedia Foundation, designed by Wikipedia user Neolŭ (SVG version created by DarkEvil, revised by Philip Ronan and optimized by Zscout370 and Artem Karimov) Later revised by Wikimedia Foundation. / CC BY-SA (https://creativecommons.org/licenses/by-sa/3.0)" href="https://commons.wikimedia.org/wiki/File:Wikimedia_Foundation_logo_-_vertical.svg">
+                      <img class="card-img-top" width="80" alt="Wikimedia Foundation logo - vertical" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Wikimedia_Foundation_logo_-_vertical.svg/512px-Wikimedia_Foundation_logo_-_vertical.svg.png"></a>
+                <div class="card-body">
                     <form method="post" id="fm1" th:object="${credential}" action="login" class="form hidden-labels">
                         <div class="alert alert-danger alert-dismissible fade show" th:if="${#fields.hasErrors('*')}">
                             <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
@@ -28,11 +30,7 @@
                             </h6>
                         </div>
                         <div class="card-header row">
-                          <div class="col-sm-3">
-                            <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Wikimedia_Foundation_RGB_logo_with_text.svg" height="80" width="80">
-                          </div>
-                          <h5 th:unless="${existingSingleSignOnSessionAvailable}"
-                              class="col-md-9">
+                          <h5 th:unless="${existingSingleSignOnSessionAvailable}">
                               <i class="fas fa-id-card"></i>
                               <span th:utext="#{screen.welcome.instructions}">Enter your Username and Password:</span>
                           </h5>
@@ -146,7 +144,6 @@
                             });
                     </script>
 
-                    <div th:replace="fragments/loginsidebar :: loginsidebar"/>
                 </div>
             </div>
         </div>
  • Logo is not official Foundation logo (that's black/transparent), or is it meant to be the Movement logo?

Ill update the patch wit the logo used above. thanks again for the input

this is the new screen shot with the logo on the left

loginform2.png (619×1 px, 27 KB)

We're following WCAG 2.0 level AA color contrast ratios, so something like a placeholder text color needs to provide 4.5:1 contrast. That minimum requirement here in our (product-specific WikimediaUI color palette) is Base30 #72777d. For non-Wikmedia specific colors, the requirement would be #767676 in connection with #fff.

We're following WCAG 2.0 level AA color contrast ratios, so something like a placeholder text color needs to provide 4.5:1 contrast. That minimum requirement here in our (product-specific WikimediaUI color palette) is Base30 #72777d. For non-Wikmedia specific colors, the requirement would be #767676 in connection with #fff.

Thanks again for your comments however im struggling to change the colour of the placeholder text colour. I tried to update the various ::placeholder styles however i don't notice any difference

loginform3.png (1×1 px, 105 KB)

Change 587538 merged by Jbond:
[operations/software/cas-overlay-template@master] apereo_cas: update templates login page

https://gerrit.wikimedia.org/r/587538

jbond claimed this task.

A new skin is now in place