# Introduction This sample app demonstrates how you can create **Login form** in an Ionic project that will validate user credentials stored in the [Appery.io database](https://docs.appery.io/docs/database-overview). This is the first part and we will demonstrate how to set up the app and create its UI. > 📘 Want to know more? > > You can also check [this](https://docs.appery.io/docs/apperyio-screen-layouts) document that explains how to quickly create a ready-to-go login page by using our predefined **Login Screen Layout** with further modifying it according to your needs. ## Downloads and Resources You can also try it yourself by creating from the [backup](https://appery.io/wp-content/uploads/tutorial-ionic5-login-app1.zip): 1. Download the app backup file. 2. Click **From backup** and select the project backup file on your drive. 3. Type in the app name. 4. 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](https://appery.io/app/projects). Here, from the **[Apps](https://appery.io/app/projects)** tab, click **Create new app**. 2. Select **Blank** as a template. Name it ***Ionic Login App*** and confirm by clicking ***Create***. 3. Unfold the **Pages** folder. Clicking the **cog** icon, rename **[Screen1](https://docs.appery.io/docs/screens-and-tabs#pages-screens)** to **loginPage**:

Renaming **Screen1** to **loginPage** 4. Click **CREATE NEW > Page** and name it **Welcome**:

Creating a new page - **welcome** It's time that we can proceed to define both pages' appearance. ## Defining ***loginPage*** UI 1. Open the **loginPage** **[DESIGN](https://docs.appery.io/docs/apperyio-visual-builder#design-panel)** panel. 2. Expand the **[OUTLINE](https://docs.appery.io/docs/1-creating-an-app-ui-palette#outline-view)** view (on the left), select the **[Page](https://docs.appery.io/docs/screens-and-tabs#properties-1)** component, then, under the **[PROPERTIES](https://docs.appery.io/docs/1-creating-an-app-ui-palette#properties-overview)** panel, set the **Header** and **Footer** properties to ***False***:

Disabling **Header** and **Footer** 3. Then, drag the **[Image](doc:ionic-5-ui-components-properties#image)** component from **[PALETTE](https://docs.appery.io/docs/1-creating-an-app-ui-palette#ui-components-palette-overview)** and drop it to the screen - it will be our ***Logo***. ### Defining App Logo 1. Collapse the page **[OUTLINE](https://docs.appery.io/docs/1-creating-an-app-ui-palette#outline-view)** view, then select the **[Image](doc:ionic-5-ui-components-properties#image)** component and, under the **[PROPERTIES](https://docs.appery.io/docs/1-creating-an-app-ui-palette#properties-overview)** panel, define it as follows: * **Class**: ***login-logo***; * **Responsive**: ***True***:

**Image** component 2. Then, for the **Image** property, click the **Change** button: this will open the **[Media Manager](https://docs.appery.io/docs/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**:

Working with **Media Manager** 3. Next, drag the **[Card](doc:ionic-5-ui-components-properties#card)** component and drop it under the logo, that is to be defined as the **Login form**. 4. Finally, place the **[Text](doc:ionic-5-ui-components-properties#text)** component inside **[Card Item Title](doc:ionic-5-ui-components-properties#card-ltem-title)**, set its **Container** property to ***h1*** and replace the default text of the **Text** property with ***Log In to Your Account!***:

5. For the **[Card Item](doc:ionic-5-ui-components-properties#card-ltem)**, clear the **Text** field. 6. Open the **[SCSS](https://docs.appery.io/docs/apperyio-visual-builder#scss-panel) panel** panel (on the left) and add the class for your logo by inserting the following code: ```css .login-logo { display: block; margin: 0 auto; width: 150px; height: 150px; margin-top: 45px; } ``` Here is how it should look like:

### Defining *Form* 1. Now, go back to the **loginPage** **[DESIGN](https://docs.appery.io/docs/apperyio-visual-builder#design-panel)** panel; locate the **[Form](doc:ionic-5-ui-components-propertiest#form)** component in the **[PALETTE](https://docs.appery.io/docs/1-creating-an-app-ui-palette#ui-components-palette-overview)** and place it into the **Card1** under the heading:

2. Drop two **[Input](doc:ionic-5-ui-components-properties#input)** components and one **[Button](doc:ionic-5-ui-components-properties#button)** inside the previously added **[Form](doc:ionic-5-ui-components-propertiest#form)** component (you can check it under the **[OUTLINE](https://docs.appery.io/docs/1-creating-an-app-ui-palette#outline-view)** view):

Defining **Card** component 3. Select the first **InputWrapper** and set its **Show Icon** property to***True***:

4. Now, select the icon and set its properties under the **[PROPERTIES](https://docs.appery.io/docs/1-creating-an-app-ui-palette#properties-overview)** panel like the following: ***success*** = **Color**, **Slot** = ***Start***; then click the **No icon** button and select the ***mail*** icon for **Style**:

4. Now, select the the child **Input** component, and insert ***Enter your email*** for its **Placeholder** property and set the **Type** property to ***Email***. 5. Also, select the **Item Label** component and to clear its **Text** property field:

6. Then, for the **Input** component, unfold the **Form Control** section and set **Validation > Required** to ***true***, also, define the **[(ngModel)]** as ***email***:

Defining **Input1** 6. Now, select the second **InputWrapper** and set its **Show Icon** property to***True***. Then select the icon and set its properties under the **[PROPERTIES](https://docs.appery.io/docs/1-creating-an-app-ui-palette#properties-overview)** panel like the following: ***success*** = **Color**, **Slot** = ***Start***; then click the **No icon** button and select the ***lock-closed*** icon for **Style**. 7. Now, select the child **Input** component, and insert ***Enter your password*** for its **Placeholder** property, set the **Type** property to ***Password***, and add an **[(ngModel)]** = ***password***. 8. Also, select the **Item Label** component and to clear its **Text** property field:

Defining **Input2** 9. Select the **[Button](doc:ionic-5-ui-components-properties#button)** component and go to its **Styles** properties tab. There, select ***success*** for **Button Color** and then set its **Shape** property to ***Round***. 10. Then, under the **Common** tab, set the **Text** property to ***Log In***:

11. Now, navigate to the page **[CODE](https://docs.appery.io/docs/apperyio-visual-builder#code-panel)** panel and create two variables there: `email` and `password`, both of **String** type:

## Defining ***Welcome*** Page UI 1. Switch to the **Welcome** page, expand the **[OUTLINE](https://docs.appery.io/docs/1-creating-an-app-ui-palette#outline-view)** view and select the **[Page](https://docs.appery.io/docs/screens-and-tabs#properties-1)** component. Under its **[PROPERTIES](https://docs.appery.io/docs/1-creating-an-app-ui-palette#properties-overview)** panel, set **Footer** to ***False*** and confirm:

2. Then, in the header, select the **[Toolbar title](doc:ionic-5-ui-components-properties#toolbar-title)** component and insert ***Welcome!*** for its **Text** property. 3. Drrop another **[Button](doc:ionic-5-ui-components-properties#button)** inside the **[Toolbar buttons](doc:ionic-5-ui-components-properties#toolbar-buttons)** area (on the left) and set its **Component** property to ***Ionic Menu Button*** and **Button Color** to ***success*** (to access this property, open the **Styles** tab):

Defining **Header Toolbar Button** 4. Now, to create a logout button, drag another **[Button](doc:ionic-5-ui-components-properties#button)** to the **[Toolbar](doc:ionic-5-ui-components-properties#toolbar)**. This should be defined as follows: * **Button Color**: ***success*** (to access this property, open the **Styles** tab); * **Comp. Type**: ***Ionic Button***; * **Slot**: ***Primary***; * clear the **Text** field. 5. Now, expand the **Icon** property and select the ***log-out*** icon for its **Style** property and set **Slot** to ***Icon Only***:

Defining **Sign Out** button 6. Then we need to connect these two pages. Navigate to the **[DESIGN](https://docs.appery.io/docs/apperyio-visual-builder#design-panel)** panel of the ***loginPage*** and expand the **[EVENTS](https://docs.appery.io/docs/apperyio-visual-builder#events-tab)** tab below. For the **Button1** component, select **[Click](https://docs.appery.io/docs/5-event-handling#common-events)** 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 button event in the **[EVENTS](https://docs.appery.io/docs/apperyio-visual-builder#events-tab)** tab to redirect user to the ***Welcome*** page after a successful login. For this, select the ***[Navigate to page](https://docs.appery.io/docs/5-event-handling#navigate-to-page)*** as **ACTION** with `Welcome` for 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](https://docs.appery.io/docs/apperyio-visual-builder#scss-panel) panel** panel of **loginPage**: ```scss ion-content { --background: no-repeat center/cover url("http://youthconnekt.in/logo/bkimg12.jpg"); } ``` The tab should look like this:

Modifying SCSS of **loginPage** Similarly, add the same code to the **[SCSS](https://docs.appery.io/docs/apperyio-visual-builder#scss-panel) panel** panel of the **Welcome** page: ```scss ion-content { --background: no-repeat center/cover url("http://youthconnekt.in/logo/bkimg12.jpg"); } ``` # App Testing You can now click the **TEST** button in the **App Builder[Toolbar](https://docs.appery.io/docs/apperyio-visual-builder#toolbar)** to 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:

App testing