user management panel UI

packages/react/src/components/ui/buttons/Button.tsx

@@ -16,7 +16,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         {...rest}
       >
-        {isLoading ? <LoadingSpinner className={spinnerClassName} /> : children}
+        {children}
+        {isLoading && (
+          <div className='cb-button-loading'>
+            <LoadingSpinner className={spinnerClassName} />
+          </div>
+        )}
       </button>
     );
   },

packages/react/src/components/ui/buttons/CopyButton.tsx

@@ -0,0 +1,60 @@
+import type { FC } from 'react';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { CopyIcon } from '../icons/CopyIcon';
+import { TickIcon } from '../icons/TickIcon';
+import { Text } from '../typography';
+
+interface Props {
+  text: string | undefined;
+}
+
+const RESET_TIMEOUT = 4 * 1000;
+
+const CopyButton: FC<Props> = ({ text }) => {
+  const { t } = useTranslation();
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    const reset = () => {
+      setCopied(false);
+    };
+
+    if (copied) {
+      const timeout = setTimeout(reset, RESET_TIMEOUT);
+
+      return () => clearTimeout(timeout);
+    }
+
+    return;
+  }, [copied]);
+
+  const onClick = async () => {
+    if (text) {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+    }
+  };
+
+  if (copied) {
+    return (
+      <div className='cb-tooltip-container'>
+        <TickIcon className='cb-user-details-body-row-icon' />
+        <div className='cb-tooltip'>
+          <Text level='1'>{t('user-details.copied')}</Text>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <CopyIcon
+      className='cb-user-details-body-row-icon'
+      color='secondary'
+      onClick={() => void onClick()}
+    />
+  );
+};
+
+export default CopyButton;

packages/react/src/components/ui/buttons/Link.tsx

@@ -4,12 +4,14 @@ import React from 'react';
 export interface LinkProps {
   href: string;
   className?: string;
+  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
 }
 
-export const Link: FC<PropsWithChildren<LinkProps>> = ({ href, className, children }) => {
+export const Link: FC<PropsWithChildren<LinkProps>> = ({ href, className, children, onClick }) => {
   return (
     <a
       href={href}
+      onClick={onClick}
       className={`cb-link cb-secondary-link ${className}`}
     >
       {children}

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/AlertIcon.tsx

@@ -0,0 +1,38 @@
+import alertSrc from '@corbado/shared-ui/assets/alert.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 AlertIconProps extends IconProps {
+  color?: 'primary' | 'secondary' | 'error';
+}
+
+export const AlertIcon: FC<AlertIconProps> = ({ color, ...props }) => {
+  const svgRef = useRef<HTMLImageElement>(null);
+
+  const getColor = () => {
+    switch (color) {
+      case 'secondary':
+        return '--cb-text-primary-color';
+      case 'error':
+        return '--cb-error-text-color';
+      default:
+        return '--cb-button-text-primary';
+    }
+  };
+
+  const { logoSVG } = useIconWithTheme(svgRef, alertSrc, getColor());
+
+  return (
+    <Icon
+      src={logoSVG}
+      ref={svgRef}
+      alt='alert'
+      {...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/TickIcon.tsx

@@ -0,0 +1,22 @@
+import syncIconSrc from '@corbado/shared-ui/assets/tick.svg';
+import type { FC } from 'react';
+import { memo, useRef } from 'react';
+import React from 'react';
+
+import { ColorType, useIconWithTheme } from '../../../hooks/useIconWithTheme';
+import type { IconProps } from './Icon';
+import { Icon } from './Icon';
+
+export const TickIcon: FC<IconProps> = memo(props => {
+  const svgRef = useRef<HTMLImageElement>(null);
+  const { logoSVG } = useIconWithTheme(svgRef, syncIconSrc, '--cb-success-color', ColorType.Stroke);
+
+  return (
+    <Icon
+      src={logoSVG}
+      ref={svgRef}
+      alt='success-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/components/user-details/Alert.tsx

@@ -0,0 +1,24 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { Text } from '../ui';
+import { AlertIcon } from '../ui/icons/AlertIcon';
+
+interface Props {
+  text: string;
+  variant?: 'error' | 'info';
+}
+
+const Alert: FC<Props> = ({ text, variant = 'error' }) => {
+  return (
+    <div className='cb-user-details-alert-container'>
+      <AlertIcon
+        color={variant === 'error' ? 'error' : 'secondary'}
+        className='cb-user-details-alert-icon'
+      />
+      <Text className={`cb-user-details-text${variant === 'error' ? ' cb-error-text-color' : ''}`}>{text}</Text>
+    </div>
+  );
+};
+
+export default Alert;