Merge pull request #4 from OSC/generic_theme

Separate osc/awesim into theme overrides and generic base theme

README.md

@@ -1,27 +1,100 @@
-# OSC Keycloak theme
+# OnDemand Keycloak theme
 
-This basic theme works for both OSC and AweSim realms. It assumes the realm names will be osc and awesim.
-The logo that appears above the menu is `${realm.name!}-logo.png` i.e. `awesim-logo.png` or `osc-logo.png`.
+Currently updated to work with Keycloak 3.4.1.
 
-Install by cloning this repo to /opt/keycloak-3.0.0.Final/themes/osc. Then make the files read only by the user keycloak.
+## Install
+
+1. cd to keycloak/themes directory
+2. git clone or wget and untar this repo, renaming the directory to `ood-keycloak`
+3. create an override theme based on this (examples under `example_overrides`)  or use base theme as it is
+
+
+i.e.
+
+
+```
+cd /opt/keycloak-3.4.1/themes
+git clone https://github.com/OSC/keycloak-theme.git ood-keycloak
+cp -r ood-keycloak/example_overrides/awesim awesim
+cp -r ood-keycloak/example_overrides/osc osc
+
+# choose awesim or osc for appropriate realms
+```
+
+## Configuring
+
+Example theme override:
+
+```
+awesim/
+└── login
+    ├── messages
+    │   └── messages_en.properties
+    ├── resources
+    │   └── img
+    │       ├── favicon.ico
+    │       └── logo.png
+    └── theme.properties
+```
+
+* login/messages/messages_en.properties:
+
+  ```
+  logintitle=Login to the Ohio Supercomputer Center
+  loginTitleHtml=<p class="lead">Log in with your OSC username and password.</p>
+  summary=The Ohio Super Computer Center (OSC)
+  ```
+
+* theme.properties
+
+  ```
+  parent=ood-keycloak
+
+  oodFooterLinks="Forgot your password?==https://www.osc.edu/content/password_change_policy_faqs,,Need Help?==https://www.osc.edu/contact/supercomputing_support,,Register for a new account==https://www.awesim.org/en/signup"
+  ```
+
+
+
+## Maintaining
 
 The login.ftl template has been modified from the original in base/login/login.ftl.
 When upgrading to a new version of KeyCloak, verify that this base template did not change.
 
 ```
-$ diff /opt/keycloak-3.0.0.Final/themes/base/login/login.ftl /opt/keycloak-2.5.4.Final/themes/base/login/login.ftl
+$ diff /opt/keycloak-3.4.1.Final/themes/base/login/login.ftl /opt/keycloak-3.0.0.Final/themes/base/login/login.ftl
 $
 ```
 
 Only login.ftl has been modified, so if the user may access another page that uses a different template, we might consider adding the logo to template.ftl instead.
 
-### TODO 
 
-- [ ] build custom bootstrap - remove css you don't need
-- [ ] if we should vary the create new account link between awesim and ondemand, use this:
+## LICENSE
 
-```
-<#if realm.name = 'osc'>add osc link here</#if>
-<#if realm.name = 'awesim'>add awesim link here</#if>
-```
+- Code licensed under MIT License
+- Brand icons are not. All OSC and AweSim brand icons are trademarks of OSC.
+  These icons should only be used to represent OSC.
+  Please do not use brand logos for any purpose except to represent
+  that particular brand or service.
+
+
+The MIT License (MIT)
+
+Copyright (c) 2016 Ohio Supercomputer Center
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
 
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

example_overrides/awesim/login/messages/messages_en.properties

@@ -0,0 +1,3 @@
+logintitle=Login to the Ohio Supercomputer Center
+loginTitleHtml=<p class="lead">Log in with your OSC username and password.</p>
+summary=The Ohio Super Computer Center (OSC)

example_overrides/awesim/login/theme.properties

@@ -0,0 +1,3 @@
+parent=ood-keycloak
+
+oodFooterLinks=Forgot your password?==https://www.osc.edu/content/password_change_policy_faqs,,Need Help?==https://www.osc.edu/contact/supercomputing_support,,Register for a new account==https://www.awesim.org/en/signup

example_overrides/osc/login/messages/messages_en.properties

@@ -0,0 +1,3 @@
+logintitle=Login to the Ohio Supercomputer Center
+loginTitleHtml=<p class="lead">Log in with your OSC username and password.</p>
+summary=The Ohio Super Computer Center (OSC)

example_overrides/osc/login/theme.properties

@@ -0,0 +1,3 @@
+parent=ood-keycloak
+
+oodFooterLinks=Forgot your password?==https://www.osc.edu/content/password_change_policy_faqs,,Need Help?==https://www.osc.edu/contact/supercomputing_support,,Register for a new account==https://www.osc.edu/resources/getting_started/allocations_and_accounts

login/login.ftl

@@ -3,21 +3,21 @@
     <#if section = "title">
         ${msg("loginTitle",(realm.displayName!''))}
     <#elseif section = "header">
-        <p><img src="${url.resourcesPath}/img/${realm.name!}-logo.png"></p>
-        ${msg("loginTitleHtml",(realm.displayNameHtml!''))}
+        <p><img src="${url.resourcesPath}/img/logo.png"></p>
+        ${msg("loginTitleHtml",(realm.displayNameHtml!''))?no_esc}
     <#elseif section = "form">
         <#if realm.password>
-            <form id="kc-form-login" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
+            <form id="kc-form-login" class="${properties.kcFormClass!}" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
                 <div class="${properties.kcFormGroupClass!}">
                     <div class="${properties.kcLabelWrapperClass!}">
                         <label for="username" class="${properties.kcLabelClass!}"><#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if></label>
                     </div>
 
                     <div class="${properties.kcInputWrapperClass!}">
                         <#if usernameEditDisabled??>
-                            <input id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')?html}" type="text" disabled />
+                            <input tabindex="1" id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')}" type="text" disabled />
                         <#else>
-                            <input id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')?html}" type="text" autofocus autocomplete="off" />
+                            <input tabindex="1" id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')}" type="text" autofocus autocomplete="off" />
                         </#if>
                     </div>
                 </div>
@@ -28,7 +28,7 @@
                     </div>
 
                     <div class="${properties.kcInputWrapperClass!}">
-                        <input id="password" class="${properties.kcInputClass!}" name="password" type="password" autocomplete="off" />
+                        <input tabindex="2" id="password" class="${properties.kcInputClass!}" name="password" type="password" autocomplete="off" />
                     </div>
                 </div>
 
@@ -38,44 +38,40 @@
                             <div class="checkbox">
                                 <label>
                                     <#if login.rememberMe??>
-                                        <input id="rememberMe" name="rememberMe" type="checkbox" tabindex="3" checked> ${msg("rememberMe")}
+                                        <input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox" tabindex="3" checked> ${msg("rememberMe")}
                                     <#else>
-                                        <input id="rememberMe" name="rememberMe" type="checkbox" tabindex="3"> ${msg("rememberMe")}
+                                        <input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox" tabindex="3"> ${msg("rememberMe")}
                                     </#if>
                                 </label>
                             </div>
                         </#if>
                         <div class="${properties.kcFormOptionsWrapperClass!}">
                             <#if realm.resetPasswordAllowed>
-                                <span><a href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span>
+                                <span><a tabindex="5" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span>
                             </#if>
                         </div>
                     </div>
 
                     <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
                         <div class="${properties.kcFormButtonsWrapperClass!}">
-                            <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
+                            <input tabindex="4" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
                         </div>
                      </div>
                 </div>
             </form>
             <hr>
-            <p>
-              <a href="https://www.osc.edu/content/password_change_policy_faqs">Forgot your password?</a> |
-              <a href="https://www.osc.edu/contact/supercomputing_support">Need Help?</a>
-              <span class="pull-right">
-                <#if realm.name = "awesim">
-                  <a href="https://www.awesim.org/en/signup">Register for a new account</a>
-                <#else>
-                  <a href="https://www.osc.edu/resources/getting_started/allocations_and_accounts">Register for a new account</a>
-                </#if>
-              </span>
-            </p>
-        </#if>
+            <#if properties.oodFooterLinks?has_content>
+                <ul class="list-inline">
+                    <#list properties.oodFooterLinks?split(properties.oodFooterLinksDelimiter) as footerLink>
+                        <li><a href="${footerLink?split(properties.oodFooterLinkDelimiter)[1]}">${footerLink?split(properties.oodFooterLinkDelimiter)[0]}</a></li>
+                    </#list>
+                </ul>
+            </#if>
+        </#if><#-- <#if realm.password> -->
     <#elseif section = "info" >
         <#if realm.password && realm.registrationAllowed && !usernameEditDisabled??>
             <div id="kc-registration">
-                <span>${msg("noAccount")} <a href="${url.registrationUrl}">${msg("doRegister")}</a></span>
+                <span>${msg("noAccount")} <a tabindex="6" href="${url.registrationUrl}">${msg("doRegister")}</a></span>
             </div>
         </#if>
 

login/messages/messages_en.properties

@@ -1,3 +1,3 @@
-logintitle=Login to the Ohio Supercomputer Center
-loginTitleHtml=<p class="lead">Log in with your OSC username and password.</p>
-summary=The Ohio Super Computer Center (OSC)
+logintitle=Login to Open OnDemand
+loginTitleHtml=<p class="lead">Log in with your HPC username and password.</p>
+summary=Open OnDemand

login/theme.properties

@@ -4,3 +4,6 @@ styles=css/bootstrap.min.css css/styles.css
 kcContainerClass=container
 kcHeaderClass=container
 kcHeaderWrapperClass=page-header
+
+oodFooterLinksDelimiter=,,
+oodFooterLinkDelimiter===