CAS 5.1.x Custom template. Anyone get this working?
William Jojo
Andy Ng
To my recall, there has been a lot of theme
related posts in this group. I also tried to make theme works on my project
when I work on 5.1.x, which lead to failed.
However, when I updated my project to 5.2.0-RC3, I actually make theme works,
and here how the folder and file in my project is layout, maybe you will find
this useful. (The below method probably are not going to work on 5.1.x, you can
try it yourself tho)
Let say our theme is called jurassic.
What I have done is as such:
[Project Layout] ( note: with [] = folder)
- src/main/resource
n jurassic.properties (A)
n application.properties (B) (Optional)
n [services]
u JurassicLogin-101.json (C)
n [templates]
u casLoginView.html (D)
u [jurassic]
l casLoginView.html (E)
n [statics]
u [themes]
l [jurassic]
n [css]
u cas.css (F)
n [js]
u cas.js (G)
[What is inside each files]
* jurassic.properties (A)
#Note: even if you do not need css and js, you just want to place the whole page with yours, you still need this
standard.custom.css.file=/themes/jurassic/css/cas.css
cas.javascript.file=/themes/jurassic/js/cas.js
* application.properties (B)
#Making a default theme is easy, just do this:
cas.theme.defaultThemeName=jurassic
#However, if you just want to change the default login layout, you can just tried to just replace the normal login pages casLoginView.html (D)
* JurassicLogin-101.json (C)
{
"@class" : "org.apereo.cas.services.RegexRegisteredService",
"serviceId" : "^https://dino.example.com",
"name" : "Jurassic Login",
"id" : 101,
"description" : " Jurassic Login Page.",
"evaluationOrder" : 9999,
"theme" : " jurassic"
}
* casLoginView.html (D) (Normal Login Page)
<html>
<head></head>
<body>Your normal login, you can skip making this if you want the look of
CAS in normal login</body>
</html>
* casLoginView.html (E) (Login Page For the Dino)
<!DOCTYPE html>
<html>
<head>
<meta>
<title>You are at Jurassic Theme Park!!</title>
</head>
<body>
<h1>In 5.2.0-RC3, these are the utmost necessary element in the html (You
can check and see if this is the case)</h1>
<div class="box" id="login">
<form name="login_form" id="login_form" method="post" th:object="${credential}">
<input type="hidden" name="lt" th:value="${loginTicket}" />
<input type="hidden" name="execution" th:value="${flowExecutionKey}" />
<input type="hidden" name="_eventId" value="submit" />
<input type="password" name="password" >
<input id="username" name="username" type="text" />
<input class="btn btn-submit btn-block" name="submit" type="submit"/>
</form>
</div>
</body>
</html>
* cas.css (F)
You can even just leave css blank, you do
what you need
* cas.js (G)
You can even just leave js blank, you do what you want
If you access your cas site using this:
https://cas.sso.com/cas/login?service=https://dino.example.com
The Jurassic theme should be triggered.
At last, if you really cannot make the theme works on your version of CAS 5,
you can also use thymeleaf tricks (although not so elegant), in your normal
login page (D), just add the following at the beginning of your
casLoginView.html:
<div th:if="${#request.getParameter('service') == ' https://dino.example.com
')}">
<div th:replace="folder/whatever.html"></div>
</div>
See if this helps you!
-Andy
William Jojo
Pablo Vidaurri
Andy Ng
And you don't need to edit all the files, only the necessary one, and let the default handle other files.