In Part I we created a register page, allowing new users to create accounts on our web app. We will now cover the following topics:
- Creating a login page
- Routing users to the login page after registering
- Creating a page that only logged in users can access
The login page design
Let’s start things off by creating a new page with the navigation bar from Part I of this series by entering the template hierarchy. More information about this procedure can be found in the template hierarchy article and the previous tutorial.
Rename the template in the Template properties tab. It may look something like this:
Add the following components to this template:
- A plane to house all components
- A title with the text Login, two smaller titles with the text Your email and Your password.
- An email field
- A password field
- A button (to log in)
- A link (forgot password)
The end result might look something like the image below.
Implementing the login functionality
At the moment NoCode-X does not support custom login functionality. Users will be prompted with the default NoCode-X login screen when trying to access a page that requires authentication. Custom login pages will be implemented soon.
Routing registered users to the login page
We can now send newly registered users to the login page. Go back to the register template from Part I of this series, and go to the Actions tab in the Component menu for the Submit button. Press the plus icon, indicated by a red arrow in the image below, to create a new action for this component.
Edit the new action’s attributes, then add the Route to page function call to the grid and connect it to the start block.
Then select the register page in the Arguments tab in the Invocation configuration for the Route to page component.
Your changes are saved automatically. Go back to the register template, start a preview and click the Submit button to test if it works!
Creating a page only logged in users can access
By default, a page can be accessed by anyone. We will now create a page for which this is no longer the case: a members-only page. In later tutorials, we can add personal information and medical data on this page. Right now we will create a very simplistic placeholder template, to demonstrate the authorization feature.
Click the Authorization tab in the menu on the left. Check the box. Your screen will now look something like the image below:
Click the Add authorization rule button. You can now start adding rights and groups to this rule. This is discussed in detail in the Authorization and User management articles. In the image below, we assign the group Registered user to this rule, so only registered users can access the page. This only works if every registered user is placed in this group first.
In the next article, we will discuss how to make the navigation bar functional.
