@workos-inc/widgets 1.7.2 → 1.8.0

package/dist/esm/lib/user-actions-dropdown.js

@@ -7,10 +7,13 @@ import { EditUserRoleDialog } from "./edit-user-role-dialog.js";
 import { DropdownMenu } from "./elements.js";
 import { ResendInviteDialog } from "./resend-invite-dialog.js";
 import { RevokeInviteDialog } from "./revoke-invite-dialog.js";
+import { Translation } from "./i18n/translation.js";
+import { useTranslation } from "./i18n/use-translation.js";
 const UserActionsDropdown = ({
   user,
   children
 }) => {
+  const translate = useTranslation();
   const rolesAndConfigQuery = useRolesAndConfig({
     query: {
       initialData: { roles: [], multipleRolesEnabled: false }
@@ -33,8 +36,26 @@ const UserActionsDropdown = ({
           {
             onSelect: () => setOpenDialog("edit-role"),
             disabled: rolesAndConfigQuery.isLoading || rolesAndConfigQuery.isSuccess && roles.length <= 1,
-            title: rolesAndConfigQuery.isSuccess && roles.length <= 1 ? "You cannot update the role for this user as there is only one role available." : void 0,
-            children: `Edit role${isMultipleRolesEnabled ? "s" : ""}`
+            title: rolesAndConfigQuery.isSuccess && roles.length <= 1 ? translate({
+              defaultMessage: "You cannot update the role for this user as there is only one role available.",
+              id: "rzvafM",
+              description: "Tooltip explaining why role editing is disabled"
+            }) : void 0,
+            children: isMultipleRolesEnabled ? /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Edit roles",
+                id: "yjbD6m",
+                description: "Menu option to edit user roles (plural)"
+              }
+            ) : /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Edit role",
+                id: "NJqcnW",
+                description: "Menu option to edit user role (singular)"
+              }
+            )
           },
           "edit-role"
         )
@@ -46,7 +67,14 @@ const UserActionsDropdown = ({
           DropdownMenu.Item,
           {
             onSelect: () => setOpenDialog("resend-invite"),
-            children: "Resend invitation"
+            children: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Resend invitation",
+                id: "1fzoWe",
+                description: "Menu option to resend user invitation"
+              }
+            )
           },
           "resend-invite"
         )
@@ -59,7 +87,14 @@ const UserActionsDropdown = ({
           {
             variant: "destructive",
             onSelect: () => setOpenDialog("revoke-invite"),
-            children: "Revoke invitation"
+            children: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Revoke invitation",
+                id: "0Ie4dM",
+                description: "Menu option to revoke user invitation"
+              }
+            )
           },
           "revoke-invite"
         )
@@ -72,7 +107,14 @@ const UserActionsDropdown = ({
           {
             variant: "destructive",
             onSelect: () => setOpenDialog("revoke-membership"),
-            children: "Remove user"
+            children: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Remove user",
+                id: "qGSR1P",
+                description: "Menu option to remove user from organization"
+              }
+            )
           },
           "revoke-membership"
         )
@@ -82,7 +124,13 @@ const UserActionsDropdown = ({
       actions: actions2,
       items: items2
     };
-  }, [rolesAndConfigQuery, user.actions, isMultipleRolesEnabled, roles]);
+  }, [
+    rolesAndConfigQuery,
+    user.actions,
+    isMultipleRolesEnabled,
+    roles,
+    translate
+  ]);
   if (user.isLoggedInUser || items.length === 0) {
     return null;
   }

package/dist/esm/lib/user-actions-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/user-actions-dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Member, useRolesAndConfig } from \"../api/endpoint.js\";\nimport { DeleteUserDialog } from \"./delete-user-dialog.js\";\nimport { EditUserRoleDialog } from \"./edit-user-role-dialog.js\";\nimport { DropdownMenu } from \"./elements.js\";\nimport { ResendInviteDialog } from \"./resend-invite-dialog.js\";\nimport { RevokeInviteDialog } from \"./revoke-invite-dialog.js\";\n\ninterface UserActionsDropdownProps {\n  user: Member;\n  children: React.ReactNode;\n}\n\ntype UserActionDialog =\n  | \"revoke-membership\"\n  | \"revoke-invite\"\n  | \"resend-invite\"\n  | \"edit-role\";\n\nexport const UserActionsDropdown = ({\n  user,\n  children,\n}: UserActionsDropdownProps) => {\n  const rolesAndConfigQuery = useRolesAndConfig({\n    query: {\n      initialData: { roles: [], multipleRolesEnabled: false },\n    },\n  });\n  const { roles, multipleRolesEnabled: isMultipleRolesEnabled } =\n    rolesAndConfigQuery.data;\n  const [openDialog, setOpenDialog] = React.useState<UserActionDialog | null>(\n    null,\n  );\n\n  /**\n   * Assigns a key for each dialog based on its open state to ensure its\n   * internal state is cleared when it is closed.\n   */\n  function getDialogKey(dialog: UserActionDialog) {\n    return `${dialog}-${openDialog === dialog}-${user.id}`;\n  }\n\n  const { actions, items } = React.useMemo(() => {\n    const actions = new Set(user.actions);\n    const items: React.ReactElement[] = [];\n    if (actions.has(\"edit-role\")) {\n      items.push(\n        <DropdownMenu.Item\n          key=\"edit-role\"\n          onSelect={() => setOpenDialog(\"edit-role\")}\n          disabled={\n            rolesAndConfigQuery.isLoading ||\n            (rolesAndConfigQuery.isSuccess && roles.length <= 1)\n          }\n          title={\n            rolesAndConfigQuery.isSuccess && roles.length <= 1\n              ? \"You cannot update the role for this user as there is only one role available.\"\n              : undefined\n          }\n        >\n          {`Edit role${isMultipleRolesEnabled ? \"s\" : \"\"}`}\n        </DropdownMenu.Item>,\n      );\n    }\n    if (actions.has(\"resend-invite\")) {\n      items.push(\n        <DropdownMenu.Item\n          key=\"resend-invite\"\n          onSelect={() => setOpenDialog(\"resend-invite\")}\n        >\n          Resend invitation\n        </DropdownMenu.Item>,\n      );\n    }\n    if (actions.has(\"revoke-invite\")) {\n      items.push(\n        <DropdownMenu.Item\n          variant=\"destructive\"\n          key=\"revoke-invite\"\n          onSelect={() => setOpenDialog(\"revoke-invite\")}\n        >\n          Revoke invitation\n        </DropdownMenu.Item>,\n      );\n    }\n    if (actions.has(\"revoke-membership\")) {\n      items.push(\n        <DropdownMenu.Item\n          variant=\"destructive\"\n          key=\"revoke-membership\"\n          onSelect={() => setOpenDialog(\"revoke-membership\")}\n        >\n          Remove user\n        </DropdownMenu.Item>,\n      );\n    }\n    return {\n      actions,\n      items,\n    };\n  }, [rolesAndConfigQuery, user.actions, isMultipleRolesEnabled, roles]);\n\n  if (user.isLoggedInUser || items.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <DropdownMenu.Root>\n        <DropdownMenu.Trigger>{children}</DropdownMenu.Trigger>\n        <DropdownMenu.Content size=\"2\" align=\"end\">\n          {items}\n        </DropdownMenu.Content>\n      </DropdownMenu.Root>\n\n      {actions.has(\"edit-role\") && (\n        <EditUserRoleDialog\n          key={getDialogKey(\"edit-role\")}\n          user={user}\n          open={openDialog === \"edit-role\"}\n          onOpenChange={(open) => !open && setOpenDialog(null)}\n        />\n      )}\n\n      {actions.has(\"revoke-membership\") && (\n        <DeleteUserDialog\n          key={getDialogKey(\"revoke-membership\")}\n          user={user}\n          open={openDialog === \"revoke-membership\"}\n          onOpenChange={(open) => !open && setOpenDialog(null)}\n        />\n      )}\n\n      {actions.has(\"revoke-invite\") && (\n        <RevokeInviteDialog\n          key={getDialogKey(\"revoke-invite\")}\n          user={user}\n          open={openDialog === \"revoke-invite\"}\n          onOpenChange={(open) => !open && setOpenDialog(null)}\n        />\n      )}\n\n      {actions.has(\"resend-invite\") && (\n        <ResendInviteDialog\n          key={getDialogKey(\"resend-invite\")}\n          user={user}\n          open={openDialog === \"resend-invite\"}\n          onOpenChange={(open) => !open && setOpenDialog(null)}\n        />\n      )}\n    </>\n  );\n};\n"],"mappings":"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","names":["actions","items"]}
+{"version":3,"sources":["../../../src/lib/user-actions-dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Member, useRolesAndConfig } from \"../api/endpoint.js\";\nimport { DeleteUserDialog } from \"./delete-user-dialog.js\";\nimport { EditUserRoleDialog } from \"./edit-user-role-dialog.js\";\nimport { DropdownMenu } from \"./elements.js\";\nimport { ResendInviteDialog } from \"./resend-invite-dialog.js\";\nimport { RevokeInviteDialog } from \"./revoke-invite-dialog.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useTranslation } from \"./i18n/use-translation.js\";\n\ninterface UserActionsDropdownProps {\n  user: Member;\n  children: React.ReactNode;\n}\n\ntype UserActionDialog =\n  | \"revoke-membership\"\n  | \"revoke-invite\"\n  | \"resend-invite\"\n  | \"edit-role\";\n\nexport const UserActionsDropdown = ({\n  user,\n  children,\n}: UserActionsDropdownProps) => {\n  const translate = useTranslation();\n  const rolesAndConfigQuery = useRolesAndConfig({\n    query: {\n      initialData: { roles: [], multipleRolesEnabled: false },\n    },\n  });\n  const { roles, multipleRolesEnabled: isMultipleRolesEnabled } =\n    rolesAndConfigQuery.data;\n  const [openDialog, setOpenDialog] = React.useState<UserActionDialog | null>(\n    null,\n  );\n\n  /**\n   * Assigns a key for each dialog based on its open state to ensure its\n   * internal state is cleared when it is closed.\n   */\n  function getDialogKey(dialog: UserActionDialog) {\n    return `${dialog}-${openDialog === dialog}-${user.id}`;\n  }\n\n  const { actions, items } = React.useMemo(() => {\n    const actions = new Set(user.actions);\n    const items: React.ReactElement[] = [];\n    if (actions.has(\"edit-role\")) {\n      items.push(\n        <DropdownMenu.Item\n          key=\"edit-role\"\n          onSelect={() => setOpenDialog(\"edit-role\")}\n          disabled={\n            rolesAndConfigQuery.isLoading ||\n            (rolesAndConfigQuery.isSuccess && roles.length <= 1)\n          }\n          title={\n            rolesAndConfigQuery.isSuccess && roles.length <= 1\n              ? translate({\n                  defaultMessage:\n                    \"You cannot update the role for this user as there is only one role available.\",\n                  id: \"rzvafM\",\n                  description:\n                    \"Tooltip explaining why role editing is disabled\",\n                })\n              : undefined\n          }\n        >\n          {isMultipleRolesEnabled ? (\n            <Translation\n              defaultMessage=\"Edit roles\"\n              id=\"yjbD6m\"\n              description=\"Menu option to edit user roles (plural)\"\n            />\n          ) : (\n            <Translation\n              defaultMessage=\"Edit role\"\n              id=\"NJqcnW\"\n              description=\"Menu option to edit user role (singular)\"\n            />\n          )}\n        </DropdownMenu.Item>,\n      );\n    }\n    if (actions.has(\"resend-invite\")) {\n      items.push(\n        <DropdownMenu.Item\n          key=\"resend-invite\"\n          onSelect={() => setOpenDialog(\"resend-invite\")}\n        >\n          <Translation\n            defaultMessage=\"Resend invitation\"\n            id=\"1fzoWe\"\n            description=\"Menu option to resend user invitation\"\n          />\n        </DropdownMenu.Item>,\n      );\n    }\n    if (actions.has(\"revoke-invite\")) {\n      items.push(\n        <DropdownMenu.Item\n          variant=\"destructive\"\n          key=\"revoke-invite\"\n          onSelect={() => setOpenDialog(\"revoke-invite\")}\n        >\n          <Translation\n            defaultMessage=\"Revoke invitation\"\n            id=\"0Ie4dM\"\n            description=\"Menu option to revoke user invitation\"\n          />\n        </DropdownMenu.Item>,\n      );\n    }\n    if (actions.has(\"revoke-membership\")) {\n      items.push(\n        <DropdownMenu.Item\n          variant=\"destructive\"\n          key=\"revoke-membership\"\n          onSelect={() => setOpenDialog(\"revoke-membership\")}\n        >\n          <Translation\n            defaultMessage=\"Remove user\"\n            id=\"qGSR1P\"\n            description=\"Menu option to remove user from organization\"\n          />\n        </DropdownMenu.Item>,\n      );\n    }\n    return {\n      actions,\n      items,\n    };\n  }, [\n    rolesAndConfigQuery,\n    user.actions,\n    isMultipleRolesEnabled,\n    roles,\n    translate,\n  ]);\n\n  if (user.isLoggedInUser || items.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <DropdownMenu.Root>\n        <DropdownMenu.Trigger>{children}</DropdownMenu.Trigger>\n        <DropdownMenu.Content size=\"2\" align=\"end\">\n          {items}\n        </DropdownMenu.Content>\n      </DropdownMenu.Root>\n\n      {actions.has(\"edit-role\") && (\n        <EditUserRoleDialog\n          key={getDialogKey(\"edit-role\")}\n          user={user}\n          open={openDialog === \"edit-role\"}\n          onOpenChange={(open) => !open && setOpenDialog(null)}\n        />\n      )}\n\n      {actions.has(\"revoke-membership\") && (\n        <DeleteUserDialog\n          key={getDialogKey(\"revoke-membership\")}\n          user={user}\n          open={openDialog === \"revoke-membership\"}\n          onOpenChange={(open) => !open && setOpenDialog(null)}\n        />\n      )}\n\n      {actions.has(\"revoke-invite\") && (\n        <RevokeInviteDialog\n          key={getDialogKey(\"revoke-invite\")}\n          user={user}\n          open={openDialog === \"revoke-invite\"}\n          onOpenChange={(open) => !open && setOpenDialog(null)}\n        />\n      )}\n\n      {actions.has(\"resend-invite\") && (\n        <ResendInviteDialog\n          key={getDialogKey(\"resend-invite\")}\n          user={user}\n          open={openDialog === \"resend-invite\"}\n          onOpenChange={(open) => !open && setOpenDialog(null)}\n        />\n      )}\n    </>\n  );\n};\n"],"mappings":"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","names":["actions","items"]}

package/dist/esm/lib/user-profile.js

@@ -18,6 +18,7 @@ import {
 } from "./utils.js";
 import { OAuthIcon, getOAuthName } from "./oauth-icons.js";
 import { GenericError } from "./generic-error.js";
+import { Translation } from "./i18n/translation.js";
 const UserProfile = ({
   userData: user,
   ...domProps
@@ -26,7 +27,14 @@ const UserProfile = ({
   return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("resolved", domProps), children: /* @__PURE__ */ jsxs(DataList.Root, { children: [
     user.profilePictureUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(DataList.Item, { align: "center", children: [
-        /* @__PURE__ */ jsx(DataList.Label, { minWidth: "220px", highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: "Profile picture" }) }),
+        /* @__PURE__ */ jsx(DataList.Label, { minWidth: "220px", highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "Profile picture",
+            description: "Label for the user's avatar",
+            id: "RvLqCQ"
+          }
+        ) }) }),
         /* @__PURE__ */ jsx(DataList.Value, { children: /* @__PURE__ */ jsx(
           Avatar,
           {
@@ -39,7 +47,14 @@ const UserProfile = ({
       /* @__PURE__ */ jsx(ListSeparator, {})
     ] }),
     /* @__PURE__ */ jsxs(DataList.Item, { align: "center", children: [
-      /* @__PURE__ */ jsx(DataList.Label, { highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: "Full name" }) }),
+      /* @__PURE__ */ jsx(DataList.Label, { highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Full name",
+          id: "kkBScm",
+          description: "Label for user's full name field"
+        }
+      ) }) }),
       /* @__PURE__ */ jsx(DataList.Value, { children: /* @__PURE__ */ jsxs(
         Flex,
         {
@@ -53,23 +68,51 @@ const UserProfile = ({
               {
                 color: "gray",
                 style: { color: "var(--gray-10)", cursor: "default" },
-                children: "Not set"
+                children: /* @__PURE__ */ jsx(
+                  Translation,
+                  {
+                    defaultMessage: "Not set",
+                    id: "i4vzAY",
+                    description: "Placeholder text when user's name is not set"
+                  }
+                )
               }
             ) }),
-            /* @__PURE__ */ jsx(EditUserProfileDialog, { user, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Edit" }) })
+            /* @__PURE__ */ jsx(EditUserProfileDialog, { user, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Edit",
+                id: "5bhXUz",
+                description: "Button text to edit user profile"
+              }
+            ) }) })
           ]
         }
       ) })
     ] }),
     /* @__PURE__ */ jsx(ListSeparator, {}),
     /* @__PURE__ */ jsxs(DataList.Item, { align: "center", children: [
-      /* @__PURE__ */ jsx(DataList.Label, { highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: "Email address" }) }),
+      /* @__PURE__ */ jsx(DataList.Label, { highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Email address",
+          id: "nLk5pa",
+          description: "Label for user's email address field"
+        }
+      ) }) }),
       /* @__PURE__ */ jsx(DataList.Value, { children: /* @__PURE__ */ jsx(Flex, { align: "center", minHeight: "var(--space-6)", children: /* @__PURE__ */ jsx(Text, { size: "2", children: user.email }) }) })
     ] }),
     oauthAccounts.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(ListSeparator, {}),
       /* @__PURE__ */ jsxs(DataList.Item, { children: [
-        /* @__PURE__ */ jsx(DataList.Label, { highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: "Connected accounts" }) }),
+        /* @__PURE__ */ jsx(DataList.Label, { highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "Connected accounts",
+            id: "AW/A69",
+            description: "Label for user's connected OAuth accounts"
+          }
+        ) }) }),
         /* @__PURE__ */ jsx(DataList.Value, { children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "2", children: oauthAccounts.map(([account, data]) => /* @__PURE__ */ jsx(
           OAuthAccount,
           {
@@ -85,7 +128,14 @@ const UserProfile = ({
 const UserProfileLoading = (props) => {
   return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("loading", props), children: /* @__PURE__ */ jsxs(DataList.Root, { children: [
     /* @__PURE__ */ jsxs(DataList.Item, { align: "center", children: [
-      /* @__PURE__ */ jsx(DataList.Label, { minWidth: "220px", highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: /* @__PURE__ */ jsx(Skeleton, { children: "Full name" }) }) }),
+      /* @__PURE__ */ jsx(DataList.Label, { minWidth: "220px", highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Full name",
+          id: "nc7fru",
+          description: "Loading placeholder for full name label"
+        }
+      ) }) }) }),
       /* @__PURE__ */ jsx(DataList.Value, { children: /* @__PURE__ */ jsx(
         Flex,
         {
@@ -93,14 +143,35 @@ const UserProfileLoading = (props) => {
           justify: "between",
           width: "100%",
           minHeight: "var(--space-6)",
-          children: /* @__PURE__ */ jsx(Text, { size: "2", children: /* @__PURE__ */ jsx(Skeleton, { children: "Full name" }) })
+          children: /* @__PURE__ */ jsx(Text, { size: "2", children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Full name",
+              id: "6GcWa2",
+              description: "Loading placeholder for full name value"
+            }
+          ) }) })
         }
       ) })
     ] }),
     /* @__PURE__ */ jsx(ListSeparator, {}),
     /* @__PURE__ */ jsxs(DataList.Item, { align: "center", children: [
-      /* @__PURE__ */ jsx(DataList.Label, { highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: /* @__PURE__ */ jsx(Skeleton, { children: "Email address" }) }) }),
-      /* @__PURE__ */ jsx(DataList.Value, { children: /* @__PURE__ */ jsx(Flex, { align: "center", minHeight: "var(--space-6)", children: /* @__PURE__ */ jsx(Text, { size: "2", children: /* @__PURE__ */ jsx(Skeleton, { children: "Email address" }) }) }) })
+      /* @__PURE__ */ jsx(DataList.Label, { highContrast: true, children: /* @__PURE__ */ jsx(Strong, { children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Email address",
+          id: "gjqw+H",
+          description: "Loading placeholder for email address label"
+        }
+      ) }) }) }),
+      /* @__PURE__ */ jsx(DataList.Value, { children: /* @__PURE__ */ jsx(Flex, { align: "center", minHeight: "var(--space-6)", children: /* @__PURE__ */ jsx(Text, { size: "2", children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Email address",
+          id: "75F+g5",
+          description: "Loading placeholder for email address value"
+        }
+      ) }) }) }) })
     ] })
   ] }) });
 };

package/dist/esm/lib/user-profile.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/user-profile.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Box,\n  Card,\n  DataList,\n  Flex,\n  Inset,\n  Separator,\n  Strong,\n  Text,\n} from \"@radix-ui/themes\";\nimport { Avatar, Button, Skeleton } from \"./elements.js\";\nimport { Me, OAuthProfile, MeOauthProfiles } from \"../api/endpoint.js\";\nimport { EditUserProfileDialog } from \"./edit-user-profile-dialog.js\";\nimport {\n  getBestName,\n  getDomProps,\n  type WidgetRootState,\n  type WidgetRootDomProps,\n} from \"./utils.js\";\nimport { OAuthIcon, getOAuthName, type OAuthAccount } from \"./oauth-icons.js\";\nimport { GenericError } from \"./generic-error.js\";\n\ninterface UserProfileProps extends WidgetRootDomProps {\n  userData: Me;\n}\n\nconst UserProfile: React.FC<UserProfileProps> = ({\n  userData: user,\n  ...domProps\n}) => {\n  const oauthAccounts = user.oauthProfiles\n    ? (Object.entries(user.oauthProfiles) as [\n        keyof Exclude<MeOauthProfiles, null>,\n        OAuthProfile,\n      ][])\n    : [];\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"resolved\", domProps)}>\n      <DataList.Root>\n        {user.profilePictureUrl && (\n          <>\n            <DataList.Item align=\"center\">\n              <DataList.Label minWidth=\"220px\" highContrast>\n                <Strong>Profile picture</Strong>\n              </DataList.Label>\n              <DataList.Value>\n                <Avatar\n                  size=\"2\"\n                  fallback={<FallbackUserIcon />}\n                  src={user.profilePictureUrl}\n                />\n              </DataList.Value>\n            </DataList.Item>\n\n            <ListSeparator />\n          </>\n        )}\n\n        <DataList.Item align=\"center\">\n          <DataList.Label highContrast>\n            <Strong>Full name</Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex\n              align=\"center\"\n              justify=\"between\"\n              width=\"100%\"\n              minHeight=\"var(--space-6)\"\n            >\n              <Text size=\"2\">\n                {getBestName(user) || (\n                  <Text\n                    color=\"gray\"\n                    style={{ color: \"var(--gray-10)\", cursor: \"default\" }}\n                  >\n                    Not set\n                  </Text>\n                )}\n              </Text>\n\n              <EditUserProfileDialog user={user}>\n                <Button variant=\"secondary\">Edit</Button>\n              </EditUserProfileDialog>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n\n        <ListSeparator />\n\n        <DataList.Item align=\"center\">\n          <DataList.Label highContrast>\n            <Strong>Email address</Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex align=\"center\" minHeight=\"var(--space-6)\">\n              <Text size=\"2\">{user.email}</Text>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n\n        {oauthAccounts.length > 0 && (\n          <>\n            <ListSeparator />\n\n            <DataList.Item>\n              <DataList.Label highContrast>\n                <Strong>Connected accounts</Strong>\n              </DataList.Label>\n              <DataList.Value>\n                <Flex direction=\"column\" gap=\"2\">\n                  {oauthAccounts.map(([account, data]) => (\n                    <OAuthAccount\n                      key={account}\n                      account={account}\n                      email={data?.email}\n                    />\n                  ))}\n                </Flex>\n              </DataList.Value>\n            </DataList.Item>\n          </>\n        )}\n      </DataList.Root>\n    </Card>\n  );\n};\n\ninterface UserProfileLoadingProps extends WidgetRootDomProps {}\n\nconst UserProfileLoading: React.FC<UserProfileLoadingProps> = (props) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\n      <DataList.Root>\n        <DataList.Item align=\"center\">\n          <DataList.Label minWidth=\"220px\" highContrast>\n            <Strong>\n              <Skeleton>Full name</Skeleton>\n            </Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex\n              align=\"center\"\n              justify=\"between\"\n              width=\"100%\"\n              minHeight=\"var(--space-6)\"\n            >\n              <Text size=\"2\">\n                <Skeleton>Full name</Skeleton>\n              </Text>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n\n        <ListSeparator />\n\n        <DataList.Item align=\"center\">\n          <DataList.Label highContrast>\n            <Strong>\n              <Skeleton>Email address</Skeleton>\n            </Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex align=\"center\" minHeight=\"var(--space-6)\">\n              <Text size=\"2\">\n                <Skeleton>Email address</Skeleton>\n              </Text>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n      </DataList.Root>\n    </Card>\n  );\n};\n\ninterface UserProfileErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst UserProfileError: React.FC<UserProfileErrorProps> = ({\n  error,\n  ...domProps\n}) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <GenericError error={error} />\n    </Card>\n  );\n};\n\nconst ListSeparator = () => (\n  <Box asChild gridColumn=\"span 2\">\n    <Inset side=\"x\">\n      <Separator size=\"4\" />\n    </Inset>\n  </Box>\n);\n\nconst OAuthAccount = ({\n  account,\n  email,\n}: {\n  account: OAuthAccount;\n  email?: string | null;\n}) => {\n  const name = getOAuthName(account);\n  return (\n    <Flex align=\"center\" gap=\"1\">\n      <OAuthIcon account={account} />\n      <Text size=\"2\" ml=\"1\">\n        {name}\n      </Text>\n      {email && (\n        <Box display={{ initial: \"none\", sm: \"contents\" }}>\n          <Text size=\"2\" color=\"gray\">\n            ∙\n          </Text>\n          <Text size=\"2\" color=\"gray\">\n            {email}\n          </Text>\n        </Box>\n      )}\n    </Flex>\n  );\n};\n\nconst FallbackUserIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"20\"\n    height=\"20\"\n    fill=\"currentColor\"\n    viewBox=\"0 0 256 256\"\n  >\n    <title>User icon</title>\n    <path d=\"M229.19,213c-15.81-27.32-40.63-46.49-69.47-54.62a70,70,0,1,0-63.44,0C67.44,166.5,42.62,185.67,26.81,213a6,6,0,1,0,10.38,6C56.4,185.81,90.34,166,128,166s71.6,19.81,90.81,53a6,6,0,1,0,10.38-6ZM70,96a58,58,0,1,1,58,58A58.07,58.07,0,0,1,70,96Z\" />\n  </svg>\n);\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"user-profile\",\n    widgetState: state,\n  });\n}\n\nexport type {\n  UserProfileProps,\n  UserProfileLoadingProps,\n  UserProfileErrorProps,\n};\nexport { UserProfile, UserProfileLoading, UserProfileError };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/user-profile.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Box,\n  Card,\n  DataList,\n  Flex,\n  Inset,\n  Separator,\n  Strong,\n  Text,\n} from \"@radix-ui/themes\";\nimport { Avatar, Button, Skeleton } from \"./elements.js\";\nimport { Me, OAuthProfile, MeOauthProfiles } from \"../api/endpoint.js\";\nimport { EditUserProfileDialog } from \"./edit-user-profile-dialog.js\";\nimport {\n  getBestName,\n  getDomProps,\n  type WidgetRootState,\n  type WidgetRootDomProps,\n} from \"./utils.js\";\nimport { OAuthIcon, getOAuthName, type OAuthAccount } from \"./oauth-icons.js\";\nimport { GenericError } from \"./generic-error.js\";\nimport { Translation } from \"./i18n/translation.js\";\n\ninterface UserProfileProps extends WidgetRootDomProps {\n  userData: Me;\n}\n\nconst UserProfile: React.FC<UserProfileProps> = ({\n  userData: user,\n  ...domProps\n}) => {\n  const oauthAccounts = user.oauthProfiles\n    ? (Object.entries(user.oauthProfiles) as [\n        keyof Exclude<MeOauthProfiles, null>,\n        OAuthProfile,\n      ][])\n    : [];\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"resolved\", domProps)}>\n      <DataList.Root>\n        {user.profilePictureUrl && (\n          <>\n            <DataList.Item align=\"center\">\n              <DataList.Label minWidth=\"220px\" highContrast>\n                <Strong>\n                  <Translation\n                    defaultMessage=\"Profile picture\"\n                    description=\"Label for the user's avatar\"\n                    id=\"RvLqCQ\"\n                  />\n                </Strong>\n              </DataList.Label>\n              <DataList.Value>\n                <Avatar\n                  size=\"2\"\n                  fallback={<FallbackUserIcon />}\n                  src={user.profilePictureUrl}\n                />\n              </DataList.Value>\n            </DataList.Item>\n\n            <ListSeparator />\n          </>\n        )}\n\n        <DataList.Item align=\"center\">\n          <DataList.Label highContrast>\n            <Strong>\n              <Translation\n                defaultMessage=\"Full name\"\n                id=\"kkBScm\"\n                description=\"Label for user's full name field\"\n              />\n            </Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex\n              align=\"center\"\n              justify=\"between\"\n              width=\"100%\"\n              minHeight=\"var(--space-6)\"\n            >\n              <Text size=\"2\">\n                {getBestName(user) || (\n                  <Text\n                    color=\"gray\"\n                    style={{ color: \"var(--gray-10)\", cursor: \"default\" }}\n                  >\n                    <Translation\n                      defaultMessage=\"Not set\"\n                      id=\"i4vzAY\"\n                      description=\"Placeholder text when user's name is not set\"\n                    />\n                  </Text>\n                )}\n              </Text>\n\n              <EditUserProfileDialog user={user}>\n                <Button variant=\"secondary\">\n                  <Translation\n                    defaultMessage=\"Edit\"\n                    id=\"5bhXUz\"\n                    description=\"Button text to edit user profile\"\n                  />\n                </Button>\n              </EditUserProfileDialog>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n\n        <ListSeparator />\n\n        <DataList.Item align=\"center\">\n          <DataList.Label highContrast>\n            <Strong>\n              <Translation\n                defaultMessage=\"Email address\"\n                id=\"nLk5pa\"\n                description=\"Label for user's email address field\"\n              />\n            </Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex align=\"center\" minHeight=\"var(--space-6)\">\n              <Text size=\"2\">{user.email}</Text>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n\n        {oauthAccounts.length > 0 && (\n          <>\n            <ListSeparator />\n\n            <DataList.Item>\n              <DataList.Label highContrast>\n                <Strong>\n                  <Translation\n                    defaultMessage=\"Connected accounts\"\n                    id=\"AW/A69\"\n                    description=\"Label for user's connected OAuth accounts\"\n                  />\n                </Strong>\n              </DataList.Label>\n              <DataList.Value>\n                <Flex direction=\"column\" gap=\"2\">\n                  {oauthAccounts.map(([account, data]) => (\n                    <OAuthAccount\n                      key={account}\n                      account={account}\n                      email={data?.email}\n                    />\n                  ))}\n                </Flex>\n              </DataList.Value>\n            </DataList.Item>\n          </>\n        )}\n      </DataList.Root>\n    </Card>\n  );\n};\n\ninterface UserProfileLoadingProps extends WidgetRootDomProps {}\n\nconst UserProfileLoading: React.FC<UserProfileLoadingProps> = (props) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\n      <DataList.Root>\n        <DataList.Item align=\"center\">\n          <DataList.Label minWidth=\"220px\" highContrast>\n            <Strong>\n              <Skeleton>\n                <Translation\n                  defaultMessage=\"Full name\"\n                  id=\"nc7fru\"\n                  description=\"Loading placeholder for full name label\"\n                />\n              </Skeleton>\n            </Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex\n              align=\"center\"\n              justify=\"between\"\n              width=\"100%\"\n              minHeight=\"var(--space-6)\"\n            >\n              <Text size=\"2\">\n                <Skeleton>\n                  <Translation\n                    defaultMessage=\"Full name\"\n                    id=\"6GcWa2\"\n                    description=\"Loading placeholder for full name value\"\n                  />\n                </Skeleton>\n              </Text>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n\n        <ListSeparator />\n\n        <DataList.Item align=\"center\">\n          <DataList.Label highContrast>\n            <Strong>\n              <Skeleton>\n                <Translation\n                  defaultMessage=\"Email address\"\n                  id=\"gjqw+H\"\n                  description=\"Loading placeholder for email address label\"\n                />\n              </Skeleton>\n            </Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex align=\"center\" minHeight=\"var(--space-6)\">\n              <Text size=\"2\">\n                <Skeleton>\n                  <Translation\n                    defaultMessage=\"Email address\"\n                    id=\"75F+g5\"\n                    description=\"Loading placeholder for email address value\"\n                  />\n                </Skeleton>\n              </Text>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n      </DataList.Root>\n    </Card>\n  );\n};\n\ninterface UserProfileErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst UserProfileError: React.FC<UserProfileErrorProps> = ({\n  error,\n  ...domProps\n}) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <GenericError error={error} />\n    </Card>\n  );\n};\n\nconst ListSeparator = () => (\n  <Box asChild gridColumn=\"span 2\">\n    <Inset side=\"x\">\n      <Separator size=\"4\" />\n    </Inset>\n  </Box>\n);\n\nconst OAuthAccount = ({\n  account,\n  email,\n}: {\n  account: OAuthAccount;\n  email?: string | null;\n}) => {\n  const name = getOAuthName(account);\n  return (\n    <Flex align=\"center\" gap=\"1\">\n      <OAuthIcon account={account} />\n      <Text size=\"2\" ml=\"1\">\n        {name}\n      </Text>\n      {email && (\n        <Box display={{ initial: \"none\", sm: \"contents\" }}>\n          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n          <Text size=\"2\" color=\"gray\">\n            ∙\n          </Text>\n          <Text size=\"2\" color=\"gray\">\n            {email}\n          </Text>\n        </Box>\n      )}\n    </Flex>\n  );\n};\n\nconst FallbackUserIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"20\"\n    height=\"20\"\n    fill=\"currentColor\"\n    viewBox=\"0 0 256 256\"\n  >\n    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n    <title>User icon</title>\n    <path d=\"M229.19,213c-15.81-27.32-40.63-46.49-69.47-54.62a70,70,0,1,0-63.44,0C67.44,166.5,42.62,185.67,26.81,213a6,6,0,1,0,10.38,6C56.4,185.81,90.34,166,128,166s71.6,19.81,90.81,53a6,6,0,1,0,10.38-6ZM70,96a58,58,0,1,1,58,58A58.07,58.07,0,0,1,70,96Z\" />\n  </svg>\n);\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"user-profile\",\n    widgetState: state,\n  });\n}\n\nexport type {\n  UserProfileProps,\n  UserProfileLoadingProps,\n  UserProfileErrorProps,\n};\nexport { UserProfile, UserProfileLoading, UserProfileError };\n"],"mappings":"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","names":[]}

package/dist/esm/lib/user-security.js

@@ -14,6 +14,8 @@ import {
   getComparativeReadableDate,
   getDomProps
 } from "./utils.js";
+import { Translation } from "./i18n/translation.js";
+import { useLocale } from "./i18n/use-locale.js";
 const UserSecurity = ({
   settings,
   ...domProps
@@ -41,55 +43,155 @@ const UserSecurityLoading = (props) => {
   return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("loading", props), children: /* @__PURE__ */ jsxs(Grid, { columns: "auto 1fr auto", align: "center", gap: "4", children: [
     /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(IconPanel, {}) }),
     /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
-      /* @__PURE__ */ jsx(Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: /* @__PURE__ */ jsx(Skeleton, { children: "Password" }) }),
-      /* @__PURE__ */ jsx(Text, { as: "p", size: "2", color: "gray", children: /* @__PURE__ */ jsx(Skeleton, { children: "Set a password to access your account" }) })
+      /* @__PURE__ */ jsx(Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Password",
+          id: "z19aZa",
+          description: "Label for password security settings section"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(Text, { as: "p", size: "2", color: "gray", children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Set a password to access your account",
+          id: "leodiT",
+          description: "Description for setting up a password"
+        }
+      ) }) })
     ] }),
-    /* @__PURE__ */ jsx(ChangePasswordDialog, { children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Change" }) }) })
+    /* @__PURE__ */ jsx(ChangePasswordDialog, { children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Change",
+        id: "/ZV6cj",
+        description: "Button label to change password"
+      }
+    ) }) }) })
   ] }) });
 };
 function PasswordSettings({
   settings
 }) {
+  const locale = useLocale();
   return /* @__PURE__ */ jsxs(Grid, { columns: "auto 1fr auto", align: "center", gap: "4", children: [
     /* @__PURE__ */ jsx(IconPanel, { children: /* @__PURE__ */ jsx(LockClosedIcon, {}) }),
     /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
-      /* @__PURE__ */ jsx(Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: "Password" }),
-      settings.isSetUp ? settings.lastUsed && /* @__PURE__ */ jsxs(Text, { size: "2", color: "gray", children: [
-        "Last used",
-        " ",
-        getComparativeReadableDate(
-          /* @__PURE__ */ new Date(),
-          new Date(settings.lastUsed)
-        )
-      ] }) : /* @__PURE__ */ jsx(Text, { as: "p", size: "2", color: "gray", children: "Set a password to access your account" })
+      /* @__PURE__ */ jsx(Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Password",
+          id: "z19aZa",
+          description: "Label for password security settings section"
+        }
+      ) }),
+      settings.isSetUp ? settings.lastUsed && /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Last used {time}",
+          id: "Jqn+r+",
+          description: "Label indicating when password was last used with time",
+          values: {
+            time: getComparativeReadableDate(
+              /* @__PURE__ */ new Date(),
+              new Date(settings.lastUsed),
+              { locale }
+            )
+          }
+        }
+      ) }) : /* @__PURE__ */ jsx(Text, { as: "p", size: "2", color: "gray", children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Set a password to access your account",
+          id: "leodiT",
+          description: "Description for setting up a password"
+        }
+      ) })
     ] }),
-    settings.isSetUp ? /* @__PURE__ */ jsx(ChangePasswordDialog, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Change" }) }) : /* @__PURE__ */ jsx(SetPasswordDialog, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Set a password" }) })
+    settings.isSetUp ? /* @__PURE__ */ jsx(ChangePasswordDialog, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Change",
+        id: "/ZV6cj",
+        description: "Button label to change password"
+      }
+    ) }) }) : /* @__PURE__ */ jsx(SetPasswordDialog, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Set a password",
+        id: "zokPvK",
+        description: "Button label to set a new password"
+      }
+    ) }) })
   ] });
 }
 function MfaSettings({
   settings,
   isPasswordSet
 }) {
+  const locale = useLocale();
   return /* @__PURE__ */ jsxs(Grid, { columns: "auto 1fr auto", align: "center", gap: "4", children: [
     /* @__PURE__ */ jsx(IconPanel, { children: /* @__PURE__ */ jsx(ButtonIcon, {}) }),
     /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
-      /* @__PURE__ */ jsx(Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: "Multi-factor authentication" }),
+      /* @__PURE__ */ jsx(Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Multi-factor authentication",
+          id: "f3uhhm",
+          description: "Label for multi-factor authentication settings section"
+        }
+      ) }),
       settings.isSetUp ? /* @__PURE__ */ jsxs(Text, { size: "2", children: [
-        "Authenticator app",
+        /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "Authenticator app",
+            id: "0p/a72",
+            description: "Label indicating MFA is set up with an authenticator app"
+          }
+        ),
         settings.lastUsed && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", mx: "1", children: "\u2219" }),
-          /* @__PURE__ */ jsxs(Text, { size: "2", color: "gray", children: [
-            "Last used",
-            " ",
-            getComparativeReadableDate(
-              /* @__PURE__ */ new Date(),
-              new Date(settings.lastUsed)
-            )
-          ] })
+          /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Last used {time}",
+              id: "h3R6gY",
+              description: "Label indicating when MFA was last used with time",
+              values: {
+                time: getComparativeReadableDate(
+                  /* @__PURE__ */ new Date(),
+                  new Date(settings.lastUsed),
+                  { locale }
+                )
+              }
+            }
+          ) })
         ] })
-      ] }) : /* @__PURE__ */ jsx(Text, { as: "p", size: "2", color: "gray", children: "Secure your account with an extra verification step" })
+      ] }) : /* @__PURE__ */ jsx(Text, { as: "p", size: "2", color: "gray", children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Secure your account with an extra verification step",
+          id: "xZFdkq",
+          description: "Description for setting up multi-factor authentication"
+        }
+      ) })
     ] }),
-    settings.isSetUp ? /* @__PURE__ */ jsx(ResetMfaDialog, { isPasswordSet, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Disable" }) }) : /* @__PURE__ */ jsx(AddMfaDialog, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Set up authenticator app" }) })
+    settings.isSetUp ? /* @__PURE__ */ jsx(ResetMfaDialog, { isPasswordSet, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Disable",
+        id: "4flMgv",
+        description: "Button label to disable multi-factor authentication"
+      }
+    ) }) }) : /* @__PURE__ */ jsx(AddMfaDialog, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Set up authenticator app",
+        id: "oLNIQv",
+        description: "Button label to set up multi-factor authentication with an authenticator app"
+      }
+    ) }) })
   ] });
 }
 function getWidgetRootDomProps(state, domProps) {

package/dist/esm/lib/user-security.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/user-security.tsx"],"sourcesContent":["\"use client\";\n\nimport { Card, Flex, Grid, Text } from \"@radix-ui/themes\";\nimport { Button, Skeleton } from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { ButtonIcon, LockClosedIcon } from \"@radix-ui/react-icons\";\nimport { SetPasswordDialog } from \"./set-password-dialog.js\";\nimport { ChangePasswordDialog } from \"./change-password-dialog.js\";\nimport { AddMfaDialog } from \"./add-mfa-dialog.js\";\nimport type {\n  AuthenticationInformationResponseData as AuthenticationSettings,\n  AuthenticationInformationResponseDataVerificationMethodsPassword as PasswordVerificationMethod,\n  AuthenticationInformationResponseDataVerificationMethodsMfa as MfaVerificationMethod,\n} from \"../api/endpoint.js\";\nimport { ResetMfaDialog } from \"./reset-mfa-dialog.js\";\nimport * as CardList from \"./card-list.js\";\nimport { GenericError } from \"./generic-error.js\";\nimport {\n  getComparativeReadableDate,\n  getDomProps,\n  type WidgetRootDomProps,\n  type WidgetRootState,\n} from \"./utils.js\";\n\ninterface UserSecurityProps extends WidgetRootDomProps {\n  settings: AuthenticationSettings;\n}\n\nconst UserSecurity: React.FC<UserSecurityProps> = ({\n  settings,\n  ...domProps\n}) => {\n  const passwordSettings = settings.verificationMethods.Password;\n  const mfaSettings = settings.verificationMethods.Mfa;\n  return (\n    <CardList.Root {...getWidgetRootDomProps(\"resolved\", domProps)}>\n      {passwordSettings && (\n        <CardList.Item>\n          <PasswordSettings settings={passwordSettings} />\n        </CardList.Item>\n      )}\n      {mfaSettings && (\n        <CardList.Item>\n          <MfaSettings\n            settings={mfaSettings}\n            isPasswordSet={!!passwordSettings?.isSetUp}\n          />\n        </CardList.Item>\n      )}\n    </CardList.Root>\n  );\n};\n\ninterface UserSecurityErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst UserSecurityError: React.FC<UserSecurityErrorProps> = ({\n  error,\n  ...domProps\n}) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <GenericError error={error} />\n    </Card>\n  );\n};\n\ninterface UserSecurityLoadingProps extends WidgetRootDomProps {}\n\nconst UserSecurityLoading: React.FC<UserSecurityLoadingProps> = (props) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\n      <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n        <Skeleton>\n          <IconPanel />\n        </Skeleton>\n\n        <Flex direction=\"column\">\n          <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n            <Skeleton>Password</Skeleton>\n          </Text>\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            <Skeleton>Set a password to access your account</Skeleton>\n          </Text>\n        </Flex>\n\n        <ChangePasswordDialog>\n          <Skeleton>\n            <Button variant=\"secondary\">Change</Button>\n          </Skeleton>\n        </ChangePasswordDialog>\n      </Grid>\n    </Card>\n  );\n};\n\nfunction PasswordSettings({\n  settings,\n}: {\n  settings: NonNullable<PasswordVerificationMethod>;\n}) {\n  return (\n    <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n      <IconPanel>\n        <LockClosedIcon />\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          Password\n        </Text>\n\n        {settings.isSetUp ? (\n          settings.lastUsed && (\n            <Text size=\"2\" color=\"gray\">\n              Last used{\" \"}\n              {getComparativeReadableDate(\n                new Date(),\n                new Date(settings.lastUsed),\n              )}\n            </Text>\n          )\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            Set a password to access your account\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ChangePasswordDialog>\n          <Button variant=\"secondary\">Change</Button>\n        </ChangePasswordDialog>\n      ) : (\n        <SetPasswordDialog>\n          <Button variant=\"secondary\">Set a password</Button>\n        </SetPasswordDialog>\n      )}\n    </Grid>\n  );\n}\n\nfunction MfaSettings({\n  settings,\n  isPasswordSet,\n}: {\n  settings: NonNullable<MfaVerificationMethod>;\n  isPasswordSet: boolean;\n}) {\n  return (\n    <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n      <IconPanel>\n        <ButtonIcon />\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          Multi-factor authentication\n        </Text>\n\n        {settings.isSetUp ? (\n          <Text size=\"2\">\n            Authenticator app\n            {settings.lastUsed && (\n              <>\n                <Text size=\"2\" color=\"gray\" mx=\"1\">\n                  ∙\n                </Text>\n                <Text size=\"2\" color=\"gray\">\n                  Last used{\" \"}\n                  {getComparativeReadableDate(\n                    new Date(),\n                    new Date(settings.lastUsed),\n                  )}\n                </Text>\n              </>\n            )}\n          </Text>\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            Secure your account with an extra verification step\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ResetMfaDialog isPasswordSet={isPasswordSet}>\n          <Button variant=\"secondary\">Disable</Button>\n        </ResetMfaDialog>\n      ) : (\n        <AddMfaDialog>\n          <Button variant=\"secondary\">Set up authenticator app</Button>\n        </AddMfaDialog>\n      )}\n    </Grid>\n  );\n}\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"user-security\",\n    widgetState: state,\n  });\n}\n\nexport type {\n  UserSecurityProps,\n  UserSecurityLoadingProps,\n  UserSecurityErrorProps,\n};\nexport { UserSecurity, UserSecurityLoading, UserSecurityError };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/user-security.tsx"],"sourcesContent":["\"use client\";\n\nimport { Card, Flex, Grid, Text } from \"@radix-ui/themes\";\nimport { Button, Skeleton } from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { ButtonIcon, LockClosedIcon } from \"@radix-ui/react-icons\";\nimport { SetPasswordDialog } from \"./set-password-dialog.js\";\nimport { ChangePasswordDialog } from \"./change-password-dialog.js\";\nimport { AddMfaDialog } from \"./add-mfa-dialog.js\";\nimport type {\n  AuthenticationInformationResponseData as AuthenticationSettings,\n  AuthenticationInformationResponseDataVerificationMethodsPassword as PasswordVerificationMethod,\n  AuthenticationInformationResponseDataVerificationMethodsMfa as MfaVerificationMethod,\n} from \"../api/endpoint.js\";\nimport { ResetMfaDialog } from \"./reset-mfa-dialog.js\";\nimport * as CardList from \"./card-list.js\";\nimport { GenericError } from \"./generic-error.js\";\nimport {\n  getComparativeReadableDate,\n  getDomProps,\n  type WidgetRootDomProps,\n  type WidgetRootState,\n} from \"./utils.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useLocale } from \"./i18n/use-locale.js\";\n\ninterface UserSecurityProps extends WidgetRootDomProps {\n  settings: AuthenticationSettings;\n}\n\nconst UserSecurity: React.FC<UserSecurityProps> = ({\n  settings,\n  ...domProps\n}) => {\n  const passwordSettings = settings.verificationMethods.Password;\n  const mfaSettings = settings.verificationMethods.Mfa;\n  return (\n    <CardList.Root {...getWidgetRootDomProps(\"resolved\", domProps)}>\n      {passwordSettings && (\n        <CardList.Item>\n          <PasswordSettings settings={passwordSettings} />\n        </CardList.Item>\n      )}\n      {mfaSettings && (\n        <CardList.Item>\n          <MfaSettings\n            settings={mfaSettings}\n            isPasswordSet={!!passwordSettings?.isSetUp}\n          />\n        </CardList.Item>\n      )}\n    </CardList.Root>\n  );\n};\n\ninterface UserSecurityErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst UserSecurityError: React.FC<UserSecurityErrorProps> = ({\n  error,\n  ...domProps\n}) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <GenericError error={error} />\n    </Card>\n  );\n};\n\ninterface UserSecurityLoadingProps extends WidgetRootDomProps {}\n\nconst UserSecurityLoading: React.FC<UserSecurityLoadingProps> = (props) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\n      <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n        <Skeleton>\n          <IconPanel />\n        </Skeleton>\n\n        <Flex direction=\"column\">\n          <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n            <Skeleton>\n              <Translation\n                defaultMessage=\"Password\"\n                id=\"z19aZa\"\n                description=\"Label for password security settings section\"\n              />\n            </Skeleton>\n          </Text>\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            <Skeleton>\n              <Translation\n                defaultMessage=\"Set a password to access your account\"\n                id=\"leodiT\"\n                description=\"Description for setting up a password\"\n              />\n            </Skeleton>\n          </Text>\n        </Flex>\n\n        <ChangePasswordDialog>\n          <Skeleton>\n            <Button variant=\"secondary\">\n              <Translation\n                defaultMessage=\"Change\"\n                id=\"/ZV6cj\"\n                description=\"Button label to change password\"\n              />\n            </Button>\n          </Skeleton>\n        </ChangePasswordDialog>\n      </Grid>\n    </Card>\n  );\n};\n\nfunction PasswordSettings({\n  settings,\n}: {\n  settings: NonNullable<PasswordVerificationMethod>;\n}) {\n  const locale = useLocale();\n\n  return (\n    <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n      <IconPanel>\n        <LockClosedIcon />\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          <Translation\n            defaultMessage=\"Password\"\n            id=\"z19aZa\"\n            description=\"Label for password security settings section\"\n          />\n        </Text>\n\n        {settings.isSetUp ? (\n          settings.lastUsed && (\n            <Text size=\"2\" color=\"gray\">\n              <Translation\n                defaultMessage=\"Last used {time}\"\n                id=\"Jqn+r+\"\n                description=\"Label indicating when password was last used with time\"\n                values={{\n                  time: getComparativeReadableDate(\n                    new Date(),\n                    new Date(settings.lastUsed),\n                    { locale },\n                  ),\n                }}\n              />\n            </Text>\n          )\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            <Translation\n              defaultMessage=\"Set a password to access your account\"\n              id=\"leodiT\"\n              description=\"Description for setting up a password\"\n            />\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ChangePasswordDialog>\n          <Button variant=\"secondary\">\n            <Translation\n              defaultMessage=\"Change\"\n              id=\"/ZV6cj\"\n              description=\"Button label to change password\"\n            />\n          </Button>\n        </ChangePasswordDialog>\n      ) : (\n        <SetPasswordDialog>\n          <Button variant=\"secondary\">\n            <Translation\n              defaultMessage=\"Set a password\"\n              id=\"zokPvK\"\n              description=\"Button label to set a new password\"\n            />\n          </Button>\n        </SetPasswordDialog>\n      )}\n    </Grid>\n  );\n}\n\nfunction MfaSettings({\n  settings,\n  isPasswordSet,\n}: {\n  settings: NonNullable<MfaVerificationMethod>;\n  isPasswordSet: boolean;\n}) {\n  const locale = useLocale();\n\n  return (\n    <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n      <IconPanel>\n        <ButtonIcon />\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          <Translation\n            defaultMessage=\"Multi-factor authentication\"\n            id=\"f3uhhm\"\n            description=\"Label for multi-factor authentication settings section\"\n          />\n        </Text>\n\n        {settings.isSetUp ? (\n          <Text size=\"2\">\n            <Translation\n              defaultMessage=\"Authenticator app\"\n              id=\"0p/a72\"\n              description=\"Label indicating MFA is set up with an authenticator app\"\n            />\n            {settings.lastUsed && (\n              <>\n                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n                <Text size=\"2\" color=\"gray\" mx=\"1\">\n                  ∙\n                </Text>\n                <Text size=\"2\" color=\"gray\">\n                  <Translation\n                    defaultMessage=\"Last used {time}\"\n                    id=\"h3R6gY\"\n                    description=\"Label indicating when MFA was last used with time\"\n                    values={{\n                      time: getComparativeReadableDate(\n                        new Date(),\n                        new Date(settings.lastUsed),\n                        { locale },\n                      ),\n                    }}\n                  />\n                </Text>\n              </>\n            )}\n          </Text>\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            <Translation\n              defaultMessage=\"Secure your account with an extra verification step\"\n              id=\"xZFdkq\"\n              description=\"Description for setting up multi-factor authentication\"\n            />\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ResetMfaDialog isPasswordSet={isPasswordSet}>\n          <Button variant=\"secondary\">\n            <Translation\n              defaultMessage=\"Disable\"\n              id=\"4flMgv\"\n              description=\"Button label to disable multi-factor authentication\"\n            />\n          </Button>\n        </ResetMfaDialog>\n      ) : (\n        <AddMfaDialog>\n          <Button variant=\"secondary\">\n            <Translation\n              defaultMessage=\"Set up authenticator app\"\n              id=\"oLNIQv\"\n              description=\"Button label to set up multi-factor authentication with an authenticator app\"\n            />\n          </Button>\n        </AddMfaDialog>\n      )}\n    </Grid>\n  );\n}\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"user-security\",\n    widgetState: state,\n  });\n}\n\nexport type {\n  UserSecurityProps,\n  UserSecurityLoadingProps,\n  UserSecurityErrorProps,\n};\nexport { UserSecurity, UserSecurityLoading, UserSecurityError };\n"],"mappings":"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","names":[]}