@turnkey/react-wallet-kit/dist/components/user/RemovePasskey.js

The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
var reactFontawesome = require('@fortawesome/react-fontawesome');
var Buttons = require('../design/Buttons.js');
var react = require('react');
var Hook$1 = require('../../providers/modal/Hook.js');
var Hook = require('../../providers/client/Hook.js');
var sdkTypes = require('@turnkey/sdk-types');
var clsx = require('clsx');
var Success = require('../design/Success.js');

function RemovePasskey(params) {
  const {
    user,
    removePasskeys
  } = Hook.useTurnkey();
  const {
    onSuccess,
    onError,
    userId = user?.userId,
    successPageDuration,
    authenticatorId,
    organizationId
  } = params;
  const [isLoading, setIsLoading] = react.useState(false);
  const {
    isMobile,
    pushPage,
    closeModal
  } = Hook$1.useModal();
  const handleContinue = async () => {
    try {
      setIsLoading(true);
      const res = await removePasskeys({
        authenticatorIds: [authenticatorId],
        ...(userId && {
          userId
        }),
        ...(organizationId && {
          organizationId
        })
      });
      handleSuccess(res);
    } catch (error) {
      onError(error);
    } finally {
      setIsLoading(false);
    }
  };
  const handleSuccess = authenticators => {
    onSuccess(authenticators);
    if (!successPageDuration) {
      closeModal();
      return;
    }
    pushPage({
      key: "success",
      content: jsxRuntime.jsx(Success.SuccessPage, {
        text: "Passkey removed successfully!",
        duration: successPageDuration,
        onComplete: () => {
          closeModal();
        }
      }),
      preventBack: true,
      showTitle: false
    });
  };
  const authenticator = user?.authenticators?.find(authenticator => authenticator.authenticatorId === params.authenticatorId);
  if (!authenticator) {
    throw new sdkTypes.TurnkeyError("Authenticator not found", sdkTypes.TurnkeyErrorCodes.NOT_FOUND);
  }
  return jsxRuntime.jsxs("div", {
    className: clsx("mt-8", isMobile ? "w-full" : "w-96"),
    children: [jsxRuntime.jsxs("div", {
      className: "mt-6 mb-5 flex flex-col items-center gap-3",
      children: [jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
        icon: freeSolidSvgIcons.faTriangleExclamation,
        size: "3x",
        className: "text-danger-light dark:text-danger-dark"
      }), jsxRuntime.jsx("div", {
        className: "text-2xl font-bold text-center",
        children: params?.title ? params.title : "Remove Passkey"
      }), jsxRuntime.jsx("div", {
        className: "text-icon-text-light dark:text-icon-text-dark text-center !p-0",
        children: params?.subTitle ? params.subTitle : "This action is irreversible."
      }), jsxRuntime.jsxs("div", {
        className: "p-2 h-full mt-2 max-h-72 rounded-md border border-modal-background-dark/10 dark:border-modal-background-light/10 bg-icon-background-light dark:bg-icon-background-dark text-icon-text-light dark:text-icon-text-dark",
        children: [jsxRuntime.jsxs("div", {
          className: "text-sm font-mono!",
          children: ["Passkey Name: ", authenticator?.authenticatorName]
        }), jsxRuntime.jsxs("div", {
          className: "text-sm font-mono!",
          children: ["Passkey ID: ", authenticator?.authenticatorId]
        })]
      })]
    }), jsxRuntime.jsx("div", {
      className: "flex my-2 mt-0",
      children: jsxRuntime.jsx(Buttons.ActionButton, {
        name: "remove-passkey-button",
        onClick: handleContinue,
        loading: isLoading,
        className: "w-full md:max-w-md bg-danger-light dark:bg-danger-dark text-primary-text-light dark:text-primary-text-dark",
        spinnerClassName: "text-primary-text-light dark:text-primary-text-dark",
        children: "Remove Passkey"
      })
    })]
  });
}

exports.RemovePasskey = RemovePasskey;
//# sourceMappingURL=RemovePasskey.js.map