@openfort/react 0.3.2 → 1.0.1

package/build/components/Pages/EmailOTP/styles.js

@@ -0,0 +1,38 @@
+import styled from '../../../styles/styled/index.js';
+
+const Body = styled.p `
+  color: var(--ck-body-color);
+  text-align: center;
+  margin-bottom: 16px;
+`;
+const ResultContainer = styled.div `
+  margin-top: 16px;
+  height: 24px;
+  text-align: center;
+`;
+const FooterButtonText = styled.button `
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--ck-body-color-muted);
+  transition: color 0.3s;
+
+  &:disabled {
+    color: var(--ck-body-color-muted) !important;
+    cursor: not-allowed;
+  }
+`;
+const FooterTextButton = styled.p `
+  color: var(--ck-body-color-muted);
+  text-align: center;
+  margin-top: 16px;
+  &:hover {
+    ${FooterButtonText} {
+      color: var(--ck-body-color);
+    }
+  }
+`;
+
+export { Body, FooterButtonText, FooterTextButton, ResultContainer };
+//# sourceMappingURL=styles.js.map

package/build/components/Pages/EmailOTP/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/EmailVerification/index.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { EmailIcon } from '../../../assets/icons.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { logger } from '../../../utils/logger.js';
+import Button from '../../Common/Button/index.js';
+import { TextLinkButton } from '../../Common/Button/styles.js';
+import Loader from '../../Common/Loading/index.js';
+import { ModalContent, ModalH1, ModalBody } from '../../Common/Modal/styles.js';
+import { FloatingGraphic } from '../../FloatingGraphic/index.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+
+const EmailVerification = () => {
+    const { setRoute, emailInput, setEmailInput } = useOpenfort();
+    const { user } = useOpenfortCore();
+    const isLinkFlow = !!user;
+    const [loading, setLoading] = useState(true);
+    const [verificationResponse, setVerificationResponse] = useState(null);
+    const isVerifying = useRef(false);
+    useEffect(() => {
+        if (isVerifying.current)
+            return;
+        isVerifying.current = true;
+        const url = new URL(window.location.href);
+        if (emailInput) {
+            // Not callback flow
+            setLoading(false);
+            return;
+        }
+        // Verify email flow
+        const email = url.searchParams.get('email');
+        const removeParams = () => {
+            ['state', 'openfortEmailVerificationUI', 'email', 'openfortAuthProvider'].forEach((key) => {
+                url.searchParams.delete(key);
+            });
+            window.history.replaceState({}, document.title, url.toString());
+        };
+        logger.log('Email verification', email);
+        if (!email) {
+            setRoute(routes.EMAIL_LOGIN);
+            return;
+        }
+        try {
+            // ASSUMING IT WORKS
+            // TODO: TMP FIX
+            setEmailInput(email);
+            setVerificationResponse({
+                success: true,
+            });
+        }
+        catch (e) {
+            setVerificationResponse({
+                success: false,
+                error: 'There was an error verifying your email. Please try again.',
+            });
+            logger.log('Error verifying email', e);
+        }
+        finally {
+            removeParams();
+            setLoading(false);
+        }
+    }, []);
+    if (loading) {
+        return (jsx(PageContent, { children: jsx(Loader, { header: "Checking if account is verified" }) }));
+    }
+    return (jsxs(PageContent, { children: [jsx(FloatingGraphic, { height: "190px", logoCenter: {
+                    logo: jsx(EmailIcon, {}),
+                }, logoTopLeft: {
+                    logo: jsx(EmailIcon, {}),
+                }, logoBottomRight: {
+                    logo: jsx(EmailIcon, {}),
+                }, logoTopRight: {
+                    logo: jsx(EmailIcon, {}),
+                }, logoBottomLeft: {
+                    logo: jsx(EmailIcon, {}),
+                } }), jsx(ModalContent, { children: verificationResponse ? (jsxs(Fragment, { children: [jsx(ModalH1, { "$small": true, children: verificationResponse.success ? 'Email verified' : 'Email verification failed' }), jsxs(ModalBody, { children: [verificationResponse.error ? verificationResponse.error : 'Your email has been verified.', jsx(Button, { onClick: () => {
+                                        setRoute(routes.EMAIL_LOGIN);
+                                    }, style: { marginTop: 12 }, children: "Continue" })] })] })) : (jsxs(Fragment, { children: [jsx(ModalH1, { "$small": true, children: "Email sent" }), jsxs(ModalBody, { style: { height: 40 }, children: ["Please check your email.", jsx("br", {}), emailInput] }), jsx(TextLinkButton, { style: { textDecoration: 'underline' }, onClick: () => {
+                                setRoute(isLinkFlow ? routes.CONNECTED : routes.EMAIL_LOGIN);
+                            }, children: isLinkFlow ? 'Go back' : 'Go back to login' })] })) })] }));
+};
+
+export { EmailVerification as default };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/EmailVerification/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/ExportKey/index.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { KeyIcon } from '../../../assets/icons.js';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
+import Button from '../../Common/Button/index.js';
+import { CopyText } from '../../Common/CopyToClipboard/CopyText.js';
+import { ModalHeading, ModalContent, ModalBody } from '../../Common/Modal/styles.js';
+import { FloatingGraphic } from '../../FloatingGraphic/index.js';
+import { PageContent } from '../../PageContent/index.js';
+
+// TODO: Localize
+const ExportKey = () => {
+    const { exportPrivateKey } = useEthereumEmbeddedWallet();
+    const [exportedKey, setExportedKey] = useState(null);
+    const [exportError, setExportError] = useState(null);
+    const [showExportedKey, setShowExportedKey] = useState(false);
+    useEffect(() => {
+        const asyncExportKey = async () => {
+            try {
+                const key = await exportPrivateKey();
+                setExportedKey(key);
+            }
+            catch {
+                setExportError('You cannot export the private key for this wallet.');
+                setExportedKey(null);
+            }
+        };
+        asyncExportKey();
+    }, [exportPrivateKey]);
+    return (jsxs(PageContent, { children: [jsx(ModalHeading, { children: "Export private key" }), jsx(FloatingGraphic, { height: "110px", logoCenter: {
+                    logo: jsx(KeyIcon, {}),
+                }, logoTopLeft: {
+                    logo: jsx(KeyIcon, {}),
+                }, logoBottomRight: {
+                    logo: jsx(KeyIcon, {}),
+                }, logoTopRight: {
+                    logo: jsx(KeyIcon, {}),
+                }, logoBottomLeft: {
+                    logo: jsx(KeyIcon, {}),
+                } }), jsxs(ModalContent, { children: [jsxs(ModalBody, { children: [jsx("p", { style: { marginBottom: 6 }, children: "With your private key, you can access your account outside this application." }), jsx("p", { children: "Keep it safe and never share it with anyone you don't trust." })] }), !showExportedKey ? (jsx(Button, { onClick: () => setShowExportedKey(true), style: { marginTop: 12 }, children: "Export key" })) : exportError ? (jsx(ModalBody, { style: { marginTop: 12 }, "$error": true, children: exportError })) : exportedKey ? (jsx("div", { style: { marginTop: 12 }, children: jsxs(CopyText, { value: exportedKey, children: [exportedKey.slice(0, 10), "...", exportedKey.slice(-10)] }) })) : (jsx(Fragment, { children: "Loading..." }))] })] }));
+};
+
+export { ExportKey as default };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/ExportKey/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/ForgotPassword/index.js

@@ -0,0 +1,129 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useEffect } from 'react';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { logger } from '../../../utils/logger.js';
+import Button from '../../Common/Button/index.js';
+import FitText from '../../Common/FitText/index.js';
+import Input from '../../Common/Input/index.js';
+import { ModalBody } from '../../Common/Modal/styles.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+
+// TODO: Localize
+const RequestEmail = () => {
+    const { triggerResize, emailInput: email, setEmailInput: setEmail, setRoute } = useOpenfort();
+    const { client } = useOpenfortCore();
+    const [loading, setLoading] = React.useState(false);
+    const [message, setMessage] = React.useState('');
+    const [error, setError] = React.useState('');
+    useEffect(() => {
+        triggerResize();
+    }, [!error]);
+    useEffect(() => {
+        if (message) {
+            const timer = setTimeout(() => {
+                setMessage('');
+            }, 5000);
+            return () => clearTimeout(timer);
+        }
+    }, [message]);
+    useEffect(() => {
+        if (error) {
+            const timer = setTimeout(() => {
+                setError('');
+            }, 5000);
+            return () => clearTimeout(timer);
+        }
+    }, [error]);
+    const handleSubmit = async () => {
+        const cleanURL = window.location.origin + window.location.pathname;
+        setLoading(true);
+        client.auth
+            .requestResetPassword({
+            email,
+            redirectUrl: `${cleanURL}?openfortForgotPasswordUI=true&email=${email}`,
+        })
+            .then(() => {
+            setMessage('Reset email sent.');
+            setTimeout(() => {
+                setRoute(routes.EMAIL_LOGIN);
+            }, 1000);
+            setLoading(false);
+        })
+            .catch((e) => {
+            var _a;
+            logger.log(e);
+            const code = (_a = e === null || e === void 0 ? void 0 : e.response) === null || _a === void 0 ? void 0 : _a.status;
+            switch (code) {
+                case 400:
+                    setError('Email not verified.');
+                    break;
+                default:
+                    setError('Error sending reset email.');
+                    break;
+            }
+            setLoading(false);
+        });
+    };
+    return (jsx(PageContent, { children: jsxs("form", { onSubmit: (e) => {
+                e.preventDefault();
+                handleSubmit();
+            }, children: [jsx(Input, { style: { marginTop: 0 }, value: email, onChange: (e) => setEmail(e.target.value), type: "email", placeholder: "Enter your email", disabled: loading }), error && (jsx(ModalBody, { style: { marginTop: 12 }, "$error": true, children: jsx(FitText, { children: error }) })), jsx(Button, { onClick: handleSubmit, disabled: loading || !!message, waiting: loading, children: message ? message : 'Send reset email' })] }) }));
+};
+const ResetPassword = () => {
+    const fixedUrl = window.location.href.replace('?state=', '&state='); // redirectUrl is not working with query params
+    const url = new URL(fixedUrl);
+    const [password, setPassword] = React.useState('');
+    // const { setRoute, triggerResize } = useOpenfort()
+    // const { client, updateUser } = useOpenfortCore()
+    const [loading, _setLoading] = React.useState(false);
+    const email = url.searchParams.get('email');
+    // OTP_TODO: Reset password
+    const handleSubmit = async () => {
+        // setLoading(true)
+        // const state = url.searchParams.get('state')
+        // if (!email || !state) {
+        //   logger.log('No email or state found')
+        //   setLoading(false)
+        //   return
+        // }
+        // try {
+        //   await client.auth.resetPassword({
+        //     password: password,
+        //     email,
+        //     state,
+        //   })
+        //   await client.auth.logInWithEmailPassword({
+        //     email,
+        //     password,
+        //   })
+        //   const user = await updateUser()
+        //   if (!user) throw new Error('No user found')
+        //   ;['openfortForgotPasswordUI', 'state', 'email'].forEach((param) => {
+        //     url.searchParams.delete(param)
+        //   })
+        //   window.history.replaceState({}, document.title, url.toString())
+        //   setRoute(routes.LOAD_WALLETS)
+        // } catch (e) {
+        //   logger.log('Reset password error', e)
+        //   setLoading(false)
+        //   triggerResize()
+        // }
+    };
+    return (jsx(PageContent, { children: jsxs("form", { onSubmit: (e) => {
+                e.preventDefault();
+                handleSubmit();
+            }, children: [jsx(FitText, { children: email ? `Reset password for ${email}` : 'Reset password' }), jsx(Input, { value: password, onChange: (e) => setPassword(e.target.value), type: "password", placeholder: "Enter your new password", disabled: loading }), jsx(Button, { onClick: handleSubmit, disabled: loading, waiting: loading, children: "Reset password" })] }) }));
+};
+const ForgotPassword = () => {
+    const url = new URL(window.location.href);
+    const isRequestingEmail = !url.searchParams.get('openfortForgotPasswordUI');
+    if (isRequestingEmail)
+        return jsx(RequestEmail, {});
+    else
+        return jsx(ResetPassword, {});
+};
+
+export { ForgotPassword as default };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/ForgotPassword/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/LinkEmail/index.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { AnimatePresence } from 'framer-motion';
+import React from 'react';
+import { useEmailAuth } from '../../../hooks/openfort/auth/useEmailAuth.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { logger } from '../../../utils/logger.js';
+import Button from '../../Common/Button/index.js';
+import Input from '../../Common/Input/index.js';
+import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
+import { TextContainer } from '../../ConnectButton/styles.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+
+// TODO: Localize
+const textVariants = {
+    initial: {
+        opacity: 0,
+    },
+    animate: {
+        opacity: 1,
+        transition: {
+            duration: 0.3,
+            ease: [0.25, 1, 0.5, 1],
+        },
+    },
+    exit: {
+        position: 'absolute',
+        opacity: 0,
+        transition: {
+            duration: 0.3,
+            ease: [0.25, 1, 0.5, 1],
+        },
+    },
+};
+const LinkEmail = () => {
+    const { setRoute, triggerResize, emailInput: email, setEmailInput: setEmail } = useOpenfort();
+    const { client } = useOpenfortCore();
+    const [loginLoading, setLoginLoading] = React.useState(false);
+    const [loginError, setLoginError] = React.useState(false);
+    const { linkEmail } = useEmailAuth();
+    const handleSubmit = async () => {
+        setLoginLoading(true);
+        await client.validateAndRefreshToken();
+        try {
+            await linkEmail({ email });
+            setRoute(routes.EMAIL_VERIFICATION);
+        }
+        catch (e) {
+            logger.log('Link error:', e);
+            setLoginError('Could not link email. Please try again.');
+            setLoginLoading(false);
+            triggerResize();
+        }
+    };
+    return (jsxs(PageContent, { children: [jsx(ModalHeading, { children: "Link your email" }), jsxs("form", { onSubmit: (e) => {
+                    e.preventDefault();
+                    handleSubmit();
+                }, children: [jsx(Input, { style: { marginTop: 0 }, value: email, onChange: (e) => setEmail(e.target.value), type: "email", placeholder: "Enter your email", disabled: loginLoading }), loginError && (jsx(ModalBody, { style: { height: 24, marginTop: 12 }, "$error": true, children: loginError })), jsx(Button, { onClick: handleSubmit, disabled: loginLoading, waiting: loginLoading, children: jsx(AnimatePresence, { initial: false, children: loginLoading ? (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants, children: "Linking email..." }, "connectedText")) : (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants, children: "Link email" }, "connectedText")) }) })] })] }));
+};
+
+export { LinkEmail as default };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/LinkEmail/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/LinkedProvider/index.d.ts

@@ -1,2 +1,5 @@
+export declare const ProviderIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProviderIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProviderIconInner: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const LinkedProvider: React.FC;
 export default LinkedProvider;

package/build/components/Pages/LinkedProvider/index.js

@@ -0,0 +1,90 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useUser } from '../../../hooks/openfort/useUser.js';
+import { useResolvedIdentity } from '../../../hooks/useResolvedIdentity.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import styled from '../../../styles/styled/index.js';
+import 'detect-browser';
+import { truncateEthAddress } from '../../../utils/format.js';
+import Button from '../../Common/Button/index.js';
+import { CopyText } from '../../Common/CopyToClipboard/CopyText.js';
+import FitText from '../../Common/FitText/index.js';
+import { ModalHeading, ModalContent, ModalBody, ModalH1 } from '../../Common/Modal/styles.js';
+import { getProviderName } from '../../Common/Providers/getProviderName.js';
+import { ProviderHeader } from '../../Common/Providers/ProviderHeader.js';
+import { ProviderIcon } from '../../Common/Providers/ProviderIcon.js';
+import { useThemeContext } from '../../ConnectKitThemeProvider/ConnectKitThemeProvider.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+
+const ProviderIconContainer = styled.div `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const ProviderIconWrapper = styled.div `
+  width: 54px;
+  height: 54px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--ck-body-background-secondary);
+  border-radius: 28px;
+`;
+const ProviderIconInner = styled.div `
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const SiweContent = ({ account }) => {
+    var _a, _b;
+    const address = account.accountId;
+    const context = useOpenfort();
+    const { chainType } = useOpenfortCore();
+    const themeContext = useThemeContext();
+    const identity = useResolvedIdentity({
+        address,
+        chainType,
+        enabled: !!address,
+    });
+    const ensName = identity.status === 'success' ? identity.name : undefined;
+    const separator = ['web95', 'rounded', 'minimal'].includes((_b = (_a = themeContext.theme) !== null && _a !== void 0 ? _a : context.uiConfig.theme) !== null && _b !== void 0 ? _b : '')
+        ? '....'
+        : undefined;
+    return (jsxs(Fragment, { children: [jsx(ModalH1, { children: jsx(CopyText, { value: address, children: ensName !== null && ensName !== void 0 ? ensName : truncateEthAddress(address, separator) }) }), jsxs("div", { style: { marginTop: '16px' }, children: ["Linked via Sign-In with Ethereum (SIWE)", jsx(Button, { onClick: () => context.setRoute({ route: 'removeLinkedProvider', account }), children: "Remove this wallet" })] })] }));
+};
+const OAuthContent = ({ account }) => {
+    const { user } = useUser();
+    const { setRoute } = useOpenfort();
+    return (jsxs(Fragment, { children: [jsx(ModalH1, { children: account.provider.charAt(0).toUpperCase() + account.provider.slice(1) }), jsxs("div", { style: { marginTop: '16px' }, children: [user === null || user === void 0 ? void 0 : user.email, jsxs(Button, { onClick: () => setRoute({ route: 'removeLinkedProvider', account }), children: ["Remove ", account.provider] })] })] }));
+};
+const LinkedProvider = () => {
+    const { route } = useOpenfort();
+    const account = useMemo(() => {
+        if (route.route === 'linkedProvider') {
+            return route.account;
+        }
+        throw new Error('No account found in route');
+    }, [route]);
+    const getProviderDetails = (account) => {
+        switch (account.provider) {
+            case 'siwe':
+                return jsx(SiweContent, { account: account });
+            case 'google':
+            case 'facebook':
+            case 'twitter':
+                return jsx(OAuthContent, { account: account });
+            default:
+                return (jsxs("div", { style: { marginTop: '16px', display: 'flex', alignItems: 'center', gap: '8px', flexDirection: 'column' }, children: [jsxs("div", { children: ["Authentication method: ", jsx("b", { children: getProviderName(account.provider) })] }), jsx(FitText, { children: jsx(ProviderHeader, { account: account }) })] }));
+        }
+    };
+    return (jsxs(PageContent, { children: [jsx(ModalHeading, { children: getProviderName(account.provider) }), jsxs(ModalContent, { style: { paddingBottom: 0 }, children: [jsx(ProviderIconContainer, { children: jsx(ProviderIconWrapper, { children: jsx(ProviderIconInner, { children: jsx(ProviderIcon, { account: account }) }) }) }), jsx(ModalBody, { children: getProviderDetails(account) })] })] }));
+};
+
+export { ProviderIconContainer, ProviderIconInner, ProviderIconWrapper, LinkedProvider as default };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/LinkedProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/LinkedProviders/index.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { useProviders } from '../../../hooks/openfort/useProviders.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import Button from '../../Common/Button/index.js';
+import { ModalHeading, ModalContent, ModalBody } from '../../Common/Modal/styles.js';
+import { ProviderHeader } from '../../Common/Providers/ProviderHeader.js';
+import { ProviderIcon } from '../../Common/Providers/ProviderIcon.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { LinkedProvidersGroupWrapper, LinkedProviderButtonContainer, LinkedProviderButtonWrapper, ProviderIconWrapper } from './styles.js';
+
+const LinkedProvider = ({ account }) => {
+    const { setRoute } = useOpenfort();
+    return (jsx(LinkedProviderButtonContainer, { children: jsx(Button, { onClick: () => setRoute({ route: routes.LINKED_PROVIDER, account }), fitText: false, children: jsxs(LinkedProviderButtonWrapper, { children: [jsx(ProviderIconWrapper, { children: jsx(ProviderIcon, { account: account }) }), jsx(ProviderHeader, { account: account })] }) }) }));
+};
+const AddLinkedProviderButton = () => {
+    const { setRoute } = useOpenfort();
+    const { availableProviders: unlinkedProviders } = useProviders();
+    return (jsx(Button, { disabled: unlinkedProviders.length === 0, onClick: () => setRoute(routes.PROVIDERS), children: "+" }));
+};
+const LinkedProvidersGroup = () => {
+    const { linkedAccounts, user, isLoading } = useOpenfortCore();
+    const { triggerResize, emailInput: pendingEmail } = useOpenfort();
+    useEffect(() => {
+        if (!isLoading)
+            triggerResize();
+    }, [isLoading]);
+    // TODO: Show loading
+    if (isLoading) {
+        return (jsx("div", { children: jsx(AddLinkedProviderButton, {}) }));
+    }
+    // TODO: show error
+    if (!user) {
+        return (jsx("div", { children: jsx(AddLinkedProviderButton, {}) }));
+    }
+    return (jsxs(Fragment, { children: [jsxs(LinkedProvidersGroupWrapper, { children: [linkedAccounts.length === 0 && !user.email && !user.phoneNumber && (jsxs(ModalContent, { children: ["You are logged in as a guest.", jsx(ModalBody, { children: "Add authentication methods to avoid losing access to your account." })] })), !linkedAccounts.find((a) => a.provider === 'credential') && user.email && (jsx(LinkedProvider, { account: { provider: 'credential', accountId: user.email } }, `credential-${user.email}`)), linkedAccounts.map((account) => (jsx(LinkedProvider, { account: account }, `${account.provider}-${account.accountId}`))), user.phoneNumber && (jsx(LinkedProvider, { account: { provider: 'phone', accountId: user.phoneNumber } }, `phone-${user.phoneNumber}`)), pendingEmail && (jsx(LinkedProviderButtonContainer, { children: jsxs(LinkedProviderButtonWrapper, { style: { padding: '12px 20px', opacity: 0.6 }, children: [jsx(ProviderIconWrapper, { children: jsx(ProviderIcon, { account: { provider: 'credential', accountId: pendingEmail } }) }), jsx(ProviderHeader, { account: { provider: 'credential', accountId: pendingEmail } }), jsx(ModalBody, { style: { fontSize: 11, marginLeft: 'auto', whiteSpace: 'nowrap' }, children: "Awaiting validation" })] }) }))] }), jsx(AddLinkedProviderButton, {})] }));
+};
+const LinkedProviders = () => {
+    return (jsxs(PageContent, { children: [jsx(ModalHeading, { children: "Authentication methods" }), jsx(LinkedProvidersGroup, {})] }));
+};
+
+export { LinkedProviders as default };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/LinkedProviders/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/LinkedProviders/styles.js

@@ -0,0 +1,51 @@
+import styled from '../../../styles/styled/index.js';
+import { ButtonContainer, ButtonContainerInner, InnerContainer } from '../../Common/Button/styles.js';
+import { ProviderInputInner } from '../Providers/styles.js';
+
+const ProviderIconWrapper = styled.div `
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const LinkedProviderButtonContainer = styled.div `
+  ${ButtonContainer} {
+    font-weight: var(--ck-primary-button-font-weight, 500);
+  }
+
+  &:first-of-type {
+    ${ButtonContainer}, ${ProviderInputInner} {
+      margin-top: 0;
+    }
+  }
+
+  ${ButtonContainerInner} {
+    padding: 0 20px;
+  }
+
+  ${InnerContainer} {
+    width: 100%;
+    max-width: 100%;
+  }
+`;
+const LinkedProviderButtonWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+const LinkedProvidersGroupWrapper = styled.div `
+`;
+const LinkedProviderText = styled.div `
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ck-body-color-muted);
+  text-align: start;
+  max-width: 210px;
+`;
+
+export { LinkedProviderButtonContainer, LinkedProviderButtonWrapper, LinkedProviderText, LinkedProvidersGroupWrapper, ProviderIconWrapper };
+//# sourceMappingURL=styles.js.map

package/build/components/Pages/LinkedProviders/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}