[Settings v2] Create MFA - TOTP

.make-lint-translation-keys-expect

@@ -7,14 +7,19 @@ resources/authgear/templates/en/web/authflowv2/__country_input.html:10:21: trans
 resources/authgear/templates/en/web/authflowv2/__csrf_error_page_layout.html:28:18: template translation is forbidden: `page-content`
 resources/authgear/templates/en/web/authflowv2/__dialog.html:27:14: template translation is forbidden: `dialog-attr`
 resources/authgear/templates/en/web/authflowv2/__direct_access_disable_page_frame.html:7:16: template translation is forbidden: `page-content`
-resources/authgear/templates/en/web/authflowv2/__error.html:134:18: template translation is forbidden: `authflowv2/__error_account`
-resources/authgear/templates/en/web/authflowv2/__error.html:166:20: template translation is forbidden: `authflowv2/__error_account`
+resources/authgear/templates/en/web/authflowv2/__error.html:135:18: template translation is forbidden: `authflowv2/__error_account`
+resources/authgear/templates/en/web/authflowv2/__error.html:170:20: template translation is forbidden: `authflowv2/__error_account`
 resources/authgear/templates/en/web/authflowv2/__locale_input.html:6:16: invalid translation key: "$labelKey"
 resources/authgear/templates/en/web/authflowv2/__locale_input.html:10:21: translation key not defined: "%s %s"
-resources/authgear/templates/en/web/authflowv2/__new_password_field.html:53:33: translation key not defined: "%s %s"
-resources/authgear/templates/en/web/authflowv2/__new_password_field.html:77:38: translation key not defined: "%s %s"
+resources/authgear/templates/en/web/authflowv2/__new_password_field.html:54:33: translation key not defined: "%s %s"
+resources/authgear/templates/en/web/authflowv2/__new_password_field.html:79:38: translation key not defined: "%s %s"
 resources/authgear/templates/en/web/authflowv2/__page_frame.html:12:18: template translation is forbidden: `page-content`
 resources/authgear/templates/en/web/authflowv2/__password_field.html:21:20: translation key not defined: "%s %s"
+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_action_item.html:22:20: template translation is forbidden: `__settings_action_item_content`
+resources/authgear/templates/en/web/authflowv2/__settings_action_item.html:26:20: template translation is forbidden: `__settings_action_item_content`
 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:19: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"
@@ -25,7 +30,43 @@ resources/authgear/templates/en/web/authflowv2/forgot_password.html:103:30: temp
 resources/authgear/templates/en/web/authflowv2/forgot_password.html:159:26: template translation is forbidden: `__forgot_password_alternative`
 resources/authgear/templates/en/web/authflowv2/layout.html:5:14: template translation is forbidden: `widget`
 resources/authgear/templates/en/web/authflowv2/login.html:252:37: translation key not defined: "%s-icon"
+resources/authgear/templates/en/web/authflowv2/settings_biometric.html:33:24: translation key not defined: "__settings_biometric_item_remove_btn"
+resources/authgear/templates/en/web/authflowv2/settings_biometric.html:43:23: translation key not defined: "__settings_biometric_dialog_remove_input"
+resources/authgear/templates/en/web/authflowv2/settings_identity_change_primary_email.html:29:19: translation key not defined: "__settgins_identity_change_primary_email_item_label"
+resources/authgear/templates/en/web/authflowv2/settings_identity_change_primary_phone.html:28:21: translation key not defined: "__settgins_identity_change_primary_phone_item_label"
+resources/authgear/templates/en/web/authflowv2/settings_identity_edit_email.html:33:22: translation key not defined: "__settings_identity_edit_email_inline_breakable"
+resources/authgear/templates/en/web/authflowv2/settings_identity_edit_phone.html:38:22: translation key not defined: "__settings_identity_edit_phone_inline_bold"
+resources/authgear/templates/en/web/authflowv2/settings_identity_list_email.html:40:31: translation key not defined: "settings_identity_email_verification_label"
+resources/authgear/templates/en/web/authflowv2/settings_identity_list_email.html:71:26: translation key not defined: "settings_identity_email_change_button"
+resources/authgear/templates/en/web/authflowv2/settings_identity_list_phone.html:40:31: translation key not defined: "settings_identity_phone_verification_label"
+resources/authgear/templates/en/web/authflowv2/settings_identity_list_phone.html:71:26: translation key not defined: "settings_identity_phone_change_button"
+resources/authgear/templates/en/web/authflowv2/settings_identity_verify_email.html:21:30: translation key not defined: "__settings_identity_verify_mask_claim"
+resources/authgear/templates/en/web/authflowv2/settings_identity_verify_phone.html:21:32: translation key not defined: "__settings_identity_verify_phone_inline_breakable"
+resources/authgear/templates/en/web/authflowv2/settings_identity_view_email.html:57:24: translation key not defined: "settings_identity_email_verification_button"
+resources/authgear/templates/en/web/authflowv2/settings_identity_view_email.html:70:23: translation key not defined: "settings_identity_email_verification_label"
+resources/authgear/templates/en/web/authflowv2/settings_identity_view_email.html:73:24: translation key not defined: "settings_identity_email_edit_button"
+resources/authgear/templates/en/web/authflowv2/settings_identity_view_email.html:97:22: translation key not defined: "__settings_identity_view_email_inline_breakable"
+resources/authgear/templates/en/web/authflowv2/settings_identity_view_email.html:100:23: translation key not defined: "__settings_identity_view_email_remove_dialog_form_content"
+resources/authgear/templates/en/web/authflowv2/settings_identity_view_phone.html:53:24: translation key not defined: "settings_identity_phone_verification_button"
+resources/authgear/templates/en/web/authflowv2/settings_identity_view_phone.html:66:23: translation key not defined: "settings_identity_phone_verification_label"
+resources/authgear/templates/en/web/authflowv2/settings_identity_view_phone.html:69:24: translation key not defined: "settings_identity_phone_edit_button"
+resources/authgear/templates/en/web/authflowv2/settings_identity_view_phone.html:94:22: translation key not defined: "__settings_identity_view_phone_inline_breakable"
+resources/authgear/templates/en/web/authflowv2/settings_identity_view_phone.html:97:23: translation key not defined: "__settings_identity_view_phone_remove_dialog_form_content"
+resources/authgear/templates/en/web/authflowv2/settings_identity_view_username.html:18:24: translation key not defined: "__settings_identity_view_username_edit_button"
+resources/authgear/templates/en/web/authflowv2/settings_identity_view_username.html:45:21: translation key not defined: "__settings_identity_view_username_delete_username_form_content"
 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:22:16: template translation is forbidden: `__settings_mfa_item`
+resources/authgear/templates/en/web/authflowv2/settings_mfa.html:37:16: template translation is forbidden: `__settings_mfa_item`
+resources/authgear/templates/en/web/authflowv2/settings_mfa.html:52:16: template translation is forbidden: `__settings_mfa_item`
+resources/authgear/templates/en/web/authflowv2/settings_mfa.html:67:16: template translation is forbidden: `__settings_mfa_item`
+resources/authgear/templates/en/web/authflowv2/settings_mfa.html:136:23: translation key not defined: "__settings_mfa_item_status"
+resources/authgear/templates/en/web/authflowv2/settings_mfa_password.html:25:31: translation key not defined: "__settings_mfa_password_description"
+resources/authgear/templates/en/web/authflowv2/settings_oob_otp.html:30:31: translation key not defined: "__settings_oob_otp_item_added_at"
+resources/authgear/templates/en/web/authflowv2/settings_oob_otp.html:31:32: translation key not defined: "__settings_oob_otp_item_delete_button"
+resources/authgear/templates/en/web/authflowv2/settings_oob_otp.html:39:31: translation key not defined: "/settings/mfa/new_oob_otp_%s"
+resources/authgear/templates/en/web/authflowv2/settings_passkey.html:25:24: translation key not defined: "__settings_passkey_item_description"
+resources/authgear/templates/en/web/authflowv2/settings_passkey.html:26:24: translation key not defined: "__settings_passkey_item_remove_btn"
+resources/authgear/templates/en/web/authflowv2/settings_passkey.html:34:21: translation key not defined: "__settings_passkey_dialog_remove_input"
 resources/authgear/templates/en/web/authflowv2/settings_profile.html:29:18: template translation is forbidden: `__settings_profile_item`
 resources/authgear/templates/en/web/authflowv2/settings_profile.html:51:18: template translation is forbidden: `__settings_profile_item`
 resources/authgear/templates/en/web/authflowv2/settings_profile.html:68:22: translation key not defined: "__settings_profile_date_item"
@@ -35,9 +76,27 @@ resources/authgear/templates/en/web/authflowv2/settings_profile.html:89:18: temp
 resources/authgear/templates/en/web/authflowv2/settings_profile.html:107:18: template translation is forbidden: `__settings_profile_item`
 resources/authgear/templates/en/web/authflowv2/settings_profile.html:123:23: translation key not defined: "__settings_profile_locale_item"
 resources/authgear/templates/en/web/authflowv2/settings_profile.html:125:18: template translation is forbidden: `__settings_profile_item`
-resources/authgear/templates/en/web/authflowv2/settings_profile.html:174:22: invalid translation key: "$label"
+resources/authgear/templates/en/web/authflowv2/settings_profile.html:139:22: translation key not defined: "custom-attribute-label-%s"
+resources/authgear/templates/en/web/authflowv2/settings_profile.html:140:20: invalid translation key: "$labelKey"
+resources/authgear/templates/en/web/authflowv2/settings_profile.html:144:21: invalid translation key: "$labelKey"
+resources/authgear/templates/en/web/authflowv2/settings_profile.html:147:18: template translation is forbidden: `__settings_profile_item`
+resources/authgear/templates/en/web/authflowv2/settings_profile.html:196:22: invalid translation key: "$label"
+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:70:9: translation key not defined: "__settings_profile_edit_custom_numerical_range_label"
+resources/authgear/templates/en/web/authflowv2/settings_profile_edit_custom.html:83:9: translation key not defined: "__settings_profile_edit_custom_numerical_range_label"
+resources/authgear/templates/en/web/authflowv2/settings_profile_edit_custom.html:91:30: translation key not defined: "custom-attribute-enum-label-%s-%s"
+resources/authgear/templates/en/web/authflowv2/settings_profile_edit_custom.html:92:28: invalid translation key: "$enum_label_key"
+resources/authgear/templates/en/web/authflowv2/settings_profile_edit_custom.html:95:28: invalid translation key: "$enum_label_key"
 resources/authgear/templates/en/web/authflowv2/settings_profile_edit_gender.html:57:33: translation key not defined: "__settings_gender_edit_custom_gender_input"
+resources/authgear/templates/en/web/authflowv2/settings_sessions.html:19:21: translation key not defined: "__settings_session_item_remove_btn"
+resources/authgear/templates/en/web/authflowv2/settings_sessions.html:25:23: translation key not defined: "__settings_session_dialog_remove_input"
+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/settings_sessions.html:66:21: translation key not defined: "__settings_session_dialog_remove_all_input"
+resources/authgear/templates/en/web/authflowv2/settings_totp.html:22:31: translation key not defined: "__settings_totp_item_added_at"
+resources/authgear/templates/en/web/authflowv2/settings_totp.html:23:32: translation key not defined: "__settings_totp_item_delete_button"
 resources/authgear/templates/en/web/authflowv2/signup.html:91:26: translation key not defined: "v2.page.signup.continue.subtitle-%v"
 resources/authgear/templates/en/web/authflowv2/signup.html:264:35: translation key not defined: "%s-icon"
-41 errors found
+100 errors found
 exit status 1

authui/src/authflowv2.ts

@@ -50,6 +50,8 @@ import { DialogController } from "./authflowv2/dialog";
 import { BotProtectionStandalonePageController } from "./authflowv2/botprotection/botProtectionStandalonePage";
 import { ImagePickerController } from "./imagepicker";
 import { SelectInputController } from "./authflowv2/selectInput";
+import { SettingsDialogController } from "./authflowv2/settingsDialog";
+import { AccountDeletionController } from "./accountdeletion";
 
 axios.defaults.withCredentials = true;
 
@@ -96,6 +98,7 @@ Stimulus.register("image-picker", ImagePickerController);
 
 Stimulus.register("text-field", TextFieldController);
 Stimulus.register("dialog", DialogController);
+Stimulus.register("settings-dialog", SettingsDialogController);
 Stimulus.register("overlay", OverlayController);
 Stimulus.register("loading", LoadingController);
 Stimulus.register("new-password-field", NewPasswordFieldController);
@@ -135,4 +138,6 @@ Stimulus.register("bot-protection", BotProtectionController);
 Stimulus.register("bot-protection-dialog", BotProtectionDialogController);
 Stimulus.register("select-input", SelectInputController);
 
+Stimulus.register("account-deletion", AccountDeletionController);
+
 injectCSSAttrs(document.documentElement);

authui/src/authflowv2/base.css

@@ -51,6 +51,10 @@
     /* --color-primary-theme-lighter: #d8e6fd; */
     /* --color-primary-theme-lighter-alt: #f5f9fe; */
 
+    /* secondary */
+    --color-secondary-theme-primary: #ff295b;
+    --color-secondary-theme-dark: #c4003d;
+
     /* Neutral colors is tonal palette */
     /* https://m3.material.io/styles/color/system/how-the-system-works#395813c8-b314-48d1-bb55-266f421eb3a4 */
     /* neutral */

authui/src/authflowv2/components.css

@@ -33,6 +33,7 @@
 @import "./components/dialog.css";
 @import "./components/watermark.css";
 @import "./components/settings-content.css";
+@import "./components/settings-headline.css";
 @import "./components/settings-title.css";
 @import "./components/settings-description.css";
 @import "./components/settings-item.css";
@@ -41,3 +42,7 @@
 @import "./components/settings-user-profile-pic.css";
 @import "./components/select-input.css";
 @import "./components/direct-access-layout.css";
+@import "./components/settings-link-button.css";
+@import "./components/settings-text-color.css";
+@import "./components/settings-action-item.css";
+@import "./components/settings-dialog.css";

authui/src/authflowv2/components/body-text.css

@@ -18,7 +18,7 @@
     --body-text__letter-spacing--sm: var(
       --typography-body-small__letter-spacing
     );
-    --body-text__font-weight--sm: var(--typography-body-medium__font-weight);
+    --body-text__font-weight--sm: var(--typography-body-small__font-weight);
 
     /* sm link */
     --body-text__font-family--link-sm: var(

authui/src/authflowv2/components/otp-input.css

@@ -80,6 +80,7 @@
     @apply items-stretch;
     @apply gap-x-[var(--otp-input\_\_spacing)];
     @apply pointer-events-none;
+    @apply justify-center;
   }
 
   .otp-input__digit {

authui/src/authflowv2/components/primary-button.css

@@ -104,4 +104,11 @@
   .primary-btn--success {
     background-color: var(--color-success);
   }
+
+  .primary-btn--destructive {
+    @apply primary-btn;
+    --primary-btn__bg-color: var(--color-secondary-theme-primary);
+    --primary-btn__bg-color--hover: var(--color-secondary-theme-dark);
+    --primary-btn__bg-color--active: var(--color-secondary-theme-dark);
+  }
 }

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

@@ -0,0 +1,115 @@
+@layer components {
+  :root {
+    --settings-action-item__description-color: var(--body-text__text-color);
+    --settings-action-item__description-font-family: var(
+      --body-text__font-family--md
+    );
+    --settings-action-item__description-font-size: var(
+      --body-text__font-size--md
+    );
+    --settings-action-item__description-line-height: var(
+      --body-text__line-height--md
+    );
+    --settings-action-item__description-letter-spacing: var(
+      --body-text__letter-spacing--md
+    );
+    --settings-action-item__description-font-weight: var(
+      --body-text__font-weight--md
+    );
+
+    --settings-action-item__icon-color--pale: var(--color-neutral-200);
+  }
+
+  .settings-action-item__container {
+    @apply flex;
+    --settings-action-item-padding-x: 0.5rem;
+    --settings-action-item-padding-y: 1rem;
+    color: var(--settings-item__text-color);
+    border-color: var(--settings-item__border-color);
+    border-bottom-width: 1px;
+    border-style: solid;
+
+    --icon-placeholder-display: none;
+    --icon-size: 1.5rem;
+    &.settings-action-item__container-with-icon {
+      --icon-placeholder-display: block;
+    }
+  }
+
+  .settings-action-item__container {
+    &.settings-action-item__container-with-extra-content {
+      .settings-action-item__content-container {
+        @apply pb-2;
+      }
+    }
+  }
+
+  .settings-action-item__content-container {
+    @apply block;
+    @apply px-[var(--settings-action-item-padding-x)];
+    @apply py-[var(--settings-action-item-padding-y)];
+  }
+
+  .settings-action-item__label-container {
+    @apply flex gap-x-2;
+  }
+
+  .settings-action-item__description-container {
+    @apply text-start;
+    @apply flex gap-x-2 items-center justify-start;
+    @apply mt-1;
+    &::before {
+      content: "";
+      width: var(--icon-size);
+      display: var(--icon-placeholder-display);
+    }
+
+    color: var(--settings-action-item__description-color);
+    font-family: var(--settings-action-item__description-font-family);
+    font-size: var(--settings-action-item__description-font-size);
+    line-height: var(--settings-action-item__description-line-height);
+    letter-spacing: var(--settings-action-item__description-letter-spacing);
+    font-weight: var(--settings-action-item__description-font-weight);
+  }
+
+  .settings-action-item__extra-content-container {
+    @apply flex gap-x-2 items-center;
+    @apply px-[var(--settings-action-item-padding-x)];
+    @apply pb-[var(--settings-action-item-padding-y)];
+    &::before {
+      content: "";
+      width: var(--icon-size);
+      display: var(--icon-placeholder-display);
+    }
+  }
+
+  .settings-action-item__icon {
+    @apply settings-item-icon;
+  }
+
+  .settings-action-item__action-button-container {
+    @apply py-[var(--settings-action-item-padding-y)];
+  }
+
+  .settings-action-item__arrow-container {
+    @apply flex flex-none items-center;
+    @apply py-[var(--settings-action-item-padding-y)];
+  }
+
+  .settings-action-item__label {
+    @apply settings-item__label;
+    @apply break-all;
+  }
+
+  .settings-action-item__icon--pale {
+    @apply settings-item-icon;
+    line-height: normal;
+    color: var(--settings-action-item__icon-color--pale);
+  }
+
+  .settings-action-item__icon--pale {
+    @apply settings-item-icon;
+    line-height: normal;
+    color: var(--settings-action-item__icon-color--pale);
+  }
+}