diff --git a/services/keycloak/themes/lagoon/login/login-username.ftl b/services/keycloak/themes/lagoon/login/login-username.ftl
index a8f4cfe2e0..02ced45a5c 100755
--- a/services/keycloak/themes/lagoon/login/login-username.ftl
+++ b/services/keycloak/themes/lagoon/login/login-username.ftl
@@ -1,8 +1,8 @@
<#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username') displayInfo=(realm.password && realm.registrationAllowed && !registrationDisabled??); section>
-
- <#if section = "form">
-
+ <#if section = "header">
+ ${msg("loginAccountTitle")}
+ <#elseif section = "form">
- <@registerCommons.termsAcceptance/>
-
<#if recaptchaRequired??>
@@ -141,4 +138,4 @@
-
+
\ No newline at end of file
diff --git a/services/keycloak/themes/lagoon/login/resources/css/_login.scss b/services/keycloak/themes/lagoon/login/resources/css/_login.scss
new file mode 100644
index 0000000000..5edc032670
--- /dev/null
+++ b/services/keycloak/themes/lagoon/login/resources/css/_login.scss
@@ -0,0 +1,596 @@
+/* Patternfly CSS places a "bg-login.jpg" as the background on this ".login-pf" class.
+ This clashes with the "keycloak-bg.png' background defined on the body below.
+ Therefore the Patternfly background must be set to none. */
+ .login-pf {
+ background: none;
+}
+
+.login-pf body {
+ background: url("../img/keycloak-bg.png") no-repeat center center fixed;
+ background-size: cover;
+ height: 100%;
+}
+
+textarea.pf-c-form-control {
+ height: auto;
+}
+
+.pf-c-alert__title {
+ font-size: var(--pf-global--FontSize--xs);
+}
+
+p.instruction {
+ margin: 5px 0;
+}
+
+.pf-c-button.pf-m-control {
+ border: solid var(--pf-global--BorderWidth--sm);
+ border-color: rgba(230, 230, 230, 0.5);
+}
+
+h1#kc-page-title {
+ margin-top: 10px;
+}
+
+#kc-locale ul {
+ background-color: var(--pf-global--BackgroundColor--100);
+ display: none;
+ top: 20px;
+ min-width: 100px;
+ padding: 0;
+}
+
+#kc-locale-dropdown{
+ display: inline-block;
+}
+
+#kc-locale-dropdown:hover ul {
+ display:block;
+}
+
+#kc-locale-dropdown a {
+ color: var(--pf-global--Color--200);
+ text-align: right;
+ font-size: var(--pf-global--FontSize--sm);
+}
+
+a#kc-current-locale-link::after {
+ content: "\2c5";
+ margin-left: var(--pf-global--spacer--xs)
+}
+
+.login-pf .container {
+ padding-top: 40px;
+}
+
+.login-pf a:hover {
+ color: #0099d3;
+}
+
+#kc-logo {
+ width: 100%;
+}
+
+div.kc-logo-text {
+ background-image: url(../img/keycloak-logo-text.png);
+ background-repeat: no-repeat;
+ height: 63px;
+ width: 300px;
+ margin: 0 auto;
+}
+
+div.kc-logo-text span {
+ display: none;
+}
+
+#kc-header {
+ color: #ededed;
+ overflow: visible;
+ white-space: nowrap;
+}
+
+#kc-header-wrapper {
+ font-size: 29px;
+ text-transform: uppercase;
+ letter-spacing: 3px;
+ line-height: 1.2em;
+ padding: 62px 10px 20px;
+ white-space: normal;
+}
+
+#kc-content {
+ width: 100%;
+}
+
+#kc-attempted-username {
+ font-size: 20px;
+ font-family: inherit;
+ font-weight: normal;
+ padding-right: 10px;
+}
+
+#kc-username {
+ text-align: center;
+ margin-bottom:-10px;
+}
+
+#kc-webauthn-settings-form {
+ padding-top: 8px;
+}
+
+#kc-form-webauthn .select-auth-box-parent {
+ pointer-events: none;
+}
+
+#kc-form-webauthn .select-auth-box-desc {
+ color: var(--pf-global--palette--black-600);
+}
+
+#kc-form-webauthn .select-auth-box-headline {
+ color: var(--pf-global--Color--300);
+}
+
+#kc-form-webauthn .select-auth-box-icon {
+ flex: 0 0 3em;
+}
+
+#kc-form-webauthn .select-auth-box-icon-properties {
+ margin-top: 10px;
+ font-size: 1.8em;
+}
+
+#kc-form-webauthn .select-auth-box-icon-properties.unknown-transport-class {
+ margin-top: 3px;
+}
+
+#kc-form-webauthn .pf-l-stack__item {
+ margin: -1px 0;
+}
+
+#kc-content-wrapper {
+ margin-top: 20px;
+}
+
+#kc-form-wrapper {
+ margin-top: 10px;
+}
+
+#kc-info {
+ margin: 20px -40px -30px;
+}
+
+#kc-info-wrapper {
+ font-size: 13px;
+ padding: 15px 35px;
+ background-color: #F0F0F0;
+}
+
+#kc-form-options span {
+ display: block;
+}
+
+#kc-form-options .checkbox {
+ margin-top: 0;
+ color: #72767b;
+}
+
+#kc-terms-text {
+ margin-bottom: 20px;
+}
+
+#kc-registration {
+ margin-bottom: 0;
+}
+
+/* TOTP */
+
+.subtitle {
+ text-align: right;
+ margin-top: 30px;
+ color: #909090;
+}
+
+.required {
+ color: var(--pf-global--danger-color--200);
+}
+
+ol#kc-totp-settings {
+ margin: 0;
+ padding-left: 20px;
+}
+
+ul#kc-totp-supported-apps {
+ margin-bottom: 10px;
+}
+
+#kc-totp-secret-qr-code {
+ max-width:150px;
+ max-height:150px;
+}
+
+#kc-totp-secret-key {
+ background-color: #fff;
+ color: #333333;
+ font-size: 16px;
+ padding: 10px 0;
+}
+
+/* OAuth */
+
+#kc-oauth h3 {
+ margin-top: 0;
+}
+
+#kc-oauth ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+#kc-oauth ul li {
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ font-size: 12px;
+ padding: 10px 0;
+}
+
+#kc-oauth ul li:first-of-type {
+ border-top: 0;
+}
+
+#kc-oauth .kc-role {
+ display: inline-block;
+ width: 50%;
+}
+
+/* Code */
+#kc-code textarea {
+ width: 100%;
+ height: 8em;
+}
+
+/* Social */
+.kc-social-links {
+ margin-top: 20px;
+}
+
+.kc-social-provider-logo {
+ font-size: 23px;
+ width: 30px;
+ height: 25px;
+ float: left;
+}
+
+.kc-social-gray {
+ color: var(--pf-global--Color--200);
+}
+
+.kc-social-item {
+ margin-bottom: var(--pf-global--spacer--sm);
+ font-size: 15px;
+ text-align: center;
+}
+
+.kc-social-provider-name {
+ position: relative;
+ top: 3px;
+}
+
+.kc-social-icon-text {
+ left: -15px;
+}
+
+.kc-social-grid {
+ display:grid;
+ grid-column-gap: 10px;
+ grid-row-gap: 5px;
+ grid-column-end: span 6;
+ --pf-l-grid__item--GridColumnEnd: span 6;
+}
+
+.kc-social-grid .kc-social-icon-text {
+ left: -10px;
+}
+
+.kc-login-tooltip {
+ position: relative;
+ display: inline-block;
+}
+
+.kc-social-section {
+ text-align: center;
+}
+
+.kc-social-section hr{
+ margin-bottom: 10px
+}
+
+.kc-login-tooltip .kc-tooltip-text{
+ top:-3px;
+ left:160%;
+ background-color: black;
+ visibility: hidden;
+ color: #fff;
+
+ min-width:130px;
+ text-align: center;
+ border-radius: 2px;
+ box-shadow:0 1px 8px rgba(0,0,0,0.6);
+ padding: 5px;
+
+ position: absolute;
+ opacity:0;
+ transition:opacity 0.5s;
+}
+
+/* Show tooltip */
+.kc-login-tooltip:hover .kc-tooltip-text {
+ visibility: visible;
+ opacity:0.7;
+}
+
+/* Arrow for tooltip */
+.kc-login-tooltip .kc-tooltip-text::after {
+ content: " ";
+ position: absolute;
+ top: 15px;
+ right: 100%;
+ margin-top: -5px;
+ border-width: 5px;
+ border-style: solid;
+ border-color: transparent black transparent transparent;
+}
+
+@media (min-width: 768px) {
+ #kc-container-wrapper {
+ position: absolute;
+ width: 100%;
+ }
+
+ .login-pf .container {
+ padding-right: 80px;
+ }
+
+ #kc-locale {
+ position: relative;
+ text-align: right;
+ z-index: 9999;
+ }
+}
+
+@media (max-width: 767px) {
+
+ .login-pf body {
+ background: white;
+ }
+
+ #kc-header {
+ padding-left: 15px;
+ padding-right: 15px;
+ float: none;
+ text-align: left;
+ }
+
+ #kc-header-wrapper {
+ font-size: 16px;
+ font-weight: bold;
+ padding: 20px 60px 0 0;
+ color: #72767b;
+ letter-spacing: 0;
+ }
+
+ div.kc-logo-text {
+ margin: 0;
+ width: 150px;
+ height: 32px;
+ background-size: 100%;
+ }
+
+ #kc-form {
+ float: none;
+ }
+
+ #kc-info-wrapper {
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ background-color: transparent;
+ }
+
+ .login-pf .container {
+ padding-top: 15px;
+ padding-bottom: 15px;
+ }
+
+ #kc-locale {
+ position: absolute;
+ width: 200px;
+ top: 20px;
+ right: 20px;
+ text-align: right;
+ z-index: 9999;
+ }
+}
+
+@media (min-height: 646px) {
+ #kc-container-wrapper {
+ bottom: 12%;
+ }
+}
+
+@media (max-height: 645px) {
+ #kc-container-wrapper {
+ padding-top: 50px;
+ top: 20%;
+ }
+}
+
+.card-pf form.form-actions .btn {
+ float: right;
+ margin-left: 10px;
+}
+
+#kc-form-buttons {
+ margin-top: 20px;
+}
+
+.login-pf-page .login-pf-brand {
+ margin-top: 20px;
+ max-width: 360px;
+ width: 40%;
+}
+
+.select-auth-box-arrow{
+ display: flex;
+ align-items: center;
+ margin-right: 2rem;
+}
+
+.select-auth-box-icon{
+ display: flex;
+ flex: 0 0 2em;
+ justify-content: center;
+ margin-right: 1rem;
+ margin-left: 3rem;
+}
+
+.select-auth-box-parent{
+ border-top: 1px solid var(--pf-global--palette--black-200);
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ cursor: pointer;
+}
+
+.select-auth-box-parent:hover{
+ background-color: #f7f8f8;
+}
+
+.select-auth-container {
+ padding-bottom: 0px !important;
+}
+
+.select-auth-box-headline {
+ font-size: var(--pf-global--FontSize--md);
+ color: var(--pf-global--primary-color--100);
+ font-weight: bold;
+}
+
+.select-auth-box-desc {
+ font-size: var(--pf-global--FontSize--sm);
+}
+
+.select-auth-box-paragraph {
+ text-align: center;
+ font-size: var(--pf-global--FontSize--md);
+ margin-bottom: 5px;
+}
+
+.card-pf {
+ margin: 0 auto;
+ box-shadow: var(--pf-global--BoxShadow--lg);
+ padding: 0 20px;
+ max-width: 500px;
+ border-top: 4px solid;
+ border-color: var(--pf-global--primary-color--100);
+}
+
+/*phone*/
+@media (max-width: 767px) {
+ .login-pf-page .card-pf {
+ max-width: none;
+ margin-left: 0;
+ margin-right: 0;
+ padding-top: 0;
+ border-top: 0;
+ box-shadow: 0 0;
+ }
+
+ .kc-social-grid {
+ grid-column-end: 12;
+ --pf-l-grid__item--GridColumnEnd: span 12;
+ }
+
+ .kc-social-grid .kc-social-icon-text {
+ left: -15px;
+ }
+}
+
+.login-pf-page .login-pf-signup {
+ font-size: 15px;
+ color: #72767b;
+}
+#kc-content-wrapper .row {
+ margin-left: 0;
+ margin-right: 0;
+}
+
+.login-pf-page.login-pf-page-accounts {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.login-pf-page .btn-primary {
+ margin-top: 0;
+}
+
+.login-pf-page .list-view-pf .list-group-item {
+ border-bottom: 1px solid #ededed;
+}
+
+.login-pf-page .list-view-pf-description {
+ width: 100%;
+}
+
+#kc-form-login div.form-group:last-of-type,
+#kc-register-form div.form-group:last-of-type,
+#kc-update-profile-form div.form-group:last-of-type,
+#kc-update-email-form div.form-group:last-of-type{
+ margin-bottom: 0px;
+}
+
+.no-bottom-margin {
+ margin-bottom: 0;
+}
+
+#kc-back {
+ margin-top: 5px;
+}
+
+/* Recovery codes */
+.kc-recovery-codes-warning {
+ margin-bottom: 32px;
+}
+.kc-recovery-codes-warning .pf-c-alert__description p {
+ font-size: 0.875rem;
+}
+.kc-recovery-codes-list {
+ list-style: none;
+ columns: 2;
+ margin: 16px 0;
+ padding: 16px 16px 8px 16px;
+ border: 1px solid #D2D2D2;
+}
+.kc-recovery-codes-list li {
+ margin-bottom: 8px;
+ font-size: 11px;
+}
+.kc-recovery-codes-list li span {
+ color: #6A6E73;
+ width: 16px;
+ text-align: right;
+ display: inline-block;
+ margin-right: 1px;
+}
+
+.kc-recovery-codes-actions {
+ margin-bottom: 24px;
+}
+.kc-recovery-codes-actions button {
+ padding-left: 0;
+}
+.kc-recovery-codes-actions button i {
+ margin-right: 8px;
+}
+
+.kc-recovery-codes-confirmation {
+ align-items: baseline;
+ margin-bottom: 16px;
+}
+/* End Recovery codes */
diff --git a/services/keycloak/themes/lagoon/login/resources/css/styles.css b/services/keycloak/themes/lagoon/login/resources/css/styles.css
index 8f27cbf6c9..b9cbee6d67 100644
--- a/services/keycloak/themes/lagoon/login/resources/css/styles.css
+++ b/services/keycloak/themes/lagoon/login/resources/css/styles.css
@@ -1,3 +1,588 @@
+@charset "UTF-8";
+/* Patternfly CSS places a "bg-login.jpg" as the background on this ".login-pf" class.
+ This clashes with the "keycloak-bg.png' background defined on the body below.
+ Therefore the Patternfly background must be set to none. */
+.login-pf {
+ background: none;
+}
+
+.login-pf body {
+ background: url("../img/keycloak-bg.png") no-repeat center center fixed;
+ background-size: cover;
+ height: 100%;
+}
+
+textarea.pf-c-form-control {
+ height: auto;
+}
+
+.pf-c-alert__title {
+ font-size: var(--pf-global--FontSize--xs);
+}
+
+p.instruction {
+ margin: 5px 0;
+}
+
+.pf-c-button.pf-m-control {
+ border: solid var(--pf-global--BorderWidth--sm);
+ border-color: rgba(230, 230, 230, 0.5);
+}
+
+h1#kc-page-title {
+ margin-top: 10px;
+}
+
+#kc-locale ul {
+ background-color: var(--pf-global--BackgroundColor--100);
+ display: none;
+ top: 20px;
+ min-width: 100px;
+ padding: 0;
+}
+
+#kc-locale-dropdown {
+ display: inline-block;
+}
+
+#kc-locale-dropdown:hover ul {
+ display: block;
+}
+
+#kc-locale-dropdown a {
+ color: var(--pf-global--Color--200);
+ text-align: right;
+ font-size: var(--pf-global--FontSize--sm);
+}
+
+a#kc-current-locale-link::after {
+ content: "˅";
+ margin-left: var(--pf-global--spacer--xs);
+}
+
+.login-pf .container {
+ padding-top: 40px;
+}
+
+.login-pf a:hover {
+ color: #0099d3;
+}
+
+#kc-logo {
+ width: 100%;
+}
+
+div.kc-logo-text {
+ background-image: url(../img/keycloak-logo-text.png);
+ background-repeat: no-repeat;
+ height: 63px;
+ width: 300px;
+ margin: 0 auto;
+}
+
+div.kc-logo-text span {
+ display: none;
+}
+
+#kc-header {
+ color: #ededed;
+ overflow: visible;
+ white-space: nowrap;
+}
+
+#kc-header-wrapper {
+ font-size: 29px;
+ text-transform: uppercase;
+ letter-spacing: 3px;
+ line-height: 1.2em;
+ padding: 62px 10px 20px;
+ white-space: normal;
+}
+
+#kc-content {
+ width: 100%;
+}
+
+#kc-attempted-username {
+ font-size: 20px;
+ font-family: inherit;
+ font-weight: normal;
+ padding-right: 10px;
+}
+
+#kc-username {
+ text-align: center;
+ margin-bottom: -10px;
+}
+
+#kc-webauthn-settings-form {
+ padding-top: 8px;
+}
+
+#kc-form-webauthn .select-auth-box-parent {
+ pointer-events: none;
+}
+
+#kc-form-webauthn .select-auth-box-desc {
+ color: var(--pf-global--palette--black-600);
+}
+
+#kc-form-webauthn .select-auth-box-headline {
+ color: var(--pf-global--Color--300);
+}
+
+#kc-form-webauthn .select-auth-box-icon {
+ flex: 0 0 3em;
+}
+
+#kc-form-webauthn .select-auth-box-icon-properties {
+ margin-top: 10px;
+ font-size: 1.8em;
+}
+
+#kc-form-webauthn .select-auth-box-icon-properties.unknown-transport-class {
+ margin-top: 3px;
+}
+
+#kc-form-webauthn .pf-l-stack__item {
+ margin: -1px 0;
+}
+
+#kc-content-wrapper {
+ margin-top: 20px;
+}
+
+#kc-form-wrapper {
+ margin-top: 10px;
+}
+
+#kc-info {
+ margin: 20px -40px -30px;
+}
+
+#kc-info-wrapper {
+ font-size: 13px;
+ padding: 15px 35px;
+ background-color: #F0F0F0;
+}
+
+#kc-form-options span {
+ display: block;
+}
+
+#kc-form-options .checkbox {
+ margin-top: 0;
+ color: #72767b;
+}
+
+#kc-terms-text {
+ margin-bottom: 20px;
+}
+
+#kc-registration {
+ margin-bottom: 0;
+}
+
+/* TOTP */
+.subtitle {
+ text-align: right;
+ margin-top: 30px;
+ color: #909090;
+}
+
+.required {
+ color: var(--pf-global--danger-color--200);
+}
+
+ol#kc-totp-settings {
+ margin: 0;
+ padding-left: 20px;
+}
+
+ul#kc-totp-supported-apps {
+ margin-bottom: 10px;
+}
+
+#kc-totp-secret-qr-code {
+ max-width: 150px;
+ max-height: 150px;
+}
+
+#kc-totp-secret-key {
+ background-color: #fff;
+ color: #333333;
+ font-size: 16px;
+ padding: 10px 0;
+}
+
+/* OAuth */
+#kc-oauth h3 {
+ margin-top: 0;
+}
+
+#kc-oauth ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+#kc-oauth ul li {
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ font-size: 12px;
+ padding: 10px 0;
+}
+
+#kc-oauth ul li:first-of-type {
+ border-top: 0;
+}
+
+#kc-oauth .kc-role {
+ display: inline-block;
+ width: 50%;
+}
+
+/* Code */
+#kc-code textarea {
+ width: 100%;
+ height: 8em;
+}
+
+/* Social */
+.kc-social-links {
+ margin-top: 20px;
+}
+
+.kc-social-provider-logo {
+ font-size: 23px;
+ width: 30px;
+ height: 25px;
+ float: left;
+}
+
+.kc-social-gray {
+ color: var(--pf-global--Color--200);
+}
+
+.kc-social-item {
+ margin-bottom: var(--pf-global--spacer--sm);
+ font-size: 15px;
+ text-align: center;
+}
+
+.kc-social-provider-name {
+ position: relative;
+ top: 3px;
+}
+
+.kc-social-icon-text {
+ left: -15px;
+}
+
+.kc-social-grid {
+ display: grid;
+ grid-column-gap: 10px;
+ grid-row-gap: 5px;
+ grid-column-end: span 6;
+ --pf-l-grid__item--GridColumnEnd: span 6;
+}
+
+.kc-social-grid .kc-social-icon-text {
+ left: -10px;
+}
+
+.kc-login-tooltip {
+ position: relative;
+ display: inline-block;
+}
+
+.kc-social-section {
+ text-align: center;
+}
+
+.kc-social-section hr {
+ margin-bottom: 10px;
+}
+
+.kc-login-tooltip .kc-tooltip-text {
+ top: -3px;
+ left: 160%;
+ background-color: black;
+ visibility: hidden;
+ color: #fff;
+ min-width: 130px;
+ text-align: center;
+ border-radius: 2px;
+ box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
+ padding: 5px;
+ position: absolute;
+ opacity: 0;
+ transition: opacity 0.5s;
+}
+
+/* Show tooltip */
+.kc-login-tooltip:hover .kc-tooltip-text {
+ visibility: visible;
+ opacity: 0.7;
+}
+
+/* Arrow for tooltip */
+.kc-login-tooltip .kc-tooltip-text::after {
+ content: " ";
+ position: absolute;
+ top: 15px;
+ right: 100%;
+ margin-top: -5px;
+ border-width: 5px;
+ border-style: solid;
+ border-color: transparent black transparent transparent;
+}
+
+@media (min-width: 768px) {
+ #kc-container-wrapper {
+ position: absolute;
+ width: 100%;
+ }
+ .login-pf .container {
+ padding-right: 80px;
+ }
+ #kc-locale {
+ position: relative;
+ text-align: right;
+ z-index: 9999;
+ }
+}
+@media (max-width: 767px) {
+ .login-pf body {
+ background: white;
+ }
+ #kc-header {
+ padding-left: 15px;
+ padding-right: 15px;
+ float: none;
+ text-align: left;
+ }
+ #kc-header-wrapper {
+ font-size: 16px;
+ font-weight: bold;
+ padding: 20px 60px 0 0;
+ color: #72767b;
+ letter-spacing: 0;
+ }
+ div.kc-logo-text {
+ margin: 0;
+ width: 150px;
+ height: 32px;
+ background-size: 100%;
+ }
+ #kc-form {
+ float: none;
+ }
+ #kc-info-wrapper {
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ background-color: transparent;
+ }
+ .login-pf .container {
+ padding-top: 15px;
+ padding-bottom: 15px;
+ }
+ #kc-locale {
+ position: absolute;
+ width: 200px;
+ top: 20px;
+ right: 20px;
+ text-align: right;
+ z-index: 9999;
+ }
+}
+@media (min-height: 646px) {
+ #kc-container-wrapper {
+ bottom: 12%;
+ }
+}
+@media (max-height: 645px) {
+ #kc-container-wrapper {
+ padding-top: 50px;
+ top: 20%;
+ }
+}
+.card-pf form.form-actions .btn {
+ float: right;
+ margin-left: 10px;
+}
+
+#kc-form-buttons {
+ margin-top: 20px;
+}
+
+.login-pf-page .login-pf-brand {
+ margin-top: 20px;
+ max-width: 360px;
+ width: 40%;
+}
+
+.select-auth-box-arrow {
+ display: flex;
+ align-items: center;
+ margin-right: 2rem;
+}
+
+.select-auth-box-icon {
+ display: flex;
+ flex: 0 0 2em;
+ justify-content: center;
+ margin-right: 1rem;
+ margin-left: 3rem;
+}
+
+.select-auth-box-parent {
+ border-top: 1px solid var(--pf-global--palette--black-200);
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ cursor: pointer;
+}
+
+.select-auth-box-parent:hover {
+ background-color: #f7f8f8;
+}
+
+.select-auth-container {
+ padding-bottom: 0px !important;
+}
+
+.select-auth-box-headline {
+ font-size: var(--pf-global--FontSize--md);
+ color: var(--pf-global--primary-color--100);
+ font-weight: bold;
+}
+
+.select-auth-box-desc {
+ font-size: var(--pf-global--FontSize--sm);
+}
+
+.select-auth-box-paragraph {
+ text-align: center;
+ font-size: var(--pf-global--FontSize--md);
+ margin-bottom: 5px;
+}
+
+.card-pf {
+ margin: 0 auto;
+ box-shadow: var(--pf-global--BoxShadow--lg);
+ padding: 0 20px;
+ max-width: 500px;
+ border-top: 4px solid;
+ border-color: var(--pf-global--primary-color--100);
+}
+
+/*phone*/
+@media (max-width: 767px) {
+ .login-pf-page .card-pf {
+ max-width: none;
+ margin-left: 0;
+ margin-right: 0;
+ padding-top: 0;
+ border-top: 0;
+ box-shadow: 0 0;
+ }
+ .kc-social-grid {
+ grid-column-end: 12;
+ --pf-l-grid__item--GridColumnEnd: span 12;
+ }
+ .kc-social-grid .kc-social-icon-text {
+ left: -15px;
+ }
+}
+.login-pf-page .login-pf-signup {
+ font-size: 15px;
+ color: #72767b;
+}
+
+#kc-content-wrapper .row {
+ margin-left: 0;
+ margin-right: 0;
+}
+
+.login-pf-page.login-pf-page-accounts {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.login-pf-page .btn-primary {
+ margin-top: 0;
+}
+
+.login-pf-page .list-view-pf .list-group-item {
+ border-bottom: 1px solid #ededed;
+}
+
+.login-pf-page .list-view-pf-description {
+ width: 100%;
+}
+
+#kc-form-login div.form-group:last-of-type,
+#kc-register-form div.form-group:last-of-type,
+#kc-update-profile-form div.form-group:last-of-type,
+#kc-update-email-form div.form-group:last-of-type {
+ margin-bottom: 0px;
+}
+
+.no-bottom-margin {
+ margin-bottom: 0;
+}
+
+#kc-back {
+ margin-top: 5px;
+}
+
+/* Recovery codes */
+.kc-recovery-codes-warning {
+ margin-bottom: 32px;
+}
+
+.kc-recovery-codes-warning .pf-c-alert__description p {
+ font-size: 0.875rem;
+}
+
+.kc-recovery-codes-list {
+ list-style: none;
+ -moz-columns: 2;
+ columns: 2;
+ margin: 16px 0;
+ padding: 16px 16px 8px 16px;
+ border: 1px solid #D2D2D2;
+}
+
+.kc-recovery-codes-list li {
+ margin-bottom: 8px;
+ font-size: 11px;
+}
+
+.kc-recovery-codes-list li span {
+ color: #6A6E73;
+ width: 16px;
+ text-align: right;
+ display: inline-block;
+ margin-right: 1px;
+}
+
+.kc-recovery-codes-actions {
+ margin-bottom: 24px;
+}
+
+.kc-recovery-codes-actions button {
+ padding-left: 0;
+}
+
+.kc-recovery-codes-actions button i {
+ margin-right: 8px;
+}
+
+.kc-recovery-codes-confirmation {
+ align-items: baseline;
+ margin-bottom: 16px;
+}
+
+/* End Recovery codes */
body, html {
display: flex;
flex-direction: column;
@@ -16,17 +601,17 @@ body {
margin: 0;
}
-header.header {
+nav.header {
background: linear-gradient(to right, rgb(36, 174, 196) 0%, rgb(42, 109, 254) 25%);
display: flex;
justify-content: space-between;
}
-header.header a {
+nav.header a {
background: rgb(69, 120, 230);
position: relative;
padding: 10px 20px;
}
-header.header a:after {
+nav.header a:after {
background: rgb(69, 120, 230);
-webkit-clip-path: polygon(0px 0px, 100% 0px, 0px 105%, 0px 100%);
clip-path: polygon(0px 0px, 100% 0px, 0px 105%, 0px 100%);
@@ -38,7 +623,7 @@ header.header a:after {
top: 0px;
width: 14px;
}
-header.header a img {
+nav.header a img {
display: block;
height: 35px;
width: auto;
@@ -55,20 +640,11 @@ header.header a img {
z-index: 0;
}
-.kc-content {
- height: 100%;
- padding: 0;
- margin: 0;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-.kc-content .kc-content-wrapper {
- background-size: cover;
- background-position: center;
- display: flex;
- justify-content: center;
- flex-direction: column;
+.kc {
+ left: 50%;
+ top: 25%;
+ transform: translate(-50%);
+ height: auto;
width: 440px;
background-color: #ffffff;
box-shadow: 4px 8px 13px 0px rgba(0, 0, 0, 0.03);
@@ -76,11 +652,11 @@ header.header a img {
padding: 32px;
z-index: 1;
}
-.kc-content .kc-content-wrapper h1 {
+.kc h1 {
color: #4578E6;
font-size: 24px;
}
-.kc-content .kc-content-wrapper form {
+.kc .kc-wrapper form {
margin: 24px 0 0;
font-style: normal;
font-stretch: normal;
@@ -88,33 +664,34 @@ header.header a img {
letter-spacing: normal;
font-family: source-sans-pro, sans-serif;
}
-.kc-content .kc-content-wrapper form label {
+.kc .kc-wrapper form label {
display: block;
- margin-bottom: 8px;
+ margin-bottom: 2px;
+ margin-top: 16px;
}
-.kc-content .kc-content-wrapper form label .required {
+.kc .kc-wrapper form label .required {
color: #b8082a;
}
-.kc-content .kc-content-wrapper form input {
+.kc .kc-wrapper form input {
width: 360px;
- height: 24px;
+ height: 50px;
color: #000000;
border: 1px solid #ccc;
outline: none;
background-color: #fff;
padding: 8px;
}
-.kc-content .kc-content-wrapper form input:focus {
+.kc .kc-wrapper form input:focus {
border: 1px solid #4578E6;
}
-.kc-content .kc-content-wrapper form input[type=checkbox] {
+.kc .kc-wrapper form input[type=checkbox] {
width: auto;
padding: 0;
height: auto;
}
-.kc-content .kc-content-wrapper form input.saveTOTPBtn {
+.kc .kc-wrapper form input.saveTOTPBtn, .kc .kc-wrapper form input#saveTOTPBtn, .kc .kc-wrapper form input#registerWebAuthn, .kc .kc-wrapper form input#kc-try-again {
width: auto;
- height: 40px;
+ height: 50px;
padding: 12px 32px;
background-color: #4578E6;
font-family: source-sans-pro, sans-serif;
@@ -124,11 +701,11 @@ header.header a img {
margin: 24px 0 0;
border: 1px #4578E6 solid;
}
-.kc-content .kc-content-wrapper form input.saveTOTPBtn:hover {
+.kc .kc-wrapper form input.saveTOTPBtn:hover, .kc .kc-wrapper form input#saveTOTPBtn:hover, .kc .kc-wrapper form input#registerWebAuthn:hover, .kc .kc-wrapper form input#kc-try-again:hover {
color: #4578E6;
background-color: #ffffff;
}
-.kc-content .kc-content-wrapper form button.cancelTOTPBtn {
+.kc .kc-wrapper form button.cancelTOTPBtn, .kc .kc-wrapper form button#cancelTOTPBtn, .kc .kc-wrapper form button#cancelWebAuthnAIA {
width: auto;
height: 40px;
padding: 12px 32px;
@@ -140,43 +717,43 @@ header.header a img {
margin: 24px 0 0;
border: 1px #333 solid;
}
-.kc-content .kc-content-wrapper form button.cancelTOTPBtn:hover {
+.kc .kc-wrapper form button.cancelTOTPBtn:hover, .kc .kc-wrapper form button#cancelTOTPBtn:hover, .kc .kc-wrapper form button#cancelWebAuthnAIA:hover {
color: #333;
background-color: #ffffff;
}
-.kc-content .kc-content-wrapper form .username_wapper {
+.kc .kc-wrapper form .username_wapper {
margin-bottom: 18px;
}
-.kc-content .kc-content-wrapper form .input-error, .kc-content .kc-content-wrapper form #input-error {
+.kc .kc-wrapper form .input-error, .kc .kc-wrapper form #input-error {
color: #b8082a;
display: block;
margin: 8px 0;
font-size: 16px;
}
-.kc-content .kc-content-wrapper form .options_wrapper {
+.kc .kc-wrapper form .options_wrapper {
display: flex;
flex-direction: row;
margin-top: 18px;
}
-.kc-content .kc-content-wrapper form .options_wrapper #kc-form-options {
+.kc .kc-wrapper form .options_wrapper #kc-form-options {
margin-right: 18px;
}
-.kc-content .kc-content-wrapper form .options_wrapper #kc-form-options input#rememberMe {
+.kc .kc-wrapper form .options_wrapper #kc-form-options input#rememberMe {
width: auto;
height: auto;
}
-.kc-content .kc-content-wrapper form .options_wrapper #kc-form-options a {
+.kc .kc-wrapper form .options_wrapper #kc-form-options a {
color: #4578E6;
}
-.kc-content .kc-content-wrapper form .options_wrapper a {
+.kc .kc-wrapper form .options_wrapper a {
color: #4578E6;
}
-.kc-content .kc-content-wrapper form a {
+.kc .kc-wrapper form a {
color: #4578E6;
}
-.kc-content .kc-content-wrapper form .submit_btn {
+.kc .kc-wrapper form .submit_btn {
width: auto;
- height: 40px;
+ height: 50px;
padding: 12px 32px;
background-color: #4578E6;
font-family: source-sans-pro, sans-serif;
@@ -186,13 +763,13 @@ header.header a img {
margin: 24px 0 0;
border: 1px #4578E6 solid;
}
-.kc-content .kc-content-wrapper form .submit_btn:hover {
+.kc .kc-wrapper form .submit_btn:hover {
color: #4578E6;
background-color: #ffffff;
}
-.kc-content .kc-content-wrapper form #kc-form-buttons input {
+.kc .kc-wrapper form #kc-form-buttons input {
width: auto;
- height: 40px;
+ height: 50px;
padding: 12px 32px;
background-color: #4578E6;
font-family: source-sans-pro, sans-serif;
@@ -202,11 +779,11 @@ header.header a img {
margin: 24px 0 0;
border: 1px #4578E6 solid;
}
-.kc-content .kc-content-wrapper form #kc-form-buttons input:hover {
+.kc .kc-wrapper form #kc-form-buttons input:hover {
color: #4578E6;
background-color: #ffffff;
}
-.kc-content .kc-content-wrapper form input[type=button] {
+.kc .kc-wrapper form input[type=button] {
width: auto;
height: 40px;
padding: 12px 32px;
@@ -218,11 +795,14 @@ header.header a img {
margin: 24px 0 0;
border: 1px #4578E6 solid;
}
-.kc-content .kc-content-wrapper form input[type=button]:hover {
+.kc .kc-wrapper form input[type=button]:hover {
color: #4578E6;
background-color: #ffffff;
}
-.kc-content .kc-content-wrapper input[type=button] {
+.kc .kc-wrapper form .required {
+ color: red;
+}
+.kc .kc-wrapper input[type=button] {
width: auto;
height: 40px;
padding: 12px 32px;
@@ -234,24 +814,24 @@ header.header a img {
margin: 24px 0 0;
border: 1px #4578E6 solid;
}
-.kc-content .kc-content-wrapper input[type=button]:hover {
+.kc .kc-wrapper input[type=button]:hover {
color: #4578E6;
background-color: #ffffff;
}
-.kc-content .kc-content-wrapper #kc-social-providers hr {
+.kc .kc-wrapper #kc-social-providers hr {
margin-top: 20px;
}
-.kc-content .kc-content-wrapper #kc-social-providers ul {
+.kc .kc-wrapper #kc-social-providers ul {
padding-left: 0;
}
-.kc-content .kc-content-wrapper #kc-social-providers li::marker {
+.kc .kc-wrapper #kc-social-providers li::marker {
content: "";
}
-.kc-content .kc-content-wrapper #kc-social-providers h4 {
+.kc .kc-wrapper #kc-social-providers h4 {
color: #4578E6;
font-size: 20px;
}
-.kc-content .kc-content-wrapper #kc-social-providers a {
+.kc .kc-wrapper #kc-social-providers a {
width: auto;
height: 40px;
padding: 12px 32px;
@@ -264,10 +844,26 @@ header.header a img {
border: 1px #4578E6 solid;
text-decoration: none;
}
-.kc-content .kc-content-wrapper #kc-social-providers a span {
+.kc .kc-wrapper #kc-social-providers a span {
text-decoration: none;
}
-.kc-content .kc-content-wrapper #kc-social-providers a:hover {
+.kc .kc-wrapper #kc-social-providers a:hover {
+ color: #4578E6;
+ background-color: #ffffff;
+}
+.kc .kc-wrapper input#registerWebAuthn, .kc .kc-wrapper input#authenticateWebAuthnButton {
+ width: auto;
+ height: 50px;
+ padding: 12px 32px;
+ background-color: #4578E6;
+ font-family: source-sans-pro, sans-serif;
+ font-size: 14px;
+ text-align: center;
+ color: #ffffff;
+ margin: 24px 0 0;
+ border: 1px #4578E6 solid;
+}
+.kc .kc-wrapper input#registerWebAuthn:hover, .kc .kc-wrapper input#authenticateWebAuthnButton:hover {
color: #4578E6;
background-color: #ffffff;
}/*# sourceMappingURL=styles.css.map */
\ No newline at end of file
diff --git a/services/keycloak/themes/lagoon/login/resources/css/styles.css.map b/services/keycloak/themes/lagoon/login/resources/css/styles.css.map
index 90e6218006..6b47c38bcd 100644
--- a/services/keycloak/themes/lagoon/login/resources/css/styles.css.map
+++ b/services/keycloak/themes/lagoon/login/resources/css/styles.css.map
@@ -1 +1 @@
-{"version":3,"sources":["styles.scss","styles.css"],"names":[],"mappings":"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","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sources":["styles.css","_login.scss","styles.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB;;6DAAA;AAGG;EACC,gBAAA;ADEJ;;ACCA;EACI,uEAAA;EACA,sBAAA;EACA,YAAA;ADEJ;;ACCA;EACC,YAAA;ADED;;ACCA;EACI,yCAAA;ADEJ;;ACCA;EACI,aAAA;ADEJ;;ACCA;EACI,+CAAA;EACA,sCAAA;ADEJ;;ACCA;EACI,gBAAA;ADEJ;;ACCA;EACI,wDAAA;EACA,aAAA;EACA,SAAA;EACA,gBAAA;EACA,UAAA;ADEJ;;ACCA;EACI,qBAAA;ADEJ;;ACCA;EACI,cAAA;ADEJ;;ACCA;EACI,mCAAA;EACA,iBAAA;EACA,yCAAA;ADEJ;;ACCA;EACI,YAAA;EACA,yCAAA;ADEJ;;ACCA;EACI,iBAAA;ADEJ;;ACCA;EACI,cAAA;ADEJ;;ACCA;EACI,WAAA;ADEJ;;ACCA;EACI,oDAAA;EACA,4BAAA;EACA,YAAA;EACA,YAAA;EACA,cAAA;ADEJ;;ACCA;EACI,aAAA;ADEJ;;ACCA;EACI,cAAA;EACA,iBAAA;EACA,mBAAA;ADEJ;;ACCA;EACI,eAAA;EACA,yBAAA;EACA,mBAAA;EACA,kBAAA;EACA,uBAAA;EACA,mBAAA;ADEJ;;ACCA;EACI,WAAA;ADEJ;;ACCA;EACI,eAAA;EACA,oBAAA;EACA,mBAAA;EACA,mBAAA;ADEJ;;ACCA;EACI,kBAAA;EACA,oBAAA;ADEJ;;ACCA;EACI,gBAAA;ADEJ;;ACCA;EACI,oBAAA;ADEJ;;ACCA;EACI,2CAAA;ADEJ;;ACCA;EACI,mCAAA;ADEJ;;ACCA;EACI,aAAA;ADEJ;;ACCA;EACI,gBAAA;EACA,gBAAA;ADEJ;;ACCA;EACI,eAAA;ADEJ;;ACCA;EACI,cAAA;ADEJ;;ACCA;EACI,gBAAA;ADEJ;;ACCA;EACI,gBAAA;ADEJ;;ACCA;EACI,wBAAA;ADEJ;;ACCA;EACI,eAAA;EACA,kBAAA;EACA,yBAAA;ADEJ;;ACCA;EACI,cAAA;ADEJ;;ACCA;EACI,aAAA;EACA,cAAA;ADEJ;;ACCA;EACI,mBAAA;ADEJ;;ACCA;EACI,gBAAA;ADEJ;;ACCA,SAAA;AAEA;EACI,iBAAA;EACA,gBAAA;EACA,cAAA;ADCJ;;ACEA;EACI,0CAAA;ADCJ;;ACEA;EACI,SAAA;EACA,kBAAA;ADCJ;;ACEA;EACI,mBAAA;ADCJ;;ACEA;EACI,gBAAA;EACA,iBAAA;ADCJ;;ACEA;EACI,sBAAA;EACA,cAAA;EACA,eAAA;EACA,eAAA;ADCJ;;ACEA,UAAA;AAEA;EACI,aAAA;ADAJ;;ACGA;EACI,gBAAA;EACA,UAAA;EACA,SAAA;ADAJ;;ACGA;EACI,8CAAA;EACA,eAAA;EACA,eAAA;ADAJ;;ACGA;EACI,aAAA;ADAJ;;ACGA;EACI,qBAAA;EACA,UAAA;ADAJ;;ACGA,SAAA;AACA;EACI,WAAA;EACA,WAAA;ADAJ;;ACGA,WAAA;AACA;EACI,gBAAA;ADAJ;;ACGA;EACI,eAAA;EACA,WAAA;EACA,YAAA;EACA,WAAA;ADAJ;;ACGA;EACI,mCAAA;ADAJ;;ACGA;EACI,2CAAA;EACA,eAAA;EACA,kBAAA;ADAJ;;ACGA;EACI,kBAAA;EACA,QAAA;ADAJ;;ACGA;EACI,WAAA;ADAJ;;ACGA;EACI,aAAA;EACA,qBAAA;EACA,iBAAA;EACA,uBAAA;EACA,wCAAA;ADAJ;;ACGA;EACI,WAAA;ADAJ;;ACGA;EACI,kBAAA;EACA,qBAAA;ADAJ;;ACGA;EACI,kBAAA;ADAJ;;ACGA;EACI,mBAAA;ADAJ;;ACGA;EACI,SAAA;EACA,UAAA;EACA,uBAAA;EACA,kBAAA;EACA,WAAA;EAEA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,wCAAA;EACA,YAAA;EAEA,kBAAA;EACA,UAAA;EACA,wBAAA;ADFJ;;ACKA,iBAAA;AACA;EACI,mBAAA;EACA,YAAA;ADFJ;;ACKA,sBAAA;AACA;EACI,YAAA;EACA,kBAAA;EACA,SAAA;EACA,WAAA;EACA,gBAAA;EACA,iBAAA;EACA,mBAAA;EACA,uDAAA;ADFJ;;ACKA;EACI;IACI,kBAAA;IACA,WAAA;EDFN;ECKE;IACI,mBAAA;EDHN;ECME;IACI,kBAAA;IACA,iBAAA;IACA,aAAA;EDJN;AACF;ACOA;EAEI;IACI,iBAAA;EDNN;ECSE;IACI,kBAAA;IACA,mBAAA;IACA,WAAA;IACA,gBAAA;EDPN;ECUE;IACI,eAAA;IACA,iBAAA;IACA,sBAAA;IACA,cAAA;IACA,iBAAA;EDRN;ECWE;IACI,SAAA;IACA,YAAA;IACA,YAAA;IACA,qBAAA;EDTN;ECYE;IACI,WAAA;EDVN;ECaE;IACI,8CAAA;IACA,6BAAA;EDXN;ECcE;IACI,iBAAA;IACA,oBAAA;EDZN;ECeE;IACI,kBAAA;IACA,YAAA;IACA,SAAA;IACA,WAAA;IACA,iBAAA;IACA,aAAA;EDbN;AACF;ACgBA;EACI;IACI,WAAA;EDdN;AACF;ACiBA;EACI;IACI,iBAAA;IACA,QAAA;EDfN;AACF;ACkBA;EACI,YAAA;EACA,iBAAA;ADhBJ;;ACmBA;EACI,gBAAA;ADhBJ;;ACmBA;EACI,gBAAA;EACA,gBAAA;EACA,UAAA;ADhBJ;;ACmBA;EACI,aAAA;EACA,mBAAA;EACA,kBAAA;ADhBJ;;ACmBA;EACI,aAAA;EACA,aAAA;EACA,uBAAA;EACA,kBAAA;EACA,iBAAA;ADhBJ;;ACmBA;EACI,0DAAA;EACA,iBAAA;EACA,oBAAA;EACA,eAAA;ADhBJ;;ACmBA;EACI,yBAAA;ADhBJ;;ACmBA;EACI,8BAAA;ADhBJ;;ACmBA;EACI,yCAAA;EACA,2CAAA;EACA,iBAAA;ADhBJ;;ACmBA;EACI,yCAAA;ADhBJ;;ACmBA;EACI,kBAAA;EACA,yCAAA;EACA,kBAAA;ADhBJ;;ACmBA;EACI,cAAA;EACA,2CAAA;EACA,eAAA;EACA,gBAAA;EACA,qBAAA;EACA,kDAAA;ADhBJ;;ACmBA,QAAA;AACA;EACI;IACI,eAAA;IACA,cAAA;IACA,eAAA;IACA,cAAA;IACA,aAAA;IACA,eAAA;EDhBN;ECmBE;IACI,mBAAA;IACA,yCAAA;EDjBN;ECoBE;IACI,WAAA;EDlBN;AACF;ACqBA;EACI,eAAA;EACA,cAAA;ADnBJ;;ACqBA;EACI,cAAA;EACA,eAAA;ADlBJ;;ACqBA;EACI,iBAAA;EACA,kBAAA;ADlBJ;;ACqBA;EACI,aAAA;ADlBJ;;ACqBA;EACI,gCAAA;ADlBJ;;ACqBA;EACI,WAAA;ADlBJ;;ACqBA;;;;EAII,kBAAA;ADlBJ;;ACqBA;EACI,gBAAA;ADlBJ;;ACqBA;EACI,eAAA;ADlBJ;;ACqBA,mBAAA;AACA;EACI,mBAAA;ADlBJ;;ACoBA;EACI,mBAAA;ADjBJ;;ACmBA;EACI,gBAAA;EACA,eAAA;OAAA,UAAA;EACA,cAAA;EACA,2BAAA;EACA,yBAAA;ADhBJ;;ACkBA;EACI,kBAAA;EACA,eAAA;ADfJ;;ACiBA;EACI,cAAA;EACA,WAAA;EACA,iBAAA;EACA,qBAAA;EACA,iBAAA;ADdJ;;ACiBA;EACI,mBAAA;ADdJ;;ACgBA;EACI,eAAA;ADbJ;;ACeA;EACI,iBAAA;ADZJ;;ACeA;EACI,qBAAA;EACA,mBAAA;ADZJ;;ACcA,uBAAA;AC7kBA;EACE,aAAA;EACA,sBAAA;EACA,OAAA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,0BAAA;EACA,SAAA;EACA,YAAA;EACA,wCAAA;EACA,yBAAA;AFmkBF;;AEhkBA;EACE,SAAA;AFmkBF;;AEhkBA;EACE,kFAAA;EACA,aAAA;EACA,8BAAA;AFmkBF;AEjkBE;EACE,6BAAA;EACA,kBAAA;EACA,kBAAA;AFmkBJ;AEjkBI;EACE,6BAAA;EACA,iEAAA;UAAA,yDAAA;EACA,WAAA;EACA,cAAA;EACA,YAAA;EACA,kBAAA;EACA,YAAA;EACA,QAAA;EACA,WAAA;AFmkBN;AEhkBI;EACE,cAAA;EACA,YAAA;EACA,WAAA;AFkkBN;;AE5jBA;EACE,u3FAAA;EACA,4BAAA;EACA,oBAAA;EACA,iCAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,UAAA;AF+jBF;;AE5jBA;EACE,SAAA;EACA,QAAA;EACA,0BAAA;EACA,YAAA;EACA,YAAA;EACA,yBAAA;EACA,gDAAA;EACA,kBAAA;EACA,aAAA;EACA,UAAA;AF+jBF;AE7jBE;EACE,cA/EI;EAgFJ,eAAA;AF+jBJ;AExjBI;EACE,gBAAA;EACA,kBAAA;EACA,oBAAA;EACA,mBAAA;EACA,sBAAA;EACA,wCAAA;AF0jBN;AExjBM;EACE,cAAA;EACA,kBAAA;EACA,gBAAA;AF0jBR;AExjBQ;EACE,cAAA;AF0jBV;AEtjBM;EACE,YAAA;EACA,YAAA;EACA,cAAA;EACA,sBAAA;EACA,aAAA;EACA,sBAAA;EACA,YAAA;AFwjBR;AEtjBQ;EACE,yBAAA;AFwjBV;AEpjBM;EACE,WAAA;EACA,UAAA;EACA,YAAA;AFsjBR;AEnjBM;EACE,WAAA;EACA,YAAA;EACA,kBAAA;EACA,yBAjIA;EAkIA,wCAAA;EACA,eAAA;EACA,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,yBAAA;AFqjBR;AEnjBQ;EACE,cA1IF;EA2IE,yBA1IF;AF+rBR;AEjjBM;EACE,WAAA;EACA,YAAA;EACA,kBAAA;EACA,sBAAA;EACA,wCAAA;EACA,eAAA;EACA,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,sBAAA;AFmjBR;AEjjBQ;EACE,WAAA;EACA,yBA5JF;AF+sBR;AE9iBM;EACE,mBAAA;AFgjBR;AE7iBM;EACE,cAAA;EACA,cAAA;EACA,aAAA;EACA,eAAA;AF+iBR;AE5iBM;EACE,aAAA;EACA,mBAAA;EACA,gBAAA;AF8iBR;AE5iBQ;EACE,kBAAA;AF8iBV;AE5iBU;EACE,WAAA;EACA,YAAA;AF8iBZ;AE5iBU;EACE,cA1LJ;AFwuBR;AE1iBQ;EACE,cA/LF;AF2uBR;AExiBM;EACE,cApMA;AF8uBR;AEtiBM;EACE,WAAA;EACA,YAAA;EACA,kBAAA;EACA,yBA5MA;EA6MA,wCAAA;EACA,eAAA;EACA,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,yBAAA;AFwiBR;AEtiBQ;EACE,cArNF;EAsNE,yBArNF;AF6vBR;AEniBQ;EACE,WAAA;EACA,YAAA;EACA,kBAAA;EACA,yBA/NF;EAgOE,wCAAA;EACA,eAAA;EACA,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,yBAAA;AFqiBV;AEniBU;EACE,cAxOJ;EAyOI,yBAxOJ;AF6wBR;AEjiBM;EACE,WAAA;EACA,YAAA;EACA,kBAAA;EACA,yBAjPA;EAkPA,wCAAA;EACA,eAAA;EACA,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,yBAAA;AFmiBR;AEjiBQ;EACE,cA1PF;EA2PE,yBA1PF;AF6xBR;AE/hBM;EACE,UAAA;AFiiBR;AE7hBI;EACE,WAAA;EACA,YAAA;EACA,kBAAA;EACA,yBAxQE;EAyQF,wCAAA;EACA,eAAA;EACA,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,yBAAA;AF+hBN;AE7hBM;EACE,cAjRA;EAkRA,yBAjRA;AFgzBR;AEzhBM;EACE,gBAAA;AF2hBR;AExhBM;EACE,eAAA;AF0hBR;AEvhBM;EACE,WAAA;AFyhBR;AEthBM;EACE,cArSA;EAsSA,eAAA;AFwhBR;AErhBM;EACE,WAAA;EACA,YAAA;EACA,kBAAA;EACA,yBA7SA;EA8SA,wCAAA;EACA,eAAA;EACA,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,yBAAA;EACA,qBAAA;AFuhBR;AErhBQ;EACE,qBAAA;AFuhBV;AEphBQ;EACE,cA3TF;EA4TE,yBA3TF;AFi1BR;AEjhBI;EACE,WAAA;EACA,YAAA;EACA,kBAAA;EACA,yBArUE;EAsUF,wCAAA;EACA,eAAA;EACA,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,yBAAA;AFmhBN;AEjhBM;EACE,cA9UA;EA+UA,yBA9UA;AFi2BR","file":"styles.css"}
\ No newline at end of file
diff --git a/services/keycloak/themes/lagoon/login/resources/css/styles.scss b/services/keycloak/themes/lagoon/login/resources/css/styles.scss
index 005f85acaa..334d47264f 100644
--- a/services/keycloak/themes/lagoon/login/resources/css/styles.scss
+++ b/services/keycloak/themes/lagoon/login/resources/css/styles.scss
@@ -2,6 +2,7 @@ $brand: #4578E6;
$white: #ffffff;
$black: #000000;
+@import "_login";
body, html {
display: flex;
@@ -21,7 +22,7 @@ body {
margin: 0;
}
-header.header{
+nav.header{
background: linear-gradient(to right, rgba(36, 174, 196, 1) 0%, rgba(42, 109, 254, 1) 25%);
display: flex;
justify-content: space-between;
@@ -63,31 +64,26 @@ header.header{
z-index: 0;
}
-.kc-content {
- height: 100%;
- padding: 0;
- margin: 0;
- display: flex;
- align-items: center;
- justify-content: center;
-
- .kc-content-wrapper{
- background-size:cover;
- background-position:center;;
- display:flex;
- justify-content:center;
- flex-direction:column;
- width: 440px;
- background-color: #ffffff;
- box-shadow: 4px 8px 13px 0px rgba(0, 0, 0, 0.03);
- position: relative;
- padding: 32px;
- z-index: 1;
+.kc {
+ left: 50%;
+ top: 25%;
+ transform: translate(-50%);
+ height: auto;
+ width: 440px;
+ background-color: #ffffff;
+ box-shadow: 4px 8px 13px 0px rgba(0, 0, 0, 0.03);
+ position: relative;
+ padding: 32px;
+ z-index: 1;
+
+ h1{
+ color: $brand;
+ font-size: 24px;
+ }
- h1{
- color: $brand;
- font-size: 24px;
- }
+
+
+ .kc-wrapper{
form{
margin: 24px 0 0;
@@ -99,7 +95,8 @@ header.header{
label{
display: block;
- margin-bottom: 8px;
+ margin-bottom: 2px;
+ margin-top: 16px;
.required{
color: #b8082a;
@@ -108,7 +105,7 @@ header.header{
input{
width: 360px;
- height: 24px;
+ height: 50px;
color: #000000;
border: 1px solid #ccc;
outline: none;
@@ -126,9 +123,9 @@ header.header{
height: auto;
}
- input.saveTOTPBtn{
+ input.saveTOTPBtn, input#saveTOTPBtn, input#registerWebAuthn, input#kc-try-again{
width: auto;
- height: 40px;
+ height: 50px;
padding: 12px 32px;
background-color: $brand;
font-family: source-sans-pro, sans-serif;
@@ -144,7 +141,7 @@ header.header{
}
}
- button.cancelTOTPBtn{
+ button.cancelTOTPBtn, button#cancelTOTPBtn, button#cancelWebAuthnAIA {
width: auto;
height: 40px;
padding: 12px 32px;
@@ -163,7 +160,6 @@ header.header{
}
-
.username_wapper{
margin-bottom: 18px;
}
@@ -204,7 +200,7 @@ header.header{
// Buttons
.submit_btn{
width: auto;
- height: 40px;
+ height: 50px;
padding: 12px 32px;
background-color: $brand;
font-family: source-sans-pro, sans-serif;
@@ -223,7 +219,7 @@ header.header{
#kc-form-buttons{
input{
width: auto;
- height: 40px;
+ height: 50px;
padding: 12px 32px;
background-color: $brand;
font-family: source-sans-pro, sans-serif;
@@ -256,6 +252,10 @@ header.header{
background-color: $white;
}
}
+
+ .required{
+ color: red;
+ }
}
input[type="button"]{
@@ -318,9 +318,29 @@ header.header{
}
}
}
+
+ input#registerWebAuthn, input#authenticateWebAuthnButton{
+ width: auto;
+ height: 50px;
+ padding: 12px 32px;
+ background-color: $brand;
+ font-family: source-sans-pro, sans-serif;
+ font-size: 14px;
+ text-align: center;
+ color: #ffffff;
+ margin: 24px 0 0;
+ border: 1px $brand solid;
+
+ &:hover{
+ color: $brand;
+ background-color: $white;
+ }
+ }
}
}
+
+
diff --git a/services/keycloak/themes/lagoon/login/template.bak b/services/keycloak/themes/lagoon/login/template.bak
deleted file mode 100644
index 8b9efa1cb0..0000000000
--- a/services/keycloak/themes/lagoon/login/template.bak
+++ /dev/null
@@ -1,161 +0,0 @@
-<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false>
-
- lang="${locale.currentLanguageTag}">
-
-
-
-
-
-
- <#if properties.meta?has_content>
- <#list properties.meta?split(' ') as meta>
-
-
-
-
${msg("loginTitle",(realm.displayName!''))}
-
- <#if properties.stylesCommon?has_content>
- <#list properties.stylesCommon?split(' ') as style>
-
-
-
- <#if properties.styles?has_content>
- <#list properties.styles?split(' ') as style>
-
-
-
- <#if properties.scripts?has_content>
- <#list properties.scripts?split(' ') as script>
-
-
-
- <#if scripts??>
- <#list scripts as script>
-
-
-
-
-
-
-
-
-<#--
-->
- <#-- -->
- <#--
-->
- <#--
-->
-
-
-
-
diff --git a/services/keycloak/themes/lagoon/login/template.ftl b/services/keycloak/themes/lagoon/login/template.ftl
index 8b9efa1cb0..ad503ff9ed 100644
--- a/services/keycloak/themes/lagoon/login/template.ftl
+++ b/services/keycloak/themes/lagoon/login/template.ftl
@@ -1,13 +1,13 @@
<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false>
- lang="${locale.currentLanguageTag}">
+ lang="${locale.currentLanguageTag}" dir="${(locale.rtl)?then('rtl','ltr')}">
- <#if properties.meta?has_content>
+ <#if properties.meta?has_content>
<#list properties.meta?split(' ') as meta>
@@ -36,30 +36,33 @@
-
+
-<#--
-->
+
<#-- -->
- <#--
-->
- <#--
diff --git a/services/keycloak/themes/lagoon/login/theme.properties b/services/keycloak/themes/lagoon/login/theme.properties
index 93bb861112..6ce902ad52 100644
--- a/services/keycloak/themes/lagoon/login/theme.properties
+++ b/services/keycloak/themes/lagoon/login/theme.properties
@@ -1,3 +1,62 @@
parent=base
import=common/keycloak
-styles=css/styles.css
\ No newline at end of file
+styles=css/styles.css
+
+stylesCommon=web_modules/@patternfly/react-core/dist/styles/base.css web_modules/@patternfly/react-core/dist/styles/app.css node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css lib/pficon/pficon.css
+
+
+# WebAuthn icons
+kcWebAuthnKeyIcon=pficon pficon-key
+kcWebAuthnDefaultIcon=pficon pficon-key
+kcWebAuthnUnknownIcon=pficon pficon-key unknown-transport-class
+kcWebAuthnUSB=fa fa-usb
+kcWebAuthnNFC=fa fa-wifi
+kcWebAuthnBLE=fa fa-bluetooth-b
+kcWebAuthnInternal=pficon pficon-key
+
+
+##### css classes for select-authenticator form
+kcSelectAuthListClass=pf-l-stack select-auth-container
+kcSelectAuthListItemClass=pf-l-stack__item select-auth-box-parent pf-l-split
+kcSelectAuthListItemIconClass=pf-l-split__item select-auth-box-icon
+kcSelectAuthListItemIconPropertyClass=fa-2x select-auth-box-icon-properties
+kcSelectAuthListItemBodyClass=pf-l-split__item pf-l-stack
+kcSelectAuthListItemHeadingClass=pf-l-stack__item select-auth-box-headline pf-c-title
+kcSelectAuthListItemDescriptionClass=pf-l-stack__item select-auth-box-desc
+kcSelectAuthListItemFillClass=pf-l-split__item pf-m-fill
+kcSelectAuthListItemArrowClass=pf-l-split__item select-auth-box-arrow
+kcSelectAuthListItemArrowIconClass=fa fa-angle-right fa-lg
+kcSelectAuthListItemTitle=select-auth-box-paragraph
+
+##### css classes for the authenticators
+kcAuthenticatorDefaultClass=fa fa-list list-view-pf-icon-lg
+kcAuthenticatorPasswordClass=fa fa-unlock list-view-pf-icon-lg
+kcAuthenticatorOTPClass=fa fa-mobile list-view-pf-icon-lg
+kcAuthenticatorWebAuthnClass=fa fa-key list-view-pf-icon-lg
+kcAuthenticatorWebAuthnPasswordlessClass=fa fa-key list-view-pf-icon-lg
+
+##### css classes for the OTP Login Form
+kcLoginOTPListClass=pf-c-tile
+kcLoginOTPListInputClass=pf-c-tile__input
+kcLoginOTPListItemHeaderClass=pf-c-tile__header
+kcLoginOTPListItemIconBodyClass=pf-c-tile__icon
+kcLoginOTPListItemIconClass=fa fa-mobile
+kcLoginOTPListItemTitleClass=pf-c-tile__title
+
+##### css classes for identity providers logos
+kcCommonLogoIdP=kc-social-provider-logo kc-social-gray
+
+
+## Recovery codes
+kcRecoveryCodesWarning=kc-recovery-codes-warning
+kcRecoveryCodesList=kc-recovery-codes-list
+kcRecoveryCodesActions=kc-recovery-codes-actions
+kcRecoveryCodesConfirmation=kc-recovery-codes-confirmation
+kcCheckClass=pf-c-check
+kcCheckInputClass=pf-c-check__input
+kcCheckLabelClass=pf-c-check__label
+
+## Password visibility
+kcFormPasswordVisibilityButtonClass=pf-c-button pf-m-control
+kcFormPasswordVisibilityIconShow=fa fa-eye
+kcFormPasswordVisibilityIconHide=fa fa-eye-slash
diff --git a/services/keycloak/themes/lagoon/login/update-email.ftl b/services/keycloak/themes/lagoon/login/update-email.ftl
index 7edb4323df..4c85e5b5da 100644
--- a/services/keycloak/themes/lagoon/login/update-email.ftl
+++ b/services/keycloak/themes/lagoon/login/update-email.ftl
@@ -1,9 +1,8 @@
<#import "template.ftl" as layout>
-
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('email'); section>
-
- <#if section = "form">
-
${msg("updateEmailTitle")}
+ <#if section = "header">
+ ${msg("updateEmailTitle")}
+ <#elseif section = "form">
@@ -39,7 +36,7 @@
let userid = "${userid}";
let username = "${username}";
- let signatureAlgorithms =[<#list signatureAlgorithms as sigAlg>${sigAlg},]
+ let signatureAlgorithms = "${signatureAlgorithms}";
let pubKeyCredParams = getPubKeyCredParams(signatureAlgorithms);
let rpEntityName = "${rpEntityName}";
@@ -131,12 +128,13 @@
});
}
- function getPubKeyCredParams(signatureAlgorithmsList) {
+ function getPubKeyCredParams(signatureAlgorithms) {
let pubKeyCredParams = [];
- if (signatureAlgorithmsList === []) {
+ if (signatureAlgorithms === "") {
pubKeyCredParams.push({type: "public-key", alg: -7});
return pubKeyCredParams;
}
+ let signatureAlgorithmsList = signatureAlgorithms.split(',');
for (let i = 0; i < signatureAlgorithmsList.length; i++) {
pubKeyCredParams.push({
@@ -191,4 +189,4 @@
-
+
\ No newline at end of file
+ 
-