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:

Download the app backup file.
Click Create new app.
Click From backup and select the project backup file on your drive.
Name the app to Ionic 4 Form DB Signup App.
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

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:

Click Create New > Page add a new page, SignUpPage.
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

Open LogInPage, place a Text component below LogInForm with the Text property set to Don't have an account?.
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.

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

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

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

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:

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.

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

Lines = Full
List = False.

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

Label = False
Lines = Full:

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.

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

Color = medium
Text = Select your gender:.

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:

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:

The second Radiobutton is defined similarly:

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

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:

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:

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:

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.

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

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

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:

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:

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:

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!