WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • Mobile
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›App solution

How-to-documents

  • How-to Wiki
  • WaveMaker Best Practices

App solution

  • Creating a Registration Page
  • Support for Password Encryption
  • Error Handling in WaveMaker App
  • Leaving Page with Unsaved Changes
  • Micro frontend using iframes
  • Enabling PWA

UI design

  • Passing Parameters to Pages
  • Passing Parameters to Partial Page
  • Accessing Script
  • Use Static Variable to pass data between pages
  • Customise Login Page
  • Incorporating Additional Icons
  • Change Icon Color on Condition
  • Change Icon for the Global Spinner
  • Changing Default Favicon
  • Changing App Logo
  • Changing Page Title
  • Customise App Style
  • How to use Conditional Class Property
  • How to use Conditional Style Property
  • Customize an Existing Theme
  • Adjust Left Navigation Width
  • Customizing Theme
  • Enable SPA
  • Choose Widget Template and Layout
  • Widget Template and Icons
  • Custom Template for Widgets
  • Apply Custom Data Formatter

Nav & Dropdown

  • Dynamic Menu based on User Role
  • Restricting Menu Items based on the User Role
  • Localization for Dropdown Menu

Localization

  • Localization in WaveMaker Apps
  • Setting Language and Date Format
  • Localization Using Select Locale
  • Localization of Error Messages

Security

  • SAML Integration - OneLogin
  • SAML Integration - ADFS
  • OpenID Integration - Azure AD
  • Custom Security using Google OAuth Prefab
  • Multiple Security Provider Implementation
  • Customizing Post Authentication Handlers
  • Configuring Content-Security-Policy
  • Configuring MTLS

Databases

  • Queries with Dynamic Where Clause
  • Connect To Azure SQL Server
  • Recommended JDBC Driver Versions for Databases
  • How to fetch more than the default number(100) of records from database?
  • How To: One-to-Many Relationship
  • Working with Temporals
  • Connect To AWS Redshift Database
  • Connect To SAP Hana Cloud Database
  • Transactional History of Entity
  • Row-Level Security using DB Event Listeners
  • Validations using CRUD Listeners
  • Custom Logic DB Event Listeners
  • Connect to MySQL database using SSL
  • How to Switch MariaDB to MySQL Connector

Web services

  • Using App Environment Properties
  • Consuming an Existing WaveMaker API
  • Using POST method to send data to a REST API
  • Request-Response Processing for REST Services
  • How to Intercept Request and Response of all API Calls in One Place
  • WebSocket Usage - Chatroom App
  • UI for API Server-side Pagination
  • Working with API with different pagination formats

Java services

  • Sending Email using WaveMaker Connector
  • Implementing Forgot Password feature using Java Service
  • Accessing REST APIs from Java Service
  • Scheduling a Java Service
  • Integrating JUnit Tests for WaveMaker Application
  • ORM Artifacts
  • Pre-Post Processing for Database Service APIs
  • Accessing Logged-in User Details using Java Service
  • Design a workflow in Camunda BPM and integrate into a WaveMaker app
  • Integrate Azure File Storage
  • Insert Data from Excel into Database
  • Integrate Amazon S3 into WaveMaker App
  • Integrate Twilio Connector
  • Integrate OTP (One-Time Passcode) Verification with WaveMaker App

Variables

  • Using Filter Conditions on Variable
  • Using Live Variable APIs
  • Using Notification Actions
  • Using Navigation Action
  • Using Variables for Queries and Procedure
  • Using Service Variable in a Form
  • Using Filter Criteria for a Data and Live Widgets
  • Using Filter Criteria for a Database CRUD Variable

JavaScript

  • Using JavaScript in Binding
  • Using JavaScript from External URL
  • Using JavaScript to loop a command
  • Using function for evaluating conditions

Developer options

  • Synchronizing WaveMaker Apps with IDEs
  • Synchronizing Java Services Controller
  • Integrating Amazon Cognito for User Authentication
  • Integrating Sample Jasper Report in WaveMaker Application
  • How to generate PDF File using Jasper Reports
  • Upgrading an App from WaveMaker 9.x to WaveMaker 10.0
  • App Migration from WaveMaker 9x to 10x
  • Setup Fusion Reactor for Debugging Issues

Deployment

  • SSL Termination in LoadBalancer

Mobile App Solutions

  • Notify users about new update

Mobile gesture

  • Setting Swipe Gestures on a List Widget
  • Working with Pull to Refresh

Mobile widgets

  • Using Search Widget within the Navbar

Mobile UI design

  • Setting Splashscreen Images and App Icons
  • Using Cordova Plugins
  • Designing Tablet Views in Mobile Project
  • Sliding left navigation for Mobile App
  • Mobile App using Bar code
  • Custom Date Picker in Mobile

Cards

  • Capturing Card Items

DataTable

  • Customising Data Table Row Action
  • How to Configure Row Expansion in a Data Table
  • Using Widgets to represent Data Table Columns
  • View Master-Detail Data Records using Data Table
  • Add Master-Detail records using Data Table
  • Export Data from Data Table
  • Export Data from Data Table - 2
  • Setting Blob Filename
  • Dynamic Data Tables
  • Customize Dynamic Datatable
  • Data Table Column bound to Query
  • Combining Columns in Data Table
  • Custom Styling Data Table Columns & Rows
  • Formatting Data Table Columns
  • Concurrency and Record Locking in WaveMaker
  • Edit DataTable records bound to Query API

List

  • Creating an Employee List grouped by City
  • Creating an Employee List grouped by Birth Month and City
  • OnRender Event
  • Including a Data Table within a List
  • Building an Editable List
  • Building Cascading Lists
  • Accessing List Items
  • Localization of Data Table Column Headings

Forms

  • Using Live Form
  • How Tos: Form
  • Building Tabbed Live Form
  • How Tos: Live Form
  • Linking Live Form with another Widget for Input
  • Handling Related Fields in a Live Form
  • How to Get Validation Messages from a Form
  • Adding Master-Detail records in the same transaction
  • Submit Parent and Child Records in a Single Transaction
  • Submit Parent and Child Records in a Single Transaction using Form and Data Table
  • Using Cascading Select & Autocomplete for Live Form Fields
  • Using Cascading Select within Live Form
  • Using cascading Filter to populate Live Form
  • Using Wizard for Master-Detail Live Form
  • Copy to Clipboard
  • Create a form with multiple wizard steps
  • Smart Forms: Conditional Flows for form Widget

Calendar

  • How Tos: Calendar
  • Calendar Usage - Create an Event
  • Calender Usage - Google Calendar Integration

CheckboxSet

  • CheckboxSet to Filter List data

FileUpload

  • FileUpload - Basic Usage
  • File Upload Widget Operations
  • Upload File & Save in Database
  • File Upload & Blob Data
  • File Upload - Custom Directory
  • Accessing File Upload from Java Code
  • Upload Files from Live Form & Form

Radioset

  • Radioset to Filter a List

Rating

  • Building Rating Widget using Static Data
  • Building Rating Widget using Static Variable
  • Build Rating Widget using Model Variable
  • Building an Interactive Rating Widget

Select

  • Configuring Select Widget from a Static List of Values
  • Configuring Select Widget from a Static Variable
  • Configuring Select Widget from a Variable
  • Configuring Select Widget using Display and Data Fields
  • Configuring Select Widget from Database Fields
  • Configuring Cascading Select
  • Selection Widgets - Use Case

Progress Circle

  • Using Progress Circle Widget

Charts

  • Working with Charts
  • Display User Selection in another Widget
  • Handling Dynamic Data
  • Custom Data

Richtext Editor

  • Adding Custom Fonts to Richtext Editor

Live filter

  • Applying Live Filter to a Data Table or a Chart
  • Building a Multiple Selection Live Filter
  • Building a Range Live Filter

Container

  • Setting partial page content for Accordion within a List
  • Setting partial page content for Panel within a List using JavaScript
  • How Tos: Wizard
  • Dynamic Tabs and Accordions

Tree

  • Tree using Static Variable
  • Tree using Java Service
  • Tree using Dynamic Tree

Prefabs

  • Creating Partials in a Prefab
  • Create Prefab using Third Party UI Widgets
  • Create a Simple Prefab
  • Create Prefab Using D3 & NVD3 Charts
  • Create Prefab Using D3 Library DataMaps
  • Create Prefab using JQuery Plugin
  • Create Prefab using Angular Module
  • Create Prefab using Angular, React Components
  • Azure OAuth Prefab Integration

Team Poral Configure Vcs

  • Configure Azure Repos In CodeRepository
Edit

Creating a Registration Page


Registration is a common process in web applications and many apps have the facility to self-register and then allow registered users to login. Logging to app requires security setup.

Learn how to create a registration page in WaveMaker Studio. In this section, see:

  1. How to design a registration page.
  2. How to link the registration page to the inbuilt security and login page.
  3. Add security encryption to password field using a Java Service.
  4. Add user database - this should contain the details of the users, their usernames, password, and more.

Designing a Registration Page

Create a partial page to allow a new user to enter details. Live Form allows user to enter their details, including inserting the records into a database table.

Drag and drop a Live Form widget, use the Database CRUD from the UserDB service and the UserDetails table and set the properties, as per your app requirements. We have used the following settings:

  • Two column layout with first name, last name and email id in the first column; username, password, and role in the second column.
  • Set First Name, Username, and Email ID as Required fields.
  • For Email ID, set input Type to email. This will auto validate the field entry to be in the email format with an @ symbol.

  • Add a text widget for confirm password field.
  • Set default value for Role field to 'User' and set it as hidden.

A Variable with source as the User table is created which will perform the insert into the database automatically.

In case of any process before insertion, you can do it from the Form on Before Service Call event. You can add any other validation checks here. For example, in this script we are ensuring the the password entries match. The appropriate message is loaded into the Notification Action and is invoked.

note

We have already created a Notification Action that needs to be created.

Partial.UserDetailsLiveForm1Beforeservicecall = function($event, $operation, $data, options) {
    if ($data.password != $data.confirm_password) {
        Partial.Actions.password_error.invoke({
            "message": "Password Mismatch, try again",
            "position": "center center"
        });
        return false;
    }
};

Enable Security

Enable Security and set the Security Provider to be the UserDB from step 1

Set the permissions level for registration page, and userdb to permit all. This is essential since we want the new users to be able to access to the registration page and add their details to the database.

Redesign login page

  • Open the Login page by selecting it from the Pages Resources
  • Add a pagedialog widget, with content as the registration partial page.

  • Go back to the login page (select the Page tab from the bottom).
  • Add New User button, onClick event should open the registration page dialog.

  • Now when you run the application, you see the New User button on the login page.

registration_run_login

  • Clicking on it will take you to the New Registration page.

  • Clicking on the Register button without entering the user name or with passwords not matching in the two fields, will display an error message.
  • Entering all required data and clicking Save button, displays a success message.

Now you can login with the new credentials.

Password Encryption

To ensure that the password field is secure, it is advisable to store it in an encrypted format. For this, we will use an md5 code to encrypt the password entry before passing it onto the live variable for insert into the database table.

note

This method is useful for enforcing two-way encryption, that is, in addition to the SSL communication, you can encrypt the password before sending it to the backend. In case you want to use the one-way digest method of scrambling the encrypted value to produce a digest we suggest you follow the steps given in this document.

  • Create a Java Service called MD5 Encryption.
  • Add the following to the Java Service code. Here we are using an MD5 hashing algorithm to generate a checksum for the password field, refer here for more details. Ensure that the length of the password column in the database is greater than the length of the result from the encryption algorithm used, in this case, it should be greater than 32.

Imported files

import org.apache.commons.codec.digest.DigestUtils;
import java.io.UnsupportedEncodingException;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.logging.Level;

Encrypt password

Use the following method to encrypt the password:

public String md5Spring(String text) {
        String digest = null;
    try {
        MessageDigest md = MessageDigest.getInstance("MD5");
        byte[] hash = md.digest(text.getBytes("UTF-8"));
        StringBuilder sb = new StringBuilder(2 * hash.length);
        for (byte b: hash) {
            sb.append(String.format("%02x", b & 0xff));
        }
        digest = sb.toString();
    } catch (UnsupportedEncodingException ex) {
        //Logger.getLogger(StringReplace.class.getName()).log(Level.SEVERE, null, ex);
    } catch (NoSuchAlgorithmException ex) {
        // Logger.getLogger(StringReplace.class.getName()).log(Level.SEVERE, null, ex);
    }
    return digest;

}
  • Create a variable to invoke the Java Service created above

  • Set the input data to the password widget of the registration page.

  • The Password field needs to be replaced with the encrypted one returned from the above Java service. For this, we will be using the Before Service Call event of the Live Form, we are invoking the Java service variable and setting the password field to the value returned from the Java Service.
Partial.UserDetailsLiveForm1Beforeservicecall = function($event, $operation, $data, options) {
    if ($data.password != $data.confirm_password) {
        Partial.Actions.password_error.invoke({
            "message": "Password Mismatch, try again",
            "position": "center center"
        });
        return false;
    } else {
        Partial.Variables.md5InsertJava.invoke();
        $data.password = Partial.Variables.md5InsertJava.dataSet.value;
    }

};
note

Ensure that in the Security dialog box, the Java Service created has PermitAll permission level.

loginpage Set up

  • Create a variable for the Java Service created,

  • Bind the input data to the password widget on the login page,

  • Next, set the LoginAction data to the value returned by the above service variable.

  • Set the onClick event of the Sign In to loginAction. This will ensure that when any user logs in, the password is encrypted before checking it against the database by the login variable.

Your application will work as before. The only change would be the values stored in the database, now the password field will be encrypted.

registration_javaservice_db

Last updated on 7/2/2020 by Haripriya Kolluru
← WaveMaker Best PracticesSupport for Password Encryption →
  • Designing a Registration Page
  • Enable Security
  • Redesign login page
  • Password Encryption
    • Imported files
    • Encrypt password
  • loginpage Set up
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.