Some settings v2 ui fixes

.make-lint-translation-keys-expect

@@ -18,8 +18,8 @@ resources/authgear/templates/en/web/authflowv2/__password_field.html:21:20: tran
 resources/authgear/templates/en/web/authflowv2/__password_input.html:31:31: template translation is forbidden: `v2.component.password-input.default.placeholder-password`
 resources/authgear/templates/en/web/authflowv2/__password_input.html:33:31: template translation is forbidden: `v2.component.password-input.default.placeholder-new-password`
 resources/authgear/templates/en/web/authflowv2/__password_input.html:35:31: template translation is forbidden: `v2.component.password-input.default.placeholder-confirm-password`
-resources/authgear/templates/en/web/authflowv2/__settings_page_frame.html:17:15: template translation is forbidden: `page-navbar`
-resources/authgear/templates/en/web/authflowv2/__settings_page_frame.html:25:18: template translation is forbidden: `page-content`
+resources/authgear/templates/en/web/authflowv2/__settings_page_frame.html:18:17: template translation is forbidden: `page-navbar`
+resources/authgear/templates/en/web/authflowv2/__settings_page_frame.html:27:18: template translation is forbidden: `page-content`
 resources/authgear/templates/en/web/authflowv2/__settings_radio.html:16:16: translation key not defined: "radio-%s-%s"
 resources/authgear/templates/en/web/authflowv2/__timezone_input.html:8:21: translation key not defined: "%s %s"
 resources/authgear/templates/en/web/authflowv2/account_linking.html:90:33: translation key not defined: "%s-icon"
@@ -29,8 +29,8 @@ resources/authgear/templates/en/web/authflowv2/forgot_password.html:159:26: temp
 resources/authgear/templates/en/web/authflowv2/layout.html:5:14: template translation is forbidden: `widget`
 resources/authgear/templates/en/web/authflowv2/login.html:253:37: translation key not defined: "%s-icon"
 resources/authgear/templates/en/web/authflowv2/settings_identity_list_email.html:55:40: translation key not defined: "v2.page.settings-identity-list-email.default.provider.%s"
-resources/authgear/templates/en/web/authflowv2/settings_identity_list_oauth.html:63:34: translation key not defined: "v2.page.settings-identity-oauth.default.provider.%s"
-resources/authgear/templates/en/web/authflowv2/settings_identity_list_oauth.html:113:35: translation key not defined: "v2.page.settings-identity-oauth.default.provider.%s"
+resources/authgear/templates/en/web/authflowv2/settings_identity_list_oauth.html:56:34: translation key not defined: "v2.page.settings-identity-oauth.default.provider.%s"
+resources/authgear/templates/en/web/authflowv2/settings_identity_list_oauth.html:106:35: translation key not defined: "v2.page.settings-identity-oauth.default.provider.%s"
 resources/authgear/templates/en/web/authflowv2/settings_identity_list_phone.html:55:40: translation key not defined: "v2.page.settings-identity-list-phone.default.provider.%s"
 resources/authgear/templates/en/web/authflowv2/settings_layout.html:3:14: template translation is forbidden: `widget`
 resources/authgear/templates/en/web/authflowv2/settings_mfa.html:69:44: translation key not defined: "/settings/mfa/create_oob_otp_%s"
@@ -42,11 +42,12 @@ resources/authgear/templates/en/web/authflowv2/settings_profile.html:206:22: inv
 resources/authgear/templates/en/web/authflowv2/settings_profile_edit_custom.html:6:18: translation key not defined: "custom-attribute-label-%s"
 resources/authgear/templates/en/web/authflowv2/settings_profile_edit_custom.html:7:16: invalid translation key: "$labelKey"
 resources/authgear/templates/en/web/authflowv2/settings_profile_edit_custom.html:11:17: invalid translation key: "$labelKey"
-resources/authgear/templates/en/web/authflowv2/settings_profile_edit_custom.html:109:30: translation key not defined: "custom-attribute-enum-label-%s-%s"
-resources/authgear/templates/en/web/authflowv2/settings_profile_edit_custom.html:110:28: invalid translation key: "$enum_label_key"
-resources/authgear/templates/en/web/authflowv2/settings_profile_edit_custom.html:113:28: invalid translation key: "$enum_label_key"
+resources/authgear/templates/en/web/authflowv2/settings_profile_edit_custom.html:103:30: translation key not defined: "custom-attribute-enum-label-%s-%s"
+resources/authgear/templates/en/web/authflowv2/settings_profile_edit_custom.html:104:28: invalid translation key: "$enum_label_key"
+resources/authgear/templates/en/web/authflowv2/settings_profile_edit_custom.html:107:28: invalid translation key: "$enum_label_key"
+resources/authgear/templates/en/web/authflowv2/settings_sessions.html:45:23: translation key not defined: "__settings_session_item_description"
 resources/authgear/templates/en/web/authflowv2/signup.html:93:26: translation key not defined: "v2.page.signup-login.continue.subtitle-%v"
 resources/authgear/templates/en/web/authflowv2/signup.html:102:26: translation key not defined: "v2.page.signup.continue.subtitle-%v"
 resources/authgear/templates/en/web/authflowv2/signup.html:276:35: translation key not defined: "%s-icon"
-50 errors found
+51 errors found
 exit status 1

authui/src/authflowv2/components/settings-action-item.css

@@ -28,6 +28,8 @@
     border-color: var(--settings-item__border-color);
     border-bottom-width: 1px;
     border-style: solid;
+    padding-left: var(--widget-content__px);
+    padding-right: var(--widget-content__px);
 
     --icon-placeholder-display: none;
     --icon-size: 1.5rem;

authui/src/authflowv2/components/settings-content.css

@@ -4,6 +4,9 @@
   }
 
   .settings-content {
+    padding-left: var(--widget-content__px);
+    padding-right: var(--widget-content__px);
+
     @media (min-width: theme("screens.tablet")) {
       margin: 0 auto;
       width: var(--settings-content__width);

authui/src/authflowv2/components/settings-description.css

@@ -14,8 +14,6 @@
       --typography-title-medium__font-weight
     );
     --settings-description__text-color: var(--color-neutral-400);
-
-    --settings-description__text-color--primary: var(--color-link);
   }
   :root.dark {
     --settings-description__text-color: var(--color-neutral-200);
@@ -28,10 +26,7 @@
     letter-spacing: var(--settings-description__letter-spacing);
     font-weight: var(--settings-description__font-weight);
     color: var(--settings-description__text-color);
-  }
-
-  .settings-description--primary-color {
-    @apply settings-description;
-    color: var(--settings-description__text-color--primary);
+    padding-left: var(--widget-content__px);
+    padding-right: var(--widget-content__px);
   }
 }

authui/src/authflowv2/components/settings-item.css

@@ -44,6 +44,24 @@
     --settings-item__forward-arrow-color: var(--color-neutral-200);
 
     --settings-item__border-color: var(--color-neutral-100);
+
+    --settings-item-content__font-family: var(
+      --typography-title-medium__font-family
+    );
+    --settings-item-content__font-size: var(
+      --typography-body-medium__font-size
+    );
+    --settings-item-content__line-height: var(
+      --typography-label-medium__line-height
+    );
+    --settings-item-content__letter-spacing: var(
+      --typography-title-medium__letter-spacing
+    );
+    --settings-item-content__font-weight: var(
+      --typography-title-medium__font-weight
+    );
+    --settings-item-content__text-color: var(--color-neutral-400);
+    --settings-item-content__text-color--highligh: var(--color-link);
   }
 
   :root.dark {
@@ -55,14 +73,17 @@
     --settings-item__forward-arrow-color: var(--color-neutral-200);
 
     --settings-item__border-color: var(--color-neutral-400);
+
+    --settings-item-content__text-color: var(--color-neutral-200);
   }
 
   .settings-item {
     @apply grid gap-x-2 gap-y-1;
     @apply items-center text-start;
 
     background-color: var(--settings-item__bg-color);
-    padding: var(--settings-item__py) var(--settings-item__px);
+    padding: var(--settings-item__py)
+      calc(var(--settings-item__px) + var(--widget-content__px));
     color: var(--settings-item__text-color);
     border-color: var(--settings-item__border-color);
     border-bottom-width: 1px;
@@ -125,6 +146,16 @@
   }
   .settings-item__content {
     grid-area: content;
+
+    font-family: var(--settings-item-content__font-family);
+    font-size: var(--settings-item-content__font-size);
+    line-height: var(--settings-item-content__line-height);
+    letter-spacing: var(--settings-item-content__letter-spacing);
+    font-weight: var(--settings-item-content__font-weight);
+    color: var(--settings-item-content__text-color);
+  }
+  .settings-item__content--highlight {
+    color: var(--settings-item-content__text-color--highligh);
   }
   .settings-item__forward_arrow {
     grid-area: arrow;

authui/src/authflowv2/components/settings-title.css

@@ -24,5 +24,7 @@
     letter-spacing: var(--settings-title__letter-spacing);
     font-weight: var(--settings-title__font-weight);
     color: var(--settings-title__text-color);
+    padding-left: var(--widget-content__px);
+    padding-right: var(--widget-content__px);
   }
 }

authui/src/authflowv2/components/watermark.css

@@ -1,10 +1,10 @@
 @layer components {
   :root {
-    --watermark-display: inline-block;
+    --watermark-display: block;
   }
 
   html[data-watermark-enabled="false"] {
-    --watermark-display: hidden;
+    --watermark-display: none;
   }
 
   .watermark {
@@ -15,12 +15,14 @@
   }
 
   .watermark__container {
-    @apply mt-8 flex justify-center;
+    /* Use gap to implement the top padding, so that when watermark is not displayed,
+    the margin is also hidden */
+    @apply gap-y-8 flex flex-col items-center;
   }
 
   @media (min-width: theme("screens.tablet")) {
     .watermark__container {
-      @apply mt-16;
+      @apply gap-y-16;
     }
   }
 }

authui/src/authflowv2/components/widget.css

@@ -48,9 +48,10 @@
   }
 
   .widget-content.widget-content--settings {
-    @apply px-6 py-6;
+    @apply px-0 py-6;
     @apply gap-y-5 tablet:gap-y-8;
     max-width: var(--widget__max-width--settings);
+    --widget-content__px: 1.5rem;
   }
 
   /* In __html_head.html, there is a <noscript> element to revert this visibility. */
@@ -73,7 +74,18 @@
     }
 
     .widget-content.widget-content--settings {
-      @apply px-8 py-8;
+      @apply px-0 py-8;
+      --widget-content__px: 2rem;
     }
   }
+
+  .widget-content__item--settings {
+    padding-left: var(--widget-content__px);
+    padding-right: var(--widget-content__px);
+  }
+
+  .widget-content__alert--settings {
+    margin-left: var(--widget-content__px);
+    margin-right: var(--widget-content__px);
+  }
 }

portal/src/components/design/BorderRadius.tsx

@@ -64,12 +64,21 @@ const BorderRadius: React.VFC<BorderRadiusProps> = function BorderRadius(
     [radiusValue, onChange]
   );
 
-  const onBorderRadiusChange = useCallback((_: any, value?: string) => {
-    if (value == null) {
-      return;
-    }
-    setRadiusValue(value);
-  }, []);
+  const onBorderRadiusChange = useCallback(
+    (_: any, value?: string) => {
+      if (value == null) {
+        return;
+      }
+      setRadiusValue(value);
+      if (value !== "") {
+        onChange({
+          type: "rounded",
+          radius: value,
+        });
+      }
+    },
+    [onChange]
+  );
 
   const onBorderRadiusBlur = useCallback(
     (ev: React.FocusEvent<HTMLInputElement>) => {

portal/src/model/themeAuthFlowV2.ts

@@ -124,8 +124,8 @@ export interface LogoStyle {
   height: string;
 }
 
-export const WatermarkEnabledDisplay = "inline-block";
-export const WatermarkDisabledDisplay = "hidden";
+export const WatermarkEnabledDisplay = "block";
+export const WatermarkDisabledDisplay = "none";
 
 export interface CustomisableTheme {
   page: PageStyle;

resources/authgear/templates/de/translation.json

@@ -1319,7 +1319,8 @@
   "v2.page.settings-sessions.default.all-sessions-dialog-description": "Dies wird den Zugriff auf Ihr Konto von allen anderen Geräten entfernen",
   "v2.page.settings-sessions.default.all-sessions-dialog-title": "Alle anderen Sitzungen beenden",
   "v2.page.settings-sessions.default.country-ip-item-description": "{countryName} ({countryCode}) - {ip}",
-  "v2.page.settings-sessions.default.device-item-description": "{isCurrent, select, true {{desc} · <span class=\"settings-description--primary-color\">Jetzt aktiv</span>} other {{desc} · <span data-date=\"{rfc3339}\">{time, datetime, short} UTC</span>}}",
+  "v2.page.settings-sessions.default.device-item-activity--current": "Derzeit aktiv",
+  "v2.page.settings-sessions.default.device-item-activity--last": "<span data-date=\"{rfc3339}\">{time, datetime, short} UTC</span>",
   "v2.page.settings-sessions.default.revoke-all-label": "Alle anderen Sitzungen beenden",
   "v2.page.settings-sessions.default.terminate-session-dialog-description": "Dies wird den Zugriff auf Ihr Konto auf diesem Gerät entfernen",
   "v2.page.settings-sessions.default.terminate-session-dialog-title": "Sitzung beenden",

resources/authgear/templates/el/translation.json

@@ -1319,7 +1319,8 @@
   "v2.page.settings-sessions.default.all-sessions-dialog-description": "Αυτό θα αφαιρέσει την πρόσβαση στον λογαριασμό σας από όλες τις άλλες συσκευές",
   "v2.page.settings-sessions.default.all-sessions-dialog-title": "Τερματισμός όλων των άλλων συνεδριών",
   "v2.page.settings-sessions.default.country-ip-item-description": "{countryName} ({countryCode}) - {ip}",
-  "v2.page.settings-sessions.default.device-item-description": "{isCurrent, select, true {{desc} · <span class=\"settings-description--primary-color\">Ενεργό Τώρα</span>} other {{desc} · <span data-date=\"{rfc3339}\">{time, datetime, short} UTC</span>}}",
+  "v2.page.settings-sessions.default.device-item-activity--current": "Ενεργό Τώρα",
+  "v2.page.settings-sessions.default.device-item-activity--last": "<span data-date=\"{rfc3339}\">{time, datetime, short} UTC</span>",
   "v2.page.settings-sessions.default.revoke-all-label": "Τερματισμός όλων των άλλων συνεδριών",
   "v2.page.settings-sessions.default.terminate-session-dialog-description": "Αυτό θα αφαιρέσει την πρόσβαση στον λογαριασμό σας σε αυτή τη συσκευή",
   "v2.page.settings-sessions.default.terminate-session-dialog-title": "Τερματισμός συνεδρίας",

resources/authgear/templates/en/translation.json

@@ -1319,7 +1319,8 @@
   "v2.page.settings-sessions.default.all-sessions-dialog-description": "This will remove access to your account from all other devices",
   "v2.page.settings-sessions.default.all-sessions-dialog-title": "Terminate all other sessions",
   "v2.page.settings-sessions.default.country-ip-item-description": "{countryName} ({countryCode}) - {ip}",
-  "v2.page.settings-sessions.default.device-item-description": "{isCurrent, select, true {{desc} · <span class=\"settings-description--primary-color\">Active Now</span>} other {{desc} · <span data-date=\"{rfc3339}\">{time, datetime, short} UTC</span>}}",
+  "v2.page.settings-sessions.default.device-item-activity--current": "Active Now",
+  "v2.page.settings-sessions.default.device-item-activity--last": "<span data-date=\"{rfc3339}\">{time, datetime, short} UTC</span>",
   "v2.page.settings-sessions.default.revoke-all-label": "Terminate all other sessions",
   "v2.page.settings-sessions.default.terminate-session-dialog-description": "This will remove access to your account on this device",
   "v2.page.settings-sessions.default.terminate-session-dialog-title": "Terminate session",

resources/authgear/templates/en/web/authflowv2/__settings_item.html

@@ -48,15 +48,15 @@
   {{/* If there is content */}}
   {{ if $.Children }}
     {{ $length := len $.Children }}
-    <p class="settings-item__content settings-description block tablet:hidden">
+    <p class="settings-item__content block tablet:hidden">
       {{ $item := index $.Children  0}}
       {{ if gt $length 1 }}
         <span> {{ include "v2.page.settings.default.and-more-button-label" (dict "item" $item ) }} </span>
       {{ else }}
         {{ $item }}
       {{ end }}
     </p>
-    <ul class="settings-item__content settings-description hidden tablet:block break-all">
+    <ul class="settings-item__content hidden tablet:block break-all">
       {{ range $i, $child := $.Children }}
       <li>
         {{ $child }}

resources/authgear/templates/en/web/authflowv2/__settings_page_frame.html

@@ -14,12 +14,14 @@
 {{ define "widget" }}
   <div class="widget widget--settings">
     <div class="widget-content widget-content--settings">
-      {{ block "page-navbar" . }}
-      {{ end }}
+      <div class="widget-content__item--settings">
+        {{ block "page-navbar" . }}{{ end }}
+      </div>
       {{ template "authflowv2/__alert_message.html"
         (dict
           "Type" "error"
           "Message" (include "authflowv2/__error.html" .)
+          "Classname" "widget-content__alert--settings"
         )
       }}
       {{ template "page-content" . }}

resources/authgear/templates/en/web/authflowv2/__watermark.html

@@ -1,13 +1,15 @@
 {{ define "authflowv2/__watermark.html" }}
 <div class="watermark__container">
+  <!-- This element is for implementing the top margin of the watermark -->
+  <div></div>
   {{ if $.IsNativePlatform }}
   <div>
     <span class="watermark"></span>
   </div>
   {{ else }}
-  <a href="https://www.authgear.com/?utm_campaign=uibrand" target="_blank">
+  <a class="contents" href="https://www.authgear.com/?utm_campaign=uibrand" target="_blank">
     <span class="watermark"></span>
   </a>
   {{ end }}
-  </div>
+</div>
 {{ end }}

resources/authgear/templates/en/web/authflowv2/settings_change_password.html

@@ -53,19 +53,7 @@
   {{ $confirm_pw_error_message = (include "authflowv2/__error.html" (merge (dict "Error" $confirm_pw_err) $)) }}
 {{ end }}
 
-{{ $unknown_error_message := "" }}
-{{ if $has_unknown_err }}
-  {{ $unknown_error_message = (include "authflowv2/__error.html" (merge (dict "Error" $unknown_err) $)) }}
-{{ end }}
-
 <div class="flex flex-col settings-content">
-  {{ template "authflowv2/__alert_message.html"
-    (dict
-    "Type" "error"
-    "Classname" "mb-4"
-    "Message" $unknown_error_message
-    )
-  }}
   <form
     method="post"
     novalidate

resources/authgear/templates/en/web/authflowv2/settings_identity_add_email.html

@@ -28,25 +28,13 @@
   {{ $email_error_message = include "authflowv2/__error.html" (merge (dict "Error" $email_err) $) }}
 {{ end }}
 
-{{ $unknown_error_message := "" }}
-{{ if $has_unknown_err }}
-  {{ $unknown_error_message = (include "authflowv2/__error.html" (merge (dict "Error" $unknown_err) $)) }}
-{{ end }}
-
 <form
   class="settings-content flex flex-col gap-y-4 py-5 tablet:py-0"
   method="post"
   novalidate
   data-controller="turbo-form"
   data-action="submit->turbo-form#submitForm">
 
-  {{ template "authflowv2/__alert_message.html"
-    (dict
-      "Type" "error"
-      "Message" $unknown_error_message
-    )
-  }}
-
   {{ $.CSRFField }}
 
   <input