Che theme for Keycloak (#5859)

Add draft of Che theme for keycloak

dockerfiles/init/modules/compose/templates/docker-compose.yml.erb

@@ -146,6 +146,7 @@ services:
     links:
       - postgres:postgres
     volumes:
+      - '<%= scope.lookupvar('che::che_instance') -%>/config/keycloak/che:/opt/jboss/keycloak/themes/che'
       - '<%= scope.lookupvar('che::che_instance') -%>/config/keycloak/:/export'
       - '<%= scope.lookupvar('che::che_instance') -%>/data/keycloak:/opt/jboss/keycloak/standalone/data'
       - '<%= scope.lookupvar('che::che_instance') -%>/logs/keycloak:/opt/jboss/keycloak/standalone/log'

dockerfiles/init/modules/keycloak/files/che/login/login-reset-password.ftl

@@ -0,0 +1,34 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayInfo=true; section>
+    <#if section = "title">
+        ${msg("emailForgotTitle")}
+    <#elseif section = "header">
+        ${msg("emailForgotTitle")}
+    <#elseif section = "form">
+        <#include "logo.ftl">
+    
+        <form id="kc-reset-password-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
+            <div class="${properties.kcFormGroupClass!}">
+                <div class="kc-form-title">${msg("passwordRecover")}</div>
+                
+                <div class="${properties.kcInputWrapperClass!}">
+                    <input type="text" id="username" name="username" class="${properties.kcInputClass!}" autofocus placeholder="<#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if>"/>
+                </div>
+            </div>
+
+            <div class="${properties.kcFormGroupClass!}">
+                <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
+                    <div class="${properties.kcFormOptionsWrapperClass!}">
+                        <span><a href="${url.loginUrl}">${msg("backToLogin")}</a></span>
+                    </div>
+                </div>
+
+                <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
+                    <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}"/>
+                </div>
+            </div>
+        </form>
+    <#elseif section = "info" >
+        ${msg("emailInstruction")}
+    </#if>
+</@layout.registrationLayout>

dockerfiles/init/modules/keycloak/files/che/login/login-update-password.ftl

@@ -0,0 +1,40 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayInfo=true; section>
+    <#if section = "title">
+        ${msg("updatePasswordTitle")}
+    <#elseif section = "header">
+        ${msg("updatePasswordTitle")}
+    <#elseif section = "form">
+        <#include "logo.ftl">
+    
+        <form id="kc-passwd-update-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
+            <input type="text" readonly value="this is not a login form" style="display: none;">
+            <input type="password" readonly value="this is not a login form" style="display: none;">
+
+            <div class="kc-form-title">Setup your password.</div>
+
+            <div class="${properties.kcFormGroupClass!}">               
+                <div class="${properties.kcInputWrapperClass!}">
+                    <input type="password" id="password-new" name="password-new" class="${properties.kcInputClass!}" autofocus autocomplete="off" placeholder="${msg("passwordNew")}" />
+                </div>
+            </div>
+
+            <div class="${properties.kcFormGroupClass!}">               
+                <div class="${properties.kcInputWrapperClass!}">
+                    <input type="password" id="password-confirm" name="password-confirm" class="${properties.kcInputClass!}" autocomplete="off" placeholder="${msg("passwordConfirm")}" />
+                </div>
+            </div>
+
+            <div class="${properties.kcFormGroupClass!}">
+                <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
+                    <div class="${properties.kcFormOptionsWrapperClass!}">
+                    </div>
+                </div>
+
+                <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
+                    <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}"/>
+                </div>
+            </div>
+        </form>
+    </#if>
+</@layout.registrationLayout>

dockerfiles/init/modules/keycloak/files/che/login/login.ftl

@@ -0,0 +1,76 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayInfo=social.displayInfo; section>
+    <#if section = "title">
+        ${msg("loginTitle",(realm.displayName!''))}
+    <#elseif section = "header">
+        ${msg("loginTitleHtml",(realm.displayNameHtml!''))}
+    <#elseif section = "form">        
+        <#include "logo.ftl">
+        
+        <#if realm.password>
+            <form id="kc-form-login" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
+                <div class="${properties.kcFormGroupClass!}">                    
+                    <div class="kc-form-title">${msg("passwordLogin")}</div>
+                    <div class="${properties.kcInputWrapperClass!}">
+                        <#if usernameEditDisabled??>
+                            <input id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')?html}" type="text" disabled />
+                        <#else>
+                            <input id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')?html}" type="text" autofocus autocomplete="off" placeholder="<#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if>" />
+                        </#if>
+                    </div>
+                </div>
+
+                <div class="${properties.kcFormGroupClass!}">
+                    <div class="${properties.kcInputWrapperClass!}">
+                        <input id="password" class="${properties.kcInputClass!}" name="password" type="password" autocomplete="off" placeholder="Password" />
+                    </div>
+                </div>
+
+                <div class="${properties.kcFormGroupClass!}">
+                    <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
+                        <#if realm.rememberMe && !usernameEditDisabled??>
+                            <div class="checkbox">
+                                <label>
+                                    <#if login.rememberMe??>
+                                        <input id="rememberMe" name="rememberMe" type="checkbox" tabindex="3" checked> ${msg("rememberMe")}
+                                    <#else>
+                                        <input 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>
+                            </#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")}"/>
+                        </div>
+                     </div>
+                </div>
+            </form>
+        </#if>
+    <#elseif section = "info" >
+		<#if realm.password && social.providers??>
+		    <div class="kc-form-title">${msg("oauthLogin")}</div>
+            <div id="kc-social-providers">
+                <ul>
+                    <#list social.providers as p>
+                        <li><a href="${p.loginUrl}" id="zocial-${p.alias}" class="zocial ${p.providerId}"><div id="zocial-image-${p.providerId}"></div></a></li>
+                    </#list>
+                </ul>
+            </div>
+        </#if>
+    
+        <#if realm.password && realm.registrationAllowed && !usernameEditDisabled??>
+            <div id="kc-registration">
+                <span>${msg("noAccount")} <a href="${url.registrationUrl}">${msg("doRegister")}</a></span>
+            </div>
+        </#if>
+       
+    </#if>
+</@layout.registrationLayout>

dockerfiles/init/modules/keycloak/files/che/login/logo.ftl

@@ -0,0 +1,4 @@
+<div id="logo-banner">
+	<img id="che-logo" src="${url.resourcesPath}/img/che-logo.svg" alt="Eclipse Che logo" />
+	<span>${msg("product")}</span>
+</div>

dockerfiles/init/modules/keycloak/files/che/login/messages/messages_en.properties

@@ -0,0 +1,6 @@
+product=Eclipse Che
+
+passwordLogin=Login with password
+oauthLogin=Login with OAuth
+formRegister=Create an account with a form
+passwordRecover=Forgot your password? <br/> Enter your email below.

dockerfiles/init/modules/keycloak/files/che/login/register.ftl

@@ -0,0 +1,76 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout; section>
+    <#if section = "title">
+        ${msg("registerWithTitle",(realm.displayName!''))}
+    <#elseif section = "header">
+        ${msg("registerWithTitleHtml",(realm.displayNameHtml!''))}
+    <#elseif section = "form">
+        <#include "logo.ftl">
+    
+        <form id="kc-register-form" class="${properties.kcFormClass!}" action="${url.registrationAction}" method="post">
+          <input type="text" readonly value="this is not a login form" style="display: none;">
+          <input type="password" readonly value="this is not a login form" style="display: none;">
+
+          <div class="kc-form-title">${msg("formRegister")}</div>
+
+          <#if !realm.registrationEmailAsUsername>
+            <div class="${properties.kcFormGroupClass!} ${messagesPerField.printIfExists('username',properties.kcFormGroupErrorClass!)}">                
+                <div class="${properties.kcInputWrapperClass!}">
+                    <input type="text" id="username" class="${properties.kcInputClass!}" name="username" value="${(register.formData.username!'')?html}" placeholder="${msg("username")}" />
+                </div>
+            </div>
+          </#if>
+            <div class="${properties.kcFormGroupClass!} ${messagesPerField.printIfExists('firstName',properties.kcFormGroupErrorClass!)}">              
+                <div class="${properties.kcInputWrapperClass!}">
+                    <input type="text" id="firstName" class="${properties.kcInputClass!}" name="firstName" value="${(register.formData.firstName!'')?html}" placeholder="${msg("firstName")}" />
+                </div>
+            </div>
+
+            <div class="${properties.kcFormGroupClass!} ${messagesPerField.printIfExists('lastName',properties.kcFormGroupErrorClass!)}">              
+                <div class="${properties.kcInputWrapperClass!}">
+                    <input type="text" id="lastName" class="${properties.kcInputClass!}" name="lastName" value="${(register.formData.lastName!'')?html}" placeholder="${msg("lastName")}" />
+                </div>
+            </div>
+
+            <div class="${properties.kcFormGroupClass!} ${messagesPerField.printIfExists('email',properties.kcFormGroupErrorClass!)}">              
+                <div class="${properties.kcInputWrapperClass!}">
+                    <input type="text" id="email" class="${properties.kcInputClass!}" name="email" value="${(register.formData.email!'')?html}" placeholder=${msg("email")} />
+                </div>
+            </div>
+
+            <#if passwordRequired>
+            <div class="${properties.kcFormGroupClass!} ${messagesPerField.printIfExists('password',properties.kcFormGroupErrorClass!)}">             
+                <div class="${properties.kcInputWrapperClass!}">
+                    <input type="password" id="password" class="${properties.kcInputClass!}" name="password" placeholder="${msg("password")}" />
+                </div>
+            </div>
+
+            <div class="${properties.kcFormGroupClass!} ${messagesPerField.printIfExists('password-confirm',properties.kcFormGroupErrorClass!)}">               
+                <div class="${properties.kcInputWrapperClass!}">
+                    <input type="password" id="password-confirm" class="${properties.kcInputClass!}" name="password-confirm" placeholder="${msg("passwordConfirm")}" />
+                </div>
+            </div>
+            </#if>
+
+            <#if recaptchaRequired??>
+            <div class="form-group">
+                <div class="${properties.kcInputWrapperClass!}">
+                    <div class="g-recaptcha" data-size="compact" data-sitekey="${recaptchaSiteKey}"></div>
+                </div>
+            </div>
+            </#if>
+
+            <div class="${properties.kcFormGroupClass!}">
+                <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
+                    <div class="${properties.kcFormOptionsWrapperClass!}">
+                        <span><a href="${url.loginUrl}">${msg("backToLogin")}</a></span>
+                    </div>
+                </div>
+
+                <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
+                    <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doRegister")}"/>
+                </div>
+            </div>
+        </form>
+    </#if>
+</@layout.registrationLayout>

dockerfiles/init/modules/keycloak/files/che/login/resources/css/styles.css

@@ -0,0 +1,248 @@
+
+body {
+    background-color: #1b2b57;  
+    color: #4a90e2;
+    font-family: 'Open Sans';
+    font-size: 14px;
+}
+
+a {
+    color: #fff;
+    text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+div#kc-content {
+    position: absolute;
+    top: 20%;
+    left: 50%;
+    width: 400px;
+    margin-left: -225px;
+}
+
+div#kc-form {
+    float: left;
+    width: 400px;
+}
+
+div#kc-form label {
+    display: block;
+    font-family: 'Open Sans';
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+div#info-area {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    margin-top: 40px;
+    background-color: rgba(0, 0, 0, 0.4);
+    padding: 20px;
+    width: 100%;
+}
+
+div#info-area p {
+    margin-right: 30px;
+    display: inline;
+    text-shadow: none;
+}
+
+input[type=text], input[type=password] {
+    width: 375px;
+    height: 46px;
+    margin: 0 0 10px 0;
+    border-radius: 5px;
+    padding-left: 21px;
+    color: #fff;
+    background: #2d407d;
+    font-size: 16px;
+    font-size: 18px;
+    vertical-align: middle;
+    border: none;    
+}
+
+input[type=text]:focus, input[type=password]:focus {
+  background: #3f55ae;
+  outline: none;
+}
+
+input[type=submit] {
+    border: none;
+    width: 180px;
+    height: 40px;
+    border-radius: 5px;    
+    font-size: 16px;
+    font-weight: bold;
+    color: #fff;
+    background: #44a73b;
+    cursor: pointer;
+
+    padding: 10px;
+    margin-top: 20px;
+    margin-right: 10px;
+    margin-bottom: 25px;
+}    
+
+input[type=submit]:hover {
+    background-color: #398842;
+}
+
+div#kc-form-options div {
+    display: inline-block;
+    margin-right: 20px;
+    font-size: 12px;
+}
+
+div#kc-form-options a {
+    font-size: 14px;
+    font-family: 'Open Sans';
+}
+
+div#kc-form-options div label {
+    font-size: 14px;
+}
+
+div#kc-feedback {
+    box-shadow: 0px 0px 6px rgba(0,0,0,0.5);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    text-align: center;
+}
+
+.kc-feedback-text {
+  color: #fff;  
+  font-size: 18px;
+  text-align: center;
+  display: block;
+  margin-bottom: 25px;
+  padding: 15px; 
+}
+
+div#kc-feedback-wrapper {    
+    padding: 1em;
+}
+
+div.feedback-success {
+    background-color: rgba(155,155,255,0.1);
+}
+
+div.feedback-warning {
+    background-color: rgba(255,175,0,0.1);
+}
+
+div.feedback-error {
+    background-color: rgba(255,0,0,0.1);
+}
+
+.alert {
+    border-radius: 5px;
+}
+
+.alert-success {
+    background-color: #44a73b;
+}
+
+.alert-warning {
+    background-color: #8c9837;
+}
+
+.alert-error {
+    background-color: #d7342d;
+}
+
+
+div#kc-error-message {
+    color: #fff;
+    background-color: #d7342d;
+    border-radius: 5px;
+    text-align: center;
+    display: inline-block;
+    font-size: 16px;
+    padding-left: 15px; 
+    padding-right: 15px;
+}
+
+div#kc-header {
+    display: none;
+}
+
+div#kc-registration {    
+    font-size: 20px;
+    margin-bottom: 20px;
+}
+
+div#social-login {
+	border-left: 1px solid rgba(255, 255, 255, 0.2);
+	float: right;
+	width: 150px;
+	padding: 20px 0 200px 40px;
+}
+
+div.social-login span {
+    display: none;
+}
+
+div#kc-social-providers ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+div#kc-social-providers ul li {
+    margin-bottom: 20px;
+}
+
+div#kc-social-providers ul li span {
+    display: inline;
+    width: 100px;
+}
+
+a.zocial {
+    border: none;            
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+}
+
+#zocial-image-github {
+    width: 48px;
+    height: 48px;
+    background-size: cover;
+    background-image: url("../img/logo-github@3x.png");
+}
+
+#zocial-image-github:hover {
+    background-image: url("../img/logo-github-hover@3x.png");
+}
+
+#logo-banner {
+    color: #fff;
+    font-weight: bold;
+    font-size: 36px;
+    display: inline-block;
+    margin-bottom: 25px;
+}
+
+#logo-banner #che-logo {
+    width: 64px;
+    height: 64px;
+    vertical-align: middle;
+}
+
+#logo-banner span {
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 10px;
+}
+
+.kc-form-title {
+    font-family: 'Open Sans';
+    font-size: 20px;    
+    margin-bottom: 10px;
+}
+

dockerfiles/init/modules/keycloak/files/che/login/resources/img/che-logo.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!--
+
+    Copyright (c) 2012-2017 Codenvy, S.A.
+    All rights reserved. This program and the accompanying materials
+    are made available under the terms of the Eclipse Public License v1.0
+    which accompanies this distribution, and is available at
+    http://www.eclipse.org/legal/epl-v10.html
+
+    Contributors:
+      Codenvy, S.A. - initial API and implementation
+
+-->
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="70px"
+     width="70px" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"
+     viewBox="0 0 47 57">
+
+  <g fill-rule="evenodd" stroke="none" stroke-width="1" fill="none">
+    <path d="M0.032227,30.88l-0.032227-17.087,23.853-13.793,23.796,13.784-14.691,8.51-9.062-5.109-23.864,13.695z" fill="#fdb940"/>
+    <path d="M0,43.355l23.876,13.622,23.974-13.937v-16.902l-23.974,13.506-23.876-13.506v17.217z" fill="#525c86"/>
+  </g>
+</svg>

dockerfiles/init/modules/keycloak/files/che/login/theme.properties

@@ -0,0 +1,2 @@
+parent=base
+styles=css/styles.css

dockerfiles/init/modules/keycloak/manifests/init.pp

@@ -22,5 +22,11 @@ class keycloak {
     ensure  => "present",
     content => template("keycloak/master-users-0.json.erb"),
     mode    => "644",
+  } ->
+  file { 'keycloak theme custom login page':
+   path => '/opt/che/config/keycloak/che',
+   ensure  => "present",
+   source => 'puppet:///modules/keycloak/che',
+   recurse => true,
   }
 }

dockerfiles/init/modules/keycloak/templates/che-realm.json.erb

@@ -13,13 +13,13 @@
   "accessCodeLifespanLogin" : 1800,
   "enabled" : true,
   "sslRequired" : "external",
-  "registrationAllowed" : false,
+  "registrationAllowed" : true,
   "registrationEmailAsUsername" : false,
   "rememberMe" : false,
   "verifyEmail" : false,
   "loginWithEmailAllowed" : true,
   "duplicateEmailsAllowed" : false,
-  "resetPasswordAllowed" : false,
+  "resetPasswordAllowed" : true,
   "editUsernameAllowed" : false,
   "bruteForceProtected" : false,
   "maxFailureWaitSeconds" : 900,
@@ -302,6 +302,7 @@
     "xXSSProtection" : "1; mode=block",
     "contentSecurityPolicy" : "frame-src 'self'"
   },
+  "loginTheme" : "che",
   "smtpServer" : { },
   "eventsEnabled" : false,
   "eventsListeners" : [ "jboss-logging" ],
@@ -735,5 +736,5 @@
     "minimumQuickLoginWaitSeconds" : "60",
     "waitIncrementSeconds" : "60"
   },
-  "keycloakVersion" : "3.1.0.Final"
+  "keycloakVersion" : "3.2.1.Final"
 }