` elements.
-
-& {
- margin: 0; // 1
- font-family: $theme-font-family;
- font-size: $font-size-base;
- font-weight: $font-weight-base;
- line-height: $line-height-base;
- color: $themed-font-color;
- text-align: left; // 3
- background-color: $white; // 2
-}
-
-// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
-// on elements that programmatically receive focus but wouldn't normally show a visible
-// focus outline. In general, this would mean that the outline is only applied if the
-// interaction that led to the element receiving programmatic focus was a keyboard interaction,
-// or the browser has somehow determined that the user is primarily a keyboard user and/or
-// wants focus outlines to always be presented.
-//
-// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
-// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
-[tabindex='-1']:focus:not(:focus-visible) {
- outline: 0 !important;
-}
-
-// Content grouping
-//
-// 1. Add the correct box sizing in Firefox.
-// 2. Show the overflow in Edge and IE.
-
-hr {
- box-sizing: content-box; // 1
- height: 0; // 1
- overflow: visible; // 2
-}
-
-//
-// Typography
-//
-
-// Remove top margins from headings
-//
-// By default, ``-`` all receive top and bottom margins. We nuke the top
-// margin for easier control within type scales as it avoids margin collapsing.
-// stylelint-disable-next-line selector-list-comma-newline-after
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- margin-top: 0;
- margin-bottom: 0.5rem;
- font-weight: normal;
-}
-
-// Reset margins on paragraphs
-//
-// Similarly, the top margin on ` `s get reset. However, we also reset the
-// bottom margin to use `rem` units instead of `em`.
-p {
- margin-top: 0;
- margin-bottom: 1rem;
-}
-
-// Abbreviations
-//
-// 1. Duplicate behavior to the data-* attribute for our tooltip plugin
-// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
-// 3. Add explicit cursor to indicate changed behavior.
-// 4. Remove the bottom border in Firefox 39-.
-// 5. Prevent the text-decoration to be skipped.
-
-abbr[title],
-abbr[data-original-title] {
- // 1
- text-decoration: underline; // 2
- text-decoration: underline dotted; // 2
- cursor: help; // 3
- border-bottom: 0; // 4
- text-decoration-skip-ink: none; // 5
-}
-
-address {
- margin-bottom: 1rem;
- font-style: normal;
- line-height: inherit;
-}
-
-ol,
-ul,
-dl {
- margin-top: 0;
- margin-bottom: 1rem;
-}
-
-ol ol,
-ul ul,
-ol ul,
-ul ol {
- margin-bottom: 0;
-}
-
-dt {
- font-weight: $font-weight-bold;
-}
-
-dd {
- margin-bottom: 0.5rem;
- margin-left: 0; // Undo browser default
-}
-
-blockquote {
- margin: 0 0 1rem;
-}
-
-b,
-strong {
- font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari
-}
-
-small {
- font-size: 80%;
-}
-
-//
-// Links
-//
-
-a {
- color: $theme-primary;
- text-decoration: none;
- background-color: transparent; // Remove the gray background on active links in IE 10.
- &:hover {
- color: $theme-primary_d2;
- text-decoration: none;
- }
-}
-
-// And undo these styles for placeholder links/named anchors (without href).
-// It would be more straightforward to just use a[href] in previous block, but that
-// causes specificity issues in many other styles that are too complex to fix.
-// See https://github.com/twbs/bootstrap/issues/19402
-
-a:not([href]) {
- color: inherit;
- text-decoration: none;
-
- &:hover {
- color: inherit;
- text-decoration: none;
- }
-}
-
-//
-// Images and content
-//
-
-img {
- vertical-align: middle;
- border-style: none; // Remove the border on images inside links in IE 10-.
- display: inline-block; // CSS Frameworks e.g. TW, Chakra-ui reset display as block
-}
-
-svg {
- // Workaround for the SVG overflow bug in IE10/11 is still required.
- // See https://github.com/twbs/bootstrap/issues/26878
- overflow: hidden;
- vertical-align: middle;
- display: inline-block; // CSS Frameworks e.g. TW, Chakra-ui reset display as block
-}
-
-//
-// Forms
-//
-
-// Work around a Firefox/IE bug where the transparent `button` background
-// results in a loss of the default `button` focus styles.
-//
-// Credit: https://github.com/suitcss/base/
-button:focus {
- outline: 1px dotted;
- outline: 5px auto -webkit-focus-ring-color;
-}
-
-input,
-button,
-select,
-optgroup,
-textarea {
- margin: 0; // Remove the margin in Firefox and Safari
- font-family: inherit;
- //@include font-size(inherit);
- font-size: inherit;
- line-height: inherit;
-}
-
-button,
-input {
- overflow: visible; // Show the overflow in Edge
-}
-
-button,
-select {
- text-transform: none; // Remove the inheritance of text transform in Firefox
-}
-
-// Set the cursor for non-`` buttons
-//
-// Details at https://github.com/twbs/bootstrap/pull/30562
-[role='button'] {
- cursor: pointer;
-}
-
-// Remove the inheritance of word-wrap in Safari.
-//
-// Details at https://github.com/twbs/bootstrap/issues/24990
-select {
- word-wrap: normal;
-}
-
-// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
-// controls in Android 4.
-// 2. Correct the inability to style clickable types in iOS and Safari.
-button,
-[type="button"], // 1
-[type="reset"],
-[type="submit"] {
- -webkit-appearance: button; // 2
-}
-
-// Opinionated: add "hand" cursor to non-disabled button elements.
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
- &:not(:disabled) {
- cursor: pointer;
- }
-}
-
-// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
-button::-moz-focus-inner,
-[type='button']::-moz-focus-inner,
-[type='reset']::-moz-focus-inner,
-[type='submit']::-moz-focus-inner {
- padding: 0;
- border-style: none;
-}
-
-input[type='radio'],
-input[type='checkbox'] {
- box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
- padding: 0; // 2. Remove the padding in IE 10-
-}
-
-textarea {
- overflow: auto; // Remove the default vertical scrollbar in IE.
- // Textareas should really only resize vertically so they don't break their (horizontal) containers.
- resize: vertical;
-}
-
-// Correct the cursor style of increment and decrement buttons in Chrome.
-[type='number']::-webkit-inner-spin-button,
-[type='number']::-webkit-outer-spin-button {
- height: auto;
-}
-
-[type='search'] {
- // This overrides the extra rounded corners on search inputs in iOS so that our
- // `.form-control` class can properly style them. Note that this cannot simply
- // be added to `.form-control` as it's not specific enough. For details, see
- // https://github.com/twbs/bootstrap/issues/11586.
- outline-offset: -2px; // 2. Correct the outline style in Safari.
- -webkit-appearance: none;
-}
-
-//
-// Remove the inner padding in Chrome and Safari on macOS.
-//
-
-[type='search']::-webkit-search-decoration {
- -webkit-appearance: none;
-}
-
-//
-// 1. Correct the inability to style clickable types in iOS and Safari.
-// 2. Change font properties to `inherit` in Safari.
-//
-
-::-webkit-file-upload-button {
- font: inherit; // 2
- -webkit-appearance: button; // 1
-}
-
-// Always hide an element with the `hidden` HTML attribute (from PureCSS).
-// Needed for proper display in IE 10-.
-[hidden] {
- display: none !important;
-}
diff --git a/packages/clerk-js/src/ui/styles/_injections.scss b/packages/clerk-js/src/ui/styles/_injections.scss
deleted file mode 100644
index 88cb16e5bea..00000000000
--- a/packages/clerk-js/src/ui/styles/_injections.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-$theme-primary: var(--clerk-primary);
-$theme-primary-d1: var(--clerk-primary-d1);
-$theme-primary-d2: var(--clerk-primary-d2);
-$theme-primary-l1: var(--clerk-primary-l1);
-$theme-primary-l2: var(--clerk-primary-l2);
-$theme-primary-a1: var(--clerk-primary-a1);
-$theme-primary-a2: var(--clerk-primary-a2);
-
-$theme-font-family: var(--clerk-font-family);
-$theme-font-color: var(--clerk-font-color);
-$theme-font-color-l1: var(--clerk-font-color-l1);
-$theme-label-font-weight: var(--clerk-label-font-weight);
-$theme-border-radius: var(--clerk-border-radius);
-$theme-background-color: var(--clerk-background-color);
-$theme-box-shadow: var(--clerk-box-shadow);
-
-$theme-accounts-background-color: var(--clerk-accounts-background-color);
-
-$theme-button-font-family: var(--clerk-button-font-family);
-$theme-button-font-color: var(--clerk-button-font-color);
-$theme-button-font-weight: var(--clerk-button-font-weight);
-
-$font-size-base: 1rem !default;
-$small-font-size: 80% !default;
-
-$font-weight-lighter: lighter !default;
-$font-weight-light: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-bold: 700 !default;
-$font-weight-bolder: bolder !default;
-$font-weight-base: $font-weight-normal !default;
-
-$line-height-base: 1.5 !default;
-
-$white: #fff !default;
diff --git a/packages/clerk-js/src/ui/styles/_sharedComponentsOverwrites.scss b/packages/clerk-js/src/ui/styles/_sharedComponentsOverwrites.scss
deleted file mode 100644
index 5aa11b93c4d..00000000000
--- a/packages/clerk-js/src/ui/styles/_sharedComponentsOverwrites.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- * This file contains necessary overwrites in @clerk/shared components
- * in order to use them in Clerk JS Authentication components, namely
- *
- {user.firstName || user.username ? `Hi, ${user.firstName || user.username}!` : determineIdentifier(user)}
-
- );
-};
diff --git a/packages/clerk-js/src/ui/userButton/UserButton.test.tsx b/packages/clerk-js/src/ui/userButton/UserButton.test.tsx
deleted file mode 100644
index 0b20f907761..00000000000
--- a/packages/clerk-js/src/ui/userButton/UserButton.test.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import { UserResource } from '@clerk/types';
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import { UserButton } from './UserButton';
-
-jest.mock('ui/contexts', () => {
- return {
- useCoreSessionList: () => {
- return [
- {
- id: 'deadbeef',
- user: {
- firstName: 'John',
- lastName: 'Doe',
- profileImageUrl: 'http://test.host/profile.png',
- primaryEmailAddress: 'jdoe@example.com',
- },
- },
- ];
- },
- useCoreClerk: () => {
- return {
- setSession: jest.fn(),
- signOut: jest.fn(),
- signOutOne: jest.fn(),
- };
- },
- withCoreUserGuard: (a: any) => a,
- useCoreSession: () => {
- return {
- id: 'deadbeef',
- user: {
- firstName: 'John',
- lastName: 'Doe',
- profileImageUrl: 'http://test.host/profile.png',
- primaryEmailAddress: 'jdoe@example.com',
- },
- };
- },
- useCoreUser: () => {
- return {
- firstName: 'John',
- lastName: 'Doe',
- } as UserResource;
- },
- useEnvironment: jest.fn(() => ({
- authConfig: {},
- displayConfig: { branded: false },
- })),
- useUserButtonContext: () => {
- return {
- useUserButtonContext: jest.fn(() => ({
- navigateAfterMultiSessionSingleSignOut: jest.fn(),
- navigateAfterSignOut: jest.fn(),
- navigateAfterSwitchSession: jest.fn(),
- userProfileURL: 'http://test.host/profile',
- signInUrl: 'http://test.host/signin',
- })),
- };
- },
- };
-});
-
-describe('UserButton', () => {
- beforeAll(() => {
- //@ts-ignore
- ReactDOM.createPortal = node => node;
- });
-
- it('renders the user button', () => {
- const tree = renderJSON((null);
- const containerRef = React.useRef(null);
- const { isActive, setIsActive } = useDetectClickOutside(containerRef, false);
- const { styles, attributes, update } = usePopper(
- userButtonRef.current,
- containerRef.current,
- userButtonPopperOptions as any,
- );
-
- React.useLayoutEffect(() => {
- void update?.();
- }, [isActive]);
-
- const handlePopupToggle = (e: any) => {
- if (e.button !== leftMouseButton) {
- return;
- }
- e.stopPropagation();
- setIsActive(!isActive);
- };
-
- return (
- <>
-
- {identifier}
}
-
-
-
-
-
-
-
-
- );
-});
-
-const leftMouseButton = 0;
diff --git a/packages/clerk-js/src/ui/userButton/UserButtonPopup.test.tsx b/packages/clerk-js/src/ui/userButton/UserButtonPopup.test.tsx
deleted file mode 100644
index 96a66963d4e..00000000000
--- a/packages/clerk-js/src/ui/userButton/UserButtonPopup.test.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import { SessionResource, UserResource } from '@clerk/types';
-import React from 'react';
-
-import { UserButtonPopup } from './UserButtonPopup';
-
-const defaultSessions = [
- {
- id: 'deadbeef',
- publicUserData: {
- firstName: 'John',
- lastName: 'Doe',
- profileImageUrl: 'http://test.host/profile.png',
- primaryEmailAddress: 'jdoe@example.com',
- },
- status: 'active',
- },
- {
- id: 'cafebabe',
- publicUserData: {
- firstName: 'Carla',
- lastName: 'Coe',
- profileImageUrl: 'http://test.host/profile.png',
- primaryEmailAddress: 'ccoe@example.com',
- },
- status: 'active',
- },
-] as any as SessionResource[];
-
-let singleSessionMode = true;
-let sessions: SessionResource[] = [];
-
-jest.mock('ui/contexts', () => {
- return {
- useCoreSessionList: () => {
- return sessions;
- },
- useCoreClerk: () => {
- return {
- setActive: jest.fn(),
- signOut: jest.fn(),
- signOutOne: jest.fn(),
- };
- },
- withCoreUserGuard: (a: any) => a,
- useCoreSession: () => {
- return {
- id: 'deadbeef',
- user: {
- firstName: 'John',
- lastName: 'Doe',
- profileImageUrl: 'https://images.clerktest.host/profile.png',
- primaryEmailAddress: 'jdoe@example.com',
- },
- };
- },
- useCoreUser: () => {
- return {
- firstName: 'John',
- lastName: 'Doe',
- } as UserResource;
- },
- useEnvironment: jest.fn(() => ({
- authConfig: {
- singleSessionMode,
- },
- displayConfig: {
- branded: false,
- },
- })),
- useUserButtonContext: jest.fn(() => ({
- navigateAfterMultiSessionSingleSignOut: jest.fn(),
- navigateAfterSignOut: jest.fn(),
- navigateAfterSwitchSession: jest.fn(),
- userProfileURL: 'http://test.host/profile',
- signInUrl: 'http://test.host/signin',
- })),
- };
-});
-
-describe('UserButtonPopup', () => {
- describe('multi session mode', () => {
- beforeEach(() => {
- singleSessionMode = false;
- sessions = defaultSessions;
- });
-
- it('renders the popup with all the available sessions', () => {
- const tree = renderJSON(
-
-
-
{user.primaryEmailAddress?.toString()}
-
- Hi, Jane!
-
-`;
diff --git a/packages/clerk-js/src/ui/userButton/__snapshots__/UserButton.test.tsx.snap b/packages/clerk-js/src/ui/userButton/__snapshots__/UserButton.test.tsx.snap
deleted file mode 100644
index 6e39d0506ec..00000000000
--- a/packages/clerk-js/src/ui/userButton/__snapshots__/UserButton.test.tsx.snap
+++ /dev/null
@@ -1,330 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`UserButton renders the user button 1`] = `
-Array [
-
-
-
- John Doe
-
-
- JD
-
-
- ,
-
-
-
-
- John Doe
-
-
- JD
-
-
-
- Hi, John!
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Add account
-
-
-
-
-
-
-
- John Doe
-
-
- JD
-
-
-
- John Doe
-
- ,
-
-
-
-
- John Doe
-
-
- JD
-
-
-
- Hi, John!
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Add account
-
-
-
-
-
-
-
- John Doe
-
-
- JD
-
-
-
- Hi, John!
-
-
-
-
-
-
-
-
-
-
-
-
-
- Carla Coe
-
-
- CC
-
-
-
-
- Carla
-
- Coe
-
-
-
-
-
-
-
- Add account
-
-
-
-
-
-
-
-
-
-
- John Doe
-
-
- JD
-
-
-
- Hi, John!
-
-
-
-
-
-
-
-
-
-
-
-
- John Doe
-
-
- JD
-
-
-
- Hi, John!
-
-
-
-
-
-
-
-
-
-
-
-
-
- Carla Coe
-
-
- CC
-
-
-
-
- Carla
-
- Coe
-
-
-
-
-
-
-
-
-
({
- isPopupVisible: false,
- setPopupVisible: noop,
-});
-
-export const useUserButtonPopupVisibility = () => React.useContext(PopupVisibilityContext);
diff --git a/packages/clerk-js/src/ui/userButton/utils.test.ts b/packages/clerk-js/src/ui/userButton/utils.test.ts
deleted file mode 100644
index 1aebf93f2ad..00000000000
--- a/packages/clerk-js/src/ui/userButton/utils.test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { UserResource } from '@clerk/types';
-
-import { determineIdentifier } from './utils';
-
-describe('UserButton utils', () => {
- describe('determineIdentifier(user)', () => {
- it('returns greeting if user has first name, username or primary phone number', () => {
- let user = {
- firstName: 'Joe',
- } as UserResource;
- expect(determineIdentifier(user)).toBe('Joe');
-
- user = {
- username: 'Joe',
- } as UserResource;
- expect(determineIdentifier(user)).toBe('Joe');
-
- user = {
- primaryEmailAddress: {
- emailAddress: 'joe@example.com',
- },
- } as UserResource;
- expect(determineIdentifier(user)).toBe('joe@example.com');
-
- user = {
- primaryPhoneNumber: {
- phoneNumber: '+1234567890',
- },
- } as UserResource;
- expect(determineIdentifier(user)).toBe('+1234567890');
- });
- });
-});
diff --git a/packages/clerk-js/src/ui/userButton/utils.ts b/packages/clerk-js/src/ui/userButton/utils.ts
deleted file mode 100644
index cf881c77f28..00000000000
--- a/packages/clerk-js/src/ui/userButton/utils.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { titleize } from '@clerk/shared/utils/string';
-import { UserResource } from '@clerk/types';
-
-export function determineIdentifier(user: UserResource): string {
- if (user.firstName || user.lastName) {
- return [titleize(user.firstName), titleize(user.lastName)].join(' ').trim();
- }
-
- if (user.username) {
- return user.username;
- }
-
- if (user.primaryEmailAddress) {
- return user.primaryEmailAddress.emailAddress;
- }
-
- if (user.primaryPhoneNumber) {
- return user.primaryPhoneNumber.phoneNumber;
- }
-
- if (user.primaryWeb3Wallet) {
- return user.primaryWeb3Wallet.web3Wallet;
- }
-
- return '';
-}
diff --git a/packages/clerk-js/src/ui/userProfile/AddVerifiableField.tsx b/packages/clerk-js/src/ui/userProfile/AddVerifiableField.tsx
deleted file mode 100644
index df14dc1d389..00000000000
--- a/packages/clerk-js/src/ui/userProfile/AddVerifiableField.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import { Button } from '@clerk/shared/components/button';
-import { Control } from '@clerk/shared/components/control';
-import { Form } from '@clerk/shared/components/form';
-import { InputWithIcon } from '@clerk/shared/components/input';
-import { OneTimeCodeInput, VerifyCodeHandler } from '@clerk/shared/components/oneTimeCodeInput';
-import { PhoneInput, PhoneViewer } from '@clerk/shared/components/phoneInput';
-import { TitledCard } from '@clerk/shared/components/titledCard';
-import { Wizard } from '@clerk/shared/components/wizard';
-import { VerificationResource } from '@clerk/types';
-import React from 'react';
-import { handleError, useFieldState, verificationErrorMessage } from 'ui/common';
-import { Alert } from 'ui/common/alert';
-import { useNavigate } from 'ui/hooks';
-import { PageHeading } from 'ui/userProfile/pageHeading';
-
-export interface ListValue {
- id: string;
- verification: VerificationResource | null;
- toString: () => string;
- destroy: () => Promise;
- prepareVerification: () => Promise;
- attemptVerification: (params: { code: string }) => Promise;
-}
-
-interface AddVerifiableFieldProps {
- type: 'email' | 'phone';
- label: string;
- inputIcon?: React.ReactNode;
- stepTitle: Record;
- stepText: Record;
- slug: string;
- onAdd: (value: string) => Promise;
-}
-
-export function AddVerifiableField({
- label,
- slug,
- onAdd,
- stepText,
- stepTitle,
- inputIcon,
- type,
-}: AddVerifiableFieldProps): JSX.Element {
- const inputName = `${label.replace(/\s/g, '_').toLowerCase()}_input`;
- const [state, setState] = React.useState<{
- step: number;
- listVal: ListValue | null;
- }>({
- listVal: null,
- step: 0,
- });
- const currentValue = useFieldState(slug, '');
- const code = useFieldState('code', '');
- const [error, setError] = React.useState();
- const { navigate } = useNavigate();
-
- React.useEffect(() => {
- currentValue.setError(undefined);
- setError(undefined);
- }, [currentValue.value]);
-
- const updateFieldSubmit = async (e: React.FormEvent) => {
- e.preventDefault();
- try {
- const listVal = await onAdd(currentValue.value);
- await listVal.prepareVerification();
- setState(currentState => ({ ...currentState, listVal, step: 1 }));
- } catch (err) {
- handleError(err, [currentValue], setError);
- }
- };
-
- const sendVerificationCode = () => {
- if (!state.listVal) {
- return;
- }
- // state.listVal.prepareVerification();
- };
-
- const verifyCode: VerifyCodeHandler = async (verify, reject) => {
- try {
- await state.listVal?.attemptVerification({ code: code.value });
- verify(() => setState(s => ({ ...s, step: s.step + 1 })));
- } catch (err) {
- reject(verificationErrorMessage(err));
- }
- };
-
- const onFinish = () => {
- if (!state.listVal) {
- return;
- }
- navigate(`../${state.listVal.id}`);
- };
-
- const onBack = () => navigate('../');
-
- const step1EnterValue = (
-
- );
-
- const step2Verify = (
- <>
-
- {stepText[state.step] + ' '}
- {type === 'phone' ? (
-
- ) : (
-
{currentValue.value}
- )}
- .
-
- {type === 'phone' ? (
-
- ) : (
-
{currentValue.value}
- )}{' '}
- {stepText[state.step]}
-
- Finish
-
-
- );
-
- return (
- <>
-
- {error}
-
-
- {step1EnterValue}
- {step2Verify}
- {step3Finish}
-
-
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/EditableField.tsx b/packages/clerk-js/src/ui/userProfile/EditableField.tsx
deleted file mode 100644
index 2971d5bf9d3..00000000000
--- a/packages/clerk-js/src/ui/userProfile/EditableField.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Control } from '@clerk/shared/components/control';
-import { Form } from '@clerk/shared/components/form';
-import { Input } from '@clerk/shared/components/input';
-import { TitledCard } from '@clerk/shared/components/titledCard';
-import React from 'react';
-import { handleError, useFieldState } from 'ui/common';
-import { Alert } from 'ui/common/alert';
-import { useCoreUser } from 'ui/contexts';
-import { useNavigate } from 'ui/hooks';
-import { PageHeading } from 'ui/userProfile/pageHeading';
-
-interface EditableFieldProps {
- label: string;
- slug: string;
- value?: string | null;
-}
-
-export const EditableField = (props: EditableFieldProps) => {
- const user = useCoreUser();
- const { label, slug, value } = props;
-
- // @ts-ignore
- const currentValue = useFieldState(slug, user[value] ? user[value] : '');
- const [error, setError] = React.useState();
-
- const { navigate } = useNavigate();
-
- const updateFieldSubmit = async (e: React.FormEvent) => {
- e.preventDefault();
- try {
- await user.update({ [currentValue.name]: currentValue.value });
- navigate('../');
- } catch (err) {
- handleError(err, [currentValue], setError);
- }
- };
-
- const handleCancel = () => {
- navigate('../');
- };
-
- const inputName = `${slug}_input`;
-
- return (
- <>
-
- {error}
-
-
-
-
- );
-};
diff --git a/packages/clerk-js/src/ui/userProfile/EditableListFieldRemoveCard.tsx b/packages/clerk-js/src/ui/userProfile/EditableListFieldRemoveCard.tsx
deleted file mode 100644
index ae5b1070a37..00000000000
--- a/packages/clerk-js/src/ui/userProfile/EditableListFieldRemoveCard.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Button } from '@clerk/shared/components/button';
-import { PhoneViewer } from '@clerk/shared/components/phoneInput';
-import { TitledCard } from '@clerk/shared/components/titledCard';
-import React from 'react';
-import { handleError } from 'ui/common';
-import { Alert } from 'ui/common/alert';
-
-interface EditableListFieldRemoveCardProps {
- type: 'phone' | 'email' | 'social_account' | 'web3_wallet';
- label: string;
- buttonLabel: string;
- onCancel: () => void;
- onRemove: () => Promise;
- onRemoved?: () => void;
-}
-
-export const EditableListFieldRemoveCard: React.FC = ({
- type,
- label,
- buttonLabel,
- onCancel,
- onRemove,
- onRemoved,
-}) => {
- const [error, setError] = React.useState();
-
- const updateFieldSubmit = async () => {
- try {
- await onRemove();
- if (typeof onRemoved === 'function') {
- await onRemoved();
- }
- } catch (err) {
- handleError(err, [], setError);
- }
- };
-
- const formattedType = type.split('_').join(' ');
-
- return (
-
- {error}
-
-
-
- {type === 'phone' ? (
- {label}
- )}{' '}
- will be removed from this account.
-
- {type === 'email' && (
-
- You’ll no longer receive communications to this email address, and you cannot use it when signing in to
- identify yourself.
-
- )}
- {type === 'phone' && (
-
- You will no longer receive messages to this number, and you cannot use it when signing in to identify
- yourself.
-
- )}
- {type === 'social_account' &&
Unlink your {label} account, and remove associated personal information.
}
- {type === 'web3_wallet' &&
Remove the connection between this app and your Web3 wallet
}
-
-
- {buttonLabel} {formattedType}
-
-
- Cancel
-
-
-
- );
-};
diff --git a/packages/clerk-js/src/ui/userProfile/NavBarLinks.test.tsx b/packages/clerk-js/src/ui/userProfile/NavBarLinks.test.tsx
deleted file mode 100644
index bc7fc2e2cbf..00000000000
--- a/packages/clerk-js/src/ui/userProfile/NavBarLinks.test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import * as React from 'react';
-
-import { DefaultNavBarLinks } from './NavBarLinks';
-
-jest.mock('ui/router/RouteContext');
-
-describe('>): JSX.Element {
- return (
-
- {label}
-
- );
- })}
-
- );
-}
-
-export function DefaultNavBarLinks(): JSX.Element {
- return renderNavBarLinks(DEFAULT_NAV_BAR_LINKS);
-}
diff --git a/packages/clerk-js/src/ui/userProfile/UserProfile.test.tsx b/packages/clerk-js/src/ui/userProfile/UserProfile.test.tsx
deleted file mode 100644
index 2c57b6dfaae..00000000000
--- a/packages/clerk-js/src/ui/userProfile/UserProfile.test.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-import { renderJSONAfterFirstAct } from '@clerk/shared/testUtils';
-import {
- Clerk,
- EmailAddressResource,
- ExternalAccountJSON,
- PhoneNumberResource,
- SessionActivity,
- SessionResource,
- SessionWithActivitiesResource,
- SignInResource,
- SignUpResource,
- VerificationJSON,
- Web3WalletResource,
-} from '@clerk/types';
-import { AuthConfig, ExternalAccount, UserSettings } from 'core/resources/internal';
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import { UserProfile } from './UserProfile';
-
-const mockNavigate = jest.fn();
-const mockUseCoreSignIn = jest.fn(
- () =>
- ({
- status: null,
- } as SignInResource),
-);
-const mockUseCoreSignUp = jest.fn(
- () =>
- ({
- status: null,
- } as SignUpResource),
-);
-
-const mockUseCoreSessionList = jest.fn(() => [] as SessionResource[]);
-
-jest.mock('ui/router/RouteContext');
-
-jest.mock('ui/hooks', () => ({
- useNavigate: jest.fn(() => {
- return {
- navigate: mockNavigate,
- };
- }),
-}));
-
-const sessionWithActivities: Partial = {
- id: 'sess_id',
- lastActiveAt: new Date(),
- latestActivity: {
- id: 'session_activity_1/',
- country: 'greece',
- isMobile: false,
- } as any as SessionActivity,
-};
-
-const externalAccount = new ExternalAccount(
- {
- id: 'fbac_yolo',
- provider: 'facebook',
- approved_scopes: 'email',
- email_address: 'peter@gmail.com',
- first_name: 'Peter',
- last_name: 'Smith',
- provider_user_id: '10147951078263327',
- verification: { status: 'verified' } as VerificationJSON,
- } as unknown as ExternalAccountJSON,
- '/path',
-);
-
-jest.mock('ui/contexts', () => ({
- useCoreSignIn: () => mockUseCoreSignIn(),
- useCoreSignUp: () => mockUseCoreSignUp(),
- useCoreSessionList: () => mockUseCoreSessionList(),
- useCoreSession: jest.fn(),
- useEnvironment: jest.fn(() => ({
- displayConfig: {
- theme: {
- general: {
- color: '#000000',
- },
- },
- },
- userSettings: {
- attributes: {
- phone_number: {
- // this should be true since it is a first factor but keeping it false for the needs of the test case
- enabled: false,
- used_for_second_factor: true,
- second_factors: ['phone_code'],
- },
- email_address: {
- // this should be true since it is a first factor but keeping it false for the needs of the test case
- enabled: false,
- used_for_first_factor: true,
- first_factors: ['email_code'],
- },
- first_name: {
- enabled: true,
- },
- last_name: {
- enabled: true,
- },
- username: {
- enabled: false,
- },
- password: {
- enabled: false,
- },
- web3_wallet: {
- enabled: false,
- },
- },
- social: {
- oauth_google: {
- enabled: true,
- required: false,
- authenticatable: true,
- strategy: 'oauth_google',
- },
- oauth_facebook: {
- enabled: true,
- required: false,
- authenticatable: true,
- strategy: 'oauth_facebook',
- },
- },
- } as Partial,
- authConfig: {
- singleSessionMode: true,
- } as Partial,
- })),
- withCoreUserGuard: (a: any) => a,
- useCoreUser: () => {
- return {
- twoFactorEnabled: () => true,
- externalAccounts: [externalAccount],
- verifiedExternalAccounts: [externalAccount],
- unverifiedExternalAccounts: [],
- phoneNumbers: [
- {
- id: '1',
- phoneNumber: '1234',
- verification: { status: 'verified' },
- linkedTo: [],
- } as any as PhoneNumberResource,
- {
- id: '2',
- phoneNumber: '5678',
- verification: { status: 'unverified' },
- linkedTo: [],
- } as any as PhoneNumberResource,
- ],
- emailAddresses: [
- {
- id: 1,
- emailAddress: 'clerk@clerk.dev',
- verification: { status: 'verified' },
- linkedTo: [],
- } as any as EmailAddressResource,
- {
- id: 2,
- emailAddress: 'clerk-unverified@clerk.dev',
- verification: { status: 'unverified' },
- linkedTo: [],
- } as any as EmailAddressResource,
- ],
- web3Wallets: [
- {
- web3Wallet: '0x0000000000000000000000000000000000000000',
- verification: { status: 'verified' },
- } as Web3WalletResource,
- ],
- getSessions: () => {
- return Promise.resolve([sessionWithActivities]);
- },
- };
- },
- useCoreClerk: () => {
- return {
- navigate: (to: string) => {
- mockNavigate(to);
- if (to) {
- // @ts-ignore
- window.location = new URL(to, window.location.origin);
- }
- return Promise.resolve();
- },
- } as Clerk;
- },
-}));
-
-// import { Link } from 'ui/router';
-
-jest.mock('ui/router', () => {
- return {
- // TODO add real Route/Link
- // eslint-disable-next-line react/display-name
- Route: ({ children }: any) => <>{children},
- // eslint-disable-next-line react/display-name
- Link: ({ children }: any) => <>{children},
- useRouter: () => {
- return {
- params: { social_account_id: 'fbac_yolo' },
- resolve: () => {
- return {
- toURL: {
- href: 'http://www.ssddd.com',
- },
- };
- },
- };
- },
- };
-});
-
-// @ts-ignore
-ReactDOM.createPortal = node => node;
-
-describe('(({ hideNavigation, only }) => {
- let components;
-
- if (only) {
- hideNavigation = true;
- }
-
- switch (only) {
- case 'account':
- components =
-
- )}
-
- {components}
-
-
- );
-});
-
-export { UserProfile };
diff --git a/packages/clerk-js/src/ui/userProfile/VerifyMagicLink.tsx b/packages/clerk-js/src/ui/userProfile/VerifyMagicLink.tsx
deleted file mode 100644
index b1270d34c4b..00000000000
--- a/packages/clerk-js/src/ui/userProfile/VerifyMagicLink.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { VerifyMagicLink } from 'ui/common';
-import { Route } from 'ui/router';
-
-export const VerifyMagicLinkRoutes = (): JSX.Element => {
- return (
-
-
- );
-};
diff --git a/packages/clerk-js/src/ui/userProfile/__snapshots__/NavBarLinks.test.tsx.snap b/packages/clerk-js/src/ui/userProfile/__snapshots__/NavBarLinks.test.tsx.snap
deleted file mode 100644
index 5e76316ba5c..00000000000
--- a/packages/clerk-js/src/ui/userProfile/__snapshots__/NavBarLinks.test.tsx.snap
+++ /dev/null
@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`
- ,
-
- ,
-]
-`;
diff --git a/packages/clerk-js/src/ui/userProfile/__snapshots__/UserProfile.test.tsx.snap b/packages/clerk-js/src/ui/userProfile/__snapshots__/UserProfile.test.tsx.snap
deleted file mode 100644
index 2194ccb3bd6..00000000000
--- a/packages/clerk-js/src/ui/userProfile/__snapshots__/UserProfile.test.tsx.snap
+++ /dev/null
@@ -1,6943 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`
- Account
- Security
- ,
-
-
-
-
- Account
-
-
- Manage settings related to your account
-
-
-
-
-
-
- Profile
-
-
- Manage profile settings
-
-
-
-
-
- Photo
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Social accounts
-
-
-
-
-
-
- peter@gmail.com
-
-
-
-
-
-
-
-
-
-
-
- Personal information
-
-
- Manage personal information settings
-
-
-
-
-
- First name
-
-
-
-
-
- Last name
-
-
-
-
-
-
-
-
-
- First name
-
-
- Edit your first name
-
-
-
-
-
-
-
-
- Last name
-
-
- Edit your last name
-
-
-
-
-
-
-
-
- Username
-
-
- Edit your username
-
-
-
-
-
-
-
-
- Emails
-
-
- Manage addresses associated with your account
-
-
-
-
-
-
-
-
-
- clerk@clerk.dev
-
-
-
- Verified
-
-
-
-
-
-
-
-
-
-
-
- clerk-unverified@clerk.dev
-
-
-
- Unverified
-
-
-
-
-
-
-
-
-
- Add email address
-
-
-
-
-
-
- Add email
-
-
- Enter an email address to add
-
-
-
-
-
-
-
-
- Phone numbers
-
-
- Manage phone numbers associated with your account
-
-
-
-
-
-
-
-
-
-
- +
- 1
-
- (123) 4
-
-
-
- Verified
-
-
-
-
-
-
-
-
-
-
-
-
- +
- 56
-
- 5678
-
-
-
- Unverified
-
-
-
-
-
-
-
-
-
- Add phone number
-
-
-
-
-
-
- Add phone
-
-
- Enter a phone number to add
-
-
-
-
-
-
-
-
- Web3 wallets
-
-
- Manage web3 wallets associated with your account
-
-
-
-
-
-
-
-
-
- 0x0000000000000000000000000000000000000000
-
-
-
- Primary
-
-
- Verified
-
-
-
-
-
-
-
-
-
-
-
-
-
- Web3 wallet
-
-
- Manage this Web3 wallet
-
-
-
-
-
-
-
-
-
-
- 0x0000000000000000000000000000000000000000
-
-
- Primary
-
-
- Verified
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Primary web3 wallet
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Add web3 wallet
-
-
- Connect your web3 wallet
-
-
-
-
-
-
-
-
- Connect
- MetaMask
- wallet
-
-
-
-
-
-
-
-
-
-
- Social accounts
-
-
-
-
-
-
-
-
-
-
-
- peter@gmail.com
-
- Verified
-
-
-
-
-
-
-
-
-
-
-
- Connect
- Google
- account
-
-
-
-
-
-
-
-
-
-
-
-
- Â
- Facebook Account
-
-
-
-
-
-
-
-
- Photo
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Security
-
-
- Manage settings related to account security
-
-
-
-
-
-
- Sign in
-
-
- Manage authentication settings
-
-
-
-
-
- 2-step verification
-
-
-
-
- Currently
-
- ON
-
-
-
-
-
-
-
-
-
-
-
-
-
- Active devices
-
-
- Manage devices currently signed in to your account
-
-
-
-
-
-
-
-
- Loading...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Loading...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 2-step verification
-
-
- Use a verification code when signing in from an unfamiliar device
-
-
-
-
-
-
- Add method
-
-
- Set up a new 2-step verification method
-
-
-
-
-
- SMS code
-
-
-
-
-
- Receive a verification code via SMS when signing in
-
-
- Add SMS code verification
-
-
-
-
-
-
-
-
-
-
-
-
- Add two-step verification
-
-
- Choose a phone number to receive a verification code
-
-
-
-
- Add new number
-
-
- A text message with a verification code will be sent to your phone number.
-
- Standard carrier SMS and data fees may apply.
-
-
-
-
- Continue
-
-
- Cancel
-
-
-
-
-
-
-
- Add phone
-
-
- Enter a phone number to add
-
-
-
-
-
-
-
-
- Password
-
-
- Change your password
-
-
-
-
-
-
- Connected to
- Google
-
,
-
- Connected to
- Facebook
-
,
-]
-`;
-
-exports[`Utility components for EmailAddresses renders the primary tag 1`] = `
-
- Primary
-
-`;
diff --git a/packages/clerk-js/src/ui/userProfile/account/Account.test.tsx b/packages/clerk-js/src/ui/userProfile/account/Account.test.tsx
deleted file mode 100644
index 38e180c2615..00000000000
--- a/packages/clerk-js/src/ui/userProfile/account/Account.test.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { render, screen } from '@clerk/shared/testUtils';
-import type { UserResource, UserSettingsResource } from '@clerk/types';
-import React from 'react';
-
-import { Account } from './Account';
-
-const mockEnvironment = jest.fn();
-
-jest.mock('ui/contexts', () => {
- return {
- // @ts-ignore 2698
- // ...jest.requireActual('ui/contexts'),
- useEnvironment: () => ({
- ...mockEnvironment(),
- displayConfig: {},
- }),
- // @ts-ignore 2352
- useCoreUser: () => ({ externalAccounts: [], verifiedExternalAccounts: [], unverifiedExternalAccounts: [] } as UserResource),
- useCoreClerk: jest.fn(),
- };
-});
-
-jest.mock('ui/hooks', () => {
- return {
- useNavigate: () => ({ navigate: jest.fn() }),
- };
-});
-
-const OTHER_ATTRIBUTES = {
- username: {
- enabled: false,
- },
- email_address: {
- enabled: false,
- },
- phone_number: {
- enabled: false,
- },
- web3_wallet: {
- enabled: false,
- },
-};
-
-describe(' => {
- return user.setProfileImage({ file }).catch(error => {
- alert(error);
- });
- };
-
- return (
-
-
- );
-};
diff --git a/packages/clerk-js/src/ui/userProfile/account/avatarWithUploader/index.ts b/packages/clerk-js/src/ui/userProfile/account/avatarWithUploader/index.ts
deleted file mode 100644
index 2acad0c841f..00000000000
--- a/packages/clerk-js/src/ui/userProfile/account/avatarWithUploader/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './AvatarWithUploader';
diff --git a/packages/clerk-js/src/ui/userProfile/account/index.tsx b/packages/clerk-js/src/ui/userProfile/account/index.tsx
deleted file mode 100644
index cffe367ac57..00000000000
--- a/packages/clerk-js/src/ui/userProfile/account/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import { Route } from 'ui/router';
-import { EmailAddressesRoutes } from 'ui/userProfile/emailAdressess';
-import { NameRoutes } from 'ui/userProfile/name';
-import { PhoneNumbersRoutes } from 'ui/userProfile/phoneNumbers';
-import { SocialAccountsRoutes } from 'ui/userProfile/socialAccounts';
-import { UsernameRoutes } from 'ui/userProfile/username';
-import { Web3WalletsRoutes } from 'ui/userProfile/web3Wallets';
-
-import { Account } from './Account';
-
-export { Account };
-
-type AccountRoutesProps = {
- standAlone?: boolean;
- index?: boolean;
-};
-
-export function AccountRoutes({ standAlone = false, index = false }: AccountRoutesProps): JSX.Element {
- return (
-
-
-
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/account/personalInformation/PersonalInformationCard.tsx b/packages/clerk-js/src/ui/userProfile/account/personalInformation/PersonalInformationCard.tsx
deleted file mode 100644
index e3e46dcc4c6..00000000000
--- a/packages/clerk-js/src/ui/userProfile/account/personalInformation/PersonalInformationCard.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { List } from '@clerk/shared/components/list';
-import { TitledCard } from '@clerk/shared/components/titledCard';
-import React from 'react';
-import { useCoreUser, useEnvironment } from 'ui/contexts';
-import { useNavigate } from 'ui/hooks';
-
-export const PersonalInformationCard = (): JSX.Element | null => {
- const user = useCoreUser();
- const { navigate } = useNavigate();
- const { userSettings } = useEnvironment();
- const {
- attributes: { first_name, last_name },
- } = userSettings;
-
- const hasAtLeastOneAttributeEnable = first_name?.enabled || last_name?.enabled;
-
- if (!hasAtLeastOneAttributeEnable) {
- return null;
- }
-
- const firstNameRow = (
- navigate('first-name')}
- >
- {user.firstName || ''}
-
- );
-
- const lastnameRow = (
- navigate('last-name')}
- >
- {user.lastName || ''}
-
- );
-
- const showFirstName = first_name.enabled;
- const showLastName = last_name.enabled;
-
- return (
-
-
- {showFirstName && firstNameRow}
- {showLastName && lastnameRow}
-
-
- );
-};
diff --git a/packages/clerk-js/src/ui/userProfile/account/personalInformation/index.ts b/packages/clerk-js/src/ui/userProfile/account/personalInformation/index.ts
deleted file mode 100644
index bdc46874352..00000000000
--- a/packages/clerk-js/src/ui/userProfile/account/personalInformation/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './PersonalInformationCard';
diff --git a/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileCard.test.tsx b/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileCard.test.tsx
deleted file mode 100644
index c9d6cbaf778..00000000000
--- a/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileCard.test.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import { EmailAddressResource, ExternalAccountResource, UserResource, Web3WalletResource } from '@clerk/types';
-import * as React from 'react';
-import { PartialDeep } from 'type-fest';
-import { useCoreUser, useEnvironment } from 'ui/contexts';
-
-import { ProfileCard } from './ProfileCard';
-
-jest.mock('ui/hooks', () => {
- return {
- useNavigate: () => ({ navigate: jest.fn() }),
- };
-});
-
-jest.mock('ui/contexts', () => {
- return {
- useEnvironment: jest.fn(),
- useCoreUser: jest.fn(),
- useCoreClerk: jest.fn(),
- };
-});
-
-const userWithoutExtAccounts = (): PartialDeep => {
- return {
- isPrimaryIdentification: jest.fn(() => true),
- emailAddresses: [
- {
- id: 1,
- emailAddress: 'clerk@clerk.dev',
- verification: { status: 'verified' },
- } as any as EmailAddressResource,
- {
- id: 2,
- emailAddress: 'clerk-unverified@clerk.dev',
- verification: { status: 'unverified' },
- } as any as EmailAddressResource,
- ],
- phoneNumbers: [],
- externalAccounts: [],
- verifiedExternalAccounts: [],
- unverifiedExternalAccounts: [],
- web3Wallets: [
- {
- web3Wallet: '0x0000000000000000000000000000000000000000',
- verification: { status: 'verified' },
- } as Web3WalletResource,
- ],
- };
-};
-
-const userWithExtAccounts = (): PartialDeep => {
- return {
- isPrimaryIdentification: jest.fn(() => true),
- emailAddresses: [
- {
- id: 1,
- emailAddress: 'clerk@clerk.dev',
- verification: { status: 'verified' },
- } as any as EmailAddressResource,
- {
- id: 2,
- emailAddress: 'clerk-unverified@clerk.dev',
- verification: { status: 'unverified' },
- } as any as EmailAddressResource,
- ],
- phoneNumbers: [],
- externalAccounts: [
- {
- id: 'eac_google',
- provider: 'google',
- emailAddress: 'sanjay@gmail.com',
- providerTitle: () => 'Google',
- } as ExternalAccountResource,
- {
- id: 'eac_twitch',
- provider: 'twitch',
- emailAddress: 'sanjay@gmail.com',
- username: 'dhalsim',
- providerTitle: () => 'Twitch',
- } as ExternalAccountResource,
- {
- id: 'eac_facebook',
- provider: 'facebook',
- } as ExternalAccountResource,
- ],
- verifiedExternalAccounts: [
- {
- id: 'eac_google',
- provider: 'google',
- emailAddress: 'sanjay@gmail.com',
- providerTitle: () => 'Google',
- } as ExternalAccountResource,
- {
- id: 'eac_twitch',
- provider: 'twitch',
- emailAddress: 'sanjay@gmail.com',
- username: 'dhalsim',
- providerTitle: () => 'Twitch',
- } as ExternalAccountResource,
- ],
- unverifiedExternalAccounts: [
- {
- id: 'eac_facebook',
- provider: 'facebook',
- providerTitle: () => 'Facebook',
- } as ExternalAccountResource,
- ],
- web3Wallets: [{ web3Wallet: '0x123456789' }],
- };
-};
-
-const envWithEmailPhone = () => ({
- displayConfig: {},
- userSettings: {
- attributes: {
- email_address: {
- enabled: true,
- },
- phone_number: {
- enabled: true,
- },
- username: {
- enabled: false,
- },
- web3_wallet: {
- enabled: false,
- },
- },
- },
-});
-
-const envWithExternalAccount = () => ({
- displayConfig: {},
- userSettings: {
- attributes: {
- email_address: {
- enabled: true,
- },
- phone_number: {
- enabled: true,
- },
- username: {
- enabled: false,
- },
- web3_wallet: {
- enabled: false,
- },
- },
- social: {
- oauth_google: {
- enabled: true,
- },
- oauth_twitch: {
- enabled: true,
- },
- oauth_facebook: {
- enabled: true,
- },
- },
- },
-});
-
-const envWithWeb3Wallet = () => ({
- displayConfig: {},
- userSettings: {
- attributes: {
- email_address: {
- enabled: true,
- },
- phone_number: {
- enabled: true,
- },
- username: {
- enabled: false,
- },
- web3_wallet: {
- enabled: true,
- },
- },
- },
-});
-
-describe(' navigate('username')}
- >
- {user.username}
-
- );
-
- const avatarRow = (
-
-
- );
-
- const showUsername = attributes.username.enabled;
- const showEmail = attributes.email_address.enabled;
- const showPhone = attributes.phone_number.enabled;
- const showSocialAccount = social && Object.values(social).filter(p => p.enabled).length > 0;
- const showWebWallet = attributes.web3_wallet.enabled;
-
- return (
-
-
- {avatarRow}
- {showUsername && buildUsernameRow()}
- {showEmail &&
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileEmailAddresses.test.tsx b/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileEmailAddresses.test.tsx
deleted file mode 100644
index d253c18e597..00000000000
--- a/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileEmailAddresses.test.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import { EmailAddressResource, UserResource } from '@clerk/types';
-import * as React from 'react';
-
-import { ProfileEmailAddresses } from './ProfileEmailAddresses';
-
-const mockNavigate = jest.fn();
-jest.mock('ui/hooks', () => ({
- useNavigate: jest.fn(() => {
- return {
- navigate: mockNavigate,
- };
- }),
-}));
-
-const mockIdentIsPrimary = jest.fn();
-jest.mock('ui/contexts/CoreUserContext', () => {
- return {
- useCoreUser: (): Partial => {
- return {
- isPrimaryIdentification: mockIdentIsPrimary,
- emailAddresses: [
- {
- id: 1,
- emailAddress: 'clerk@clerk.dev',
- verification: { status: 'verified' },
- } as any as EmailAddressResource,
- {
- id: 2,
- emailAddress: 'clerk-unverified@clerk.dev',
- verification: { status: 'unverified' },
- } as any as EmailAddressResource,
- ],
- };
- },
- };
-});
-
-describe(' navigate('email-addresses')}
- >
- {user.emailAddresses.length === 0 ? (
- None
- ) : (
-
- {user.emailAddresses.map(emailIdent => (
-
- {emailIdent.emailAddress}
- {user.isPrimaryIdentification(emailIdent) && Primary }
-
- ))}
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfilePhoneNumbers.test.tsx b/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfilePhoneNumbers.test.tsx
deleted file mode 100644
index e8a39f60c21..00000000000
--- a/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfilePhoneNumbers.test.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import { PhoneNumberResource, UserResource } from '@clerk/types';
-import * as React from 'react';
-
-import { ProfilePhoneNumbers } from './ProfilePhoneNumbers';
-
-const mockNavigate = jest.fn();
-jest.mock('ui/hooks', () => ({
- useNavigate: jest.fn(() => {
- return {
- navigate: mockNavigate,
- };
- }),
-}));
-
-const mockIdentIsPrimary = jest.fn();
-jest.mock('ui/contexts/CoreUserContext', () => {
- return {
- useCoreUser: (): Partial => {
- return {
- isPrimaryIdentification: mockIdentIsPrimary,
- phoneNumbers: [
- {
- id: '1',
- phoneNumber: '1234',
- verification: { status: 'verified' },
- } as any as PhoneNumberResource,
- {
- id: '2',
- phoneNumber: '5678',
- verification: { status: 'unverified' },
- } as any as PhoneNumberResource,
- ],
- };
- },
- };
-});
-
-describe(' navigate('phone-numbers')}
- >
- {user.phoneNumbers.length === 0 ? (
- None
- ) : (
-
- {user.phoneNumbers.map(phoneIdent => (
-
-
- {user.isPrimaryIdentification(phoneIdent) &&
Primary }
-
-
- ))}
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileSocialAccounts.test.tsx b/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileSocialAccounts.test.tsx
deleted file mode 100644
index 1b7bde69581..00000000000
--- a/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileSocialAccounts.test.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import { ExternalAccountResource, UserResource } from '@clerk/types';
-import * as React from 'react';
-
-import { ProfileSocialAccounts } from './ProfileSocialAccounts';
-
-const mockVerifiedExternalAccount = {
- id: '1',
- provider: 'google',
- emailAddress: 'clerk@clerk.dev',
- verification: { status: 'verified' },
- providerTitle: () => 'Google',
-} as ExternalAccountResource;
-
-const mockNavigate = jest.fn();
-jest.mock('ui/hooks', () => ({
- useNavigate: jest.fn(() => {
- return {
- navigate: mockNavigate,
- };
- }),
-}));
-
-const mockIdentIsPrimary = jest.fn();
-jest.mock('ui/contexts/CoreUserContext', () => {
- return {
- useCoreUser: (): Partial => {
- return {
- externalAccounts: [mockVerifiedExternalAccount],
- verifiedExternalAccounts: [mockVerifiedExternalAccount],
- };
- },
- };
-});
-
-describe(' navigate('social-accounts')}
- >
- {verifiedAccounts.length === 0 ? (
- None
- ) : (
-
- {verifiedAccounts.map((externalAccount: ExternalAccountResource) => (
-
-
-
- {externalAccount.username || externalAccount.emailAddress}
-
- ))}
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileWeb3Wallets.tsx b/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileWeb3Wallets.tsx
deleted file mode 100644
index 5ae5a09dd31..00000000000
--- a/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileWeb3Wallets.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { List } from '@clerk/shared/components/list';
-import { Tag, VerificationStatusTag } from '@clerk/shared/components/tag';
-import React from 'react';
-import { useCoreUser } from 'ui/contexts';
-import { useNavigate } from 'ui/hooks';
-
-export function ProfileWeb3Wallets(): JSX.Element {
- const { navigate } = useNavigate();
- const user = useCoreUser();
-
- return (
- navigate('web3-wallets')}
- >
- {user.web3Wallets.length > 0 ? (
-
- {user.web3Wallets.map(web3Wallet => (
-
- {web3Wallet.web3Wallet}
- {user.isPrimaryIdentification(web3Wallet) && Primary }
- {web3Wallet.verification.status && (
-
- ))}
-
None
- )}
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/account/profileCard/__snapshots__/ProfileCard.test.tsx.snap b/packages/clerk-js/src/ui/userProfile/account/profileCard/__snapshots__/ProfileCard.test.tsx.snap
deleted file mode 100644
index 7baf8ac6938..00000000000
--- a/packages/clerk-js/src/ui/userProfile/account/profileCard/__snapshots__/ProfileCard.test.tsx.snap
+++ /dev/null
@@ -1,573 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`
-
-
- Profile
-
-
- Manage profile settings
-
-
-
-
-
- Photo
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Email
-
-
-
-
-
- clerk@clerk.dev
-
- Primary
-
-
- Verified
-
-
-
- clerk-unverified@clerk.dev
-
- Primary
-
-
- Unverified
-
-
-
-
-
-
-
-
-
- Phone number
-
-
-
-
-
-
-
- Profile
-
-
- Manage profile settings
-
-
-
-
-
- Photo
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Email
-
-
-
-
-
- clerk@clerk.dev
-
- Primary
-
-
- Verified
-
-
-
- clerk-unverified@clerk.dev
-
- Primary
-
-
- Unverified
-
-
-
-
-
-
-
-
-
- Phone number
-
-
-
-
-
- Web3 wallet
-
-
-
-
-
- 0x0000000000000000000000000000000000000000
-
- Primary
-
-
- Verified
-
-
-
-
-
-
-
-
-
-
-
- Profile
-
-
- Manage profile settings
-
-
-
-
-
- Photo
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Email
-
-
-
-
-
- clerk@clerk.dev
-
- Primary
-
-
- Verified
-
-
-
- clerk-unverified@clerk.dev
-
- Primary
-
-
- Unverified
-
-
-
-
-
-
-
-
-
- Phone number
-
-
-
-
-
- Social accounts
-
-
-
-
-
-
- sanjay@gmail.com
-
-
-
- dhalsim
-
-
-
-
-
-
-
-
-
- Email
-
-
-
-
-
- clerk@clerk.dev
-
- Primary
-
-
- Verified
-
-
-
- clerk-unverified@clerk.dev
-
- Unverified
-
-
-
-
-
-
-
-`;
diff --git a/packages/clerk-js/src/ui/userProfile/account/profileCard/__snapshots__/ProfilePhoneNumbers.test.tsx.snap b/packages/clerk-js/src/ui/userProfile/account/profileCard/__snapshots__/ProfilePhoneNumbers.test.tsx.snap
deleted file mode 100644
index efa98cdae0b..00000000000
--- a/packages/clerk-js/src/ui/userProfile/account/profileCard/__snapshots__/ProfilePhoneNumbers.test.tsx.snap
+++ /dev/null
@@ -1,69 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`
-
- Phone number
-
-
-
-
-
-
- +
- 1
-
- (123) 4
-
-
- Primary
-
-
- Verified
-
-
-
-
- +
- 56
-
- 5678
-
-
- Unverified
-
-
-
-
-
-
-
-`;
diff --git a/packages/clerk-js/src/ui/userProfile/account/profileCard/__snapshots__/ProfileSocialAccounts.test.tsx.snap b/packages/clerk-js/src/ui/userProfile/account/profileCard/__snapshots__/ProfileSocialAccounts.test.tsx.snap
deleted file mode 100644
index e4a707f7b55..00000000000
--- a/packages/clerk-js/src/ui/userProfile/account/profileCard/__snapshots__/ProfileSocialAccounts.test.tsx.snap
+++ /dev/null
@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`
-
- Social accounts
-
-
-
-
-
-
- clerk@clerk.dev
-
-
-
-
-
-
-`;
diff --git a/packages/clerk-js/src/ui/userProfile/account/profileCard/index.ts b/packages/clerk-js/src/ui/userProfile/account/profileCard/index.ts
deleted file mode 100644
index d6fa6ff6cda..00000000000
--- a/packages/clerk-js/src/ui/userProfile/account/profileCard/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ProfileCard';
diff --git a/packages/clerk-js/src/ui/userProfile/emailAdressess/AddNewEmail.test.tsx b/packages/clerk-js/src/ui/userProfile/emailAdressess/AddNewEmail.test.tsx
deleted file mode 100644
index 32dff297a22..00000000000
--- a/packages/clerk-js/src/ui/userProfile/emailAdressess/AddNewEmail.test.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import { EmailAddressResource, EnvironmentResource, UserResource } from '@clerk/types';
-import React from 'react';
-import { PartialDeep } from 'type-fest';
-import { AddNewEmail } from './AddNewEmail';
-
-const mockNavigate = jest.fn();
-jest.mock('ui/hooks', () => ({
- useNavigate: () => {
- return {
- navigate: mockNavigate,
- };
- },
-}));
-
-jest.mock('ui/router/RouteContext', () => {
- return {
- useRouter: () => {
- return {
- params: { email_address_id: '1' },
- resolve: () => {
- return {
- toURL: {
- href: 'http://www.ssddd.com',
- },
- };
- },
- };
- },
- };
-});
-
-jest.mock('ui/contexts/CoreUserContext', () => {
- return {
- useCoreUser: (): Partial => {
- return {
- primaryEmailAddressId: '1',
- emailAddresses: [
- {
- id: '1',
- email_address: 'clerk1@clerk.dev',
- verification: { status: 'verified' },
- linkedTo: [],
- } as any as EmailAddressResource,
- ],
- };
- },
- };
-});
-
-jest.mock('ui/contexts/EnvironmentContext', () => {
- return {
- useEnvironment: jest.fn(
- () =>
- ({
- userSettings: {
- attributes: {
- email_address: {
- enabled: true,
- verifications: ['email_link'],
- },
- },
- },
- } as PartialDeep),
- ),
- };
-});
-
-describe('(Step.EnterEmailAddress);
- const [error, setError] = React.useState();
- const createdEmailRef = React.useRef();
- const emailValue = useFieldState('email_address', '');
-
- const magicLinksEnabled = magicLinksEnabledForInstance(environment);
- const nextStep = () => setStep(s => s + 1);
- const navigateBack = () => navigate('../');
- const navigateToCreatedEmailAddress = () => {
- if (createdEmailRef.current) {
- navigate(`../${createdEmailRef.current.id}`);
- }
- };
-
- const createEmailAddress = async (e: React.FormEvent) => {
- e.preventDefault();
- return user
- .createEmailAddress({ email: emailValue.value })
- .then(res => {
- createdEmailRef.current = res;
- nextStep();
- })
- .catch(e => handleError(e, [emailValue], setError));
- };
-
- const onErrorHandler = (e: any) => {
- handleError(e, [emailValue], setError);
- };
-
- const onVerificationCompleteHandler = () => {
- nextStep();
- };
-
- const enterEmailForm = step === Step.EnterEmailAddress && (
-
- );
-
- const verifyEmailScreen =
- step === Step.VerifyEmailAddress &&
- createdEmailRef.current &&
- (magicLinksEnabled ? (
-
- {emailValue.value} has successfully been added to your account.
-
-
- Finish
-
-
- );
-
- const title = magicLinksEnabled && step === Step.VerifyEmailAddress ? undefined : 'Add email';
-
- const subtitle = magicLinksEnabled && step === Step.VerifyEmailAddress ? undefined : stepSubtitleMap[step];
-
- return (
- <>
-
- {error}
-
- {enterEmailForm}
- {verifyEmailScreen}
- {finishScreen}
-
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/emailAdressess/EmailAddressVerificationWithMagicLink.test.tsx b/packages/clerk-js/src/ui/userProfile/emailAdressess/EmailAddressVerificationWithMagicLink.test.tsx
deleted file mode 100644
index 03a0e5f5a37..00000000000
--- a/packages/clerk-js/src/ui/userProfile/emailAdressess/EmailAddressVerificationWithMagicLink.test.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { render, renderJSON } from '@clerk/shared/testUtils';
-import { EmailAddressResource } from '@clerk/types';
-import { waitFor } from '@testing-library/dom';
-import React from 'react';
-
-import { EmailAddressVerificationWithMagicLink } from './EmailAddressVerificationWithMagicLink';
-
-jest.mock('ui/contexts', () => {
- return {
- useUserProfileContext: jest.fn(() => {
- return {
- routing: 'path',
- path: '/user',
- };
- }),
- };
-});
-
-describe('
- A verification link has been sent to
- {email.emailAddress}
-
- }
- secondaryText='Click the link in the email to verify your new email, then return to
- this tab.'
- className={className}
- onResendButtonClicked={startVerification}
- />
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/emailAdressess/EmailAddressVerificationWithOTP.test.tsx b/packages/clerk-js/src/ui/userProfile/emailAdressess/EmailAddressVerificationWithOTP.test.tsx
deleted file mode 100644
index 749b2026f2d..00000000000
--- a/packages/clerk-js/src/ui/userProfile/emailAdressess/EmailAddressVerificationWithOTP.test.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { render, renderJSON, screen, userEvent } from '@clerk/shared/testUtils';
-import { EmailAddressResource } from '@clerk/types';
-import { waitFor } from '@testing-library/dom';
-import React from 'react';
-
-import { EmailAddressVerificationWithOTP } from './EmailAddressVerificationWithOTP';
-
-jest.mock('ui/contexts', () => {
- return {
- useEnvironment: jest.fn(() => ({
- authConfig: {
- firstFactors: ['email_link'],
- },
- })),
- useUserProfileContext: jest.fn(() => {
- return {
- routing: 'path',
- path: '/user',
- };
- }),
- };
-});
-
-describe('
-
- An email containing a verification code has been sent to{' '}
- {email.emailAddress} .
-
-
-
;
-
-jest.mock('ui/hooks', () => ({
- useNavigate: () => {
- return {
- navigate: mockNavigate,
- };
- },
-}));
-
-jest.mock('ui/router/RouteContext', () => {
- return {
- useRouter: () => {
- return {
- params: { email_address_id: '1' },
- resolve: () => {
- return {
- toURL: {
- href: 'http://www.ssddd.com',
- },
- };
- },
- };
- },
- };
-});
-
-jest.mock('ui/contexts', () => {
- return {
- useCoreUser: () => mockUseCoreUser(),
- useEnvironment: jest.fn(
- () =>
- ({
- userSettings: mockFirstFactors,
- } as PartialDeep),
- ),
- useUserProfileContext: jest.fn(() => {
- return {
- routing: 'path',
- path: '/user',
- };
- }),
- };
-});
-
-describe('(false);
- const [error, setError] = React.useState();
-
- const email = user.emailAddresses.find(ea => ea.id === params.email_address_id);
-
- const isPrimary = email?.id === user.primaryEmailAddressId;
-
- if (!email) {
- return null;
- }
-
- const verificationStatus = email.verification?.status || 'unverified';
- const isVerified = verificationStatus === 'verified';
-
- const handleRemove = () => {
- setShowRemovalPage(true);
- };
-
- const onEmailAddressRemove = () => {
- return email.destroy();
- };
-
- const makeIdentPrimary = async () => {
- user.update({ primaryEmailAddressId: email.id }).catch(e => handleError(e, [], setError));
- };
-
- const onErrorHandler = (e: any) => {
- handleError(e, [], setError);
- };
-
- const removeEmailAddressScreen = (
- {
- setShowRemovalPage(false);
- }}
- onRemove={onEmailAddressRemove}
- onRemoved={() => {
- navigate('../');
- }}
- />
- );
-
- return (
- <>
-
-
- {error}
-
-
-
-
-
-
- {email.emailAddress}
-
-
-
-
-
-
- {isVerified && (
-
-
-
-
-
-
Primary email
-
This email will receive communications regarding your account.
-
-
-
-
- )}
- {!isVerified && (
-
- {magicLinksEnabledForInstance(environment) ? (
-
- )}
-
-
-
-
- )}
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/emailAdressess/EmailList.test.tsx b/packages/clerk-js/src/ui/userProfile/emailAdressess/EmailList.test.tsx
deleted file mode 100644
index 50ac428c73c..00000000000
--- a/packages/clerk-js/src/ui/userProfile/emailAdressess/EmailList.test.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import { EmailAddressResource, UserResource } from '@clerk/types';
-import React from 'react';
-
-import { EmailList } from './EmailList';
-
-jest.mock('ui/router/RouteContext');
-
-jest.mock('ui/contexts/CoreUserContext', () => {
- return {
- useCoreUser: (): Partial => {
- return {
- primaryEmailAddressId: '1',
- emailAddresses: [
- {
- id: '1',
- email_address: 'clerk1@clerk.dev',
- verification: { status: 'verified' },
- linkedTo: [],
- } as any as EmailAddressResource,
- {
- id: '21',
- email_address: 'clerk2@clerk.dev',
- verification: { status: 'verified' },
- linkedTo: [],
- } as any as EmailAddressResource,
- ],
- };
- },
- };
-});
-
-describe('
-
- {emailAddress.emailAddress}{' '}
-
-
-
- );
-}
-
-export function EmailList(): JSX.Element {
- const user = useCoreUser();
- const router = useRouter();
-
- const emailItems = user.emailAddresses.map(ea => (
- router.navigate(ea.id)}
- isPrimary={user.primaryEmailAddressId === ea.id}
- />
- ));
-
- return (
- <>
-
- {user.emailAddresses.length > 0 && {emailItems}
}
- {user.emailAddresses.length === 0 && No email addresses to display
}
- router.navigate('add')}
- className='cl-add-resource-button'
- type='button'
- flavor='text'
- buttonColor='primary'
- hoverable
- >
- Add email address
-
-
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/emailAdressess/__snapshots__/AddNewEmail.test.tsx.snap b/packages/clerk-js/src/ui/userProfile/emailAdressess/__snapshots__/AddNewEmail.test.tsx.snap
deleted file mode 100644
index ce1f1cdd87d..00000000000
--- a/packages/clerk-js/src/ui/userProfile/emailAdressess/__snapshots__/AddNewEmail.test.tsx.snap
+++ /dev/null
@@ -1,129 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`
-
-
- Add email
-
-
- Enter an email address to add
-
-
-
-
-
-
-
- Check your email
-
-
- A verification link has been sent to
-
- boss@clerk.dev
-
-
-
- Click the link in the email to verify your new email, then return to
- this tab.
-
-
- Resend magic link
-
-
-
- An email containing a verification code has been sent to
-
-
- boss@clerk.dev
-
- .
-
-
-
-
-
-
-
- Email
-
-
- Manage this email address
-
-
-
-
-
-
-
-
-
-
-
- Primary
-
-
- Verified
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Primary email
-
-
- This email will receive communications regarding your account.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Emails
-
-
- Manage addresses associated with your account
-
-
-
-
-
-
-
-
-
-
-
- Primary
-
-
- Verified
-
-
-
-
-
-
-
-
-
-
-
-
- Add email address
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/emailAdressess/utils.ts b/packages/clerk-js/src/ui/userProfile/emailAdressess/utils.ts
deleted file mode 100644
index 7245212ffc3..00000000000
--- a/packages/clerk-js/src/ui/userProfile/emailAdressess/utils.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { EnvironmentResource } from '@clerk/types';
-
-export function magicLinksEnabledForInstance(env: EnvironmentResource): boolean {
- const { userSettings } = env;
- const { email_address } = userSettings.attributes;
- return email_address.enabled && email_address.verifications.includes('email_link');
-}
diff --git a/packages/clerk-js/src/ui/userProfile/name/FirstName.test.tsx b/packages/clerk-js/src/ui/userProfile/name/FirstName.test.tsx
deleted file mode 100644
index 00c260e9024..00000000000
--- a/packages/clerk-js/src/ui/userProfile/name/FirstName.test.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import { UserResource } from '@clerk/types';
-import * as React from 'react';
-
-import { FirstName } from './FirstName';
-
-const mockNavigate = jest.fn();
-
-jest.mock('ui/hooks', () => ({
- useNavigate: () => {
- return {
- navigate: mockNavigate,
- };
- },
-}));
-
-jest.mock('ui/router/RouteContext');
-
-jest.mock('ui/contexts/CoreUserContext', () => {
- return {
- useCoreUser: (): Partial => {
- return {
- firstName: 'John',
- };
- },
- };
-});
-
-describe(' => {
- return {
- lastName: 'John',
- };
- },
- };
-});
-
-describe('
-
-
-
-
- First name
-
-
- Edit your first name
-
-
-
-
-
-
-
- Last name
-
-
- Edit your last name
-
-
-
-
-
-
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/pageHeading/PageHeading.test.tsx b/packages/clerk-js/src/ui/userProfile/pageHeading/PageHeading.test.tsx
deleted file mode 100644
index 8f79127ed2a..00000000000
--- a/packages/clerk-js/src/ui/userProfile/pageHeading/PageHeading.test.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import * as React from 'react';
-
-import { PageHeading } from './PageHeading';
-
-jest.mock('ui/router/RouteContext');
-
-describe('
- {backTo && (
-
- )}
-
-
- {title}
-
-
{subtitle}
-
-
-
-
-
-
- title
-
-
- subtitle
-
-
-
=> {
- return {
- primaryPhoneNumberId: '1',
- phoneNumbers: [
- {
- id: '1',
- phoneNumber: '1234',
- verification: { status: 'verified' },
- linkedTo: [],
- } as any as PhoneNumberResource,
- ],
- };
- },
- };
-});
-
-describe('
- A text message with a verification code will be sent to your phone number.
- Standard carrier SMS and data fees may apply.
-
- ),
- 1: 'A text message with a verification code has been sent to',
- 2: (
- <>
- has successfully been added to your account. You can now receive communications on this phone number.
- Standard carrier SMS and data fees may apply.
-
- ),
- }}
- onAdd={(value: string) => user.createPhoneNumber({ phoneNumber: value })}
- />
- );
-};
diff --git a/packages/clerk-js/src/ui/userProfile/phoneNumbers/PhoneDetail.test.tsx b/packages/clerk-js/src/ui/userProfile/phoneNumbers/PhoneDetail.test.tsx
deleted file mode 100644
index 352e00f12f6..00000000000
--- a/packages/clerk-js/src/ui/userProfile/phoneNumbers/PhoneDetail.test.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { render, renderJSON, screen, userEvent } from '@clerk/shared/testUtils';
-import { PhoneNumberResource } from '@clerk/types';
-import { ClerkAPIResponseError } from 'core/resources/Error';
-import React from 'react';
-import { useCoreUser } from 'ui/contexts/CoreUserContext';
-
-import { PhoneDetail } from './PhoneDetail';
-
-const mockNavigate = jest.fn();
-jest.mock('ui/hooks', () => ({
- useNavigate: () => {
- return {
- navigate: mockNavigate,
- };
- },
-}));
-
-jest.mock('ui/router/RouteContext', () => {
- return {
- useRouter: () => {
- return {
- params: { phone_number_id: '1' },
- resolve: () => {
- return {
- toURL: {
- href: 'http://www.ssddd.com',
- },
- };
- },
- };
- },
- };
-});
-
-jest.mock('ui/contexts/CoreUserContext', () => {
- return {
- useCoreUser: jest.fn(),
- };
-});
-
-describe('(false);
- const [isPrimary, setIsPrimary] = React.useState(false);
- const currentCode = useFieldState('', '');
- const [error, setError] = React.useState();
-
- const phoneIdent = user.phoneNumbers.find(pi => pi.id === params.phone_number_id);
-
- const verificationStatus = phoneIdent?.verification?.status || 'unverified';
- const isVerified = verificationStatus === 'verified';
-
- // TODO: we need this because updating the user obj
- // does not trigger a rerender through the context. Please discuss
- React.useLayoutEffect(() => {
- setIsPrimary(phoneIdent?.id === user?.primaryPhoneNumberId);
- }, []);
-
- React.useEffect(() => {
- if (!phoneIdent || isVerified) {
- return;
- }
- void sendVerificationCode();
- }, []);
-
- if (phoneIdent === undefined) {
- // TODO Braden: 404 here?
- return <>;
- }
-
- const handleRemove = () => {
- setShowRemovalPage(true);
- };
-
- const onPhoneNumberRemove = () => {
- return phoneIdent.destroy();
- };
-
- const sendVerificationCode = async () => {
- try {
- await phoneIdent?.prepareVerification();
- } catch (err) {
- handleError(err, [currentCode], setError);
- }
- };
-
- const verifyCode: VerifyCodeHandler = async (verify, reject) => {
- try {
- await phoneIdent?.attemptVerification({ code: currentCode.value });
- verify(() => currentCode.setValue(''));
- } catch (err) {
- reject(verificationErrorMessage(err));
- }
- };
-
- const makeIdentPrimary = async () => {
- try {
- await user.update({ primaryPhoneNumberId: phoneIdent?.id });
- setIsPrimary(true);
- } catch (err) {
- handleError(err, [currentCode], setError);
- }
- };
-
- const otpInput = (
-
- Connected to {connection.type}
-
- ));
-
- const removalPage = (
- {
- setShowRemovalPage(false);
- }}
- onRemove={onPhoneNumberRemove}
- onRemoved={() => {
- navigate('../');
- }}
- />
- );
-
- return (
- <>
-
-
- {error}
-
-
-
-
-
-
-
- {isVerified && (
-
-
-
-
-
-
Primary phone
-
This phone will receive communications regarding your account.
-
-
-
-
- )}
-
- {!isVerified && otpInput}
-
-
-
- )}
-
- );
-};
diff --git a/packages/clerk-js/src/ui/userProfile/phoneNumbers/PhoneList.test.tsx b/packages/clerk-js/src/ui/userProfile/phoneNumbers/PhoneList.test.tsx
deleted file mode 100644
index 381a2c1b164..00000000000
--- a/packages/clerk-js/src/ui/userProfile/phoneNumbers/PhoneList.test.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import { PhoneNumberResource, UserResource } from '@clerk/types';
-import React from 'react';
-
-import { PhoneList } from './PhoneList';
-
-jest.mock('ui/router/RouteContext');
-
-jest.mock('ui/contexts/CoreUserContext', () => {
- return {
- useCoreUser: (): Partial => {
- return {
- primaryEmailAddressId: '1',
- phoneNumbers: [
- {
- id: '1',
- phoneNumber: '1234',
- verification: { status: 'verified' },
- linkedTo: [],
- } as any as PhoneNumberResource,
- {
- id: '21',
- phoneNumber: '123',
- verification: { status: 'verified' },
- linkedTo: [],
- } as any as PhoneNumberResource,
- ],
- };
- },
- };
-});
-
-describe('
- Primary
-
- ) : null;
-
- const connections = phone.linkedTo.map(connection => (
-
- Connected to {connection.type}
-
- ));
-
- return (
- router.navigate(phone.id)}
- key={phone.id}
- >
-
-
-
- {primaryTag}
-
- {connections}
-
- );
- };
-
- return (
- <>
-
- {user.phoneNumbers.length > 0 && {user.phoneNumbers.map(createPhoneListItem)}
}
- {user.phoneNumbers.length === 0 && No phone numbers to display
}
- router.navigate('add')}
- className='cl-add-resource-button'
- type='button'
- flavor='text'
- buttonColor='primary'
- hoverable
- >
- Add phone number
-
-
-
- );
-};
diff --git a/packages/clerk-js/src/ui/userProfile/phoneNumbers/__snapshots__/AddNewPhone.test.tsx.snap b/packages/clerk-js/src/ui/userProfile/phoneNumbers/__snapshots__/AddNewPhone.test.tsx.snap
deleted file mode 100644
index 592ef5830b2..00000000000
--- a/packages/clerk-js/src/ui/userProfile/phoneNumbers/__snapshots__/AddNewPhone.test.tsx.snap
+++ /dev/null
@@ -1,2521 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`
-
-
- Add phone
-
-
- Enter a phone number to add
-
-
-
-
-
-
-
-
- Phone number
-
-
- Manage this phone number
-
-
-
-
-
-
-
-
-
-
-
- 🇺🇸
-
- +
- 1
-
- (123) 4
-
-
-
- Verified
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Primary phone
-
-
- This phone will receive communications regarding your account.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Phone numbers
-
-
- Manage phone numbers associated with your account
-
-
-
-
-
-
-
-
-
- +
- 1
-
- (123) 4
-
-
-
- Verified
-
-
-
-
-
-
-
-
-
-
-
-
- +
- 1
-
- 123
-
-
-
- Verified
-
-
-
-
-
-
-
-
-
- Add phone number
-
-
-
-
-
-
-
-
-
- );
-};
diff --git a/packages/clerk-js/src/ui/userProfile/security/ActiveMethodsCard.test.tsx b/packages/clerk-js/src/ui/userProfile/security/ActiveMethodsCard.test.tsx
deleted file mode 100644
index 348ceb2d99e..00000000000
--- a/packages/clerk-js/src/ui/userProfile/security/ActiveMethodsCard.test.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import { PhoneNumberResource, UserResource } from '@clerk/types';
-import * as React from 'react';
-
-import { ActiveMethodsCard } from './ActiveMethodsCard';
-
-jest.mock('ui/contexts/CoreUserContext', () => {
- return {
- useCoreUser: (): Partial => {
- return {
- twoFactorEnabled: true,
- phoneNumbers: [
- {
- id: '1',
- phoneNumber: '123123',
- verification: { status: 'verified' },
- reservedForSecondFactor: true,
- },
- ] as PhoneNumberResource[],
- };
- },
- };
-});
-
-it('renders the active methods card', () => {
- const tree = renderJSON(();
-
- const user = useCoreUser();
-
- const enabledPhoneNumbers = user.phoneNumbers
- .filter(ph => ph.verification.status === 'verified')
- .filter(ph => ph.reservedForSecondFactor);
-
- const subtitleMessage = user.twoFactorEnabled
- ? '2-step verification is currently enabled using these methods.'
- : '2-step verification is not enabled.';
-
- function onError(err: Error) {
- if (!err) {
- return;
- }
- handleError(err, [], setError);
- }
-
- return enabledPhoneNumbers.length === 0 ? null : (
-
- {error}
-
-
- {enabledPhoneNumbers.map(phone => (
-
-
- );
-}
-
-function PhoneListItem({ phone, onError }: PhoneListItemProps): JSX.Element {
- const { title } = TwoStepMethodsToDisplayDataMap[TwoStepMethod.SMS];
-
- async function makeDefault() {
- try {
- await phone.makeDefaultSecondFactor();
- } catch (err) {
- onError(err);
- }
- }
-
- async function remove() {
- try {
- await phone.setReservedForSecondFactor({ reserved: false });
- } catch (err) {
- onError(err);
- }
- }
-
- return (
- Default }
-
- );
-}
-
-type PhoneListItemProps = {
- phone: PhoneNumberResource;
- onError: (err: Error) => void;
-};
-
-function Actions({ onMakeDefault, onRemove }: ActionsProps): JSX.Element {
- return (
-
-
- );
-}
-
-type ActionsProps = {
- onMakeDefault: () => void;
- onRemove: () => void;
-};
diff --git a/packages/clerk-js/src/ui/userProfile/security/AddMethodCard.test.tsx b/packages/clerk-js/src/ui/userProfile/security/AddMethodCard.test.tsx
deleted file mode 100644
index ca7a0fd12de..00000000000
--- a/packages/clerk-js/src/ui/userProfile/security/AddMethodCard.test.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import * as React from 'react';
-
-import { AddMethodCard } from './AddMethodCard';
-
-jest.mock('ui/contexts', () => {
- return {
- useCoreClerk: jest.fn(() => ({})),
- };
-});
-
-it('renders the add method card', () => {
- const tree = renderJSON(
-
-
{note}
-
navigate(linkPath)}
- >
- {buttonTitle}
-
-
- );
- }
-
- return (
-
- {availableMethods.map(buildAddMethodRow)}
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/security/AddPhone.tsx b/packages/clerk-js/src/ui/userProfile/security/AddPhone.tsx
deleted file mode 100644
index 23b7ae6038b..00000000000
--- a/packages/clerk-js/src/ui/userProfile/security/AddPhone.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { Button } from '@clerk/shared/components/button';
-import { PhoneViewer } from '@clerk/shared/components/phoneInput';
-import { Radio } from '@clerk/shared/components/radio';
-import { TitledCard } from '@clerk/shared/components/titledCard';
-import { PhoneNumberResource } from '@clerk/types';
-import React from 'react';
-import { handleError } from 'ui/common';
-import { Alert } from 'ui/common/alert';
-import { useCoreUser } from 'ui/contexts';
-import { useNavigate } from 'ui/hooks';
-import { Link } from 'ui/router';
-import { PageHeading } from 'ui/userProfile/pageHeading';
-
-// This is a temp workaround to make the standalone version
-// of the security pages (();
- const twoStepValidPhoneNumbers = React.useMemo(() => {
- return user.phoneNumbers.filter(ph => {
- return ph.verification.status === 'verified' && !ph.reservedForSecondFactor;
- });
- }, [user.phoneNumbers]);
- const [selectedPhone, setSelectedPhone] = React.useState(undefined);
-
- const onClickCancel = () => {
- navigate('../');
- };
-
- const onClickContinue = async () => {
- try {
- setError(undefined);
- await selectedPhone?.setReservedForSecondFactor({ reserved: !selectedPhone?.reservedForSecondFactor });
- navigate('../');
- } catch (err) {
- handleError(err, [], setError);
- }
- };
-
- const phoneRows = twoStepValidPhoneNumbers.map(phone => (
- setSelectedPhone(phone)}
- key={phone.id}
- className='cl-phone-select-row'
- role='button'
- tabIndex={0}
- >
-
- ));
- return (
- <>
-
- {error}
-
- {phoneRows}
- {!standAlone && (
-
-
- )}
- {standAlone && twoStepValidPhoneNumbers.length === 0 && (
- No phone numbers found.
- )}
- {standAlone && twoStepValidPhoneNumbers.length === 0 ? null : (
-
- A text message with a verification code will be sent to your phone number.
-
Standard carrier SMS and data fees may apply.
-
-
- Continue
-
-
- Cancel
-
-
-
-
- );
-};
diff --git a/packages/clerk-js/src/ui/userProfile/security/ChangePassword.test.tsx b/packages/clerk-js/src/ui/userProfile/security/ChangePassword.test.tsx
deleted file mode 100644
index befc0141e6d..00000000000
--- a/packages/clerk-js/src/ui/userProfile/security/ChangePassword.test.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { render, screen } from '@clerk/shared/testUtils';
-import { EnvironmentResource, UserResource } from '@clerk/types';
-import * as React from 'react';
-import { PartialDeep } from 'type-fest';
-import { useEnvironment } from 'ui/contexts';
-import { ChangePassword } from 'ui/userProfile/security/ChangePassword';
-
-jest.mock('ui/hooks', () => ({
- useNavigate: () => ({ navigate: jest.fn() }),
-}));
-
-jest.mock('ui/router/RouteContext');
-
-jest.mock('ui/contexts', () => {
- return {
- useCoreUser: (): Partial => ({
- passwordEnabled: true,
- }),
- useEnvironment: jest.fn(),
- };
-});
-
-describe('>).mockImplementation(() => ({
- userSettings: {
- attributes: {
- password: {
- enabled: true,
- },
- },
- },
- }));
-
- render(>).mockImplementation(() => ({
- userSettings: {
- attributes: {
- password: {
- enabled: false,
- },
- },
- },
- }));
-
- render(();
-
- const onClickUpdatePassword = async () => {
- if (password.value !== confirmPassword.value) {
- setError("Passwords don't match.");
- return;
- }
-
- try {
- await user.update({ password: password.value });
- navigate('../');
- } catch (err) {
- handleError(err, [password], setError);
- }
- };
-
- const showRemovePassword = user.passwordEnabled && !attributes.password.required;
-
- const onClickRemovePassword = async () => {
- try {
- await user.update({ password: '' });
- navigate('../');
- } catch (err) {
- setError('' + err);
- }
- };
-
- return (
- <>
-
- {error}
-
-
-
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/security/DevicesAndActivity/ActiveDevicesCard.test.tsx b/packages/clerk-js/src/ui/userProfile/security/DevicesAndActivity/ActiveDevicesCard.test.tsx
deleted file mode 100644
index 7dccd51f3e9..00000000000
--- a/packages/clerk-js/src/ui/userProfile/security/DevicesAndActivity/ActiveDevicesCard.test.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import { SessionActivity, SessionWithActivitiesResource, UserResource } from '@clerk/types';
-import * as React from 'react';
-import { ActiveDevicesCard } from 'ui/userProfile/security/DevicesAndActivity/ActiveDevicesCard';
-
-const sessionWithActivities = {
- id: 'sess_id',
- lastActiveAt: new Date(),
- latestActivity: {
- browserName: 'Safari',
- browserVersion: '10',
- city: 'Athens',
- country: 'Greece',
- deviceType: 'Iphone',
- id: '123',
- ipAddress: '123.123.123.123',
- isMobile: false,
- } as any as SessionActivity,
-} as SessionWithActivitiesResource;
-
-jest.mock('ui/contexts', () => {
- return {
- withCoreUserGuard: (a: any) => a,
- useCoreSession: () => {
- return { id: 'sess1' };
- },
- useCoreUser: () => {
- return {
- getSessions: () => {
- return Promise.resolve([sessionWithActivities]);
- },
- } as UserResource;
- },
- };
-});
-
-describe('([]);
-
- React.useEffect(() => {
- user?.getSessions().then(sa => setSessionsWithActivities(sa));
- }, [user]);
-
- const currentSessionFirst = (a: SessionWithActivitiesResource) => (a.id === session.id ? -1 : 1);
-
- const sessionElements = sessionsWithActivities.length
- ? sessionsWithActivities.sort(currentSessionFirst).map(sa => (
-
- {sessionElements ? sessionElements :
-
- );
-}
-ActiveDevicesCardBase.displayName = 'ActiveDevicesCard';
-
-export const ActiveDevicesCard = withCoreUserGuard(ActiveDevicesCardBase);
diff --git a/packages/clerk-js/src/ui/userProfile/security/DevicesAndActivity/ActivityDescription.test.tsx b/packages/clerk-js/src/ui/userProfile/security/DevicesAndActivity/ActivityDescription.test.tsx
deleted file mode 100644
index ab1cee254e7..00000000000
--- a/packages/clerk-js/src/ui/userProfile/security/DevicesAndActivity/ActivityDescription.test.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { render, renderJSON, screen } from '@clerk/shared/testUtils';
-import { SessionActivity } from '@clerk/types';
-import * as React from 'react';
-import { ActivityDescription } from 'ui/userProfile/security/DevicesAndActivity/ActivityDescription';
-
-const date = new Date('1/1/2021 18:00 GMT+2');
-
-describe('
-
- {title}
- {isCurrentSession && (
-
- This device
-
- )}
-
- {!!browser &&
{browser}
}
- {!!ipAddress &&
{ipAddress}
}
- {!!location &&
{location}
}
-
- {formatRelative(lastActiveAt || new Date(), new Date())}
-
-
- {sessionActivity.isMobile ?
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/security/DevicesAndActivity/ActivityListItem.tsx b/packages/clerk-js/src/ui/userProfile/security/DevicesAndActivity/ActivityListItem.tsx
deleted file mode 100644
index c2ed0a61cb9..00000000000
--- a/packages/clerk-js/src/ui/userProfile/security/DevicesAndActivity/ActivityListItem.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-// @ts-ignore
-import { default as SignOutIcon } from '@clerk/shared/assets/icons/sign-out.svg';
-import { List } from '@clerk/shared/components/list';
-import { Menu } from '@clerk/shared/components/menu';
-import { Popover } from '@clerk/shared/components/popover';
-import { SkeletonLoader } from '@clerk/shared/components/skeletonLoader/SkeletonLoader';
-import { SessionWithActivitiesResource } from '@clerk/types';
-import { SessionResource } from '@clerk/types';
-import React from 'react';
-import { ActivityDescription } from 'ui/userProfile/security/DevicesAndActivity/ActivityDescription';
-import { ActivityIcon } from 'ui/userProfile/security/DevicesAndActivity/ActivityIcon';
-
-export function ActivityListItem(props: {
- sessionWithActivities: SessionWithActivitiesResource;
- currentSession: SessionResource | null | undefined;
-}): JSX.Element {
- const { latestActivity: sessionActivity, lastActiveAt, id } = props.sessionWithActivities;
- const isCurrentSession = id === props.currentSession?.id;
-
- return (
-
- Sign out on device ,
- handleSelect: revokeSession,
- isDestructiveAction: true,
- },
- ]}
- />
-
- );
-}
-
-export function ActivityListItemSkeleton(): JSX.Element {
- return (
-
-
-
-
- }
- >
-
-
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/security/DevicesAndActivity/__snapshots__/ActiveDevicesCard.test.tsx.snap b/packages/clerk-js/src/ui/userProfile/security/DevicesAndActivity/__snapshots__/ActiveDevicesCard.test.tsx.snap
deleted file mode 100644
index 03a0b889c5b..00000000000
--- a/packages/clerk-js/src/ui/userProfile/security/DevicesAndActivity/__snapshots__/ActiveDevicesCard.test.tsx.snap
+++ /dev/null
@@ -1,236 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`
-
-
- Active devices
-
-
- Manage devices currently signed in to your account
-
-
-
-
-
-
-
-
- Loading...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Loading...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Iphone
-
- This device
-
-
-
- Safari 10
-
-
- 123.123.123.123
-
-
- Athens, Greece
-
-
- 1/1/2021
-
-
-
- Desktop device
-
- This device
-
-
-
- Web browser
-
-
- 1/1/2021
-
-
-
- Iphone
-
- This device
-
-
-
- Safari 10
-
-
- 123.123.123.123
-
-
- 1/1/2021
-
-
-
-`;
-
-exports[`
-
-`;
diff --git a/packages/clerk-js/src/ui/userProfile/security/Security.test.tsx b/packages/clerk-js/src/ui/userProfile/security/Security.test.tsx
deleted file mode 100644
index 1f50e4dd966..00000000000
--- a/packages/clerk-js/src/ui/userProfile/security/Security.test.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { mocked, render, renderJSON, screen } from '@clerk/shared/testUtils';
-import {
- EnvironmentResource,
- SessionActivity,
- SessionResource,
- SessionWithActivitiesResource,
- UserResource,
-} from '@clerk/types';
-import * as React from 'react';
-import { PartialDeep } from 'type-fest';
-
-import { useEnvironment } from '../../contexts';
-import { Security } from './Security';
-
-const sessionWithActivities: Partial = {
- id: 'sess_id',
- lastActiveAt: new Date(),
- latestActivity: {
- id: 'session_activity_1/',
- country: 'greece',
- isMobile: false,
- } as any as SessionActivity,
-};
-
-jest.mock('ui/contexts', () => {
- return {
- useEnvironment: jest.fn(),
- useCoreSession: () => {
- return { id: 'sess_id' } as SessionResource;
- },
- withCoreUserGuard: (a: any) => a,
- useCoreClerk: () => {
- return {
- navigate: jest.fn(),
- };
- },
- useCoreUser: () => {
- return {
- twoFactorEnabled: true,
- passwordEnabled: true,
- getSessions: () => {
- return Promise.resolve([sessionWithActivities]);
- },
- } as UserResource;
- },
- };
-});
-
-describe('>, true).mockImplementation(
- () =>
- ({
- userSettings: {
- attributes: {
- phone_number: {
- used_for_second_factor: true,
- second_factors: ['phone_code'],
- },
- password: {
- enabled: true,
- },
- },
- },
- displayConfig: {
- branded: true,
- },
- } as PartialDeep),
- );
- const tree = renderJSON(>, true).mockImplementation(
- () =>
- ({
- userSettings: {
- attributes: {
- phone_number: {
- used_for_second_factor: false,
- },
- password: {
- enabled: true,
- required: true,
- },
- },
- },
- } as PartialDeep),
- );
- render(>, true).mockImplementation(
- () =>
- ({
- userSettings: {
- attributes: {
- phone_number: {
- used_for_second_factor: false,
- },
- password: {
- enabled: true,
- required: false,
- },
- },
- },
- } as PartialDeep),
- );
- render( navigate('password')}
- >
- {user.passwordEnabled ? (
- ••••••••••
- ) : (
- None
- )}
-
- );
-
- const buildSecondFactorRow = () => {
- const twoFacOn = user.twoFactorEnabled;
- return (
- navigate('two-step')}
- >
-
- Currently {twoFacOn ? 'ON' : 'OFF'}
- {twoFacOn && (
-
-
- )}
-
-
- );
- };
-
- return (
- <>
-
-
- {showPasswordRow && buildPasswordRow()}
- {showSecondFactorRow && buildSecondFactorRow()}
-
-
- )}
- => {
- return {
- twoFactorEnabled: true,
- phoneNumbers: [
- {
- id: '1',
- phoneNumber: '123123',
- verification: { status: 'verified' },
- reservedForSecondFactor: true,
- },
- ] as PhoneNumberResource[],
- };
- },
- };
-});
-
-it('renders
-
-
- Active methods
-
-
- 2-step verification is currently enabled using these methods.
-
-
-
-
-
- SMS code
-
-
-
-
- +
- 1
-
- (123) 123
-
-
-
-
-
-
-
-
-
- Add method
-
-
- Set up a new 2-step verification method
-
-
-
-
-
- SMS code
-
-
-
-
-
- Receive a verification code via SMS when signing in
-
-
- Add SMS code verification
-
-
-
-
-
-
-
-
-
-
- Security
-
-
- Manage settings related to account security
-
-
-
-
-
- Sign in
-
-
- Manage authentication settings
-
-
-
-
-
- 2-step verification
-
-
-
-
- Currently
-
- ON
-
-
-
-
-
-
-
-
-
-
-
-
- Active devices
-
-
- Manage devices currently signed in to your account
-
-
-
-
-
-
-
-
- Loading...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Loading...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 2-step verification
-
-
- Use a verification code when signing in from an unfamiliar device
-
-
-
-
-
- Active methods
-
-
- 2-step verification is currently enabled using these methods.
-
-
-
-
-
- SMS code
-
-
-
-
- +
- 1
-
- (123) 123
-
-
-
-
-
-
-
-
-
- Add method
-
-
- Set up a new 2-step verification method
-
-
-
-
-
- SMS code
-
-
-
-
-
- Receive a verification code via SMS when signing in
-
-
- Add SMS code verification
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/security/twoStepVerificationTypes.ts b/packages/clerk-js/src/ui/userProfile/security/twoStepVerificationTypes.ts
deleted file mode 100644
index 7ee583e3e40..00000000000
--- a/packages/clerk-js/src/ui/userProfile/security/twoStepVerificationTypes.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-export enum TwoStepMethod {
- SMS = 0,
- Authenticator,
- SecurityKey,
- BackupCode,
-}
-
-export interface TwoStepMethodsDisplayData {
- title: string;
- note: string;
- buttonTitle: string;
- linkPath: string;
-}
-
-export const TwoStepMethodsToDisplayDataMap: Readonly> = Object.freeze(
- {
- [TwoStepMethod.SMS]: {
- title: 'SMS code',
- note: 'Receive a verification code via SMS when signing in',
- buttonTitle: 'Add SMS code verification',
- linkPath: 'add-phone',
- },
- [TwoStepMethod.Authenticator]: {
- title: 'Authenticator',
- note: 'Receive verification codes when you sign in on your authenticator app, even without an internet connection',
- buttonTitle: 'Add authenticator',
- linkPath: 'add-authenticator',
- },
- [TwoStepMethod.SecurityKey]: {
- title: 'Security Key',
- note: 'Use a physical security key when signing in. These can be built in to your phone, use Bluetooth, or plug directly into your computer’s USB port',
- buttonTitle: 'Add security key',
- linkPath: 'add-security-key',
- },
- [TwoStepMethod.BackupCode]: {
- title: 'Backup Code',
- note: 'Generate a new backup code in case you lose it or suspect it has been compromised',
- buttonTitle: 'Add backup code',
- linkPath: 'add-backup-code',
- },
- },
-);
diff --git a/packages/clerk-js/src/ui/userProfile/socialAccounts/SocialAccountDetail.test.tsx b/packages/clerk-js/src/ui/userProfile/socialAccounts/SocialAccountDetail.test.tsx
deleted file mode 100644
index 23393d68b63..00000000000
--- a/packages/clerk-js/src/ui/userProfile/socialAccounts/SocialAccountDetail.test.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { render, renderJSON, screen, userEvent } from '@clerk/shared/testUtils';
-import type { ExternalAccountResource, UserResource } from '@clerk/types';
-import React from 'react';
-
-import { SocialAccountDetail } from './SocialAccountDetail';
-
-const mockFacebookDestroy = jest.fn();
-const mockGoogleDestroy = jest.fn();
-jest.mock('ui/contexts/CoreUserContext', () => {
- return {
- useCoreUser: (): Partial => {
- return {
- id: 'user_1nQu4nZrhHEeolMMRhg4yERFYJx',
- username: null,
- firstName: 'Peter',
- lastName: 'Smith',
- externalAccounts: [
- {
- id: 'fbac_yolo',
- identificationId: 'ident_fb',
- provider: 'facebook',
- approvedScopes: 'email',
- avatarUrl: 'http://images.clerktest.host/avatar.png',
- emailAddress: 'peter@gmail.com',
- firstName: 'Peter',
- lastName: 'Smith',
- providerUserId: '10147951078263327',
- publicMetadata: {},
- verification: null,
- destroy: mockFacebookDestroy,
- providerSlug: () => 'facebook',
- providerTitle: () => 'Facebook',
- accountIdentifier: () => 'peter@gmail.com',
- } as ExternalAccountResource,
- {
- id: 'gac_swag',
- identificationId: 'ident_google',
- provider: 'google',
- approvedScopes:
- 'email https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile openid profile',
- avatarUrl: 'http://images.clerktest.host/avatar.png',
- emailAddress: 'peter@gmail.com',
- firstName: 'Peter',
- lastName: 'Smith',
- providerUserId: '112567347150540108741',
- publicMetadata: {},
- verification: null,
- destroy: mockGoogleDestroy,
- providerSlug: () => 'google',
- providerTitle: () => 'Google',
- accountIdentifier: () => 'peter@gmail.com',
- } as ExternalAccountResource,
- ],
- };
- },
- };
-});
-
-jest.mock('ui/router/RouteContext', () => {
- return {
- useRouter: () => {
- return {
- params: { social_account_id: 'gac_swag' },
- resolve: () => {
- return {
- toURL: {
- href: 'http://www.ssddd.com',
- },
- };
- },
- };
- },
- };
-});
-
-const mockNavigate = jest.fn();
-jest.mock('ui/hooks', () => ({
- useNavigate: jest.fn(() => {
- return {
- navigate: mockNavigate,
- };
- }),
-}));
-
-describe('(false);
-
- const externalAccount = user.externalAccounts.find(ea => ea.id === params.social_account_id);
-
- if (!externalAccount) {
- return null;
- }
-
- const handleRemove = () => {
- setShowRemovalPage(true);
- };
-
- const onExternalAccountRemove = () => {
- return externalAccount.destroy();
- };
-
- const avatarRow = (
-
-
- );
-
- const emailAddressRow = (
-
- {externalAccount.emailAddress}
-
- );
-
- const usernameRow = externalAccount.username ? (
-
- {externalAccount.username}
-
- ) : (
- <>
- );
-
- const disconnectExternalAccountScreen = (
- {
- setShowRemovalPage(false);
- }}
- onRemove={onExternalAccountRemove}
- onRemoved={() => {
- navigate('../');
- }}
- />
- );
-
- return (
- <>
-
-
- {avatarRow}
- {emailAddressRow}
- {usernameRow}
-
-
-
-
- )}
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/socialAccounts/SocialAccountList.test.tsx b/packages/clerk-js/src/ui/userProfile/socialAccounts/SocialAccountList.test.tsx
deleted file mode 100644
index 03fbe9ba098..00000000000
--- a/packages/clerk-js/src/ui/userProfile/socialAccounts/SocialAccountList.test.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-import { render, renderJSON, screen, userEvent, waitFor } from '@clerk/shared/testUtils';
-import {
- ClerkAPIErrorJSON,
- ExternalAccountJSON,
- OAuthProviders,
- UserJSON,
- UserResource,
- UserSettingsJSON,
- UserSettingsResource,
- VerificationJSON,
-} from '@clerk/types';
-import { ExternalAccount, User } from 'core/resources';
-import { UserSettings } from 'core/resources/UserSettings';
-import React from 'react';
-
-import { SocialAccountList } from './SocialAccountList';
-
-const mockNavigate = jest.fn();
-
-jest.mock('ui/hooks', () => ({
- useNavigate: () => {
- return {
- navigate: mockNavigate,
- };
- },
-}));
-
-const mockUseEnvironment = jest.fn();
-
-const mockCreateExternalAccount = jest.fn();
-
-jest.mock('ui/contexts', () => {
- return {
- useCoreUser: (): Partial => {
- const user = new User({
- object: 'user',
- id: 'user_1nQu4nZrhHEeolMMRhg4yERFYJx',
- username: '',
- first_name: 'Peter',
- last_name: 'Smith',
- email_addresses: [],
- phone_numbers: [],
- web3_wallets: [],
- external_accounts: [
- {
- id: 'fbac_yolo',
- provider: 'facebook',
- approved_scopes: 'email',
- avatar_url: 'http://images.clerktest.host/avatar.png',
- email_address: 'peter@gmail.com',
- first_name: 'Peter',
- last_name: 'Smith',
- provider_user_id: '10147951078263327',
- verification: { status: 'verified' } as VerificationJSON,
- } as ExternalAccountJSON,
- {
- id: 'gac_swag',
- provider: 'google',
- approved_scopes:
- 'email https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile openid profile',
- avatar_url: 'http://images.clerktest.host/avatar.png',
- email_address: 'peter@gmail.com',
- first_name: 'Peter',
- last_name: 'Smith',
- provider_user_id: '112567347150540108741',
- verification: { status: 'verified' } as VerificationJSON,
- } as ExternalAccountJSON,
- {
- id: 'eac_heehee',
- provider: 'github',
- approved_scopes: '',
- avatar_url: '',
- email_address: '',
- first_name: '',
- last_name: '',
- provider_user_id: '',
- verification: {
- status: 'unverified',
- error: {
- long_message: 'Everything that could go wrong, did',
- } as ClerkAPIErrorJSON,
- } as VerificationJSON,
- } as ExternalAccountJSON,
- ],
- } as unknown as UserJSON);
-
- user.createExternalAccount = mockCreateExternalAccount;
-
- return user;
- },
- useEnvironment: () => mockUseEnvironment(),
- };
-});
-
-const environmentContext = {
- userSettings: new UserSettings({
- social: {
- oauth_google: {
- enabled: true,
- required: false,
- authenticatable: true,
- strategy: 'oauth_google',
- },
- oauth_facebook: {
- enabled: true,
- required: false,
- authenticatable: true,
- strategy: 'oauth_facebook',
- },
- oauth_github: {
- enabled: true,
- required: false,
- authenticatable: true,
- strategy: 'oauth_github',
- },
- oauth_microsoft: {
- enabled: true,
- required: false,
- authenticatable: true,
- strategy: 'oauth_microsoft',
- },
- oauth_bitbucket: {
- enabled: false,
- required: false,
- authenticatable: true,
- strategy: 'oauth_bitbucket',
- },
- oauth_discord: {
- enabled: false,
- required: false,
- authenticatable: true,
- strategy: 'oauth_bitbucket',
- },
- } as OAuthProviders,
- } as UserSettingsJSON) as UserSettingsResource,
-};
-
-const emptyEnvironmentContext = {
- userSettings: new UserSettings({
- social: {
- oauth_google: {
- enabled: false,
- required: false,
- authenticatable: true,
- strategy: 'oauth_google',
- },
- oauth_facebook: {
- enabled: false,
- required: false,
- authenticatable: true,
- strategy: 'oauth_facebook',
- },
- } as OAuthProviders,
- } as UserSettingsJSON) as UserSettingsResource,
-};
-
-jest.mock('ui/router/RouteContext', () => {
- return {
- useRouter: () => {
- return {
- resolve: () => {
- return {
- toURL: {
- href: 'http://www.ssddd.com',
- },
- };
- },
- };
- },
- };
-});
-
-describe('
-
-
- );
-}
-
-function SocialAccountListRows(): JSX.Element {
- const [error, setError] = useState();
- const [busyProvider, setBusyProvider] = useState(null);
- const user = useCoreUser();
- const { navigate } = useNavigate();
- const {
- userSettings: { social },
- } = useEnvironment();
-
- const availableProviders = Object.values(social).filter(oauthProvider => oauthProvider.enabled);
-
- const verifiedAccounts = user.verifiedExternalAccounts;
- const verifiedProviders = verifiedAccounts.map(externalAccount => externalAccount.provider);
-
- // To avoid visual clutter, filter out external accounts for which there is no error set (potentially abandoned flows)
- const unverifiedAccounts = user.unverifiedExternalAccounts.filter(
- externalAccount => !!externalAccount?.verification?.error,
- );
- const unverifiedProviders = unverifiedAccounts.map(externalAccount => externalAccount.provider);
-
- const unconnectedProviders = availableProviders.filter(oauthProvider => {
- const provider = oauthProvider.strategy.replace('oauth_', '') as OAuthProvider; // :-(
- return !verifiedProviders.includes(provider) && !unverifiedProviders.includes(provider);
- });
-
- const handleConnect = (strategy: OAuthStrategy) => {
- setError(undefined);
- setBusyProvider(strategy);
-
- user
- .createExternalAccount({ strategy: strategy, redirect_url: window.location.href })
- .then(externalAccount => {
- navigate(externalAccount.verification!.externalVerificationRedirectURL);
- })
- .catch(err => {
- setError(err.message || err);
- setBusyProvider(null);
- console.log(err);
- });
- };
-
- const handleDisconnect = (externalAccount: ExternalAccountResource) => {
- return externalAccount.destroy();
- };
-
- if (availableProviders.length == 0) {
- return There are no available external account providers
;
- }
-
- return (
- <>
- {error}
-
-
- {verifiedAccounts.map(externalAccount => (
-
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/socialAccounts/UnconnectedAccountListItem.tsx b/packages/clerk-js/src/ui/userProfile/socialAccounts/UnconnectedAccountListItem.tsx
deleted file mode 100644
index 3e822fcfaf8..00000000000
--- a/packages/clerk-js/src/ui/userProfile/socialAccounts/UnconnectedAccountListItem.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { ArrowRightIcon } from '@clerk/shared/assets/icons';
-import { List } from '@clerk/shared/components/list';
-import { Spinner } from '@clerk/shared/components/spinner';
-import { titleize } from '@clerk/shared/utils/string';
-import type { OAuthProvider, OAuthProviderSettings, OAuthStrategy } from '@clerk/types';
-import React from 'react';
-import { svgUrl } from 'ui/common/constants';
-
-type UnconnectedAccountListItemProps = {
- oauthProviderSettings: OAuthProviderSettings;
- handleConnect: (strategy: OAuthStrategy) => void;
- isBusy: boolean;
- isDisabled: boolean;
-};
-
-export function UnconnectedAccountListItem({
- oauthProviderSettings,
- handleConnect,
- isBusy,
- isDisabled,
-}: UnconnectedAccountListItemProps): JSX.Element {
- const oauthProvider = oauthProviderSettings.strategy.replace('oauth_', '') as OAuthProvider;
-
- return (
- handleConnect(oauthProviderSettings.strategy)}
- detailIcon={isBusy ?
-
- Connect {titleize(oauthProvider)} account
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/socialAccounts/UnverifiedAccountListItem.test.tsx b/packages/clerk-js/src/ui/userProfile/socialAccounts/UnverifiedAccountListItem.test.tsx
deleted file mode 100644
index 2b0d3e6e467..00000000000
--- a/packages/clerk-js/src/ui/userProfile/socialAccounts/UnverifiedAccountListItem.test.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { act, screen } from '@clerk/shared/testUtils';
-import { render, userEvent } from '@clerk/shared/utils/testUtils';
-import { ExternalAccountResource } from '@clerk/types';
-import React from 'react';
-
-import { UnverifiedAccountListItem } from './UnverifiedAccountListItem';
-
-const mockExternalAccount = {
- id: 'mock_id',
- provider: 'google',
- providerTitle: () => 'Google',
-} as ExternalAccountResource;
-const mockHandleConnect = jest.fn();
-const mockHandleDisconnect = jest.fn();
-
-describe('
- Reconnect,
- handleSelect: () => handleConnect(`oauth_${externalAccount.provider}`),
- },
- {
- label: Disconnect ,
- handleSelect: () => handleDisconnect(externalAccount),
- },
- ]}
- />
-
- );
-
- return (
-
-
-
- {externalAccount.username || externalAccount.emailAddress}
-
- {externalAccount.label && ` (${externalAccount.label})`}
-
-
-
-
{externalAccount.verification?.error?.longMessage}
-
navigate(externalAccount.id)}
- disabled={isDisabled}
- >
-
-
- {externalAccount.username || externalAccount.emailAddress}
-
- {externalAccount.label && ` (${externalAccount.label})`}
-
-
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/socialAccounts/__snapshots__/SocialAccountDetail.test.tsx.snap b/packages/clerk-js/src/ui/userProfile/socialAccounts/__snapshots__/SocialAccountDetail.test.tsx.snap
deleted file mode 100644
index 351904db3fc..00000000000
--- a/packages/clerk-js/src/ui/userProfile/socialAccounts/__snapshots__/SocialAccountDetail.test.tsx.snap
+++ /dev/null
@@ -1,129 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`
-
-
-
-
- Â
- Google
-
-
-
-
-
-
-
-
- Photo
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Social accounts
-
-
-
-
-
-
-
-
-
-
- peter@gmail.com
-
- Verified
-
-
-
-
-
-
-
-
-
-
-
- peter@gmail.com
-
- Verified
-
-
-
-
-
-
-
-
-
-
-
-
-
- Unverified
-
-
- Everything that could go wrong, did
-
-
-
-
-
-
-
-
-
-
- Connect
- Microsoft
- account
-
-
-
-
-
-
-
-
-
-
- Social accounts
-
-
-
-
-
- There are no available external account providers
-
-
-
-
-
-
-
- );
-};
diff --git a/packages/clerk-js/src/ui/userProfile/username/Username.test.tsx b/packages/clerk-js/src/ui/userProfile/username/Username.test.tsx
deleted file mode 100644
index 4ddd736e3c0..00000000000
--- a/packages/clerk-js/src/ui/userProfile/username/Username.test.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import { UserResource } from '@clerk/types';
-import * as React from 'react';
-
-import { Username } from './Username';
-
-const mockNavigate = jest.fn();
-
-jest.mock('ui/hooks', () => ({
- useNavigate: () => {
- return {
- navigate: mockNavigate,
- };
- },
-}));
-
-jest.mock('ui/router/RouteContext');
-
-jest.mock('ui/contexts/CoreUserContext', () => {
- return {
- useCoreUser: (): Partial => {
- return {
- username: 'John',
- };
- },
- };
-});
-
-describe('
-
-
-
-
- Username
-
-
- Edit your username
-
-
-
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/util.test.tsx b/packages/clerk-js/src/ui/userProfile/util.test.tsx
deleted file mode 100644
index f3d305280a2..00000000000
--- a/packages/clerk-js/src/ui/userProfile/util.test.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import React from 'react';
-
-import { Connections, PrimaryTag } from './util';
-
-describe('Utility components for EmailAddresses', () => {
- it('renders the primary tag', () => {
- const tree = renderJSON(
- Connected to {titleize(resource.type.split('oauth_')[1])}
-
- ))}
-
- );
-};
-
-export const PrimaryTag = () => (
-
- Primary
-
-);
diff --git a/packages/clerk-js/src/ui/userProfile/web3Wallets/AddNewWeb3Wallet.test.tsx b/packages/clerk-js/src/ui/userProfile/web3Wallets/AddNewWeb3Wallet.test.tsx
deleted file mode 100644
index e0e9414953a..00000000000
--- a/packages/clerk-js/src/ui/userProfile/web3Wallets/AddNewWeb3Wallet.test.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import { UserResource, Web3WalletResource } from '@clerk/types';
-import React from 'react';
-
-import { AddNewWeb3Wallet } from './AddNewWeb3Wallet';
-
-const mockNavigate = jest.fn();
-jest.mock('ui/hooks', () => ({
- useNavigate: () => {
- return {
- navigate: mockNavigate,
- };
- },
-}));
-
-jest.mock('ui/router/RouteContext', () => {
- return {
- useRouter: () => {
- return {
- params: { web3_wallet_id: 'test-id' },
- resolve: () => {
- return {
- toURL: {
- href: 'https://www.ssddd.com',
- },
- };
- },
- };
- },
- };
-});
-
-jest.mock('ui/contexts/CoreUserContext', () => {
- return {
- useCoreUser: (): Partial => {
- return {
- primaryWeb3WalletId: 'test-id',
- web3Wallets: [
- {
- id: 'test-id',
- web3Wallet: '0x0000000000000000000000000000000000000000',
- verification: { status: 'verified' },
- } as Web3WalletResource,
- ],
- };
- },
- };
-});
-
-describe('();
- const [busyProvider, setBusyProvider] = useState(null);
-
- const handleClick = async (provider: Web3Provider) => {
- setError(undefined);
- setBusyProvider(provider);
-
- const identifier = await getMetamaskIdentifier();
-
- try {
- let web3Wallet = await user.createWeb3Wallet({ web3Wallet: identifier });
- web3Wallet = await web3Wallet.prepareVerification({ strategy: 'web3_metamask_signature' });
- const signature = await generateSignatureWithMetamask({
- identifier,
- nonce: web3Wallet.verification.nonce as string,
- });
- await web3Wallet.attemptVerification({ signature });
-
- navigate(`../${web3Wallet.id}`);
- } catch (err) {
- const fieldError = getFieldError(err);
- if (fieldError) {
- setError(fieldError.longMessage);
- } else {
- handleError(err, [], setError);
- }
-
- setBusyProvider(null);
- }
- };
-
- return (
- <>
-
- {error}
-
-
- {WEB3_PROVIDERS.map(p => (
- handleClick(p.provider)}
- detailIcon={busyProvider === p.provider ?
-
- Connect {p.name} wallet
-
- ))}
-
-
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletDetail.test.tsx b/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletDetail.test.tsx
deleted file mode 100644
index 2d6280adb8d..00000000000
--- a/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletDetail.test.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import { EnvironmentResource, UserResource, UserSettingsResource, Web3WalletResource } from '@clerk/types';
-import React from 'react';
-import { PartialDeep } from 'type-fest';
-
-import { Web3WalletDetail } from './Web3WalletDetail';
-
-const mockNavigate = jest.fn();
-jest.mock('ui/hooks', () => ({
- useNavigate: () => {
- return {
- navigate: mockNavigate,
- };
- },
-}));
-
-jest.mock('ui/router/RouteContext', () => {
- return {
- useRouter: () => {
- return {
- params: { web3_wallet_id: 'test-id' },
- resolve: () => {
- return {
- toURL: {
- href: 'https://www.ssddd.com',
- },
- };
- },
- };
- },
- };
-});
-
-jest.mock('ui/contexts', () => {
- return {
- useCoreUser: (): Partial => {
- return {
- primaryWeb3WalletId: 'test-id',
- web3Wallets: [
- {
- id: 'test-id',
- web3Wallet: '0x0000000000000000000000000000000000000000',
- verification: { status: 'verified' },
- } as Web3WalletResource,
- ],
- };
- },
- useEnvironment: jest.fn(
- () =>
- ({
- userSettings: {} as PartialDeep,
- } as PartialDeep),
- ),
- };
-});
-
-describe('(false);
- const [error, setError] = React.useState();
-
- const web3Wallet = user.web3Wallets.find(ea => ea.id === params.web3_wallet_id);
- const isPrimary = web3Wallet?.id === user.primaryWeb3WalletId;
-
- if (!web3Wallet) {
- return null;
- }
-
- const verificationStatus = web3Wallet.verification?.status || 'unverified';
- const isVerified = web3Wallet.verification?.status === 'verified';
-
- const handleRemove = () => {
- setShowRemovalPage(true);
- };
-
- const onWeb3WalletRemove = () => {
- return web3Wallet.destroy();
- };
-
- const makeIdentPrimary = async () => {
- await user.update({ primaryWeb3WalletId: web3Wallet.id }).catch(e => handleError(e, [], setError));
- };
-
- const removeWeb3WalletScreen = (
- {
- setShowRemovalPage(false);
- }}
- onRemove={onWeb3WalletRemove}
- onRemoved={() => {
- navigate('../');
- }}
- />
- );
-
- return (
- <>
-
-
- {error}
-
-
-
-
-
-
- {web3Wallet.web3Wallet}
-
-
-
-
- {isVerified && (
-
-
-
- )}
-
-
-
-
- )}
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletList.test.tsx b/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletList.test.tsx
deleted file mode 100644
index 1edbf4e812a..00000000000
--- a/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletList.test.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { renderJSON } from '@clerk/shared/testUtils';
-import { UserResource, Web3WalletResource } from '@clerk/types';
-import React from 'react';
-
-import { Web3WalletList } from './Web3WalletList';
-
-jest.mock('ui/router/RouteContext');
-
-jest.mock('ui/contexts/CoreUserContext', () => {
- return {
- useCoreUser: (): Partial => {
- return {
- primaryWeb3WalletId: 'test-id-1',
- web3Wallets: [
- {
- id: 'test-id-1',
- web3Wallet: '0x0000000000000000000000000000000000000000',
- verification: { status: 'verified' },
- } as Web3WalletResource,
- {
- id: 'test-id-2',
- web3Wallet: '0xFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF',
- verification: { status: 'verified' },
- } as Web3WalletResource,
- ],
- };
- },
- };
-});
-
-describe('
-
- {web3Wallet.web3Wallet}{' '}
-
-
- );
-}
-
-export function Web3WalletList(): JSX.Element {
- const user = useCoreUser();
- const router = useRouter();
-
- const web3WalletItems = user.web3Wallets.map(web3Wallet => (
- router.navigate(web3Wallet.id)}
- isPrimary={user.primaryWeb3WalletId === web3Wallet.id}
- />
- ));
-
- return (
- <>
-
- {user.web3Wallets.length > 0 && {web3WalletItems}
}
- {user.web3Wallets.length === 0 && (
- <>
- No web3 wallets to display
- {/*Since only Metamask wallet is supported for now, we don't allow the user to add another*/}
- {/*Web3 wallet address. When we add support for more wallets, this logic should be refactored*/}
- router.navigate('add')}
- className='cl-add-resource-button'
- type='button'
- flavor='text'
- buttonColor='primary'
- hoverable
- >
- Add web3 wallet
-
-
- )}
-
-
- );
-}
diff --git a/packages/clerk-js/src/ui/userProfile/web3Wallets/__snapshots__/AddNewWeb3Wallet.test.tsx.snap b/packages/clerk-js/src/ui/userProfile/web3Wallets/__snapshots__/AddNewWeb3Wallet.test.tsx.snap
deleted file mode 100644
index f2b35dcf196..00000000000
--- a/packages/clerk-js/src/ui/userProfile/web3Wallets/__snapshots__/AddNewWeb3Wallet.test.tsx.snap
+++ /dev/null
@@ -1,86 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`
-
-
- Add web3 wallet
-
-
- Connect your web3 wallet
-
-
-
-
-
-
-
-
- Connect
- MetaMask
- wallet
-
-
-
-
-
-
-
-
-
-
- Web3 wallet
-
-
- Manage this Web3 wallet
-
-
-
-
-
-
-
-
-
- 0x0000000000000000000000000000000000000000
-
-
- Primary
-
-
- Verified
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Primary web3 wallet
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Web3 wallets
-
-
- Manage web3 wallets associated with your account
-
-
-
-
-
-
-
-
- 0x0000000000000000000000000000000000000000
-
-
-
- Primary
-
-
- Verified
-
-
-
-
-
-
-
-
-
-
-
- 0xFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
-
-
-
- Verified
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/packages/clerk-js/src/v4/utils/colorPredicates.ts b/packages/clerk-js/src/ui/utils/colorPredicates.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/colorPredicates.ts
rename to packages/clerk-js/src/ui/utils/colorPredicates.ts
diff --git a/packages/clerk-js/src/v4/utils/colorTransformations.test.ts b/packages/clerk-js/src/ui/utils/colorTransformations.test.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/colorTransformations.test.ts
rename to packages/clerk-js/src/ui/utils/colorTransformations.test.ts
diff --git a/packages/clerk-js/src/v4/utils/colorTransformations.ts b/packages/clerk-js/src/ui/utils/colorTransformations.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/colorTransformations.ts
rename to packages/clerk-js/src/ui/utils/colorTransformations.ts
diff --git a/packages/clerk-js/src/v4/utils/colors.test.ts b/packages/clerk-js/src/ui/utils/colors.test.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/colors.test.ts
rename to packages/clerk-js/src/ui/utils/colors.test.ts
diff --git a/packages/clerk-js/src/v4/utils/colors.ts b/packages/clerk-js/src/ui/utils/colors.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/colors.ts
rename to packages/clerk-js/src/ui/utils/colors.ts
diff --git a/packages/clerk-js/src/v4/utils/containsAllOf.ts b/packages/clerk-js/src/ui/utils/containsAllOf.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/containsAllOf.ts
rename to packages/clerk-js/src/ui/utils/containsAllOf.ts
diff --git a/packages/clerk-js/src/v4/utils/createContextAndHook.ts b/packages/clerk-js/src/ui/utils/createContextAndHook.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/createContextAndHook.ts
rename to packages/clerk-js/src/ui/utils/createContextAndHook.ts
diff --git a/packages/clerk-js/src/v4/utils/createInfiniteAccessProxy.ts b/packages/clerk-js/src/ui/utils/createInfiniteAccessProxy.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/createInfiniteAccessProxy.ts
rename to packages/clerk-js/src/ui/utils/createInfiniteAccessProxy.ts
diff --git a/packages/clerk-js/src/v4/utils/errorHandler.ts b/packages/clerk-js/src/ui/utils/errorHandler.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/errorHandler.ts
rename to packages/clerk-js/src/ui/utils/errorHandler.ts
diff --git a/packages/clerk-js/src/v4/utils/factorSorting.ts b/packages/clerk-js/src/ui/utils/factorSorting.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/factorSorting.ts
rename to packages/clerk-js/src/ui/utils/factorSorting.ts
diff --git a/packages/clerk-js/src/v4/utils/fastDeepMerge.test.ts b/packages/clerk-js/src/ui/utils/fastDeepMerge.test.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/fastDeepMerge.test.ts
rename to packages/clerk-js/src/ui/utils/fastDeepMerge.test.ts
diff --git a/packages/clerk-js/src/v4/utils/fastDeepMerge.ts b/packages/clerk-js/src/ui/utils/fastDeepMerge.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/fastDeepMerge.ts
rename to packages/clerk-js/src/ui/utils/fastDeepMerge.ts
diff --git a/packages/clerk-js/src/v4/utils/formatSafeIdentifier.ts b/packages/clerk-js/src/ui/utils/formatSafeIdentifier.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/formatSafeIdentifier.ts
rename to packages/clerk-js/src/ui/utils/formatSafeIdentifier.ts
diff --git a/packages/clerk-js/src/ui/utils/fromEntries.ts b/packages/clerk-js/src/ui/utils/fromEntries.ts
new file mode 100644
index 00000000000..0de89b5b2b0
--- /dev/null
+++ b/packages/clerk-js/src/ui/utils/fromEntries.ts
@@ -0,0 +1,6 @@
+export const fromEntries = (iterable: Iterable) => {
+ return [...iterable].reduce((obj, [key, val]) => {
+ obj[key] = val;
+ return obj;
+ }, {});
+};
diff --git a/packages/clerk-js/src/v4/utils/getFullName.ts b/packages/clerk-js/src/ui/utils/getFullName.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/getFullName.ts
rename to packages/clerk-js/src/ui/utils/getFullName.ts
diff --git a/packages/clerk-js/src/v4/utils/getIdentifier.ts b/packages/clerk-js/src/ui/utils/getIdentifier.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/getIdentifier.ts
rename to packages/clerk-js/src/ui/utils/getIdentifier.ts
diff --git a/packages/clerk-js/src/v4/utils/index.ts b/packages/clerk-js/src/ui/utils/index.ts
similarity index 94%
rename from packages/clerk-js/src/v4/utils/index.ts
rename to packages/clerk-js/src/ui/utils/index.ts
index 20bce7d0916..cee86ba8763 100644
--- a/packages/clerk-js/src/v4/utils/index.ts
+++ b/packages/clerk-js/src/ui/utils/index.ts
@@ -15,3 +15,4 @@ export * from './phoneUtils';
export * from './formatSafeIdentifier';
export * from './removeUndefinedProps';
export * from './getIdentifier';
+export * from './fromEntries';
diff --git a/packages/clerk-js/src/v4/utils/isMobileDevice.ts b/packages/clerk-js/src/ui/utils/isMobileDevice.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/isMobileDevice.ts
rename to packages/clerk-js/src/ui/utils/isMobileDevice.ts
diff --git a/packages/clerk-js/src/v4/utils/phoneUtils.test.ts b/packages/clerk-js/src/ui/utils/phoneUtils.test.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/phoneUtils.test.ts
rename to packages/clerk-js/src/ui/utils/phoneUtils.test.ts
diff --git a/packages/clerk-js/src/v4/utils/phoneUtils.ts b/packages/clerk-js/src/ui/utils/phoneUtils.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/phoneUtils.ts
rename to packages/clerk-js/src/ui/utils/phoneUtils.ts
diff --git a/packages/clerk-js/src/v4/utils/removeUndefinedProps.ts b/packages/clerk-js/src/ui/utils/removeUndefinedProps.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/removeUndefinedProps.ts
rename to packages/clerk-js/src/ui/utils/removeUndefinedProps.ts
diff --git a/packages/clerk-js/src/v4/utils/sleep.ts b/packages/clerk-js/src/ui/utils/sleep.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/sleep.ts
rename to packages/clerk-js/src/ui/utils/sleep.ts
diff --git a/packages/clerk-js/src/v4/utils/useDeepEqualMemo.ts b/packages/clerk-js/src/ui/utils/useDeepEqualMemo.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/useDeepEqualMemo.ts
rename to packages/clerk-js/src/ui/utils/useDeepEqualMemo.ts
diff --git a/packages/clerk-js/src/v4/utils/useFormControl.ts b/packages/clerk-js/src/ui/utils/useFormControl.ts
similarity index 100%
rename from packages/clerk-js/src/v4/utils/useFormControl.ts
rename to packages/clerk-js/src/ui/utils/useFormControl.ts
diff --git a/packages/clerk-js/src/utils/ignoreEventValue.test.ts b/packages/clerk-js/src/utils/ignoreEventValue.test.ts
index c795467a7c6..c426d370aaa 100644
--- a/packages/clerk-js/src/utils/ignoreEventValue.test.ts
+++ b/packages/clerk-js/src/utils/ignoreEventValue.test.ts
@@ -1,5 +1,6 @@
import { noop } from '@clerk/shared/testUtils';
-import { ignoreEventValue } from 'utils/ignoreEventValue';
+
+import { ignoreEventValue } from './ignoreEventValue';
describe('ignoreNonEventValue', () => {
it('allows non event values', () => {
diff --git a/packages/clerk-js/src/utils/memoizeStateListenerCallback.test.ts b/packages/clerk-js/src/utils/memoizeStateListenerCallback.test.ts
index 502a376b0ef..81ff6880e0e 100644
--- a/packages/clerk-js/src/utils/memoizeStateListenerCallback.test.ts
+++ b/packages/clerk-js/src/utils/memoizeStateListenerCallback.test.ts
@@ -6,9 +6,7 @@ describe('memoizeStateListenerCallback', () => {
it('runs', () => {});
});
-// import { User } from 'core/resources';
// import { Resources, UserJSON } from '@clerk/types';
-// import { memoizeListenerCallback } from 'utils/memoizeStateListenerCallback';
//
// const frontEndApi = '';
// const path = '';
diff --git a/packages/clerk-js/src/v4/SignIn/index.ts b/packages/clerk-js/src/v4/SignIn/index.ts
deleted file mode 100644
index a573a358ee9..00000000000
--- a/packages/clerk-js/src/v4/SignIn/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './SignIn';
diff --git a/packages/clerk-js/src/v4/SignUp/index.ts b/packages/clerk-js/src/v4/SignUp/index.ts
deleted file mode 100644
index 6169154a2c9..00000000000
--- a/packages/clerk-js/src/v4/SignUp/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './SignUp';
diff --git a/packages/clerk-js/src/v4/UserButton/index.ts b/packages/clerk-js/src/v4/UserButton/index.ts
deleted file mode 100644
index ab6156ab876..00000000000
--- a/packages/clerk-js/src/v4/UserButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './UserButton';
diff --git a/packages/clerk-js/src/v4/UserProfile/index.ts b/packages/clerk-js/src/v4/UserProfile/index.ts
deleted file mode 100644
index 884472841f1..00000000000
--- a/packages/clerk-js/src/v4/UserProfile/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './UserProfile';
diff --git a/packages/clerk-js/src/v4/common/SSOCallback.tsx b/packages/clerk-js/src/v4/common/SSOCallback.tsx
deleted file mode 100644
index de50cc56724..00000000000
--- a/packages/clerk-js/src/v4/common/SSOCallback.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { HandleOAuthCallbackParams } from '@clerk/types/src';
-import React from 'react';
-
-import { useCoreClerk } from '../../ui/contexts';
-import { useNavigate } from '../../ui/hooks';
-import { Flow } from '../customizables';
-import { LoadingCard } from '../elements';
-
-export const SSOCallback = (props: HandleOAuthCallbackParams) => {
- const { handleRedirectCallback } = useCoreClerk();
- const { navigate } = useNavigate();
-
- React.useEffect(() => {
- handleRedirectCallback({ ...props }, navigate).catch(() => {
- // This error is caused when the host app is using React18
- // and strictMode is enabled. This useEffects runs twice because
- // the clerk-react ui components mounts, unmounts and mounts again
- // so the clerk-js component loses its state because of the custom
- // unmount callback we're using.
- // This needs to be solved by tweaking the logic in uiComponents.tsx
- // or by making handleRedirectCallback idempotent
- });
- }, []);
-
- return (
-
-
- );
-};
diff --git a/packages/clerk-js/src/v4/common/index.ts b/packages/clerk-js/src/v4/common/index.ts
deleted file mode 100644
index 2f6fcefe0a6..00000000000
--- a/packages/clerk-js/src/v4/common/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './SSOCallback';
-export * from './EmailLinkVerify';
-export * from './EmailLinkStatusCard';
-export * from './Wizard';
diff --git a/packages/clerk-js/src/v4/hooks/index.ts b/packages/clerk-js/src/v4/hooks/index.ts
deleted file mode 100644
index 8d0ed8e7337..00000000000
--- a/packages/clerk-js/src/v4/hooks/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export * from './useClipboard';
-export * from './useEnabledThirdPartyProviders';
-export * from './useLoadingStatus';
-export * from './useSafeLayoutEffect';
-export * from './usePopover';
-export * from './useLocalStorage';
-export * from './useSearchInput';
-export * from './useSafeState';
-export * from './useScrollLock';
diff --git a/packages/clerk-js/tsconfig.json b/packages/clerk-js/tsconfig.json
index 76132122784..17484aa64f1 100644
--- a/packages/clerk-js/tsconfig.json
+++ b/packages/clerk-js/tsconfig.json
@@ -19,13 +19,7 @@
"useUnknownInCatchVariables": false,
"declaration": false,
"jsx": "react-jsx",
- "jsxImportSource": "@emotion/react",
- "paths": {
- "ui/*": ["ui/*"],
- "core/*": ["core/*"],
- "utils/*": ["utils/*"],
- "types/*": ["types/*"]
- }
+ "jsxImportSource": "@emotion/react"
},
"include": [
"src/index.ts",
diff --git a/packages/clerk-js/tsconfig.stable.json b/packages/clerk-js/tsconfig.stable.json
index 7ad4a3f7732..f4815ec9354 100644
--- a/packages/clerk-js/tsconfig.stable.json
+++ b/packages/clerk-js/tsconfig.stable.json
@@ -14,18 +14,12 @@
"noImplicitReturns": true,
"noUnusedLocals": false,
"noUnusedParameters": true,
- "paths": {
- "ui/*": ["ui/*"],
- "core/*": ["core/*"],
- "utils/*": ["utils/*"],
- "types/*": ["types/*"]
- },
"resolveJsonModule": true,
"sourceMap": true,
"strict": true,
"target": "ES2019",
"useUnknownInCatchVariables": false
},
- "exclude": ["node_modules", "src/v4", "src/index.browser.v4.ts"],
+ "exclude": ["node_modules"],
"include": ["src/**/*"]
}
diff --git a/packages/clerk-js/tsconfig.v4.json b/packages/clerk-js/tsconfig.v4.json
index 6b71978c205..3459c99a6c3 100644
--- a/packages/clerk-js/tsconfig.v4.json
+++ b/packages/clerk-js/tsconfig.v4.json
@@ -5,6 +5,6 @@
"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"
},
- "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx", "**/*.v3.tsx", "**/*.v3.ts"],
+ "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"],
"include": ["src/**/*"]
}
diff --git a/packages/edge/CHANGELOG.md b/packages/edge/CHANGELOG.md
index ecbfff6f05d..2f24cabbbea 100644
--- a/packages/edge/CHANGELOG.md
+++ b/packages/edge/CHANGELOG.md
@@ -3,6 +3,10 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+### [1.7.6](https://github.com/clerkinc/javascript/compare/@clerk/edge@1.7.5...@clerk/edge@1.7.6) (2022-08-16)
+
+**Note:** Version bump only for package @clerk/edge
+
### [1.7.5](https://github.com/clerkinc/javascript/compare/@clerk/edge@1.7.5-staging.0...@clerk/edge@1.7.5) (2022-08-09)
**Note:** Version bump only for package @clerk/edge
diff --git a/packages/edge/package.json b/packages/edge/package.json
index f21583fc842..b4d4a451087 100644
--- a/packages/edge/package.json
+++ b/packages/edge/package.json
@@ -1,6 +1,6 @@
{
"name": "@clerk/edge",
- "version": "1.7.5",
+ "version": "1.7.6",
"license": "MIT",
"description": "Clerk SDK for serverless and edge environments",
"keywords": [
@@ -36,8 +36,8 @@
"build": "node ./scripts/info.cjs && tsc -p tsconfig.esm.json && tsc -p tsconfig.cjs.json && ./moduleTypeFix"
},
"dependencies": {
- "@clerk/backend-core": "^2.0.2",
- "@clerk/types": "^3.1.0",
+ "@clerk/backend-core": "^2.0.3",
+ "@clerk/types": "^3.1.1",
"@peculiar/webcrypto": "^1.2.3",
"next": "^12.2.0"
},
diff --git a/packages/edge/src/info.ts b/packages/edge/src/info.ts
index 71a85cf6f8d..4423782f999 100644
--- a/packages/edge/src/info.ts
+++ b/packages/edge/src/info.ts
@@ -1,3 +1,3 @@
/** DO NOT EDIT: This file is automatically generated by ../scripts/info.js */
-export const LIB_VERSION = '1.7.5';
+export const LIB_VERSION = '1.7.6';
export const LIB_NAME = '@clerk/edge';
diff --git a/packages/expo/CHANGELOG.md b/packages/expo/CHANGELOG.md
index 5037ac04fec..4b75d41e70d 100644
--- a/packages/expo/CHANGELOG.md
+++ b/packages/expo/CHANGELOG.md
@@ -3,6 +3,18 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+### [0.9.43](https://github.com/clerkinc/javascript/compare/@clerk/clerk-expo@0.9.42...@clerk/clerk-expo@0.9.43) (2022-08-16)
+
+**Note:** Version bump only for package @clerk/clerk-expo
+
+### [0.9.42](https://github.com/clerkinc/javascript/compare/@clerk/clerk-expo@0.9.42-staging.1...@clerk/clerk-expo@0.9.42) (2022-08-11)
+
+**Note:** Version bump only for package @clerk/clerk-expo
+
+### [0.9.41](https://github.com/clerkinc/javascript/compare/@clerk/clerk-expo@0.9.41-staging.0...@clerk/clerk-expo@0.9.41) (2022-08-10)
+
+**Note:** Version bump only for package @clerk/clerk-expo
+
### [0.9.40](https://github.com/clerkinc/javascript/compare/@clerk/clerk-expo@0.9.40-staging.0...@clerk/clerk-expo@0.9.40) (2022-08-09)
**Note:** Version bump only for package @clerk/clerk-expo
diff --git a/packages/expo/package.json b/packages/expo/package.json
index ff57032d2f6..88b92ca620c 100644
--- a/packages/expo/package.json
+++ b/packages/expo/package.json
@@ -1,6 +1,6 @@
{
"name": "@clerk/clerk-expo",
- "version": "0.9.40",
+ "version": "0.9.43",
"license": "MIT",
"description": "Clerk.dev React Native/Expo library",
"keywords": [
@@ -26,12 +26,13 @@
"dev": "tsc -p tsconfig.build.json --watch"
},
"dependencies": {
- "@clerk/clerk-js": "^4.0.2",
- "@clerk/clerk-react": "^4.0.2",
- "base-64": "^1.0.0"
+ "@clerk/clerk-js": "^4.1.1",
+ "@clerk/clerk-react": "^4.0.3",
+ "base-64": "^1.0.0",
+ "react-native-url-polyfill": "^1.3.0"
},
"devDependencies": {
- "@clerk/types": "^3.1.0",
+ "@clerk/types": "^3.1.1",
"@types/jest": "^27.4.0",
"@types/node": "^16.11.9",
"@types/react": "^17.0.39",
diff --git a/packages/expo/src/polyfills/index.ts b/packages/expo/src/polyfills/index.ts
index 88201cf14a9..0b23574ca83 100644
--- a/packages/expo/src/polyfills/index.ts
+++ b/packages/expo/src/polyfills/index.ts
@@ -1 +1,2 @@
+import 'react-native-url-polyfill/auto';
import './base64Polyfill';
diff --git a/packages/nextjs/CHANGELOG.md b/packages/nextjs/CHANGELOG.md
index da024eeaced..ef93c03c986 100644
--- a/packages/nextjs/CHANGELOG.md
+++ b/packages/nextjs/CHANGELOG.md
@@ -3,6 +3,10 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+### [4.0.3](https://github.com/clerkinc/javascript/compare/@clerk/nextjs@4.0.3-staging.0...@clerk/nextjs@4.0.3) (2022-08-16)
+
+**Note:** Version bump only for package @clerk/nextjs
+
### [4.0.2](https://github.com/clerkinc/javascript/compare/@clerk/nextjs@4.0.2-staging.0...@clerk/nextjs@4.0.2) (2022-08-09)
**Note:** Version bump only for package @clerk/nextjs
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
index 04f20b84b1b..abc2a3e15cb 100644
--- a/packages/nextjs/package.json
+++ b/packages/nextjs/package.json
@@ -1,6 +1,6 @@
{
"name": "@clerk/nextjs",
- "version": "4.0.2",
+ "version": "4.0.3",
"license": "MIT",
"description": "Clerk.dev SDK for NextJS",
"keywords": [
@@ -32,10 +32,10 @@
"dev": "tsc -p tsconfig.build.json --watch"
},
"dependencies": {
- "@clerk/clerk-react": "^4.0.2",
- "@clerk/clerk-sdk-node": "^4.0.2",
- "@clerk/edge": "^1.7.5",
- "@clerk/types": "^3.1.0",
+ "@clerk/clerk-react": "^4.0.3",
+ "@clerk/clerk-sdk-node": "^4.0.3",
+ "@clerk/edge": "^1.7.6",
+ "@clerk/types": "^3.1.1",
"tslib": "^2.3.1"
},
"devDependencies": {
diff --git a/packages/nextjs/src/middleware/utils/sanitizeAuthData.ts b/packages/nextjs/src/middleware/utils/sanitizeAuthData.ts
index 97450caf620..40703568536 100644
--- a/packages/nextjs/src/middleware/utils/sanitizeAuthData.ts
+++ b/packages/nextjs/src/middleware/utils/sanitizeAuthData.ts
@@ -2,7 +2,7 @@ import { AuthData } from '../types';
/**
*
- * Removes sensitive data from User and Session
+ * Removes sensitive data from User and Organization
* This allows for sensitive fields like `user.privateMetadata` to be available
* inside the `withServerSideAuth` callback, while ensuring that these fields
* will not get serialized into the client-accessible __NEXT_DATA__ script
@@ -15,5 +15,12 @@ export function sanitizeAuthData(authData: AuthData): any {
// @ts-expect-error;
delete user['privateMetadata'];
}
- return { ...authData, user };
+
+ const organization = authData.organization ? { ...authData.organization } : authData.organization;
+ if (organization) {
+ // @ts-expect-error;
+ delete organization['privateMetadata'];
+ }
+
+ return { ...authData, user, organization };
}
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 6a82fc56a7a..688df25de76 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,10 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+### [4.0.3](https://github.com/clerkinc/javascript/compare/@clerk/clerk-react@4.0.2...@clerk/clerk-react@4.0.3) (2022-08-16)
+
+**Note:** Version bump only for package @clerk/clerk-react
+
### [4.0.2](https://github.com/clerkinc/javascript/compare/@clerk/clerk-react@4.0.2-staging.0...@clerk/clerk-react@4.0.2) (2022-08-09)
**Note:** Version bump only for package @clerk/clerk-react
diff --git a/packages/react/package.json b/packages/react/package.json
index 2ea2ed1fee6..250c636e72a 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
{
"name": "@clerk/clerk-react",
- "version": "4.0.2",
+ "version": "4.0.3",
"license": "MIT",
"description": "Clerk.dev React library",
"keywords": [
@@ -28,7 +28,7 @@
"test": "jest"
},
"dependencies": {
- "@clerk/types": "^3.1.0",
+ "@clerk/types": "^3.1.1",
"swr": "^1.3.0",
"tslib": "^2.3.1"
},
diff --git a/packages/react/src/info.ts b/packages/react/src/info.ts
index 7ecd23f52c5..a4e3a6cd5b9 100644
--- a/packages/react/src/info.ts
+++ b/packages/react/src/info.ts
@@ -1,3 +1,3 @@
/** DO NOT EDIT: This file is automatically generated by ../scripts/info.js */
-export const LIB_VERSION = '4.0.2';
+export const LIB_VERSION = '4.0.3';
export const LIB_NAME = '@clerk/clerk-react';
diff --git a/packages/remix/CHANGELOG.md b/packages/remix/CHANGELOG.md
index 4a5f76d2d26..2bead88c47d 100644
--- a/packages/remix/CHANGELOG.md
+++ b/packages/remix/CHANGELOG.md
@@ -3,6 +3,10 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+### [1.0.3](https://github.com/clerkinc/javascript/compare/@clerk/remix@1.0.2...@clerk/remix@1.0.3) (2022-08-16)
+
+**Note:** Version bump only for package @clerk/remix
+
### [1.0.2](https://github.com/clerkinc/javascript/compare/@clerk/remix@1.0.2-staging.0...@clerk/remix@1.0.2) (2022-08-09)
**Note:** Version bump only for package @clerk/remix
diff --git a/packages/remix/package.json b/packages/remix/package.json
index c347d020fba..e7af3df06f2 100644
--- a/packages/remix/package.json
+++ b/packages/remix/package.json
@@ -1,6 +1,6 @@
{
"name": "@clerk/remix",
- "version": "1.0.2",
+ "version": "1.0.3",
"license": "MIT",
"description": "Clerk.dev SDK for Remix",
"keywords": [
@@ -32,9 +32,9 @@
"dev": "tsc -p tsconfig.build.json --watch"
},
"dependencies": {
- "@clerk/clerk-react": "^4.0.2",
- "@clerk/clerk-sdk-node": "^4.0.2",
- "@clerk/types": "^3.1.0",
+ "@clerk/clerk-react": "^4.0.3",
+ "@clerk/clerk-sdk-node": "^4.0.3",
+ "@clerk/types": "^3.1.1",
"cookie": "^0.5.0",
"tslib": "^2.3.1"
},
diff --git a/packages/sdk-node/CHANGELOG.md b/packages/sdk-node/CHANGELOG.md
index 4f7765c2d2d..5736ded9412 100644
--- a/packages/sdk-node/CHANGELOG.md
+++ b/packages/sdk-node/CHANGELOG.md
@@ -3,6 +3,10 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+### [4.0.3](https://github.com/clerkinc/javascript/compare/@clerk/clerk-sdk-node@4.0.2...@clerk/clerk-sdk-node@4.0.3) (2022-08-16)
+
+**Note:** Version bump only for package @clerk/clerk-sdk-node
+
### [4.0.2](https://github.com/clerkinc/javascript/compare/@clerk/clerk-sdk-node@4.0.2-staging.0...@clerk/clerk-sdk-node@4.0.2) (2022-08-09)
**Note:** Version bump only for package @clerk/clerk-sdk-node
diff --git a/packages/sdk-node/package.json b/packages/sdk-node/package.json
index 96d47ae553d..37b269c0ce0 100644
--- a/packages/sdk-node/package.json
+++ b/packages/sdk-node/package.json
@@ -1,5 +1,5 @@
{
- "version": "4.0.2",
+ "version": "4.0.3",
"license": "MIT",
"main": "dist/index.js",
"module": "esm/index.js",
@@ -48,8 +48,8 @@
"typescript": "^4.6.4"
},
"dependencies": {
- "@clerk/backend-core": "^2.0.2",
- "@clerk/types": "^3.1.0",
+ "@clerk/backend-core": "^2.0.3",
+ "@clerk/types": "^3.1.1",
"@peculiar/webcrypto": "^1.2.3",
"camelcase-keys": "^6.2.2",
"cookies": "^0.8.0",
diff --git a/packages/sdk-node/src/info.ts b/packages/sdk-node/src/info.ts
index 9b00eff6759..9578d441eb3 100644
--- a/packages/sdk-node/src/info.ts
+++ b/packages/sdk-node/src/info.ts
@@ -1,3 +1,3 @@
/** DO NOT EDIT: This file is automatically generated by ../scripts/info.js */
-export const LIB_VERSION = '4.0.2';
+export const LIB_VERSION = '4.0.3';
export const LIB_NAME = '@clerk/clerk-sdk-node';
diff --git a/packages/shared/CHANGELOG.md b/packages/shared/CHANGELOG.md
index e6493e35cab..4cf7c5d8c2a 100644
--- a/packages/shared/CHANGELOG.md
+++ b/packages/shared/CHANGELOG.md
@@ -3,6 +3,10 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+### [0.3.11](https://github.com/clerkinc/clerk_docker/compare/@clerk/shared@0.3.10...@clerk/shared@0.3.11) (2022-08-16)
+
+**Note:** Version bump only for package @clerk/shared
+
### [0.3.10](https://github.com/clerkinc/clerk_docker/compare/@clerk/shared@0.3.10-staging.0...@clerk/shared@0.3.10) (2022-08-09)
**Note:** Version bump only for package @clerk/shared
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 01129b6f8ac..01173e101d1 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
{
"name": "@clerk/shared",
- "version": "0.3.10",
+ "version": "0.3.11",
"private": true,
"main": "index.js",
"module": "index.js",
@@ -26,7 +26,7 @@
"@babel/core": "^7.13.14",
"@babel/preset-env": "^7.13.12",
"@babel/preset-react": "^7.13.13",
- "@clerk/types": "^3.1.0",
+ "@clerk/types": "^3.1.1",
"@popperjs/core": "^2.5.4",
"@sentry/browser": "^6.3.0",
"@svgr/webpack": "^6.2.1",
diff --git a/packages/themes/CHANGELOG.md b/packages/themes/CHANGELOG.md
index 4f52e353a60..7a744ca61f4 100644
--- a/packages/themes/CHANGELOG.md
+++ b/packages/themes/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+### [1.2.1](https://github.com/clerkinc/javascript/compare/@clerk/themes@1.2.0...@clerk/themes@1.2.1) (2022-08-16)
+
+**Note:** Version bump only for package @clerk/themes
+
+## [1.2.0](https://github.com/clerkinc/javascript/compare/@clerk/themes@1.2.0-staging.0...@clerk/themes@1.2.0) (2022-08-11)
+
+**Note:** Version bump only for package @clerk/themes
+
## [1.1.0](https://github.com/clerkinc/javascript/compare/@clerk/themes@1.1.0-staging.0...@clerk/themes@1.1.0) (2022-08-09)
**Note:** Version bump only for package @clerk/themes
diff --git a/packages/themes/package.json b/packages/themes/package.json
index 848c5e932f6..6ba1216f1b5 100644
--- a/packages/themes/package.json
+++ b/packages/themes/package.json
@@ -1,6 +1,6 @@
{
"name": "@clerk/themes",
- "version": "1.1.0",
+ "version": "1.2.1",
"license": "MIT",
"description": "Themes for the Clerk auth components",
"keywords": [
@@ -26,7 +26,7 @@
"dev": "tsc -p tsconfig.build.json --watch"
},
"devDependencies": {
- "@clerk/types": "^3.1.0",
+ "@clerk/types": "^3.1.1",
"typescript": "^4.6.4"
},
"peerDependencies": {
diff --git a/packages/themes/src/createTheme.ts b/packages/themes/src/createTheme.ts
index e2d311d308d..2d7641e1980 100644
--- a/packages/themes/src/createTheme.ts
+++ b/packages/themes/src/createTheme.ts
@@ -1,8 +1,9 @@
// Temp way to import the type. We will clean this up when we extract
// theming into its own package
-import type { InternalTheme } from '@clerk/clerk-js/src/v4/foundations';
import type { Appearance, BaseTheme, Elements, Theme } from '@clerk/types';
+import type { InternalTheme } from '../../clerk-js/src/ui/foundations';
+
type CreateClerkThemeParams = Theme & {
/**
* {@link Theme.elements}
diff --git a/packages/themes/src/themes/dark.ts b/packages/themes/src/themes/dark.ts
index eb539fab739..811d1322437 100644
--- a/packages/themes/src/themes/dark.ts
+++ b/packages/themes/src/themes/dark.ts
@@ -10,8 +10,8 @@ export const dark = unstable_createTheme({
},
elements: () => {
return {
- socialButtonsLogo__apple: { filter: 'invert(1)' },
- socialButtonsLogo__github: { filter: 'invert(1)' },
+ providerIcon__apple: { filter: 'invert(1)' },
+ providerIcon__github: { filter: 'invert(1)' },
activeDeviceIcon: {
'--cl-chassis-bottom': '#d2d2d2',
'--cl-chassis-back': '#e6e6e6',
diff --git a/packages/types/CHANGELOG.md b/packages/types/CHANGELOG.md
index 67ae4185267..d3c45c9af7e 100644
--- a/packages/types/CHANGELOG.md
+++ b/packages/types/CHANGELOG.md
@@ -3,6 +3,12 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+### [3.1.1](https://github.com/clerkinc/javascript/compare/@clerk/types@3.1.0...@clerk/types@3.1.1) (2022-08-16)
+
+### Bug Fixes
+
+- **types:** Deprecate orgs session token claim, add org_slug for active organization ([4175040](https://github.com/clerkinc/javascript/commit/4175040ca2257265cc0b8c12389056933765040b))
+
## [3.1.0](https://github.com/clerkinc/javascript/compare/@clerk/types@3.1.0-staging.0...@clerk/types@3.1.0) (2022-08-09)
### Bug Fixes
diff --git a/packages/types/package.json b/packages/types/package.json
index e87e7e58875..74032ed7507 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
{
"name": "@clerk/types",
- "version": "3.1.0",
+ "version": "3.1.1",
"license": "MIT",
"description": "Typings for Clerk libraries.",
"keywords": [
diff --git a/packages/types/src/jwt.ts b/packages/types/src/jwt.ts
index 84de5407174..176c42842b9 100644
--- a/packages/types/src/jwt.ts
+++ b/packages/types/src/jwt.ts
@@ -65,7 +65,7 @@ export interface ClerkJWTClaims {
azp?: string;
/**
- *
+ * @deprecated - Add orgs to your session token using the "user.organizations" shortcode in JWT Templates instead
*/
orgs?: Record;
@@ -74,6 +74,11 @@ export interface ClerkJWTClaims {
*/
org_id?: string;
+ /**
+ * Active organization slug.
+ */
+ org_slug?: string;
+
/**
* Active organization role
*/
})
- {getButtonLabel(flow, name)}
- 
- ) : (
- name
- )}
- 
-