Merge pull request #657 from abhi4578/nginx-keycloak-fixes

[Docker-Swarm]Nginx keycloak fixes
datakaveri · Jan 10, 2024 · d5e6dde · d5e6dde
2 parents fe26772 + c6d6569
commit d5e6dde
Show file tree

Hide file tree

Showing 12 changed files with 221 additions and 37 deletions.
diff --git a/Docker-Swarm-deployment/single-node/keycloak/keycloak-stack.yaml b/Docker-Swarm-deployment/single-node/keycloak/keycloak-stack.yaml
@@ -8,7 +8,7 @@ networks:
 
 services:
   keycloak:
-    image: ghcr.io/datakaveri/keycloak:22.0.1-1
+    image: ghcr.io/datakaveri/keycloak:22.0.1-5
     cap_drop:
        - ALL
 

diff --git a/Docker-Swarm-deployment/single-node/nginx/example-secrets/secrets/pki/fullchain.pem b/Docker-Swarm-deployment/single-node/nginx/example-secrets/secrets/pki/fullchain.pem
@@ -0,0 +1,21 @@
+-----BEGIN CERTIFICATE-----
+MIIDcTCCAlmgAwIBAgIBATANBgkqhkiG9w0BAQsFADAxMSAwHgYDVQQDDBdUTFNH
+ZW5TZWxmU2lnbmVkdFJvb3RDQTENMAsGA1UEBwwEJCQkJDAeFw0yMDA4MzExNjI4
+MTJaFw0zMDA4MjkxNjI4MTJaMCUxEjAQBgNVBAMMCWxvY2FsaG9zdDEPMA0GA1UE
+CgwGc2VydmVyMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArwdoR1Iw
+Wh0JeUftf1HKwplkPpfagBnE3EplNtXNI8J5S6L3IZ/ESO1jD+Sv7gEPD/uj/Gs5
+XZtHWjbRKg5t+s5/VinME2veO/YECissbgcpG47TnmZYBh/MI/bmqB1H1eP1BMIy
+ZGzkc7jGpmvtTFnhnnx3wOl2Q73LnjjZYa8gFP8vhAGOVNoEVR8TVVIMJu75lexY
+FACgkrZxpIvLo2Vm1hwp9LC/8+vnykRN1lHCzlNujWLqqFaNIXHgITwV+WVMyYKQ
+xcLArhnQ3udT8R3w0xGrN+ftnzTM5FAjwavdmuUy6Af9FPjUr/PihEtEEXknS7TW
+9+RT0UU1bkViUwIDAQABo4GfMIGcMAkGA1UdEwQCMAAwCwYDVR0PBAQDAgWgMBMG
+A1UdJQQMMAoGCCsGAQUFBwMBMC0GA1UdEQQmMCSCCWxvY2FsaG9zdIIMc3JpbnNr
+aXRhcmNogglsb2NhbGhvc3QwHQYDVR0OBBYEFAfHIG3fXL6ihDwPe6iljZW1D1lV
+MB8GA1UdIwQYMBaAFI4TePiskZTMxosacbYosqXR/plXMA0GCSqGSIb3DQEBCwUA
+A4IBAQAYyyaVogo1p7B2wUAtW+o8CKhm1/0SXeCExiBpeBUSGXWkxqOEUbMtcjGs
+l+D//Td1u1bJ+oAzwf5umvfJMsMllTtmGwmf86IQNGt4DORaANctGU92DigVdor1
+R5D5NFraZCBBItzZjRZVhqsro/CcrHGdmHJEET1y/CKPK913jhodW5i1aMD770Go
+j/TLlxu/0+W7xfu44sdhfjzkjaen4nEBfWSH7SuYAtWbfDOeVyFNZwZ+Gqct+Sla
+rXwfyuCiU1kAqWE29DLNYo8KLbE0YsEJZSGK94ZTB9/NPb5qgf/PAVPzcMZbGe6S
+OeenHmVfMNZLb/2alVaRPhap2rAw
+-----END CERTIFICATE-----
diff --git a/Docker-Swarm-deployment/single-node/nginx/example-secrets/secrets/pki/privkey.pem b/Docker-Swarm-deployment/single-node/nginx/example-secrets/secrets/pki/privkey.pem
@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCvB2hHUjBaHQl5
+R+1/UcrCmWQ+l9qAGcTcSmU21c0jwnlLovchn8RI7WMP5K/uAQ8P+6P8azldm0da
+NtEqDm36zn9WKcwTa9479gQKKyxuBykbjtOeZlgGH8wj9uaoHUfV4/UEwjJkbORz
+uMama+1MWeGefHfA6XZDvcueONlhryAU/y+EAY5U2gRVHxNVUgwm7vmV7FgUAKCS
+tnGki8ujZWbWHCn0sL/z6+fKRE3WUcLOU26NYuqoVo0hceAhPBX5ZUzJgpDFwsCu
+GdDe51PxHfDTEas35+2fNMzkUCPBq92a5TLoB/0U+NSv8+KES0QReSdLtNb35FPR
+RTVuRWJTAgMBAAECggEBAIjgzhgYml+ena4PJhiPqnWM5+xbbTEI9f8g3w6HHSp+
+B8Wy6HmPLD2sB/CB82O5yEHDlXbtk6s0qBRREjpFlpSxsLt9bG8zyFQ0DOy23sQd
+LXSzuaMCfowricYGbFPEskz/PLo/9JC859voANJdTPKMx/jddfmTmj1XzEksRDQz
+KTax3PXlcDB09JLvXLRghNsBS09XJrsBn9LE+l/AIb8lfbklyMDFmHIL1EMPs3vE
+9srXNfYpyD26tKWng77Lk6bxQAxNfrmYOlq6FfUZgp0qsBmS61PbScfdIBNhOn0R
+YRrUT6xpoZgOLi9mwqN5QI6jbwwqLEXpiNeiqIFaaaECgYEA2fC5kTmXm0dEW8sO
+gNwykWd2LQk8nZdTB0f+aReV3pmiXbrFUKLx6hYX8zp94X02lwjsGkBT8c4pV8GB
+S9ujaNk4Uu5301UMoX0SjFcnyOVKVo4BsaZVXhvy5/Sw2/l2il6LYyK0lN8ntnNg
+rTa+aHLI0BEdqDgtdjlyeTPg4p0CgYEAzZhHW7gwvLLkF/Jb7/q+xYOujYfHdDpD
+iEmEHtMJdWc7Eb6tAwtOJM7hutNoFhkrOMyBo3lGXSICR7v8R8INqkvEU8vo2/lM
+RQSw87JJpPJOVOYfrKcjNJv6TqqGnbkqC7UUxOsPmxwvHIfLPbkkOVhhWj9whQpz
+CmvzQvOCja8CgYBu6s7mlFMOWgT2Wq+08VxjGC7S2OKaqcs952wZfEFwGuzBmy6U
+zXklU704ssoiGqHP2GChM6AFbpEn8nmla9EMqZC61FbznVNiVM890ZWT7u4Ygwll
+qmvEC6FiX+wq6BlmbpuuBpm1MqV5e9r2DOh3LAP7sNpRJNYuVyplePu5GQKBgAy3
+vMJJtIoXrtBkZ5eCtUZWjPeoTIg+Cmtl0MxvVYhzqE3Cs8Uab+0K9x+tcCTdzbSn
+weUw3U9piSaS1FpEAMBmC3D7jh39X+BtF90bTD7t1jaePZtag2z/sQ4oskcTayxq
+OSytNbvslGV5aPMafsklVHBWuEkiilc8skGT+qF1AoGAPXuRg+WXT5hjYm9neeJk
+YAMjaTgLF4SNaP+MzThBIdBOEKseca/nleOezu4rEMbkvkiFVSjV9/8CkPhNE6U8
+cDcqXglc9RKiW5ytotOyYLyfErcclcc+qDTi5gLAP5n2w9XlSTwF9eDfohljh9Yz
+Pl72WthlUEjh6BrZWgKGTug=
+-----END PRIVATE KEY-----
diff --git a/docker/keycloak/Dockerfile b/docker/keycloak/Dockerfile
@@ -1,2 +1,2 @@
-FROM bitnami/keycloak:21.1.1
-COPY src/ /opt/bitnami/keycloak/themes/
+FROM bitnami/keycloak:22.0.1
+COPY src/ /opt/bitnami/keycloak/themes/
diff --git a/docker/keycloak/README.md b/docker/keycloak/README.md
@@ -3,5 +3,5 @@ Docker image for Keycloak server with custom IUDX and ADeX themes
 
 ## Build Docker Image
 ```sh
-docker build -t ghcr.io/datakaveri/keycloak:21.1.1-1 .
+docker build -t ghcr.io/datakaveri/keycloak:22.0.1-5 .
 ```
diff --git a/docker/keycloak/src/custom_theme/login/login-page-expired.ftl b/docker/keycloak/src/custom_theme/login/login-page-expired.ftl
@@ -1,4 +1,5 @@
 <#import "template.ftl" as layout>
+
 <@layout.registrationLayout; section>
     <#if section = "header">
         ${msg("pageExpiredTitle")}

diff --git a/docker/keycloak/src/custom_theme/login/login-reset-password.ftl b/docker/keycloak/src/custom_theme/login/login-reset-password.ftl
@@ -0,0 +1,31 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayInfo=true; section>
+    <#if section = "header">
+        ${msg("emailForgotTitle")}
+    <#elseif section = "form">
+        <form id="kc-reset-password-form" class="${properties.kcFormClass!}" 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!}">
+                    <input type="text" id="username" name="username" class="${properties.kcInputClass!}" autofocus/>
+                </div>
+            </div>
+
+            <div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
+                <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
+                    <div class="${properties.kcFormOptionsWrapperClass!}">
+                        <span><a href="${url.loginUrl}">${kcSanitize(msg("backToLogin"))?no_esc}</a></span>
+                    </div>
+                </div>
+
+                <div id="kc-form-buttons" class="login-div">
+                    <button class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}">${msg("doSubmit")}</button>
+                </div>
+            </div>
+        </form>
+    <#elseif section = "info" >
+        ${msg("emailInstruction")}
+    </#if>
+</@layout.registrationLayout>
diff --git a/docker/keycloak/src/custom_theme/login/login-update-password.ftl b/docker/keycloak/src/custom_theme/login/login-update-password.ftl
@@ -57,12 +57,12 @@
                     </div>
                 </div>
 
-                <div id="custom-kc-form-buttons" class="${properties.kcFormButtonsClass!}">
+                <div id="custom-kc-form-buttons" class="login-div">
                     <#if isAppInitiatedAction??>
-                        <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" />
+                        <button class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" >${msg("doSubmit")}</button>
                         <button class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" type="submit" name="cancel-aia" value="true" />${msg("doCancel")}</button>
                     <#else>
-                        <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" />
+                        <button class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" >${msg("doSubmit")}</button>
                     </#if>
                 </div>
             </div>

diff --git a/docker/keycloak/src/custom_theme/login/login.ftl b/docker/keycloak/src/custom_theme/login/login.ftl
@@ -1,4 +1,5 @@
 <#import "template.ftl" as layout>
+
 <@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section>
     <#if section = "header">
         ${msg("loginAccountTitle")}
@@ -61,9 +62,9 @@
 
                   </div>
 
-                  <div id="kc-form-buttons" class="${properties.kcFormGroupClass!}">
+                  <div id="kc-form-buttons" class="login-div">
                       <input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
-                      <input tabindex="4" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
+                      <button tabindex="4" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}">${msg("doLogIn")}</button>
                   </div>
             </form>
         </#if>

diff --git a/docker/keycloak/src/custom_theme/login/register.ftl b/docker/keycloak/src/custom_theme/login/register.ftl
@@ -135,8 +135,8 @@
             </#if>
 
             <div class="${properties.kcFormGroupClass!}">
-                <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
-                    <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doRegister")}"/>
+                <div id="kc-form-buttons" class="login-div">
+                    <button class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doRegister")}">${msg("doRegister")}</button>
                 </div>
                 <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
                     <div class="${properties.kcFormOptionsWrapperClass!}">

diff --git a/docker/keycloak/src/custom_theme/login/resources/css/custom.css b/docker/keycloak/src/custom_theme/login/resources/css/custom.css
@@ -5,11 +5,6 @@
   background: #f1f7fa;
   background-size: cover;
   height: auto;
-  padding-bottom: 30px;
-}
-
-.login-pf-page {
-  min-height: 100vh;
 }
 
 #custom-card-pf {
@@ -66,13 +61,19 @@
 }
 
 .custom-pf-c-form-control {
-  border: 1px solid #ccc;
+  font-size: 16px;
+  border: 0;
   border-radius: 10px;
-  padding: 12px 19px;
+  padding: 30px 20px 12px;
+  margin: 0;
   width: 100%;
-  outline: none;
-  color: #2c2c2c;
-  margin-top: 4px;
+  box-shadow: inset 0 0 0 1px #ccc;
+
+  &:focus {
+    appearance: none;
+    outline: none;
+    box-shadow: inset 0 0 0 2px #0b457f;
+  }
 }
 
 /* #form-group-1,#form-group-2,#form-group-3,#form-group-4,#form-group-5{
@@ -84,15 +85,79 @@
 }
 
 .custom-pf-c-button.custom-pf-m-primary {
-  border-radius: 8px;
-  background-color: #0b457f;
-  color: #fff;
-  border: none;
-  padding: 18px 40px;
-  width: 200px;
-  margin: 0 auto;
-  display: block;
-  margin-bottom: 15px;
+	width: 35%;
+	height: auto;
+	float: left;
+	transition: 0.5s linear;
+	position: relative;
+	display: block;
+	overflow: hidden;
+	padding: 9px 0px;
+	text-align: center;
+	margin: 0 5px;
+	background: #0b457f;
+	color: #fff;
+	text-transform: capitalize;
+	font-weight: 500;
+	border-radius: 5px;
+	font-size: 14px;
+}
+
+.custom-pf-c-button.custom-pf-m-primary:before {
+	position: absolute;
+	content: '';
+	left: 0;
+	bottom: 0;
+	height: 4px;
+	width: 100%;
+	border-bottom: 4px solid transparent;
+	border-left: 4px solid transparent;
+	box-sizing: border-box;
+	transform: translateX(100%);
+}
+
+.custom-pf-c-button.custom-pf-m-primary:after {
+	position: absolute;
+	content: '';
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 4px;
+	border-top: 4px solid transparent;
+	border-right: 4px solid transparent;
+	box-sizing: border-box;
+	transform: translateX(-100%);
+}
+
+.custom-pf-c-button.custom-pf-m-primary:hover {
+	box-shadow: 0 5px 15px rgba(255, 255, 255, 0.5);
+	background-color: #fff;
+	color: #0b457f;
+	transition: all 0.4s ease;
+	cursor: pointer;
+}
+
+.custom-pf-c-button.custom-pf-m-primary:hover:before {
+	border-color: #0b457f;
+	height: 100%;
+	transform: translateX(0);
+	transition: 0.3s transform linear, 0.3s height linear 0.3s;
+}
+
+.custom-pf-c-button.custom-pf-m-primary:hover:after {
+	border-color: #0b457f;
+	height: 100%;
+	transform: translateX(0);
+	transition: 0.3s transform linear, 0.3s height linear 0.5s;
+}
+
+button {
+	color: black;
+	text-decoration: none;
+	cursor: pointer;
+	outline: none;
+	border: none;
+	background: transparent;
 }
 
 h1#kc-page-title {
@@ -107,14 +172,25 @@ h1#kc-page-title {
 }
 
 #custom-logo-wrapper {
-  background-image: url(../img/iudx_logo.png);
   background-size: contain;
   width: 95px;
   background-repeat: no-repeat;
   display: inline-block;
   transform: translatey(25%);
 }
 
+.custom-pf-c-form__label{
+  margin-bottom: -50px;
+  z-index: 1;
+  position: absolute;
+  padding: 7px 10px 0 20px;
+  pointer-events: none;
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 600;
+  color: #042f5b;
+}
+
 .custom-pf-c-form__label-text {
   font-weight: 400;
   color: #6c6c6c;
@@ -143,7 +219,17 @@ h1#kc-page-title {
 
 .custom-label-wrapper,
 .custom-input-wrapper {
-  padding: 0 20px;
+  font-size: 16px;
+  border: 0;
+  border-radius: 10px;
+  margin: 0;
+  width: 100%;
+
+  &:focus {
+    appearance: none;
+    outline: none;
+    box-shadow: inset 0 0 0 2px #0b457f;
+  }
 }
 
 .custom-form-group {
@@ -154,6 +240,7 @@ h1#kc-page-title {
 .custom-login-text,
 .custom-login-helper-text {
   font-size: 14px;
+  padding-top: 15px;
 }
 
 .custom-login-text {
@@ -238,10 +325,6 @@ h1#kc-page-title {
     margin: 0;
   }
 
-  .custom-pf-c-form__label-text {
-    font-size: 16px;
-  }
-
   .custom-pf-c-button.custom-pf-m-primary {
     font-size: 16px;
   }
@@ -259,6 +342,18 @@ h1#kc-page-title {
   color:'#ddd'
 }
 
+.login-div{
+  display: flex;
+  width: 100%;
+  align-items:center;
+  justify-content: center;
+}
 
+.header {
+  background-color: #042f5b;
+  padding: 10px;
+}
 
-
+.row{
+  margin: 0px;
+}
diff --git a/docker/keycloak/src/custom_theme/login/template.ftl b/docker/keycloak/src/custom_theme/login/template.ftl
@@ -36,7 +36,14 @@
     </#if>
 </head>
 
+
 <body class="${properties.kcBodyClass!}">
+    <div class="header">
+        <a href="https://catalogue.iudx.org.in/"><img
+            src="https://iudx.org.in/wp-content/uploads/2021/12/IUDX_logo_white.png"
+            alt=""
+        /></a>
+	</div>
 <div class="${properties.kcLoginClass!}">
     <div id="kc-header" class="${properties.kcHeaderClass!}">
         <div id="kc-header-wrapper"