Styling fix for Keycloak OTP (2FA) (#4)

openremote · Aug 19, 2024 · 54d3763 · 54d3763
1 parent 8dff6c9
commit 54d3763
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 1 deletion.
diff --git a/theme/src/main/resources/theme/openremote/login/login-otp.ftl b/theme/src/main/resources/theme/openremote/login/login-otp.ftl
@@ -0,0 +1,63 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('totp'); section>
+    <#if section="header">
+        ${msg("doLogIn")}
+    <#elseif section="form">
+        <form id="kc-otp-login-form" class="${properties.kcFormClass!}" action="${url.loginAction}"
+              method="post">
+            <#if otpLogin.userOtpCredentials?size gt 1>
+                <div class="${properties.kcFormGroupClass!}">
+                    <div class="${properties.kcInputWrapperClass!}">
+                        <label>${msg("select2faDevice", "Select your 2FA device")}</label>
+                        <div id="kc-otp-credential-box">
+                            <#list otpLogin.userOtpCredentials as otpCredential>
+                                <div>
+                                    <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}">
+                                        <span class="${properties.kcLoginOTPListItemHeaderClass!}">
+                                            <span class="${properties.kcLoginOTPListItemIconBodyClass!}">
+                                              <i class="${properties.kcLoginOTPListItemIconClass!}" aria-hidden="true"></i>
+                                            </span>
+                                            <span class="${properties.kcLoginOTPListItemTitleClass!}">${otpCredential.userLabel}</span>
+                                        </span>
+                                    </label>
+                                </div>
+                            </#list>
+                        </div>
+                    </div>
+                </div>
+            </#if>
+
+            <div class="${properties.kcFormGroupClass!}" style="margin-top: 24px;">
+                <div class="${properties.kcLabelWrapperClass!}">
+                    <label for="otp" class="${properties.kcLabelClass!}">${msg("loginOtpOneTime")}</label>
+                </div>
+
+                <div class="${properties.kcInputWrapperClass!}">
+                    <input id="otp" name="otp" autocomplete="off" type="text" class="${properties.kcInputClass!}"
+                           autofocus aria-invalid="<#if messagesPerField.existsError('totp')>true</#if>"
+                           dir="ltr" />
+
+                    <#if messagesPerField.existsError('totp')>
+                        <span id="input-error-otp-code" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                        ${kcSanitize(messagesPerField.get('totp'))?no_esc}
+                    </span>
+                    </#if>
+                </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.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
+                            name="login" id="kc-login" type="submit" value="${msg("doLogIn")}" />
+                </div>
+            </div>
+        </form>
+    </#if>
+</@layout.registrationLayout>
diff --git a/theme/src/main/resources/theme/openremote/login/messages/messages_en.properties b/theme/src/main/resources/theme/openremote/login/messages/messages_en.properties
@@ -2,4 +2,5 @@ backToLogin=Back to login
 applicationName=OpenRemote
 logoUrl=https://openremote.io
 registerTitle=Registration
-registerTitleHtml=Registration
+registerTitleHtml=Registration
+select2faDevice=Select your 2FA device
diff --git a/theme/src/main/resources/theme/openremote/login/resources/css/styles.css b/theme/src/main/resources/theme/openremote/login/resources/css/styles.css
@@ -112,7 +112,25 @@ i.material-icons {
     background-color: var(--app-primary-color) !important;
 }
 
+#kc-otp-credential-box {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin: 12px;
+}
+
+#kc-otp-credential-box div {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
 [type="checkbox"]:checked + span:not(.lever):before {
     border-right: 2px solid var(--app-primary-color) !important;
     border-bottom: 2px solid var(--app-primary-color) !important;
+}
+
+[type="radio"]:not(:checked), [type="radio"]:checked {
+    position: relative;
+    opacity: 1;
 }