@workos-inc/widgets 1.0.0 → 1.1.0

package/src/lib/user-profile.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import {
+  Box,
+  Card,
+  DataList,
+  Flex,
+  Inset,
+  Separator,
+  Strong,
+  Text,
+} from "@radix-ui/themes";
+import clsx from "clsx";
+import { Avatar, SecondaryButton, Skeleton } from "./elements";
+import { Me } from "@repo/api";
+import { EditUserProfileDialog } from "./edit-user-profile-dialog";
+import { getBestName } from "./utils";
+import { getOAuthIcon, getOAuthName } from "./oauth-icons";
+import { GenericError } from "./generic-error";
+
+interface UserProfileProps {
+  userData: Me;
+}
+
+export const UserProfile = ({ userData: user }: UserProfileProps) => {
+  const oauthAccounts = Object.entries(user.oauthProfiles || {});
+
+  return (
+    <Card
+      className={clsx("woswidgets-widget")}
+      data-woswidgets-widget-id="user-profile"
+      size="2"
+    >
+      <DataList.Root>
+        {user.profilePictureUrl && (
+          <>
+            <DataList.Item align="center">
+              <DataList.Label minWidth="220px" highContrast>
+                <Strong>Profile picture</Strong>
+              </DataList.Label>
+              <DataList.Value>
+                <Avatar
+                  size="2"
+                  fallback={<FallbackUserIcon />}
+                  src={user.profilePictureUrl}
+                />
+              </DataList.Value>
+            </DataList.Item>
+
+            <ListSeparator />
+          </>
+        )}
+
+        <DataList.Item align="center">
+          <DataList.Label highContrast>
+            <Strong>Full name</Strong>
+          </DataList.Label>
+          <DataList.Value>
+            <Flex
+              align="center"
+              justify="between"
+              width="100%"
+              minHeight="var(--space-6)"
+            >
+              <Text size="2">
+                {getBestName(user) || (
+                  <Text
+                    color="gray"
+                    style={{ color: "var(--gray-10)", cursor: "default" }}
+                  >
+                    Not set
+                  </Text>
+                )}
+              </Text>
+
+              <EditUserProfileDialog user={user}>
+                <SecondaryButton>Edit</SecondaryButton>
+              </EditUserProfileDialog>
+            </Flex>
+          </DataList.Value>
+        </DataList.Item>
+
+        <ListSeparator />
+
+        <DataList.Item align="center">
+          <DataList.Label highContrast>
+            <Strong>Email address</Strong>
+          </DataList.Label>
+          <DataList.Value>
+            <Flex align="center" minHeight="var(--space-6)">
+              <Text size="2">{user.email}</Text>
+            </Flex>
+          </DataList.Value>
+        </DataList.Item>
+
+        {oauthAccounts.length > 0 && (
+          <>
+            <ListSeparator />
+
+            <DataList.Item>
+              <DataList.Label highContrast>
+                <Strong>Connected accounts</Strong>
+              </DataList.Label>
+              <DataList.Value>
+                <Flex direction="column" gap="2">
+                  {oauthAccounts.map(([account, data]) => (
+                    <OAuthAccount
+                      key={account}
+                      account={account}
+                      email={data?.email}
+                    />
+                  ))}
+                </Flex>
+              </DataList.Value>
+            </DataList.Item>
+          </>
+        )}
+      </DataList.Root>
+    </Card>
+  );
+};
+
+export function UserProfileLoading() {
+  return (
+    <Card size="2">
+      <DataList.Root>
+        <DataList.Item align="center">
+          <DataList.Label minWidth="220px" highContrast>
+            <Strong>Profile picture</Strong>
+          </DataList.Label>
+          <DataList.Value>
+            <Skeleton>
+              <Avatar size="2" fallback={<FallbackUserIcon />} />
+            </Skeleton>
+          </DataList.Value>
+        </DataList.Item>
+
+        <ListSeparator />
+
+        <DataList.Item align="center">
+          <DataList.Label highContrast>
+            <Strong>Full name</Strong>
+          </DataList.Label>
+          <DataList.Value>
+            <Flex
+              align="center"
+              justify="between"
+              width="100%"
+              minHeight="var(--space-6)"
+            >
+              <Text size="2">
+                <Skeleton>Full name</Skeleton>
+              </Text>
+            </Flex>
+          </DataList.Value>
+        </DataList.Item>
+
+        <ListSeparator />
+
+        <DataList.Item align="center">
+          <DataList.Label highContrast>
+            <Strong>Email address</Strong>
+          </DataList.Label>
+          <DataList.Value>
+            <Flex align="center" minHeight="var(--space-6)">
+              <Text size="2">
+                <Skeleton>Email address</Skeleton>
+              </Text>
+            </Flex>
+          </DataList.Value>
+        </DataList.Item>
+
+        <ListSeparator />
+
+        <DataList.Item>
+          <DataList.Label highContrast>
+            <Strong>Connected accounts</Strong>
+          </DataList.Label>
+          <DataList.Value>
+            <Skeleton>Connected accounts</Skeleton>
+          </DataList.Value>
+        </DataList.Item>
+      </DataList.Root>
+    </Card>
+  );
+}
+
+export function UserProfileError({ error }: { error: unknown }) {
+  return (
+    <Card size="2">
+      <GenericError error={error} />
+    </Card>
+  );
+}
+
+const ListSeparator = () => (
+  <Box asChild gridColumn="span 2">
+    <Inset side="x">
+      <Separator size="4" />
+    </Inset>
+  </Box>
+);
+
+const OAuthAccount = ({
+  account,
+  email,
+}: {
+  account: string;
+  email?: string | null;
+}) => {
+  const Icon = getOAuthIcon(account);
+  const name = getOAuthName(account);
+
+  return (
+    <Flex align="center" gap="1">
+      <Icon />
+
+      <Text size="2" ml="1">
+        {name}
+      </Text>
+
+      {email && (
+        <Box display={{ initial: "none", sm: "contents" }}>
+          <Text size="2" color="gray">
+            ∙
+          </Text>
+          <Text size="2" color="gray">
+            {email}
+          </Text>
+        </Box>
+      )}
+    </Flex>
+  );
+};
+
+const FallbackUserIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    fill="currentColor"
+    viewBox="0 0 256 256"
+  >
+    <title>User icon</title>
+    <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" />
+  </svg>
+);

package/src/lib/user-security.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import { Card, Flex, Grid, Text } from "@radix-ui/themes";
+import clsx from "clsx";
+import { SecondaryButton, Skeleton } from "./elements";
+import { IconPanel } from "./icon-panel";
+import { ButtonIcon, LockClosedIcon } from "@radix-ui/react-icons";
+import { SetPasswordDialog } from "./set-password-dialog";
+import { ChangePasswordDialog } from "./change-password-dialog";
+import { AddMfaDialog } from "./add-mfa-dialog";
+import type {
+  AuthenticationInformationResponseData as AuthenticationSettings,
+  PasswordVerificationMethod,
+  MfaVerificationMethod,
+} from "@repo/api";
+import { ResetMfaDialog } from "./reset-mfa-dialog";
+import * as CardList from "../card-list";
+import { GenericError } from "./generic-error";
+import { getComparativeReadableDate } from "./utils";
+
+interface UserSecurityProps {
+  settings: AuthenticationSettings;
+}
+
+export const UserSecurity = ({ settings }: UserSecurityProps) => {
+  const passwordSettings = settings.verificationMethods.Password;
+  const mfaSettings = settings.verificationMethods.Mfa;
+
+  return (
+    <CardList.Root
+      className={clsx("woswidgets-widget")}
+      data-woswidgets-widget-id="user-security"
+    >
+      {passwordSettings && (
+        <CardList.Item>
+          <PasswordSettings settings={passwordSettings} />
+        </CardList.Item>
+      )}
+
+      {mfaSettings && (
+        <CardList.Item>
+          <MfaSettings
+            settings={mfaSettings}
+            isPasswordSet={!!passwordSettings?.isSetUp}
+          />
+        </CardList.Item>
+      )}
+    </CardList.Root>
+  );
+};
+
+export function UserSecurityError({ error }: { error: unknown }) {
+  return (
+    <Card size="2">
+      <GenericError error={error} />
+    </Card>
+  );
+}
+
+export function UserSecurityLoading() {
+  return (
+    <Card size="2">
+      <Grid columns="auto 1fr auto" align="center" gap="4">
+        <Skeleton>
+          <IconPanel />
+        </Skeleton>
+
+        <Flex direction="column">
+          <Text size="2" highContrast weight="bold" as="p" mb="-2px">
+            <Skeleton>Password</Skeleton>
+          </Text>
+          <Text as="p" size="2" color="gray">
+            <Skeleton>Set a password to access your account</Skeleton>
+          </Text>
+        </Flex>
+
+        <ChangePasswordDialog>
+          <Skeleton>
+            <SecondaryButton>Change</SecondaryButton>
+          </Skeleton>
+        </ChangePasswordDialog>
+      </Grid>
+    </Card>
+  );
+}
+
+function PasswordSettings({
+  settings,
+}: {
+  settings: PasswordVerificationMethod;
+}) {
+  return (
+    <Grid columns="auto 1fr auto" align="center" gap="4">
+      <IconPanel>
+        <LockClosedIcon />
+      </IconPanel>
+
+      <Flex direction="column">
+        <Text size="2" highContrast weight="bold" as="p" mb="-2px">
+          Password
+        </Text>
+
+        {settings.isSetUp ? (
+          settings.lastUsed && (
+            <Text size="2" color="gray">
+              Last used{" "}
+              {getComparativeReadableDate(
+                new Date(),
+                new Date(settings.lastUsed),
+              )}
+            </Text>
+          )
+        ) : (
+          <Text as="p" size="2" color="gray">
+            Set a password to access your account
+          </Text>
+        )}
+      </Flex>
+
+      {settings.isSetUp ? (
+        <ChangePasswordDialog>
+          <SecondaryButton>Change</SecondaryButton>
+        </ChangePasswordDialog>
+      ) : (
+        <SetPasswordDialog>
+          <SecondaryButton>Set a password</SecondaryButton>
+        </SetPasswordDialog>
+      )}
+    </Grid>
+  );
+}
+
+function MfaSettings({
+  settings,
+  isPasswordSet,
+}: {
+  settings: MfaVerificationMethod;
+  isPasswordSet: boolean;
+}) {
+  return (
+    <Grid columns="auto 1fr auto" align="center" gap="4">
+      <IconPanel>
+        <ButtonIcon />
+      </IconPanel>
+
+      <Flex direction="column">
+        <Text size="2" highContrast weight="bold" as="p" mb="-2px">
+          Multi-factor authentication
+        </Text>
+
+        {settings.isSetUp ? (
+          <Text size="2">
+            Authenticator app
+            {settings.lastUsed && (
+              <>
+                <Text size="2" color="gray" mx="1">
+                  ∙
+                </Text>
+                <Text size="2" color="gray">
+                  Last used{" "}
+                  {getComparativeReadableDate(
+                    new Date(),
+                    new Date(settings.lastUsed),
+                  )}
+                </Text>
+              </>
+            )}
+          </Text>
+        ) : (
+          <Text as="p" size="2" color="gray">
+            Secure your account with an extra verification step
+          </Text>
+        )}
+      </Flex>
+
+      {settings.isSetUp ? (
+        <ResetMfaDialog isPasswordSet={isPasswordSet}>
+          <SecondaryButton>Disable</SecondaryButton>
+        </ResetMfaDialog>
+      ) : (
+        <AddMfaDialog>
+          <SecondaryButton>Set up authenticator app</SecondaryButton>
+        </AddMfaDialog>
+      )}
+    </Grid>
+  );
+}

package/src/lib/user-sessions.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import { Box, Button, Card, Flex, Text } from "@radix-ui/themes";
+import clsx from "clsx";
+import { Badge, SecondaryButton, Skeleton } from "./elements";
+import {
+  getComparativeReadableDate,
+  getUserLocation,
+  parseUserAgent,
+} from "./utils";
+import { LogoutDialog } from "./logout-dialog";
+import { LogoutAllSessionsDialog } from "./logout-all-sessions-dialog";
+import { ActiveSession } from "@repo/api";
+import * as CardList from "../card-list";
+import { IconPanel } from "./icon-panel";
+import { useState } from "react";
+import { GenericError } from "./generic-error";
+import { LaptopIcon, MobileIcon } from "@radix-ui/react-icons";
+
+interface UserSessionsProps {
+  sessionsData: ActiveSession[];
+  currentSessionId: string;
+}
+
+export const UserSessions = ({
+  sessionsData: sessions,
+  currentSessionId,
+}: UserSessionsProps) => {
+  const currentSession = sessions.find(
+    (session) => session.id === currentSessionId,
+  );
+  const otherSessions = sessions.filter(
+    (session) => session.id !== currentSessionId,
+  );
+  const [openLogoutDialog, setOpenLogoutDialog] = useState(false);
+  const [sessionToSignOut, setSessionToSignOut] =
+    useState<ActiveSession | null>(null);
+  const [openLogoutAllSessionsDialog, setOpenLogoutAllSessionsDialog] =
+    useState(false);
+
+  return (
+    <Flex
+      direction="column"
+      gap="4"
+      className={clsx("woswidgets-widget")}
+      data-woswidgets-widget-id="user-sessions"
+    >
+      <CardList.Root>
+        {currentSession && (
+          <CardList.Item>
+            <UserSession session={currentSession} isCurrentSession />
+          </CardList.Item>
+        )}
+
+        {otherSessions.map((session) => (
+          <CardList.Item key={session.id}>
+            <UserSession
+              session={session}
+              onSignOut={() => {
+                setSessionToSignOut(session);
+                setOpenLogoutDialog(true);
+              }}
+            />
+          </CardList.Item>
+        ))}
+      </CardList.Root>
+
+      {sessions.length > 1 && (
+        <Card size="2">
+          <Flex gap="2" justify="between" align="center">
+            <Box>
+              <Text size="2" highContrast weight="bold" as="p">
+                Sign out of all other devices
+              </Text>
+              <Text size="2" color="gray" as="p">
+                Remove access from all devices except this one
+              </Text>
+            </Box>
+
+            <SecondaryButton
+              onClick={() => {
+                setOpenLogoutAllSessionsDialog(true);
+              }}
+            >
+              Sign out
+            </SecondaryButton>
+          </Flex>
+        </Card>
+      )}
+
+      {sessionToSignOut && (
+        <LogoutDialog
+          session={sessionToSignOut}
+          open={openLogoutDialog}
+          onOpenChange={setOpenLogoutDialog}
+        />
+      )}
+
+      <LogoutAllSessionsDialog
+        currentSessionId={currentSessionId}
+        open={openLogoutAllSessionsDialog}
+        onOpenChange={setOpenLogoutAllSessionsDialog}
+      />
+    </Flex>
+  );
+};
+
+export function UserSessionsLoading() {
+  return (
+    <Card size="2">
+      <Flex gap="4" align="center">
+        <Skeleton>
+          <IconPanel />
+        </Skeleton>
+
+        <Flex direction="column">
+          <Text size="2" highContrast weight="bold" as="p" mb="-2px">
+            <Skeleton>The location</Skeleton>
+          </Text>
+
+          <Text size="2" color="gray" as="p">
+            <Skeleton>The location</Skeleton>
+          </Text>
+        </Flex>
+      </Flex>
+    </Card>
+  );
+}
+
+export function UserSessionsError({ error }: { error: unknown }) {
+  return (
+    <Card size="2">
+      <GenericError error={error} />
+    </Card>
+  );
+}
+
+interface UserSessionProps {
+  session: ActiveSession;
+  isCurrentSession?: boolean;
+  onSignOut?: (session: ActiveSession) => void;
+}
+
+const UserSession = ({
+  session,
+  isCurrentSession = false,
+  onSignOut,
+}: UserSessionProps) => {
+  const userAgent = parseUserAgent(session.userAgent);
+  const userLocation = getUserLocation(
+    session.currentLocation,
+    session.ipAddress,
+  );
+
+  return (
+    <Flex gap="4" align="center">
+      <IconPanel>
+        {userAgent.isMobile ? <MobileIcon /> : <LaptopIcon />}
+      </IconPanel>
+
+      <Flex direction="column">
+        <Text size="2" highContrast weight="bold" as="p" mb="-2px">
+          {userAgent.pretty}
+        </Text>
+
+        <Flex gap="1" align="center">
+          <Text size="2" color="gray" as="p">
+            {userLocation}
+          </Text>
+
+          {isCurrentSession && <Badge ml="2">This device</Badge>}
+
+          {!isCurrentSession && session.lastActivityAt && (
+            <>
+              <Text size="2" color="gray">
+                ∙
+              </Text>
+              <Text size="2" color="gray">
+                Last seen{" "}
+                {getComparativeReadableDate(
+                  new Date(),
+                  new Date(session.lastActivityAt),
+                )}
+              </Text>
+            </>
+          )}
+        </Flex>
+      </Flex>
+
+      {!isCurrentSession && (
+        <Flex ml="auto" mr="2">
+          <Button
+            variant="ghost"
+            onClick={() => {
+              onSignOut?.(session);
+            }}
+          >
+            Sign out
+          </Button>
+        </Flex>
+      )}
+    </Flex>
+  );
+};

package/src/lib/users-filter.tsx

@@ -2,15 +2,15 @@
 
 import { Select } from "@radix-ui/themes";
 import * as React from "react";
-import type { Role } from "./api/role";
 import { SelectContent, SelectItem, SelectTrigger } from "./elements";
 import { useUsersManagementContext } from "./users-management-context";
+import { MemberRole } from "@repo/api";
 
 const ALL_ROLES_NAME = "All";
 const ALL_ROLES_VALUE = "null";
 
 type UsersFilterProps = React.ComponentPropsWithoutRef<typeof Select.Root> & {
-  roles: Role[] | undefined;
+  roles: MemberRole[] | undefined;
   disabled?: boolean;
 };