user management panel UI

packages/react/src/components/ui/icons/AddIcon.tsx

@@ -1,15 +1,23 @@
 import addSrc from '@corbado/shared-ui/assets/add.svg';
 import type { FC } from 'react';
-import { memo, useRef } from 'react';
+import { useRef } from 'react';
 import React from 'react';
 
 import { useIconWithTheme } from '../../../hooks/useIconWithTheme';
 import type { IconProps } from './Icon';
 import { Icon } from './Icon';
 
-export const AddIcon: FC<IconProps> = memo(props => {
+export interface AddIconProps extends IconProps {
+  color?: 'primary' | 'secondary';
+}
+
+export const AddIcon: FC<AddIconProps> = ({ color, ...props }) => {
   const svgRef = useRef<HTMLImageElement>(null);
-  const { logoSVG } = useIconWithTheme(svgRef, addSrc, '--cb-button-text-primary-color');
+  const { logoSVG } = useIconWithTheme(
+    svgRef,
+    addSrc,
+    color === 'secondary' ? '--cb-text-primary-color' : '--cb-button-text-primary-color',
+  );
 
   return (
     <Icon
@@ -19,4 +27,4 @@ export const AddIcon: FC<IconProps> = memo(props => {
       {...props}
     />
   );
-});
+};

packages/react/src/components/ui/icons/ChangeIcon.tsx

@@ -0,0 +1,30 @@
+import changeIconSrc from '@corbado/shared-ui/assets/change.svg';
+import type { FC } from 'react';
+import { useRef } from 'react';
+import React from 'react';
+
+import { useIconWithTheme } from '../../../hooks/useIconWithTheme';
+import type { IconProps } from './Icon';
+import { Icon } from './Icon';
+
+export interface ChangeIconProps extends IconProps {
+  color?: 'primary' | 'secondary';
+}
+
+export const ChangeIcon: FC<ChangeIconProps> = ({ color, ...props }) => {
+  const svgRef = useRef<HTMLImageElement>(null);
+  const { logoSVG } = useIconWithTheme(
+    svgRef,
+    changeIconSrc,
+    color === 'secondary' ? '--cb-text-secondary-color' : '--cb-text-primary-color',
+  );
+
+  return (
+    <Icon
+      src={logoSVG}
+      ref={svgRef}
+      alt='copy-icon'
+      {...props}
+    />
+  );
+};

packages/react/src/components/ui/icons/CopyIcon.tsx

@@ -0,0 +1,30 @@
+import copyIconSrc from '@corbado/shared-ui/assets/copy.svg';
+import type { FC } from 'react';
+import { useRef } from 'react';
+import React from 'react';
+
+import { useIconWithTheme } from '../../../hooks/useIconWithTheme';
+import type { IconProps } from './Icon';
+import { Icon } from './Icon';
+
+export interface CopyIconProps extends IconProps {
+  color?: 'primary' | 'secondary';
+}
+
+export const CopyIcon: FC<CopyIconProps> = ({ color, ...props }) => {
+  const svgRef = useRef<HTMLImageElement>(null);
+  const { logoSVG } = useIconWithTheme(
+    svgRef,
+    copyIconSrc,
+    color === 'secondary' ? '--cb-text-secondary-color' : '--cb-text-primary-color',
+  );
+
+  return (
+    <Icon
+      src={logoSVG}
+      ref={svgRef}
+      alt='copy-icon'
+      {...props}
+    />
+  );
+};

packages/react/src/components/ui/icons/PendingIcon.tsx

@@ -0,0 +1,22 @@
+import pendingIconSrc from '@corbado/shared-ui/assets/pending.svg';
+import type { FC } from 'react';
+import { memo, useRef } from 'react';
+import React from 'react';
+
+import { useIconWithTheme } from '../../../hooks/useIconWithTheme';
+import type { IconProps } from './Icon';
+import { Icon } from './Icon';
+
+export const PendingIcon: FC<IconProps> = memo(props => {
+  const svgRef = useRef<HTMLImageElement>(null);
+  const { logoSVG } = useIconWithTheme(svgRef, pendingIconSrc, '--cb-passkey-list-badge-color');
+
+  return (
+    <Icon
+      src={logoSVG}
+      ref={svgRef}
+      alt='pending-icon'
+      {...props}
+    />
+  );
+});

packages/react/src/components/ui/icons/PrimaryIcon.tsx

@@ -0,0 +1,22 @@
+import primaryIconSrc from '@corbado/shared-ui/assets/primary.svg';
+import type { FC } from 'react';
+import { memo, useRef } from 'react';
+import React from 'react';
+
+import { useIconWithTheme } from '../../../hooks/useIconWithTheme';
+import type { IconProps } from './Icon';
+import { Icon } from './Icon';
+
+export const PrimaryIcon: FC<IconProps> = memo(props => {
+  const svgRef = useRef<HTMLImageElement>(null);
+  const { logoSVG } = useIconWithTheme(svgRef, primaryIconSrc, '--cb-passkey-list-badge-color');
+
+  return (
+    <Icon
+      src={logoSVG}
+      ref={svgRef}
+      alt='primary-icon'
+      {...props}
+    />
+  );
+});

packages/react/src/components/ui/icons/VerifiedIcon.tsx

@@ -0,0 +1,22 @@
+import verifiedIconSrc from '@corbado/shared-ui/assets/verified.svg';
+import type { FC } from 'react';
+import { memo, useRef } from 'react';
+import React from 'react';
+
+import { useIconWithTheme } from '../../../hooks/useIconWithTheme';
+import type { IconProps } from './Icon';
+import { Icon } from './Icon';
+
+export const VerifiedIcon: FC<IconProps> = memo(props => {
+  const svgRef = useRef<HTMLImageElement>(null);
+  const { logoSVG } = useIconWithTheme(svgRef, verifiedIconSrc, '--cb-passkey-list-badge-color');
+
+  return (
+    <Icon
+      src={logoSVG}
+      ref={svgRef}
+      alt='verified-icon'
+      {...props}
+    />
+  );
+});

packages/react/src/contexts/CorbadoSessionContext.tsx

@@ -1,4 +1,4 @@
-import type { CorbadoUser, PassKeyList, SessionUser } from '@corbado/types';
+import type { CorbadoUser, IdentifierListConfig, LoginIdentifierType, PassKeyList, SessionUser } from '@corbado/types';
 import type { CorbadoApp, CorbadoError, NonRecoverableError, PasskeyDeleteError } from '@corbado/web-core';
 import { createContext } from 'react';
 import type { Result } from 'ts-results';
@@ -18,6 +18,14 @@ export interface CorbadoSessionContextProps {
   getPasskeys: (abortController?: AbortController) => Promise<Result<PassKeyList, CorbadoError>>;
   deletePasskey: (id: string) => Promise<Result<void, PasskeyDeleteError>>;
   getFullUser: (abortController?: AbortController) => Promise<Result<CorbadoUser, CorbadoError>>;
+  getIdentifierListConfig: (abortController?: AbortController) => Promise<Result<IdentifierListConfig, CorbadoError>>;
+  updateName: (fullName: string) => Promise<Result<void, CorbadoError>>;
+  updateUsername: (identifierID: string, username: string) => Promise<Result<void, CorbadoError>>;
+  createIdentifier: (identifierType: LoginIdentifierType, value: string) => Promise<Result<void, CorbadoError>>;
+  deleteIdentifier: (identifierID: string) => Promise<Result<void, CorbadoError>>;
+  verifyIdentifierStart: (identifierID: string) => Promise<Result<void, CorbadoError>>;
+  verifyIdentifierFinish: (identifierID: string, code: string) => Promise<Result<void, CorbadoError>>;
+  deleteUser: () => Promise<Result<void, CorbadoError>>;
   globalError: NonRecoverableError | undefined;
 }
 
@@ -33,6 +41,14 @@ export const initialContext: CorbadoSessionContextProps = {
   getPasskeys: missingImplementation,
   deletePasskey: missingImplementation,
   getFullUser: missingImplementation,
+  getIdentifierListConfig: missingImplementation,
+  updateName: missingImplementation,
+  updateUsername: missingImplementation,
+  createIdentifier: missingImplementation,
+  deleteIdentifier: missingImplementation,
+  verifyIdentifierStart: missingImplementation,
+  verifyIdentifierFinish: missingImplementation,
+  deleteUser: missingImplementation,
 };
 
 export const CorbadoSessionContext = createContext<CorbadoSessionContextProps>(initialContext);

packages/react/src/contexts/CorbadoSessionProvider.tsx

@@ -1,4 +1,4 @@
-import type { CorbadoAppParams, SessionUser } from '@corbado/types';
+import type { CorbadoAppParams, LoginIdentifierType, SessionUser } from '@corbado/types';
 import type { NonRecoverableError } from '@corbado/web-core';
 import { CorbadoApp } from '@corbado/web-core';
 import type { FC, PropsWithChildren } from 'react';
@@ -86,6 +86,59 @@ export const CorbadoSessionProvider: FC<CorbadoSessionProviderParams> = ({
     [corbadoApp],
   );
 
+  const getIdentifierListConfig = useCallback(
+    (abortController?: AbortController) => {
+      return corbadoApp?.sessionService.getIdentifierListConfig(abortController ?? new AbortController());
+    },
+    [corbadoApp],
+  );
+
+  const updateName = useCallback(
+    (fullName: string) => {
+      return corbadoApp.sessionService.updateName(fullName);
+    },
+    [corbadoApp],
+  );
+
+  const updateUsername = useCallback(
+    (identifierID: string, username: string) => {
+      return corbadoApp.sessionService.updateUsername(identifierID, username);
+    },
+    [corbadoApp],
+  );
+
+  const createIdentifier = useCallback(
+    (identifierType: LoginIdentifierType, value: string) => {
+      return corbadoApp.sessionService.createIdentifier(identifierType, value);
+    },
+    [corbadoApp],
+  );
+
+  const deleteIdentifier = useCallback(
+    (identifierID: string) => {
+      return corbadoApp.sessionService.deleteIdentifier(identifierID);
+    },
+    [corbadoApp],
+  );
+
+  const verifyIdentifierStart = useCallback(
+    (identifierID: string) => {
+      return corbadoApp.sessionService.verifyIdentifierStart(identifierID);
+    },
+    [corbadoApp],
+  );
+
+  const verifyIdentifierFinish = useCallback(
+    (identifierID: string, code: string) => {
+      return corbadoApp.sessionService.verifyIdentifierFinish(identifierID, code);
+    },
+    [corbadoApp],
+  );
+
+  const deleteUser = useCallback(() => {
+    return corbadoApp.sessionService.deleteUser();
+  }, [corbadoApp]);
+
   return (
     <CorbadoSessionContext.Provider
       value={{
@@ -96,6 +149,14 @@ export const CorbadoSessionProvider: FC<CorbadoSessionProviderParams> = ({
         isAuthenticated,
         appendPasskey,
         getFullUser,
+        getIdentifierListConfig,
+        updateName,
+        updateUsername,
+        createIdentifier,
+        deleteIdentifier,
+        verifyIdentifierStart,
+        verifyIdentifierFinish,
+        deleteUser,
         getPasskeys,
         deletePasskey,
         logout,

packages/react/src/index.ts

@@ -7,14 +7,14 @@ import CorbadoAuth from './screens/core/CorbadoAuth';
 import Login from './screens/core/Login';
 import PasskeyList from './screens/core/PasskeyList';
 import SignUp from './screens/core/SignUp';
-import { User } from './screens/core/User';
+import UserDetails from './screens/core/UserDetails';
 
 export {
   CorbadoProvider,
   useCorbado,
   CorbadoAuth,
+  UserDetails,
   PasskeyList,
-  User,
   SignUp,
   Login,
   CorbadoThemes,

packages/react/src/screens/core/PasskeyList.tsx

@@ -53,9 +53,7 @@ const PasskeyList: FC = () => {
   return (
     <PasskeyListErrorBoundary globalError={globalError}>
       <div className='cb-passkey-list-container'>
-        <div className='cb-passkey-list-title'>
-          <Text className='cb-passkey-list-title'>{t('title')}</Text>
-        </div>
+        <Text className='cb-passkey-list-title'>{t('title')}</Text>
         {passkeys?.passkeys.map(passkey => (
           <PasskeyListItem
             key={passkey.id}