Introduction

This sample app demonstrates how you can create Login form in an Ionic 4 project that will validate user credentials stored in the Appery.io database.

In this first part, we will set up the app and create the UI.

You can also check our instructional video that shows how to build an Ionic 4 Login Form:

Downloads and Resources

You can also try it yourself by creating from the backup:

1. Download the app backup file.
2. Click Create new app.
3. Click From backup and select the project backup file on your drive.
4. Type in the app name.
5. Click Create:

But if you are interested in the detailed tutorial, please follow the tutorial steps below.

Creating UI

1. Navigate to the Appery.io dashboard. Here, from the Apps tab, click Create new app.
2. Select the Ionic 4 application for its type and Blank as a template. Name it Ionic4Login and confirm by clicking Create:

3. Unfold the Pages folder. Clicking the cog icon, rename Screen1 to loginPage:

4. Click Create new > Page and name it welcome:

It's time that we can proceed to define both pages' appearance.

Defining loginPage UI

1. Open the DESIGN panel of loginPage.

2. Expand the OUTLINE panel (on the left), select Page, then, under the PROPERTIES panel, set the Header and Footer properties to False:

3. Then, drag & drop an Image component from PALETTE - it will be our Logo.

Defining App Logo

1. Collapse the page OUTLINE panel, then select the Image component and, under the PROPERTIES panel, define it as follows:
   • Class: login-logo;
   • Responsive: True:

2. Then, for the Image property, click the Change button: this will open the Media Manager. Click Upload file and upload your own logo (it should be prepared beforehand). Go back to the list, select the uploaded image, and click Apply:

4. Open the SCSS panel (on the left) and add the class for your logo by inserting the following code:

.login-logo {
	display: block;
	margin: 0 auto;
	width: 150px;
	height: 150px;
	margin-top: 45px;
}

Here is how it should look like:

3. Next, drag & drop a Card component under the logo, that is to be defined as the Login form.
   Place a Text component inside Card Item Title, set its Container property to h1 and enter Log In to Your Account! for the Text property. Inside the Card Item, clear the Text field:

Defining Form

1. Now, locate a Form component in the PALETTE, and place it into the Card1 under the heading:

2. Drag & drop two Input components and a Button component inside the previously added Form component (you can check it under the OUTLINE panel):

3. Select the first Input component, expand its Icon property under the PROPERTIES panel and, from the dropdown, select success for Color and set its Slot to Start; then click the No icon button and select the mail icon for Style.
4. Now, expand the Label property and clear its Text field.
5. Then, insert Enter your email for the Placeholder property, select Required to true, Type to Email and add an [(ngModel)] = email:

6. Now, select the second Input component, expand its Icon property, from the dropdown, select success for Color and set its Slot to Start; then click the No icon button and select the lock icon for Style.
7. Now, expand the Label property and clear its Text field.
8. Then, insert Enter your password for the Placeholder property, select Required to true, Type to Password and add an [(ngModel)] = password:

9. Select the Button component, from the dropdown, select success for Color, then set its Shape property to Round, and Text to Log In:

10. Then, navigate to the CODE panel of the loginPage and create two variables there: email and password, both of String type:

Defining Welcome Page UI

1. Go to the welcome page, expand the OUTLINE panel and select Page. Under the PROPERTIES panel, set its Footer to False, and confirm.

2. Then, in the header, select the ToolbarTitle1 component and insert Welcome! for its Text property:

3. Drag & drop a Button inside the [Toolbar Buttons] https://docs.appery.io/docs/ionic-4-ui-components#toolbar-buttons area (on the left) and set its Color to success, Component to Ionic Menu Button:

4. Now, to create a logout button, drag & drop another Button to the Toolbar. This should be defined as follows:
   • Color: success;
   • Component: Ionic Button;
   • Slot: Primary.
5. Now, expand the Icon property and select the log-out icon for its Style property, set Slot to Icon Only and clear the Text field:

6. Then we need to connect these two pages. Navigate to the DESIGN panel of the loginPage and expand the EVENTS tab below. For the Button1 component, select Click as an event, and Form submit as an Action:

7. Then, select the Form1 component for the Component name. Save the changes:

8. After that, add one more event in the EVENTS tab to redirect user to the welcome page after a successful login. Select Form1 for Component, Form submit for Event and Navigate to page as Action with welcome as its route, and save:

Don't forget to save all the app changes.

Finishing Touches

You might also like to beautify your app UI. To do it, add the below code to the SCSS panel of loginPage:

ion-content {
  --background: no-repeat center/cover url("http://youthconnekt.in/logo/bkimg12.jpg");
}

The tab should look like this:

Similarly, add the same code to the SCSS panel of the welcome page:

ion-content {
   --background: no-repeat center/cover url("http://youthconnekt.in/logo/bkimg12.jpg");
}

App Testing

Now, you can test how your app works on this step. Enter any email and password in the form fields and click the Log In button. You will be navigated to the welcome page. You can notice that the button is not clickable until you enter some data into both inputs: