From 643b4b08fc9c942bb5a04cd7f26851b498896ecf Mon Sep 17 00:00:00 2001 From: Alex Patterson <139158618+alex-fusionauth@users.noreply.github.com> Date: Fri, 8 Mar 2024 10:17:03 -0500 Subject: [PATCH] update ui components in quickstarts (#2924) * add inline * add ui elements --------- Co-authored-by: Alex Patterson --- astro/src/content/quickstarts/5-minute-fastpath.mdx | 5 +++-- .../quickstarts/_5-minute-application-setup.mdx | 13 +++++++------ .../content/quickstarts/_5-minute-register-user.mdx | 10 ++++++---- .../content/quickstarts/_5-minute-setup-wizard.mdx | 4 +++- 4 files changed, 19 insertions(+), 13 deletions(-) diff --git a/astro/src/content/quickstarts/5-minute-fastpath.mdx b/astro/src/content/quickstarts/5-minute-fastpath.mdx index f6275ba2c1..6b98c5392f 100644 --- a/astro/src/content/quickstarts/5-minute-fastpath.mdx +++ b/astro/src/content/quickstarts/5-minute-fastpath.mdx @@ -19,6 +19,7 @@ import FiveMinuteTestApplication from 'src/content/quickstarts/_5-minute-test-ap import FiveMinuteLogout from 'src/content/quickstarts/_5-minute-logout.mdx'; import FiveMinuteSummingUp from 'src/content/quickstarts/_5-minute-summing-up.mdx'; import { YouTube } from '@astro-community/astro-embed-youtube'; +import InlineUIElement from 'src/components/InlineUIElement.astro'; You've chosen to install FusionAuth via Fast Path, using a local database (PostgreSQL or MySQL). @@ -110,13 +111,13 @@ Here you need to provide the super user credentials for the database along with The reason that FusionAuth uses a separate username and password to connect to the database during normal operation is that if the configuration is compromised and an attacker learns the database username and password, they will only have access to the FusionAuth database. This is helpful if you are using a single database server for multiple applications and databases. This is known as the principle of least privilege and FusionAuth generally follows this principle. -Once you click the **Submit** button, you will be taken to the next step of Maintenance Mode. If you have opted to install with Elasticsearch, this step is where the FusionAuth Search component is configured, otherwise you can skip ahead to step 4, the Setup Wizard. +Once you click the Submit button, you will be taken to the next step of Maintenance Mode. If you have opted to install with Elasticsearch, this step is where the FusionAuth Search component is configured, otherwise you can skip ahead to step 4, the Setup Wizard. Our Fast Path install and startup script automatically start the `fusionauth-search` component, which is a standard version of Elasticsearch. Since FusionAuth is able to connect to this search engine, all that is needed is to create the indexes inside it. This page looks like this. Maintenance Mode Search -Clicking the **Submit** button here will cause FusionAuth to exit Maintenance Mode and begin starting up. You see an interstitial page. +Clicking the Submit button here will cause FusionAuth to exit Maintenance Mode and begin starting up. You see an interstitial page. Interstitial diff --git a/astro/src/content/quickstarts/_5-minute-application-setup.mdx b/astro/src/content/quickstarts/_5-minute-application-setup.mdx index 6fbe416e6d..9b942630d9 100644 --- a/astro/src/content/quickstarts/_5-minute-application-setup.mdx +++ b/astro/src/content/quickstarts/_5-minute-application-setup.mdx @@ -1,30 +1,31 @@ import InlineField from 'src/components/InlineField.astro'; +import InlineUIElement from 'src/components/InlineUIElement.astro'; -Once you arrive in the FusionAuth admin UI, the first thing you need to do is create an Application. An Application is something that a user can log into. This is the application you are building or that you are migrating to use FusionAuth. Click the Application menu option on the left side of the page or the **Setup** button in the box at the top of the page. +Once you arrive in the FusionAuth admin UI, the first thing you need to do is create an Application. An Application is something that a user can log into. This is the application you are building or that you are migrating to use FusionAuth. Click the Application menu option on the left side of the page or the Setup button in the box at the top of the page. Dashboard to Applications -This will take you to the listing page for Applications. Next, you'll click the green plus button (the add button) at the top of the page: +This will take you to the listing page for Applications. Next, you'll click the green plus button (the add button) at the top of the page: Application Listing On the Application form, provide a name for your Application (this is only used for display purposes) and a couple of items on the OAuth tab. Start with a simple setup that allows existing users to log into your application. There is no need to add any roles or registration configuration. -When you click on the OAuth tab, you'll see this form. +When you click on the OAuth tab, you'll see this form. Application Form Most of the defaults will work, but provide the following items. -* An authorized redirect URL. This is the route/controller in your application's backend that will complete the OAuth grant and obtain a token. For this example, add `http://localhost:3000/oauth-redirect`. You will see example code below for this route. Note that when you type or paste values into this text field you also must click the popup that appears. Otherwise the value will not be saved. +* An authorized redirect URL. This is the route/controller in your application's backend that will complete the OAuth grant and obtain a token. For this example, add `http://localhost:3000/oauth-redirect`. You will see example code below for this route. Note that when you type or paste values into this text field you also must click the popup that appears. Otherwise the value will not be saved. * Specify a valid Logout URL. This is where the user will be redirected to after they are logged out of FusionAuth's OAuth front-end: your application. For this example, set this value to `http://localhost:3000/logout`. You'll see how this is used below. * Make sure the Authorization Code grant is selected in the Enabled Grants. * Set the Require registration field to `true`. -Once you have configured the application, you'll click the blue "Save" button at the top of the page. +Once you have configured the application, you'll click the blue Save button at the top of the page. Save Button Application Form -Then, click on the green magnifying glass on the list view next to your application. Scroll down to the OAuth Configuration section and copy the Client Id and Client Secret values off to a text file. You'll use them later. +Then, click on the green magnifying glass on the list view next to your application. Scroll down to the OAuth Configuration section and copy the Client Id and Client Secret values off to a text file. You'll use them later. Application Details diff --git a/astro/src/content/quickstarts/_5-minute-register-user.mdx b/astro/src/content/quickstarts/_5-minute-register-user.mdx index d7853d1f35..4bb4df067c 100644 --- a/astro/src/content/quickstarts/_5-minute-register-user.mdx +++ b/astro/src/content/quickstarts/_5-minute-register-user.mdx @@ -1,12 +1,14 @@ import Aside from 'src/components/Aside.astro'; +import InlineUIElement from 'src/components/InlineUIElement.astro'; +import Breadcrumb from 'src/components/Breadcrumb.astro'; -Next, grant the user you created in the Setup Wizard permissions to log into your new Application. This can be done from the User management section of the FusionAuth admin UI. Click the Users link in the navigation. If needed, search for the user. +Next, grant the user you created in the Setup Wizard permissions to log into your new Application. This can be done from the User management section of the FusionAuth admin UI. Click the Users link in the navigation. If needed, search for the user. -Manage the user's details by clicking on the black "Manage" button. +Manage the user's details by clicking on the black Manage button. User Search -Once you are in this user's account, you'll click the "Add Registration" button. This will take us to a page that will allow us to add a registration for this user to the new Application. Registrations associate users with applications. You may have to select an Application if there are multiple options. +Once you are in this user's account, you'll click the Add Registration button. This will take us to a page that will allow us to add a registration for this user to the new Application. Registrations associate users with applications. You may have to select an Application if there are multiple options. Registration Add Form @@ -22,4 +24,4 @@ FusionAuth supports self-service registration. With self-service registration en You want to make sure your user account has a first name, which should appear under the picture. -If they don't, use the Edit Profile button in the upper right hand corner of the user details screen to edit the account and give them one. The first name is how they'll be greeted in the application. +If they don't, use the Edit Profile button in the upper right hand corner of the user details screen to edit the account and give them one. The first name is how they'll be greeted in the application. diff --git a/astro/src/content/quickstarts/_5-minute-setup-wizard.mdx b/astro/src/content/quickstarts/_5-minute-setup-wizard.mdx index 08717981c2..0a05ee354e 100644 --- a/astro/src/content/quickstarts/_5-minute-setup-wizard.mdx +++ b/astro/src/content/quickstarts/_5-minute-setup-wizard.mdx @@ -1,3 +1,5 @@ +import InlineUIElement from 'src/components/InlineUIElement.astro'; + Once FusionAuth starts up successfully, you will be taken to the Setup Wizard. This is where you will create the administrator account for FusionAuth and accept the license. **Record the email and password** you choose for the administrator account. You won't be able to recover this without setting up an email server, which is beyond the scope of this tutorial. @@ -8,5 +10,5 @@ Here's what the Setup Wizard page looks like. Setup Wizard -Clicking **Submit** here will complete the Setup Wizard and log you into the FusionAuth administrative user interface. +Clicking Submit here will complete the Setup Wizard and log you into the FusionAuth administrative user interface.