From b9e8e31d6620cc0e943a04d6e679ba7e6fddff97 Mon Sep 17 00:00:00 2001 From: Bogdan Carpusor Date: Wed, 20 Nov 2024 15:53:25 +0200 Subject: [PATCH] Add additional disclaimer for the frontend ui type --- v2/emailpassword/quickstart/frontend-setup.mdx | 8 +++++++- v2/passwordless/quickstart/frontend-setup.mdx | 8 +++++++- .../preBuiltOrCustomUISwitcher/index.tsx | 16 ++++++++++++++++ v2/thirdparty/quickstart/frontend-setup.mdx | 8 +++++++- .../quickstart/frontend-setup.mdx | 9 +++++++-- .../quickstart/frontend-setup.mdx | 8 +++++++- 6 files changed, 51 insertions(+), 6 deletions(-) diff --git a/v2/emailpassword/quickstart/frontend-setup.mdx b/v2/emailpassword/quickstart/frontend-setup.mdx index 2be396c10..9aed0d223 100644 --- a/v2/emailpassword/quickstart/frontend-setup.mdx +++ b/v2/emailpassword/quickstart/frontend-setup.mdx @@ -20,7 +20,7 @@ import FrontendCustomUIEmailPasswordSingIn from '../../community/reusableMD/cust import FrontendSDKInstall from "../../community/reusableMD/frontend-sdk-install.mdx" -import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher" +import {CustomUILink, PrebuiltUILink, PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher" import FrontendCustomUITabs from "/src/components/tabs/FrontendCustomUITabs" import FrontendMobileSubTabs from "/src/components/tabs/FrontendMobileSubTabs" import PreBuiltUIInjector from "/src/components/prebuiltuiInjector" @@ -46,6 +46,9 @@ Start the setup by configuring your frontend application to use **SuperTokens** +This guide uses the **SuperTokens Pre Built UI** components. +If you want to create your own interface please check the **Custom UI** tutorial. + ## 1. Install the SDK @@ -666,6 +669,9 @@ To review all the components of our pre-built UI please follow [this link](https +This guide shows you how to create your own UI on top of the **SuperTokens SDK**. +If you want to use our **Pre Built Components** please check the following tutorial. + ## 1. Install the SDK diff --git a/v2/passwordless/quickstart/frontend-setup.mdx b/v2/passwordless/quickstart/frontend-setup.mdx index d5641218a..a34917c09 100644 --- a/v2/passwordless/quickstart/frontend-setup.mdx +++ b/v2/passwordless/quickstart/frontend-setup.mdx @@ -20,7 +20,7 @@ import FrontendCustomUIPasswordless from '../../community/reusableMD/custom-ui/f import FrontendSDKInstall from "../../community/reusableMD/frontend-sdk-install.mdx" -import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher" +import {CustomUILink, PrebuiltUILink, PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher" import FrontendCustomUITabs from "/src/components/tabs/FrontendCustomUITabs" import FrontendMobileSubTabs from "/src/components/tabs/FrontendMobileSubTabs" import PreBuiltUIInjector from "/src/components/prebuiltuiInjector" @@ -47,6 +47,9 @@ Start the setup by configuring your frontend application to use **SuperTokens** +This guide uses the **SuperTokens Pre Built UI** components. +If you want to create your own interface please check the **Custom UI** tutorial. + ## 1. Install the SDK @@ -693,6 +696,9 @@ To review all the components of our pre-built UI please follow [this link](https +This guide shows you how to create your own UI on top of the **SuperTokens SDK**. +If you want to use our **Pre Built Components** please check the following tutorial. + ## 1. Install the SDK diff --git a/v2/src/components/preBuiltOrCustomUISwitcher/index.tsx b/v2/src/components/preBuiltOrCustomUISwitcher/index.tsx index e0c9af170..f1e15964d 100644 --- a/v2/src/components/preBuiltOrCustomUISwitcher/index.tsx +++ b/v2/src/components/preBuiltOrCustomUISwitcher/index.tsx @@ -35,6 +35,22 @@ export function updateUIMode( window.dispatchEvent(new Event("uiModeChanged")); } +export function PrebuiltUILink({ children }: React.PropsWithChildren<{}>) { + return ( + updateUIMode("prebuilt")}> + {children} + + ); +} + +export function CustomUILink({ children }: React.PropsWithChildren<{}>) { + return ( + updateUIMode("custom")}> + {children} + + ); +} + export function PreBuiltOrCustomUISwitcher(props: any) { let [uiMode, setUIMode] = useState(getUIModeFromStorage()); diff --git a/v2/thirdparty/quickstart/frontend-setup.mdx b/v2/thirdparty/quickstart/frontend-setup.mdx index 76e13d8a6..6b20d612e 100644 --- a/v2/thirdparty/quickstart/frontend-setup.mdx +++ b/v2/thirdparty/quickstart/frontend-setup.mdx @@ -19,7 +19,7 @@ import FrontendCustomUIThirdParty from '../../community/reusableMD/custom-ui/fro import FrontendSDKInstall from "../../community/reusableMD/frontend-sdk-install.mdx" -import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher" +import {CustomUILink, PrebuiltUILink, PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher" import FrontendCustomUITabs from "/src/components/tabs/FrontendCustomUITabs" import FrontendMobileSubTabs from "/src/components/tabs/FrontendMobileSubTabs" import PreBuiltUIInjector from "/src/components/prebuiltuiInjector" @@ -43,6 +43,9 @@ Start the setup by configuring your frontend application to use **SuperTokens** +This guide uses the **SuperTokens Pre Built UI** components. +If you want to create your own interface please check the **Custom UI** tutorial. + ## 1. Install the SDK @@ -691,6 +694,9 @@ To review all the components of our pre-built UI please follow [this link](https +This guide shows you how to create your own UI on top of the **SuperTokens SDK**. +If you want to use our **Pre Built Components** please check the following tutorial. + ## 1. Install the SDK diff --git a/v2/thirdpartyemailpassword/quickstart/frontend-setup.mdx b/v2/thirdpartyemailpassword/quickstart/frontend-setup.mdx index b16803450..734b91339 100644 --- a/v2/thirdpartyemailpassword/quickstart/frontend-setup.mdx +++ b/v2/thirdpartyemailpassword/quickstart/frontend-setup.mdx @@ -21,7 +21,7 @@ import FrontendCustomUIEmailPasswordSingIn from '../../community/reusableMD/cust import FrontendSDKInstall from "../../community/reusableMD/frontend-sdk-install.mdx" -import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher" +import {CustomUILink, PrebuiltUILink, PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher" import FrontendCustomUITabs from "/src/components/tabs/FrontendCustomUITabs" import FrontendMobileSubTabs from "/src/components/tabs/FrontendMobileSubTabs" import PreBuiltUIInjector from "/src/components/prebuiltuiInjector" @@ -45,6 +45,9 @@ Start the setup by configuring your frontend application to use **SuperTokens** +This guide uses the **SuperTokens Pre Built UI** components. +If you want to create your own interface please check the **Custom UI** tutorial. + ## 1. Install the SDK @@ -691,7 +694,6 @@ You can check the login UI by visiting the `^{form_websiteBasePath}` route, in y To review all the components of our pre-built UI please follow [this link](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/auth-page--playground). - @@ -699,6 +701,9 @@ To review all the components of our pre-built UI please follow [this link](https +This guide shows you how to create your own UI on top of the **SuperTokens SDK**. +If you want to use our **Pre Built Components** please check the following tutorial. + ## 1. Install the SDK diff --git a/v2/thirdpartypasswordless/quickstart/frontend-setup.mdx b/v2/thirdpartypasswordless/quickstart/frontend-setup.mdx index 019880dd4..63bce28f9 100644 --- a/v2/thirdpartypasswordless/quickstart/frontend-setup.mdx +++ b/v2/thirdpartypasswordless/quickstart/frontend-setup.mdx @@ -19,7 +19,7 @@ import FrontendCustomUIThirdParty from '../../community/reusableMD/custom-ui/fro import FrontendCustomUIPasswordless from '../../community/reusableMD/custom-ui/frontend-custom-ui-passwordless.mdx' import FrontendSDKInstall from "../../community/reusableMD/frontend-sdk-install.mdx" -import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher" +import {CustomUILink, PrebuiltUILink, PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher" import FrontendCustomUITabs from "/src/components/tabs/FrontendCustomUITabs" import FrontendMobileSubTabs from "/src/components/tabs/FrontendMobileSubTabs" import PreBuiltUIInjector from "/src/components/prebuiltuiInjector" @@ -46,6 +46,9 @@ Start the setup by configuring your frontend application to use **SuperTokens** +This guide uses the **SuperTokens Pre Built UI** components. +If you want to create your own interface please check the **Custom UI** tutorial. + ## 1. Install the SDK @@ -739,6 +742,9 @@ To review all the components of our pre-built UI please follow [this link](https +This guide shows you how to create your own UI on top of the **SuperTokens SDK**. +If you want to use our **Pre Built Components** please check the following tutorial. + ## 1. Install the SDK