Do you need an application template with the same or similar functionality? Follow this link to leave a request!
After reading this article you’ll know the following:
-
Functionality and main features of the Login flow template
-
Basic steps on how to create and configure this template in your application
-
Some tips on visual stylizing your application’s pages
Description
The Login flow enables users of your application to register their account, log in using their credentials and log out. You will also find the changing password feature within this template. In case users forgot their password, it can be easily reset.
Main features
Register new account
Registering a new user account is required as you take the first steps. The details everyone has 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 one needs to log in to the application using different credentials, they will have to log out first. Logging out is also needed if a user does not want to stay in the system.
Update profile details
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
Update password
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 recover link.
Switch language
Switching languages is available for logged-in users only. Two languages by default are English and Dutch.
Pages overview
-
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.
Creating the application
Note: It's worth mentioning that in order to enable your users to log in to this application template, you have to create and use a new model (for example, called 'Webuser').
Open My Betty Blocks and see your dashboard with suggested application templates in the ‘Start building’ section. Choose ‘View all templates’, then find the Login flow template and click ‘Use template’.
Note: If you want to see the template’s live preview, click on its thumbnail, and in an open window find the ‘Live preview’ button.
The next steps will include coming up with a name for your application and setting a value for the application ID configuration. Find out why you need this setting and how to configure it properly in the Introduction to application templates article.
Using Login flow template
Your Login flow application is now ready to be used. Let’s go through the main functionality and find out how to work with it.
New user registration
Open your application’s dashboard, and click on the ‘Play’ icon to compile it.
You will be redirected to the login page where you have to choose the option ‘Register new account’.
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 'Create account'.
You will get a message that your account has been created. Now you can log in using your credentials.
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 ‘My account’ on the navigation bar.
There are two tabs here. 'Profile details' tab (1) is opened by default. Here you can change your first and last name and email address. It’s also possible to set or change the profile image that will be displayed in your application.
After you’ve finished editing your profile details, save changes.
A new tab will open as you click on ‘Update password’ (2). Here you can change your password. Type in your current password and the new one twice. Don’t forget to click ‘Update password’ when you finish.
Note: Toggle visibility by clicking on the eye symbol to be able 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 ‘I forgot my password’ option on the login page and click on it.
You’ll see an empty field where you must enter the email address you used to create your account in this application (1). Click ‘Send me a recovery link’ and it will be automatically sent to your email address. All you have to do is open the corresponding email from Betty Blocks and follow the link. The ‘Reset password’ page will open (2). Type in the new password, confirm it, and click ‘Set new password’.
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.
Returning to home page
The ‘Home’ button beside the flag icon will redirect the logged-in users to their home page.
Logging out
If you need to change a profile or just don’t want to stay in the system, you can use the ‘Log out’ button. After clicking on it, you will come back to the login page.
Template stylization
Replacing logo
To make sure your Login flow application looks in line with your product’s visual design, you might want to apply some changes. First of all, you can add your logo to the header.
Go to the Pages section of your application and choose the Home page.
Then click on an empty field of the navigation bar (1). You will notice that it’s a partial that is being reused on 'My Account' page as well. Click on ‘Edit partial’ in the menu on the right (2).
Choose the logo media component (1) and replace the existing link with a link to your company’s logo.
More information on adding a logo to a page and working with a navigation bar can be found here.
Customization via theme builder
It is also possible to change your page style via the theme builder. You can find it in the tools section.
Here you can pick up the most suitable color scheme for your application.
Also, it’s possible to configure your typography. Choose the fonts for the page titles and body text.
After you’ve finished customizing, don’t forget to click ‘Save and apply’.
Customizing your application could be really fun, whether you already have some references or want to do everything from scratch. Play around with styles and find the one you enjoy. More information about the theme builder is available here.
Contact Information
In case you have any feedback or suggestions regarding this template, let us know by emailing: templates@bettyblocks.com.