feat(email-otp): sync theme with latest change in for-keycloak/email-otp-authenticator#34

Author: kidager

compose.yaml

@@ -21,7 +21,7 @@ services:
       - app-network
 
   playwright:
-    image: mcr.microsoft.com/playwright:v1.57.0-noble
+    image: mcr.microsoft.com/playwright:v1.58.0-noble
     volumes:
       - .:/app
     working_dir: /app

src/login/KcContext.ts

@@ -5,6 +5,12 @@ import type { KcContext as KcContextBase } from "keycloakify/login/KcContext";
 type KcContextLoginEmailOtp = KcContextBase.Common & {
   pageId: "login-email-otp.ftl";
   url: KcContextBase.Common["url"];
+  // Device trust feature (feat/trust-ips-devices branch)
+  deviceTrustEnabled?: boolean;
+  deviceTrustPermanent?: boolean;
+  trustDurationUnitKey?: string;
+  trustDurationValue?: number;
+  trustHideNumber?: boolean;
 };
 
 export type KcContext = KcContextBase | KcContextLoginEmailOtp;

src/login/i18n.ts

@@ -1,6 +1,24 @@
 import { i18nBuilder } from "keycloakify/login/i18n";
 
-const { useI18n, ofTypeI18n } = i18nBuilder.withCustomTranslations({}).build();
+// Message keys for the email-otp-authenticator plugin device trust feature
+// These are provided by the plugin at runtime, but we define fallbacks here
+// for Storybook and type safety
+const { useI18n, ofTypeI18n } = i18nBuilder
+  .withCustomTranslations({
+    en: {
+      dontAskForCodePermanently: "Don't ask for a code on this device again",
+      dontAskForCodeFor: "Don't ask for a code on this device for {0} {1}",
+      unitDayOne: "day",
+      unitDayMany: "days",
+      unitWeekOne: "week",
+      unitWeekMany: "weeks",
+      unitMonthOne: "month",
+      unitMonthMany: "months",
+      unitYearOne: "year",
+      unitYearMany: "years"
+    }
+  })
+  .build();
 
 type I18n = typeof ofTypeI18n;
 

src/login/pages/LoginEmailOtp.tsx

@@ -19,14 +19,21 @@ export default function LoginEmailOtp(
     classes
   });
 
-  const { url } = kcContext;
+  const {
+    url,
+    deviceTrustEnabled,
+    deviceTrustPermanent,
+    trustDurationUnitKey,
+    trustDurationValue,
+    trustHideNumber
+  } = kcContext;
   // messagesPerField comes from Common but TypeScript needs a cast for plugin pages
   const messagesPerField = (kcContext as any).messagesPerField ?? {
     existsError: () => false,
     get: () => "",
     getFirstError: () => ""
   };
-  const { msg, msgStr } = i18n;
+  const { msg, msgStr, advancedMsg, advancedMsgStr } = i18n;
 
   const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
 
@@ -74,6 +81,36 @@ export default function LoginEmailOtp(
           )}
         </div>
 
+        {deviceTrustEnabled && (
+          <div className={kcClsx("kcFormGroupClass")}>
+            <div className="checkbox">
+              <label>
+                <input
+                  type="checkbox"
+                  id="trust-device"
+                  name="trust-device"
+                  value="true"
+                />{" "}
+                {deviceTrustPermanent
+                  ? advancedMsg("dontAskForCodePermanently")
+                  : trustDurationUnitKey
+                    ? trustHideNumber
+                      ? advancedMsgStr(
+                          "dontAskForCodeFor",
+                          "",
+                          advancedMsgStr(trustDurationUnitKey)
+                        ).trim()
+                      : advancedMsg(
+                          "dontAskForCodeFor",
+                          String(trustDurationValue ?? 1),
+                          advancedMsgStr(trustDurationUnitKey)
+                        )
+                    : advancedMsg("dontAskForCodePermanently")}
+              </label>
+            </div>
+          </div>
+        )}
+
         <div id="kc-form-buttons" className={kcClsx("kcFormGroupClass")}>
           <input
             disabled={isLoginButtonDisabled}

src/login/stories/login-email-otp.ftl.stories.tsx

@@ -39,3 +39,52 @@ export const WithError: Story = {
     })
   }
 };
+
+export const WithDeviceTrustPermanent: Story = {
+  name: "Device Trust - Permanent",
+  args: {
+    kcContext: createEmailOtpMock({
+      deviceTrustEnabled: true,
+      deviceTrustPermanent: true
+    })
+  }
+};
+
+export const WithDeviceTrustDays: Story = {
+  name: "Device Trust - 30 Days",
+  args: {
+    kcContext: createEmailOtpMock({
+      deviceTrustEnabled: true,
+      deviceTrustPermanent: false,
+      trustDurationUnitKey: "unitDayMany",
+      trustDurationValue: 30,
+      trustHideNumber: false
+    })
+  }
+};
+
+export const WithDeviceTrustWeek: Story = {
+  name: "Device Trust - 1 Week",
+  args: {
+    kcContext: createEmailOtpMock({
+      deviceTrustEnabled: true,
+      deviceTrustPermanent: false,
+      trustDurationUnitKey: "unitWeekOne",
+      trustDurationValue: 1,
+      trustHideNumber: false
+    })
+  }
+};
+
+export const WithDeviceTrustHiddenNumber: Story = {
+  name: "Device Trust - Hidden Number",
+  args: {
+    kcContext: createEmailOtpMock({
+      deviceTrustEnabled: true,
+      deviceTrustPermanent: false,
+      trustDurationUnitKey: "unitMonthMany",
+      trustDurationValue: 3,
+      trustHideNumber: true
+    })
+  }
+};