After reading this article you’ll know:
Functionality and main features of the template
Basic steps on how to create and configure this template
How to manage users and their roles in the back office
Some tips on visual stylizing your application’s pages
Description
With the Login flow template, you can create a new user with an admin role to register and manage the application’s webusers through the back office. Login and logout functionalities are included, as well as the changing/resetting password feature. As with any other template of Betty Blocks, it’s expandable to one’s needs.
Main features
Register new account
Registering a new user account is required as you take the first steps. This first registered user will be automatically granted an administrator role. The details to fill in during the registration are:
First name
Last name
Email address
Password
Login/logout
Once a new user is registered, they will have to go through the login process. Email address and password are required. If someone needs to log in to the application using different credentials, they will have to log out first. Logging out is also required if a user does not want to stay in the system.
Updating profile details & password
The user’s profile details are displayed on a separate account page. One can go to this page any time to update profile information:
First name
Last name
Email address
Profile image
Another tab on the account settings page is created for updating passwords. The fields to fill in:
Current password
New password
Confirm password
Password reset
If a user forgets their password, they can request a password reset from the login page. This action requires the user’s email address to which they will receive a special email with the recovery link.
Back office
Serves as a management interface for users of your application. Here an administrator can add and edit webusers’ profiles, assign an admin role if needed, and set the email configuration.
Switch language
Switching languages is available for logged-in users only. Two languages by default are English and Dutch.
Pages overview
Email configuration. The part of back office functionality that is used to configure the server to send email notifications to inform the application’s webusers of changes.
Home. The homepage of your application.
My Account. The page to edit your personal information.
User Login - Create New Account. The page to create a new user’s profile.
User Login - Login. The start page of your application via which registered users can log in using their credentials.
User Login - Password Reset Request. Using this page you can request to reset your password; a special link will be sent to your email address
User Login - Reset Password. The page with reset password form; here users can create a new password.
Webuser management. This part of back office is used to search, add and manage webusers.
Creating application
As you open My Betty Blocks, you will see your dashboard with suggested application templates in the ‘Start building’ section.
Click |
In the pop-up window, fill in the name for your application. The identifier will duplicate the app name by default, but you can change it yourself. This name will be displayed in the application’s URL. |
After your application is created, you can proceed to the next step. |
Setting up the template
Your Login flow application is now ready to be used, but first, we need to do some preparations. Let’s go through the main functionality and find out how to work with it.
New user registration and login
The most important step you have to take in order to set up your application is to create the first user that will have the administrator’s rights. After doing this, you will be able to invite webusers and choose their roles in your application.
Note: You have to be extremely careful while creating your first application user account, make sure you have access to the email address you are using.
Open your application’s dashboard, and click on the |
In the new window fill in the fields with your user details. An email and password should be unique for the user to be registered. Click on You will get a message that your account has been created. Now you can log in using your credentials. |
Email configuration
Another important step here is setting up the email configuration. By doing this, you will enable the server to send email notifications to inform the application’s webusers of changes. For filling out this configuration, have your company’s email setting at hand. If you don’t have one, use a fake SMTP service to retrieve this info (e.g. Ethereal Email).
Open the back office from the top menu, then go to the ‘Email configuration’ tab. There you’ll see the basic configuration containing:
|
Copy-paste the hostname and port, and fill in the username and password. ‘Sender email’ and ‘Sender name’ are used to set the primary address that will be used to send emails, and ‘Application identifier’ is part of your application’s URL (everything between // and .betty.app): |
Make sure you haven’t made any typos and press |
Using template
After the email configuration has been set, you can start using the template’s capabilities to invite or delete webusers, view and edit their personal details, or assign an admin role to them.
Inviting new webusers & roles
Click on back office and the webusers overview page will open as default. To add a new webuser, press the
|
Lastly, toggle the |
Managing webusers
After new webusers are added to your application, you will see their list on the webusers overview page. Each listed account has a small set of icons on the right to manage
them.
Click the Info icon to see the chosen webuser’s personal account details
Pencil icon enables you to edit webuser’s account details
Delete webuser’s account with this last icon
Personal account management
Changing profile details and password
After you’ve logged in, the home page of your application will look like this. |
It’s possible to change your user’s details at any time by clicking on |
After you’ve finished editing your profile details, save the changes.
A new tab will open as you click on
Note: Toggle visibility by clicking on the eye symbol to see the passwords you’re putting down. |
Resetting password
In this section, we will describe actions you should undertake in case you forgot your password. The procedure of resetting passwords within the Login flow application is as simple as possible.
First, find the |
You’ll see an empty field where you must enter the email address you used to create your account in this application. Click |
Changing interface language
Users can switch between two languages: English and Dutch. In order to do that find the flag icon on the application’s navigation bar.
Template stylization
To make sure your Login flow application looks in line with your product’s visual design, you might want to apply some changes. See this article to learn about working with an application bar and adding a logo to your pages.
Other stylization settings are implemented through our theme builder. There you can choose a color scheme, typography, and other options to make your application look sleek and attractive.