Introduction

In this sample app tutorial, we will demonstrate how you can extend the Ionic 4 Form DB Login Sample App described in this document by adding the signup page with updating database records.

📘

Important pre-condition

Please complete the Ionic 4 Form DB Login Sample App tutorial first, then continue with this one.

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. Name the app to Ionic 4 Form DB Signup App.
5. Click Create:

🚧

Defining DB credentials

Note, that if you decide to create from backup but would like to use your database, you will need to modify the default myDB service in your app.
To do it, in the Project view, unfold the Services > myDB > myDB_settings folder and replace the default database_id value with your database ID (can be found in the browser search field or in YOUR DB > Settings > API keys.

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

Modifying App

1. Rename the Ionic 4 Form DB Login App project described in the Ionic 4 Form DB Login Sample App tutorial to Ionic 4 Form DB Signup App:

2. Click Create New > Page add a new page, SignUpPage.
3. Then, under the Project tree, open Project > Routing, make sure that all three pages have routes and remove the word page from SignUpPage path so that you end up with the path named signup:

Modifying LoginPage

1. Open LogInPage, place a Text component below LogInForm with the Text property set to Don't have an account?.
2. Drag & drop a Link component next to Text and edit its properties as the following:

• Text = Sign Up
• Route Name = SignUpPage
• Href = clear the text field.

3. As it's a good practice to assign components with human readable names, set both components' Component Name properties to QuestionText and GoToSignUpLink, respectively:

Defining SignUpPage

SignUpPage UI

1. Now, switch to SignUpPage, select the ToolbarTitle element and change its Text property to Sign Up for MyApp.
2. Drag & drop a Form component from PALETTE to screen content and set up its properties:

• Component Name = SignUpForm
• FormID = signupform
• Update On = Change:

3. Drag & drop an Input component from PALETTE inside the SignUpForm component. It will be the first name input so let's update it with the following properties:

• Component Name = firstNameInput
• Placeholder = First name
• Name = firstName (note that this property is the parameter name submitted with the form data)
• Icon > Color = success
• Icon > Slot = Start
• Icon > Style = person
• Label > Text = clear the text field
• Control ID = firstnameInp
• Control Options > Update On = Change:

4. Drag & drop another Input from PALETTE to the SignUpForm component. It will be the last name input so let's update it with the following properties:

• Component Name = lastNameInput
• Placeholder = Last name
• Name = lastName
• Icon > Color = success
• Icon > Slot = Start
• Icon > Style = person
• Label > Text = clear the text field
• Control ID = lastnameInp
• Control Options > Update On = Change:

Now, to define the form control for the gender field, we will create a complex ionic component.
Please note that we will proceed with all the next steps to avoid writing SCSS.

5. Drag & drop a List component to SignUpForm, and set the following properties:

• Lines = Full
• List = False.

6. Then delete ListItem2 from List and set up the properties for ListItem1:

• Label = False
• Lines = Full:

7. Then drag & drop an Icon component to ListItem1, and set up its properties as the following:

• Color = success
• Name = people
• Size = Not Selected
• Slot = Start.

8. Next, put a Text component into ListItem1 and define it:

• Color = medium
• Text = Select your gender:.

9. In the next step, place a RadioGroup into ListItem1, select the third Radiobutton and delete it from the group, then edit its properties:

• Component Name = GenderRadioGroup
• Name = gender (please note that the name property of control must match the column name in the database)
• Empty Selection = True (this field is not required , so we will let users leave it empty)
• Buttons direction = Horizontal
• Control ID = genderRG
• Control Options > Update On = Change:

10. Then select the first Radiobutton to define its properties:

• Component Name = GenderOption1
• Value = Male
• Name = gender1
• Color = success
• Slot = Start
• Item Wrapper > Lines = None
• Label > Text = Male:

11. The second Radiobutton is defined similarly:

• Component Name = GenderOption2
• Value = Female
• Name= gender2
• Color = success
• Slot = Start
• Item Wrapper > Lines = None
• Label > Text = Female.

15. Drag & drop another Input from PALETTE to the SignUpForm component. It will be defined as the username input so let's update it with the following properties:

• Component Name = UsernameInput
• Placeholder = Email
• Name = username
• Required = true
• Type = Email
• Features > Pattern = ^[a-zA-Z0-9.!#$%&’+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)$ (HTML pattern for input validation, in our app, we will allow entering only email as the username, but any validation can be added if necessary)
• Icon > Color = success
• Icon > Slot = Start
• Icon > Style = mail
• Label > Text = clear the text field
• Control ID = usernameInp
• Control Options > Update On = Change:

12. Dag & drop one more Input from PALETTE to SignUpForm. This one will be set as the password input with the following properties:

• Component Name = PasswordInput
• Placeholder = Password
• Name = password
• Required = true
• Type = Password
• Icon > Color = success
• Icon > Slot = Start
• Icon > Style = lock
• Label > Text = clear the text field
• Control ID = passInp
• Control Options > Update On = Change:

13. Now, drag & drop a Button from PALETTE to SignUpForm. It will be the submit button, and here we will not add any error components, so let's just disable the Submit button until the form becomes valid. So, let's update it with the following properties:

• Color = success
• Component Name = SignUpSubmitButton
• Disabled = {{signupform.invalid}}
• Link Features > Type = Submit
• Text = Sign Up:

14. To finish with the UI, drag & drop a Checkbox from PALETTE and place it above the SignUpSubmitButton. Provide it with the following properties:

• Component Name = OptInCheckbox
• Name = optIn
• Color = success
• Slot = Start
• Item Wrapper > Lines = Full
• Label > Text = I agree to receive emails
• Control ID = optinChbx
• Control Options > Update On = Change:

SignUpPage Logic

Now, with all page UI ready, let's add service invocation on form submit.

1. Open the page DATA panel and add myDb_signup_service for datasource, rename it to signUp.
2. Edit the Before send mapping of signUp service and map the Form Data (as object) property to the $ body service request. Click Save & Replace:

3. Edit the Success mapping of signUp service and map sesionToken response to token storage, then click Save & Replace to save the work:

4. Add Present toast action to Error event to show an error message about unsuccessful signing up:

• Message = Sorry, some error occurred
• Color = danger
• Position = top
• Duration = 500:

5. Then add Navigate to page action to Success event. After successful signup, we should be navigated to Profile page, so select it in action parameters:

6. As a good practice, let's also add Present loading action (with Loading... for its Message) to Before send event and Dismiss loading action to Success and Error service events.

Here is how the DATA panel of SignUpPage with all the events defined should look like:

7. To finish, go back to the DESIGN panel, open the EVENTS tab, select SignUpForm and add Invoke service action with signUp datasource to Form submit event:

Finishing Touches

You might also like to beautify your app a bit but you may skip this section if you are not into aesthetic perfection.
So, to make your pages more attractive, add the below sample code to the SCSS panel of ProfilePage:

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 SignUpPage.

App Testing

Now, you can test your app on the preview. Click the TEST button and wait until it loads.
Log in and log out, click the Sign Up link, try signing up with existing credentials, or without password, use all fields that are not required, sign up and log out, then log in again, etc.:

👍

Please, note the different error messages firing when testing different cases with entering wrong credentials.

After a new user has successfully signed up via the form, you can see that the corresponding record appears in myDB Users collection:

And this means that everything works as expected!