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
MoritzMuehlenhoff | |
Sep 26 2019, 1:04 PM |
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 |
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
Status | Subtype | Assigned | Task | ||
---|---|---|---|---|---|
Open | None | T233921 Further steps for CAS/web SSO | |||
Resolved | jbond | T233939 Wikimedia theme for SSO login page |
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
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
Change 574889 had a related patch set uploaded (by Jbond; owner: John Bond):
[operations/software/cas-overlay-template@master] style: remove branding
Change 574809 abandoned by Jbond:
style: remove branding
Reason:
use 574889 which has more context
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
Change 574888 merged by Jbond:
[operations/software/cas-overlay-template@master] templates: add initial templates to provide git history
Change 574889 merged by Jbond:
[operations/software/cas-overlay-template@master] style: remove branding
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
Change 575118 merged by Jbond:
[operations/software/cas-overlay-template@master] style: add Wikimedia Foundation logo
Change 575214 merged by Jbond:
[operations/software/cas-overlay-template@master] templates: add templates base templates used for cas pages
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
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:
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:
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?
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">×</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
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
Change 587538 merged by Jbond:
[operations/software/cas-overlay-template@master] apereo_cas: update templates login page