Update dashboard docs to include details about email password login

v2/emailpassword/custom-ui/init/dashboard.mdx

@@ -14,13 +14,11 @@ import BackendSDKTabs from "/src/components/tabs/BackendSDKTabs";
 import TabItem from '@theme/TabItem';
 import AppInfoForm from "/src/components/appInfoForm"
 
-## Setting up and viewing the user management dashboard
+## Initialise the dashboard recipe
 
 <AppInfoForm askForAPIDomain>
 
-With the user management dashboard, you can view the list of users on SuperTokens and be able to easily view, modify or delete their sessions, metadata, roles and account info.
-
-To get started, initialise the Dashboard recipe in the `recipeList` on the backend and provide a random and unique API key that is known only to you. This API key will later be used to access the dashboard from the UI.
+To get started, initialise the Dashboard recipe in the `recipeList`.
 
 <BackendSDKTabs>
 <TabItem value="nodejs">
@@ -36,10 +34,9 @@ SuperTokens.init({
     websiteDomain: "...",
   },
   recipeList: [
+    // TODO: Initialise other recipes
     // highlight-start
-    Dashboard.init({
-      apiKey: "<SOME API KEY>"
-    }),
+    Dashboard.init(),
     // highlight-end
   ],
 });
@@ -58,10 +55,9 @@ import (
 func main() {
 	supertokens.Init(supertokens.TypeInput{
 		RecipeList: []supertokens.Recipe{
+      // TODO: Initialise other recipes
 			// highlight-start
-			dashboard.Init(dashboardmodels.TypeInput{
-				ApiKey: "<SOME API KEY>",
-			}),
+			dashboard.Init(nil),
 			// highlight-end
 		},
 	})
@@ -80,8 +76,9 @@ init(
         api_domain="...", app_name="...", website_domain="..."),
     framework='...',  # type: ignore
     recipe_list=[
+        # TODO: Initialise other recipes
         # highlight-start
-        dashboard.init(api_key="<SOME API KEY>"),
+        dashboard.init(),
         # highlight-end
     ]
 )
@@ -90,15 +87,53 @@ init(
 </TabItem>
 </BackendSDKTabs>
 
-Now, if you navigate to `^{form_apiDomain}^{form_apiBasePath}/dashboard`, you will now be able to see the enter API screen.
+## Viewing the dashboard
+
+:::important
+The user management dashboard is served by the backend SDK, you have to use your API domain when trying to visit the dashboard.
+:::
+
+Navigate to `^{form_apiDomain}^{form_apiBasePath}/dashboard` to view the dashboard.
+
+<img src="/img/dashboard/login.png" alt="Dashboard login screen" />
+
+## Creating dashboard credentials
+
+:::tip Paid Feature
+You can create one dashboard user* for free. If you need to create additional users please email us at team@supertokens.com.
+
+*: A dashboard user is a user that can log into and view the user management dashboard. These users are independent to the users of your application
+:::
+
+When you first setup SuperTokens, there are no credentials created for the dashboard. If you click the "Add a new user" button in the dashboard login screen you can see the command you need to execute in order to create credentials.
+
+<img src="/img/dashboard/signup.png" alt="Dashboard login screen" />
+
+To create credentials you need to make a request to SuperTokens core. 
+
+- The example above uses the demo core `https://try.supertokens.com`, replace this with the connection uri you pass to the backend SDK when initialising SuperTokens.
+- Replace `<YOUR-API-KEY>` with your API key. If you are using a self hosted SuperTokens core there is no API key by default. In that case you can either skip or ignore the `api-key` header.
+- Replace `<YOUR_EMAIL>` and `<YOUR_PASSWORD>` with the appropriate values
+
+## Updating dashboard credentials
+
+You can update the email or password of existing credentials by using the "Forgot Password" button on the dashboard login page.
+
+<img src="/img/dashboard/forgot-password.png" alt="Dashboard login screen" />
+
+To update credentials you need to make a request to SuperTokens core. 
+
+- The example above uses the demo core `https://try.supertokens.com`, replace this with the connection uri you pass to the backend SDK when initialising SuperTokens.
+- Replace `<YOUR-API-KEY>` with your API key. If you are using a self hosted SuperTokens core there is no API key by default. In that case you can either skip or ignore the `api-key` header.
+- Replace `<YOUR_EMAIL>` and `<YOUR_NEW_PASSWORD>` with the appropriate values. You can use `newEmail` instead of `newPassword` if you want to update the email
 
-<img src="/img/dashboard/api-key.png" alt="Enter API screen of dashboard" />
+## Viewing users
 
-You should enter the same API as the one you provided in the `dashboard.init` function call. On successful authentication, you will see the following UI
+If you have just created your app, you may not have any users to show on the dashboard.
 
 <img src="/img/dashboard/no-users.png" alt="Empty dashboard" />
 
-Now, navigate to the your frontend app and create a user (via the sign up flow). On creation, if you head back to the dashboard and refresh the page, you will see that user:
+Navigate to the your frontend app and create a user (via the sign up flow). On creation, if you head back to the dashboard and refresh the page, you will see that user:
 
 <img src="/img/dashboard/one-user.png" alt="One user in dashboard" />
 

v2/emailpassword/pre-built-ui/setup/dashboard.mdx

@@ -14,13 +14,11 @@ import BackendSDKTabs from "/src/components/tabs/BackendSDKTabs";
 import TabItem from '@theme/TabItem';
 import AppInfoForm from "/src/components/appInfoForm"
 
-## Setting up and viewing the user management dashboard
+## Initialise the dashboard recipe
 
 <AppInfoForm askForAPIDomain>
 
-With the user management dashboard, you can view the list of users on SuperTokens and be able to easily view, modify or delete their sessions, metadata, roles and account info.
-
-To get started, initialise the Dashboard recipe in the `recipeList` on the backend and provide a random and unique API key that is known only to you. This API key will later be used to access the dashboard from the UI.
+To get started, initialise the Dashboard recipe in the `recipeList`.
 
 <BackendSDKTabs>
 <TabItem value="nodejs">
@@ -36,10 +34,9 @@ SuperTokens.init({
     websiteDomain: "...",
   },
   recipeList: [
+    // TODO: Initialise other recipes
     // highlight-start
-    Dashboard.init({
-      apiKey: "<SOME API KEY>"
-    }),
+    Dashboard.init(),
     // highlight-end
   ],
 });
@@ -58,10 +55,9 @@ import (
 func main() {
 	supertokens.Init(supertokens.TypeInput{
 		RecipeList: []supertokens.Recipe{
+      // TODO: Initialise other recipes
 			// highlight-start
-			dashboard.Init(dashboardmodels.TypeInput{
-				ApiKey: "<SOME API KEY>",
-			}),
+			dashboard.Init(nil),
 			// highlight-end
 		},
 	})
@@ -80,8 +76,9 @@ init(
         api_domain="...", app_name="...", website_domain="..."),
     framework='...',  # type: ignore
     recipe_list=[
+        # TODO: Initialise other recipes
         # highlight-start
-        dashboard.init(api_key="<SOME API KEY>"),
+        dashboard.init(),
         # highlight-end
     ]
 )
@@ -90,15 +87,53 @@ init(
 </TabItem>
 </BackendSDKTabs>
 
-Now, if you navigate to `^{form_apiDomain}^{form_apiBasePath}/dashboard`, you will now be able to see the enter API screen.
+## Viewing the dashboard
+
+:::important
+The user management dashboard is served by the backend SDK, you have to use your API domain when trying to visit the dashboard.
+:::
+
+Navigate to `^{form_apiDomain}^{form_apiBasePath}/dashboard` to view the dashboard.
+
+<img src="/img/dashboard/login.png" alt="Dashboard login screen" />
+
+## Creating dashboard credentials
+
+:::tip Paid Feature
+You can create one dashboard user* for free. If you need to create additional users please email us at team@supertokens.com.
+
+*: A dashboard user is a user that can log into and view the user management dashboard. These users are independent to the users of your application
+:::
+
+When you first setup SuperTokens, there are no credentials created for the dashboard. If you click the "Add a new user" button in the dashboard login screen you can see the command you need to execute in order to create credentials.
+
+<img src="/img/dashboard/signup.png" alt="Dashboard login screen" />
+
+To create credentials you need to make a request to SuperTokens core. 
+
+- The example above uses the demo core `https://try.supertokens.com`, replace this with the connection uri you pass to the backend SDK when initialising SuperTokens.
+- Replace `<YOUR-API-KEY>` with your API key. If you are using a self hosted SuperTokens core there is no API key by default. In that case you can either skip or ignore the `api-key` header.
+- Replace `<YOUR_EMAIL>` and `<YOUR_PASSWORD>` with the appropriate values
+
+## Updating dashboard credentials
+
+You can update the email or password of existing credentials by using the "Forgot Password" button on the dashboard login page.
+
+<img src="/img/dashboard/forgot-password.png" alt="Dashboard login screen" />
+
+To update credentials you need to make a request to SuperTokens core. 
+
+- The example above uses the demo core `https://try.supertokens.com`, replace this with the connection uri you pass to the backend SDK when initialising SuperTokens.
+- Replace `<YOUR-API-KEY>` with your API key. If you are using a self hosted SuperTokens core there is no API key by default. In that case you can either skip or ignore the `api-key` header.
+- Replace `<YOUR_EMAIL>` and `<YOUR_NEW_PASSWORD>` with the appropriate values. You can use `newEmail` instead of `newPassword` if you want to update the email
 
-<img src="/img/dashboard/api-key.png" alt="Enter API screen of dashboard" />
+## Viewing users
 
-You should enter the same API as the one you provided in the `dashboard.init` function call. On successful authentication, you will see the following UI
+If you have just created your app, you may not have any users to show on the dashboard.
 
 <img src="/img/dashboard/no-users.png" alt="Empty dashboard" />
 
-Now, navigate to the your frontend app and create a user (via the sign up flow). On creation, if you head back to the dashboard and refresh the page, you will see that user:
+Navigate to the your frontend app and create a user (via the sign up flow). On creation, if you head back to the dashboard and refresh the page, you will see that user:
 
 <img src="/img/dashboard/one-user.png" alt="One user in dashboard" />
 

v2/passwordless/custom-ui/init/dashboard.mdx

@@ -14,13 +14,11 @@ import BackendSDKTabs from "/src/components/tabs/BackendSDKTabs";
 import TabItem from '@theme/TabItem';
 import AppInfoForm from "/src/components/appInfoForm"
 
-## Setting up and viewing the user management dashboard
+## Initialise the dashboard recipe
 
 <AppInfoForm askForAPIDomain>
 
-With the user management dashboard, you can view the list of users on SuperTokens and be able to easily view, modify or delete their sessions, metadata, roles and account info.
-
-To get started, initialise the Dashboard recipe in the `recipeList` on the backend and provide a random and unique API key that is known only to you. This API key will later be used to access the dashboard from the UI.
+To get started, initialise the Dashboard recipe in the `recipeList`.
 
 <BackendSDKTabs>
 <TabItem value="nodejs">
@@ -36,10 +34,9 @@ SuperTokens.init({
     websiteDomain: "...",
   },
   recipeList: [
+    // TODO: Initialise other recipes
     // highlight-start
-    Dashboard.init({
-      apiKey: "<SOME API KEY>"
-    }),
+    Dashboard.init(),
     // highlight-end
   ],
 });
@@ -58,10 +55,9 @@ import (
 func main() {
 	supertokens.Init(supertokens.TypeInput{
 		RecipeList: []supertokens.Recipe{
+      // TODO: Initialise other recipes
 			// highlight-start
-			dashboard.Init(dashboardmodels.TypeInput{
-				ApiKey: "<SOME API KEY>",
-			}),
+			dashboard.Init(nil),
 			// highlight-end
 		},
 	})
@@ -80,8 +76,9 @@ init(
         api_domain="...", app_name="...", website_domain="..."),
     framework='...',  # type: ignore
     recipe_list=[
+        # TODO: Initialise other recipes
         # highlight-start
-        dashboard.init(api_key="<SOME API KEY>"),
+        dashboard.init(),
         # highlight-end
     ]
 )
@@ -90,15 +87,53 @@ init(
 </TabItem>
 </BackendSDKTabs>
 
-Now, if you navigate to `^{form_apiDomain}^{form_apiBasePath}/dashboard`, you will now be able to see the enter API screen.
+## Viewing the dashboard
+
+:::important
+The user management dashboard is served by the backend SDK, you have to use your API domain when trying to visit the dashboard.
+:::
+
+Navigate to `^{form_apiDomain}^{form_apiBasePath}/dashboard` to view the dashboard.
+
+<img src="/img/dashboard/login.png" alt="Dashboard login screen" />
+
+## Creating dashboard credentials
+
+:::tip Paid Feature
+You can create one dashboard user* for free. If you need to create additional users please email us at team@supertokens.com.
+
+*: A dashboard user is a user that can log into and view the user management dashboard. These users are independent to the users of your application
+:::
+
+When you first setup SuperTokens, there are no credentials created for the dashboard. If you click the "Add a new user" button in the dashboard login screen you can see the command you need to execute in order to create credentials.
+
+<img src="/img/dashboard/signup.png" alt="Dashboard login screen" />
+
+To create credentials you need to make a request to SuperTokens core. 
+
+- The example above uses the demo core `https://try.supertokens.com`, replace this with the connection uri you pass to the backend SDK when initialising SuperTokens.
+- Replace `<YOUR-API-KEY>` with your API key. If you are using a self hosted SuperTokens core there is no API key by default. In that case you can either skip or ignore the `api-key` header.
+- Replace `<YOUR_EMAIL>` and `<YOUR_PASSWORD>` with the appropriate values
+
+## Updating dashboard credentials
+
+You can update the email or password of existing credentials by using the "Forgot Password" button on the dashboard login page.
+
+<img src="/img/dashboard/forgot-password.png" alt="Dashboard login screen" />
+
+To update credentials you need to make a request to SuperTokens core. 
+
+- The example above uses the demo core `https://try.supertokens.com`, replace this with the connection uri you pass to the backend SDK when initialising SuperTokens.
+- Replace `<YOUR-API-KEY>` with your API key. If you are using a self hosted SuperTokens core there is no API key by default. In that case you can either skip or ignore the `api-key` header.
+- Replace `<YOUR_EMAIL>` and `<YOUR_NEW_PASSWORD>` with the appropriate values. You can use `newEmail` instead of `newPassword` if you want to update the email
 
-<img src="/img/dashboard/api-key.png" alt="Enter API screen of dashboard" />
+## Viewing users
 
-You should enter the same API as the one you provided in the `dashboard.init` function call. On successful authentication, you will see the following UI
+If you have just created your app, you may not have any users to show on the dashboard.
 
 <img src="/img/dashboard/no-users.png" alt="Empty dashboard" />
 
-Now, navigate to the your frontend app and create a user (via the sign up flow). On creation, if you head back to the dashboard and refresh the page, you will see that user:
+Navigate to the your frontend app and create a user (via the sign up flow). On creation, if you head back to the dashboard and refresh the page, you will see that user:
 
 <img src="/img/dashboard/one-user.png" alt="One user in dashboard" />