More fixes to keycloak theme

account/template.ftl

@@ -13,6 +13,7 @@
     <link href="${url.resourcesPath}/css/index.css" rel="stylesheet" />
 
     <script defer src="${url.resourcesPath}/js/background.js" type="text/javascript"></script>
+    <script defer src="${url.resourcesPath}/js/i18n.js" type="text/javascript"></script>
 
     <#if properties.stylesCommon?has_content>
         <#list properties.stylesCommon?split(' ') as style>
@@ -59,16 +60,17 @@
         <a href="https://pub.solar/" class="ps-homelink">pub.solar/</a>
 
         <#if realm.internationalizationEnabled  && locale.supported?size gt 1>
-            <ul class="ps-i18n-links">
+          <select
+            class="ps-i18n-links"
+            id="language-toggle"
+          >
             <#list locale.supported as l>
-                    <li class="ps-i18n-links--item">
+              <option
-                        <a
+                value="${l.url}"
-                          class="ps-i18n-links--link <#if locale.current == l.label >ps-i18n-links--link_active</#if>"
+                <#if locale.current == l.label>selected</#if>
-                          href="${l.url}"
+              >${l.label}</option>
-                        >${l.label}</a>
-                    </li>
             </#list>
-            </ul>
+          </select>
         </#if>
 
         <nav class="ps-header--nav" role="navigation">

common/resources/css/index.css

@@ -127,9 +127,6 @@ html {
     font-weight: bold; }
 
 .ps-homelink {
-  position: fixed;
-  top: 0;
-  left: 0;
   z-index: 100;
   pointer-events: all;
   color: var(--foreground);
@@ -152,15 +149,8 @@ html {
       font-size: 32px;
       padding: 12px; } }
 .ps-i18n-links {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 100;
   display: flex;
-  margin: 0; }
+  margin: 0;
-  .ps-i18n-links--item {
-    display: flex; }
-  .ps-i18n-links--link {
   pointer-events: all;
   color: var(--foreground);
   background: white;
@@ -175,16 +165,6 @@ html {
   border: 12px solid var(--foreground);
   border-top: 0;
   border-right: 0; }
-    .ps-i18n-links--link:hover {
-      text-shadow: 0.3vw 0px 0px var(--accent); }
-    @media screen and (min-width: 1200px) {
-      .ps-i18n-links--link {
-        font-size: 32px;
-        padding: 12px; } }
-    .ps-i18n-links--link_active {
-      background-color: var(--foreground);
-      color: var(--background);
-      text-shadow: 0.15vw 0px 0px var(--foreground); }
 
 .ps-main {
   display: flex;
@@ -209,9 +189,13 @@ html {
     z-index: 1; }
   .ps-main_full {
     padding: 0; }
-
+  @media screen and (min-width: 1200px) {
+    .ps-main_full .ps-main--page {
+      flex-direction: column;
+      flex-wrap: nowrap; } }
 .ps-header {
   display: flex;
+  justify-content: space-between;
   padding: 0;
   margin: 0; }
   .ps-header--title {
@@ -253,10 +237,12 @@ html {
   align-items: center;
   justify-content: flex-start;
   padding: 0;
-  pointer-events: none; }
+  pointer-events: none;
+  padding-top: 4rem; }
   @media screen and (min-width: 1200px) {
     .ps-page {
       padding: 1vw;
+      padding-top: 4rem;
       flex-direction: row;
       align-items: flex-start; } }
   .ps-page_home {
@@ -294,8 +280,12 @@ html {
       padding: 5vw; }
     .ps-page--section_full {
       max-width: unset;
-      width: calc(100% - 8rem);
+      width: calc(100vw - 1.6rem);
-      margin: 4rem; }
+      margin: 0.8rem; }
+      @media screen and (min-width: 1200px) {
+        .ps-page--section_full {
+          width: 96vw;
+          margin: 1vw; } }
     .ps-page--section a {
       color: var(--accent);
       border-bottom: 1px solid transparent;
@@ -347,6 +337,17 @@ html {
       margin-top: 1.5rem;
       line-height: 1.5; }
 
+.ps-login-flow-pre {
+  margin: 2rem;
+  display: flex;
+  border-bottom: 0.25rem solid var(--foreground);
+  padding-bottom: 0.25rem; }
+  .ps-login-flow-pre--selected {
+    font-weight: bold;
+    margin-right: 1rem; }
+  .ps-login-flow-pre--cancel {
+    font-weight: normal; }
+
 .ps-section-nav {
   display: flex;
   justify-content: space-between;

common/resources/js/i18n.js

@@ -0,0 +1,5 @@
+const toggle = document.getElementById('language-toggle');
+toggle.addEventListener('change', (event) => {
+  window.location = toggle.value;
+});
+

common/resources/scss/header.scss

@@ -1,5 +1,6 @@
 .ps-header {
   display: flex;
+  justify-content: space-between;
   padding: 0;
   margin: 0;
 

common/resources/scss/homelink.scss

@@ -1,7 +1,4 @@
 .ps-homelink {
-  position: fixed;
-  top: 0;
-  left: 0;
   z-index: 100;
 
   pointer-events: all;

common/resources/scss/i18n-links.scss

@@ -1,16 +1,6 @@
 .ps-i18n-links {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 100;
   display: flex;
   margin: 0;
-
-  &--item {
-    display: flex;
-  }
-
-  &--link {
   pointer-events: all;
   color: var(--foreground);
   background: white;
@@ -25,20 +15,4 @@
   border: 12px solid var(--foreground);
   border-top: 0;
   border-right: 0;
-
-    &:hover {
-      text-shadow: 0.3vw 0px 0px var(--accent);
-    }
-
-    @media screen and (min-width: 1200px) {
-      font-size: 32px;
-      padding: 12px;
-    }
-
-    &_active {
-      background-color: var(--foreground);
-      color: var(--background);
-      text-shadow: 0.15vw 0px 0px var(--foreground);
-    }
-  }
 }

common/resources/scss/index.scss

@@ -43,6 +43,7 @@ html {
 @import './main';
 @import './header';
 @import './page';
+@import './login-flow-pre';
 @import './section-nav';
 @import './logo';
 @import './background';

common/resources/scss/login-flow-pre.scss

@@ -0,0 +1,16 @@
+.ps-login-flow-pre {
+  margin: 2rem;
+  display: flex;
+
+  border-bottom: 0.25rem solid var(--foreground);
+  padding-bottom: 0.25rem;
+
+  &--selected {
+    font-weight: bold;
+    margin-right: 1rem;
+  }
+
+  &--cancel {
+    font-weight: normal;
+  }
+}

common/resources/scss/main.scss

@@ -27,4 +27,11 @@
   &_full {
     padding: 0;
   }
+
+  &_full &--page {
+    @media screen and (min-width: 1200px) {
+      flex-direction: column;
+      flex-wrap: nowrap;
+    }
+  }
 }

common/resources/scss/page.scss

@@ -6,9 +6,11 @@
   justify-content: flex-start;
   padding: 0;
   pointer-events: none;
+  padding-top: 4rem;
 
   @media screen and (min-width: 1200px) {
     padding: 1vw;
+    padding-top: 4rem;
     flex-direction: row;
     align-items: flex-start;
   }
@@ -58,8 +60,13 @@
 
     &_full {
       max-width: unset;
-      width: calc(100% - 8rem);
+      width: calc(100vw - 1.6rem);
-      margin: 4rem;
+      margin: 0.8rem;
+
+      @media screen and (min-width: 1200px) {
+        width: 96vw;
+        margin: 1vw;
+      }
     }
 
     a {

login/login-otp.ftl

@@ -3,11 +3,14 @@
   <#if section="header">
     ${msg("doLogIn")}
   <#elseif section="form">
-        <form id="kc-otp-login-form" class="${properties.kcFormClass!}" action="${url.loginAction}"
+    <form
-            method="post">
+      id="kc-otp-login-form"
+      class="ps-container"
+      action="${url.loginAction}"
+      method="post"
+    >
       <#if otpLogin.userOtpCredentials?size gt 1>
         <div class="${properties.kcFormGroupClass!}">
-                    <div class="${properties.kcInputWrapperClass!}">
           <#list otpLogin.userOtpCredentials as otpCredential>
             <input id="kc-otp-credential-${otpCredential?index}" class="${properties.kcLoginOTPListInputClass!}" type="radio" name="selectedCredentialId" value="${otpCredential.id}" <#if otpCredential.id == otpLogin.selectedCredentialId>checked="checked"</#if>>
             <label for="kc-otp-credential-${otpCredential?index}" class="${properties.kcLoginOTPListClass!}" tabindex="${otpCredential?index}">
@@ -20,17 +23,19 @@
             </label>
           </#list>
         </div>
-                </div>
       </#if>
 
       <div class="${properties.kcFormGroupClass!}">
-                <div class="${properties.kcLabelWrapperClass!}">
         <label for="otp" class="${properties.kcLabelClass!}">${msg("loginOtpOneTime")}</label>
-                </div>
 
-            <div class="${properties.kcInputWrapperClass!}">
+        <input
-                <input id="otp" name="otp" autocomplete="off" type="text" class="${properties.kcInputClass!}"
+          id="otp"
-                       autofocus aria-invalid="<#if messagesPerField.existsError('totp')>true</#if>"/>
+          name="otp"
+          autocomplete="off"
+          type="text"
+          class="${properties.kcInputClass!}"
+          autofocus aria-invalid="<#if messagesPerField.existsError('totp')>true</#if>"
+        />
 
         <#if messagesPerField.existsError('totp')>
           <span id="input-error-otp-code" class="${properties.kcInputErrorMessageClass!}"
@@ -39,19 +44,14 @@
           </span>
         </#if>
       </div>
-        </div>
 
       <div class="${properties.kcFormGroupClass!}">
-                <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
+        <button
-                    <div class="${properties.kcFormOptionsWrapperClass!}">
-                    </div>
-                </div>
-
-                <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
-                    <input
           class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
-                        name="login" id="kc-login" type="submit" value="${msg("doLogIn")}" />
+          name="login"
-                </div>
+          id="kc-login"
+          type="submit"
+        >${msg("doLogIn")}</button>
       </div>
     </form>
   </#if>

login/template.ftl

@@ -16,6 +16,7 @@
   <link href="${url.resourcesPath}/css/index.css" rel="stylesheet" />
 
   <script defer src="${url.resourcesPath}/js/background.js" type="text/javascript"></script>
+  <script defer src="${url.resourcesPath}/js/i18n.js" type="text/javascript"></script>
 
   <#if properties.stylesCommon?has_content>
     <#list properties.stylesCommon?split(' ') as style>
@@ -65,16 +66,17 @@
     <a href="https://pub.solar/" class="ps-homelink">pub.solar/</a>
 
     <#if realm.internationalizationEnabled  && locale.supported?size gt 1>
-          <ul class="ps-i18n-links">
+      <select
+        class="ps-i18n-links"
+        id="language-toggle"
+      >
         <#list locale.supported as l>
-                  <li class="ps-i18n-links--item">
+          <option
-                      <a
+            value="${l.url}"
-                        class="ps-i18n-links--link <#if locale.current == l.label >ps-i18n-links--link_active</#if>"
+            <#if locale.current == l.label>selected</#if>
-                        href="${l.url}"
+          >${l.label}</option>
-                      >${l.label}</a>
-                  </li>
         </#list>
-          </ul>
+      </select>
     </#if>
 
   </header>
@@ -109,13 +111,15 @@
         </div>
       <#else>
         <#nested "show-username">
-              <div id="kc-username" class="${properties.kcFormGroupClass!}">
+        <div class="ps-login-flow-pre">
-                  <label id="kc-attempted-username">${auth.attemptedUsername}</label>
+          <div class="ps-login-flow-pre--selected">${auth.attemptedUsername}</div>
-                  <a id="reset-login" href="${url.loginRestartFlowUrl}" aria-label="${msg("restartLoginTooltip")}">
+          <a
-                      <div class="kc-login-tooltip">
+            id="reset-login"
-                          <i class="${properties.kcResetFlowIcon!}"></i>
+            href="${url.loginRestartFlowUrl}"
-                          <span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
+            aria-label="${msg("restartLoginTooltip")}"
-                      </div>
+            class="ps-login-flow-pre--cancel ps-link"
+          >
+            ${msg("restartLoginTooltip")}
           </a>
         </div>
       </#if>
@@ -143,8 +147,11 @@
       <form id="kc-select-try-another-way-form" action="${url.loginAction}" method="post">
         <div class="${properties.kcFormGroupClass!}">
           <input type="hidden" name="tryAnotherWay" value="on"/>
-                    <a href="#" id="try-another-way"
+          <a
-                       onclick="document.forms['kc-select-try-another-way-form'].submit();return false;">${msg("doTryAnotherWay")}</a>
+            href="#"
+            id="try-another-way"
+            onclick="document.forms['kc-select-try-another-way-form'].submit();return false;"
+          >${msg("doTryAnotherWay")}</a>
         </div>
       </form>
     </#if>