Login - Basic

Login - Basic

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Sep 13, 2017 By: Kony Team
532 1 0 135
Standard username/password login- comes preconfigured with Kony user-repository; can be easily reconfigured to connect to your custom identity service. Drag and drop the component in your app, configure few properties and backend services- that’s all! you are ready to go.

Requirements

  • Visualizer Enterprise
 

Devices

 

Platforms

Features:

  • Easy to configure Visualizer properties to enable local password encryption, provide username/password placeholders and your own logo, set validation rules like minimum password/ userID length, provide validation messages, enable Remember Me and much more
  • Fully customizable skins allow you to change look and feel of the component

Basic login component comes pre-configured with Kony user-store identity service. Basic Login component is a login form that every mobile app needs, to authenticate its users. The component contains a login form with fields such as user name, password, and submit button to authenticate the app's users. The fields in the component are configured with necessary constraints and actions.

You can import the Login component into your app (created in Kony Visualizer), and achieve the login screen without developing it from scratch. The Login component also facilitates a set of properties, events, and APIs that helps you customize the fields and the functionality.

The following sections help you use the Login component in your app:

Prerequisites

Before you start using the Login component, ensure you have the following:

  1. Kony account
  2. Kony Visualizer Enterprise 8.0
  3. Kony Fabric V8

Importing the Basic Login Component

Before you start importing the component to Kony Visualizer, you must download the component from Kony Marketplace. You can import the marketplace components only into the apps that are of the Kony Reference Architecture type.

To import the basic login component zip file, do the following:

  1. Open your app project in Kony Visualizer.
  2. On the File menu, point to Import, and click Component. The Open dialog appears.
  3. Navigate to the location where you downloaded the component (zip file) on your computer, select the component, and click Open. The Import Marketplace Item dialog appears.
    basiclogin_import.png
  4. In the Library Name box, type a name if you want to create a new library. Otherwise, you can select the existing library name.
  5. In the Collection Name box, type a name if you want to create a new collection. Otherwise, you can select the existing collection name.
  6. In the Component Name box, the com.konymp.basiclogin name is displayed by default.

When you import a component, the component is imported to Visualizer's workspace, but not directly into your app. So after importing a component, you must add the component to your app.

Adding a Basic Login Component into your App

You can add a basiclogin component to FlexForms.

To add a basiclogin component, do the following:

  1. Open your app, and then open the form to which you want to add the component.
  2. Open the library to which you imported the component. To open the library:
    • Click the context arrow of KonyLibrary, point to Open, and select the library in which the component exists.
      library.png
  3. From the Collections tab, drag the component onto the form on the Visualizer canvas. The component is added to the form. You can also see a new element, com.konymp.basiclogin in the Components section on the Templates tab.

After adding a component to a form, you can configure the component the way you want it using the Look, Skin, and Action tabs on the Properties pane. Configuring the properties on the Properties pane is similar to configuring the properties of any widget in Kony Visualizer. For more information, refer Button Widget.

You can also see that a new tab, Component, is added on the Properties pane. The Component tab contains assorted properties relevant to the component that allow you to customize the component as required. The properties on the Component tab are categorized as Logo, Username, Password, Signin, Backend Service Configuration properties. The General properties are the default properties of individual widgets in the component.

You can also add a Basic Login component dynamically. To do so,

  1. In the Project Explorer, on the Projects tab, click Controllers section to access the respective formController. Create a method and implement the code snippet similar to the sample code mentioned below.
/* Creating a component's Object */
var basiclogin = new com.konymp.basiclogin({
               "clipBounds": true,
               "height": "100%",
               "id": "basiclogin",
               "layoutType": kony.flex.FREE_FORM, "isVisible": true, "left": "0dp", "skin": "konympbl80s9flxMain", "top": "0dp", "width": "100%", }, {}, {}); /* Setting component's properties */ basiclogin.logoSource = “imagedrag.png”; basiclogin.logoScaleMode = constants.IMAGE_SCALE_MODE_FIT_TO_DIMENSIONS; basiclogin.usernamePlaceholder = “Username”; basiclogin.usernameInputMode = constants.TEXTBOX_INPUT_MODE_NUMERIC; basiclogin.usernameMinimumChar = 10; basiclogin.usernameMaxChar = 30; basiclogin.usernameValidationMsg = “Enter Valid Username”; basiclogin.passwordPlaceholder = “Password”; basiclogin.passwordInputMode = constants.TEXTBOX_INPUT_MODE_NUMERIC; basiclogin.passwordMinimumChar = 10; basiclogin.passwordMaxChar = 30; basiclogin.passwordValidationMsg = “Enter Valid Password”; basiclogin.submitButtonText = “Sign In”; basiclogin.forgotPasswordText = “Forgot Password?”; basiclogin.encryptCredentials = true; basiclogin.remembermeProperty = true; basiclogin.rememberMeUnSelectedSource = “imagedrag.png”; basiclogin.rememberMeSelectedSource = “imagedrag.png”; /*Adding the Login(Basic) component to a Form*/ this.view.add(basiclogin);

In the code snippet, you can edit the properties of the component as per your requirement. For more information, see Properties.

Save the file.
Note:

MF services(Created app) must be published only after the app is imported into the form. The app must be published by an existing user only facilitating the authentication of credentials.

Note:

When user adds the component dynamically, add Adjust-Pan for Soft input mode property under android platform properties. Adding this property avoids any distortions in the UI.

To delete the basiclogin component, do the following:

  1. In Kony Visualizer, open your app and then open the form to which you added the component.
  2. Click the context menu of the basiclogin component, and then click Delete. A confirmation dialog appears.
  3. Click OK.

Setting Properties

The Properties provided on the Component tab allow you to customize the UI elements and set constraints for fields in the basiclogin component. You can set the properties directly on the Component tab or by writing a JavaScript. This section provides information about how to set the properties by writing a JavaScript.

Logo Properties

Logo Image
Description: Specifies the image for logo.
Syntax: logoSource
Type: String
Read/Write: Read + Write
Remarks: The default value for this property is "reusablelogin_logo.png".
Example:
this.view.basiclogin.logoSource = "imagedrag.png";
Logo Scale Mode
Description: Specifies the scaling mode of the logo image.
Syntax: logoScaleMode
Type: Constant
Read/Write: Read + Write
Remarks: The default value for this property is "constants.IMAGE_SCALE_MODE_MAINTAIN_ASPECT_RATIO".
Example:
this.view.basiclogin.logoScaleMode = constants.IMAGE_SCALE_MODE_FIT_TO_DIMENSIONS;

Username Properties

Username Placeholder
Description: Specifies a placeholder text to be displayed in the Username field.
Syntax: usernamePlaceholder
Type: String
Read/Write: Read + Write
Remarks: The default value for this property is "Username".
Example:
this.view.basiclogin.usernamePlaceholder = "username";
Username Input Mode
Description: Specifies a type of input characters accepted by the Username field.
Syntax: usernameInputMode
Type: Constant
Read/Write: Read + Write
Remarks:

The default value for this property is " constant.TEXTBOX_INPUT_MODE_ANY"

You can specify any one of the following:

  • Any: accepts all characters.
  • Numeric Only: accepts only numbers.
Example:
this.view.basiclogin.usernameInputMode = constant.TEXTBOX_INPUT_MODE_NUMERIC;
Username Min Characters
Description: Specifies the minimum number of characters to be entered in the Username field.
Syntax: usernameMinimumChar
Type: Number
Read/Write: Read + Write
Remarks: The default value for this property is "8".
Example:
this.view.basiclogin.usernameMinimumChar = 10;
Username Max Characters
Description: Specifies the maximum number of characters allowed by the Username field. Using the property, you can limit the user to enter not beyond a particular number of characters.
Syntax: usernameMaxChar
Type: Number
Read/Write: Read + Write
Remarks: The default value for this property is "15".
Example:
this.view.basiclogin.usernameMaxChar = 10;
Username Validation Message
Description: Specifies a message to be displayed when the length of the text entered in the Username field is less than the specified minimum length (Username Min Characters).
Syntax: usernameValidationMsg
Type: String
Read/Write: Read + Write
Remarks:

If no message is defined in the property, “Invalid Username” message will be displayed by default. If user provides invalid inputs (such as undefined, invalid datatype, usernamemaximimChar is less than usernameMinimumChar property etc.), an exception is thrown. The user needs to handle this exception.

This property renders at runtime.

The default value is "Username Too Small".

Example:
this.view.basiclogin.usernameValidationMsg = "Enter Valid Username";

Password Properties

Password Placeholder
Description: Specifies a placeholder text to be displayed in the Password field.
Syntax: passwordPlaceholder
Type: String
Read/Write: Read + Write
Remarks: The default value for this property is "Password".
Example:
this.view.basiclogin.passwordPlaceholder = "Password";
Password Input Mode
Description: Specifies a type of input characters accepted by the Password field. Using the property, you can restrict the Password field to accept only required characters. For example, only numbers.
Syntax: passwordInputMode
Type: Constant
Read/Write: Read + Write
Remarks:

The default value for this property is " constant.TEXTBOX_INPUT_MODE_ANY".

You can specify any one of the following:

  • Any: accepts all characters.
  • Numeric Only: accepts only numbers.
Example:
this.view.basiclogin.passwordInputMode = constants.TEXTBOX_INPUT_MODE_NUMERIC;
Password Min Characters
Description: Specifies the minimum number of characters to be entered in the Password field.
Syntax: passwordMinimumChar
Type: Number
Read/Write: Read + Write
Remarks: The default value for this property is "8".
This property renders at runtime.
Example:
this.view.basiclogin.passwordMinimumChar = 10;
Password Max Characters
Description: Specifies the maximum number of characters accepted by the Password field.
Syntax: passwordMaxChar
Type: Number
Read/Write: Read + Write
Remarks: The default value for this property is "15".
This property renders at runtime.
Example:
this.view.basiclogin.passwordMaxChar = 15;
Password Validation Message
Description: Specifies a message to be displayed when the length of the text entered in the Password field is less than the specified minimum length (Password Min Characters).
Syntax: passwordValidationMsg
Type: String
Read/Write: Read + Write
Remarks: If no message is defined in the property, “Password Too Small” message will be displayed by default.
Example:
this.view.basiclogin.passwordValidationMsg = "Enter Valid Password";

Sign-in Properties

Submit Button Text
Description: Specifies the text to be displayed on the Submit button.
Syntax: submitButtonText
Type: String
Read/Write: Read + Write
Remarks:

The default value of the property is “SIGN IN”.

Example:
this.view.basiclogin.submitButtonText = "Sign In";
Forgot Password Text
Description: Specifies the text to be displayed on the Forgot Password button.
Syntax: forgotPasswordText
Type: String
Read/Write: Read + Write
Remarks: The default value of the property is “Forgot Password”.
Example:
this.view.basiclogin.forgotPasswordText = "Forgot Password?";
Encrypt Credentials
Description: Controls whether or not the credentials are encrypted before storing in Kony store.
Syntax: encryptCredentials
Type: Boolean
Read/Write: Read + Write
Remarks: Encryption is not supported for the Windows platform.
The default value for the property is "true".
Example:
this.view.basiclogin.encryptCredentials = true;
Enable Remember Me
Description: Controls whether or not the Remember Me check box is visible to the user.
Syntax: remembermeProperty
Type: Boolean
Read/Write: Read + Write
Remarks: The default value for this property is "true".
Example:
this.view.basiclogin.remembermeProperty = true;
Remember Me Unselected Image
Description: Specifies the file name of the image to be set as unselected check box for the RememberMe field.
Syntax: rememberMeUnSelectedSource
Type: String
Read/Write: Read + Write
Remarks:

The default value for the property is "reusable_checkbox_unselected.png".

Before setting the property:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • The file name of the image should not contain any upper case characters.
  • Specify the image’s file name along with the extension.
  • Only PNG format images are supported.
Example:
this.view.basiclogin.rememberMeUnSelectedSource = "imagedrag.png";
Remember Me Selected Image
Description: Specifies the file name of the image to be set as selected check box for the RememberMe field.
Syntax: rememberMeSelectedSource
Type: String
Read/Write: Read + Write
Remarks:

The default value for the property is "reusable_checkbox_selected.png".

Before setting the property:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • The file name of the image should not contain any upper case characters.
  • Specify the image’s file name along with the extension.
  • Only PNG format images are supported.
Example:
this.view.basiclogin.rememberMeSelectedSource = "imagedrag.png";

Backend Service Configuration

Identity Service Name
Description: Specifies the identity service name.
Syntax: providerName
Type: String
Read/Write: Read + Write
Remarks: The default value for this property is "userstore".
Example:
this.view.basiclogin.providerName = "userstore";

Skin Section

This section provides details on the properties related to the skin of the basiclogin component.

Component Background Skin
Description: This property enables the consumer to change the background skin of the component.
Syntax: skinBackground
Read/Write: Read + Write
Example:
this.view.basiclogin.skinBackground = "skin_name";
Remarks: Skin assigned to the property is accepted only by same widget type.
Top Container Skin
Description: This property enables the consumer to change top container skin of the component.
Syntax: logoBackground
Read/Write: Read + Write
Example:
this.view.basiclogin.logoBackground = "skin_name";
Remarks: Skin assigned to the property is accepted only by same widget type.
Bottom Container Skin
Description: This property enables the consumer to change bottom container skin of the component.
Syntax: sknBottomContainer
Read/Write: Read + Write
Example:
this.view.basiclogin.sknBottomContainer = "skin_name";
Remarks: Skin assigned to the property is accepted only by same widget type.
Login Card Container Skin
Description: This property enables the consumer to change the login card skin of the component.
Syntax: loginCardBackground
Read/Write: Read + Write
Example:
this.view.basiclogin.loginCardBackground = "skin_name";
Remarks: Skin assigned to the property is accepted only by same widget type.
Username Placeholder Skin
Description: This property enables the consumer to change the username placeholder skin of the component.
Syntax: sknPlaceholderUsername
Read/Write: Read + Write
Example:
this.view.basiclogin.sknPlaceholderUsername = "skin_name";
Remarks: Skin assigned to the property is accepted only by same widget type.
Username Input Skin
Description: This property enables the consumer to change the username input skin of the component.
Syntax: sknUsernameInput
Read/Write: Read + Write
Example:
this.view.basiclogin.sknUsernameInput = "skin_name";
Remarks: Skin assigned to the property is accepted only by same widget type.
Username Underline Skin
Description: This property enables the consumer to change the username underline skin of the component.
Syntax: sknUsernameUnderline
Read/Write: Read + Write
Example:
this.view.basiclogin.sknUsernameUnderline = "btn_skin";
Remarks: Skin assigned to the property is accepted only by same widget type.
Password Placeholder Skin
Description: This property enables the consumer to change the password placeholder skin of the component.
Syntax: sknPasswordPlaceholder
Read/Write: Read + Write
Example:
this.view.basiclogin.sknPasswordPlaceholder = "btn_skin";
Remarks: Skin assigned to the property is accepted only by same widget type.
Password Input Skin
Description: This property enables the consumer to change the password input skin of the component.
Syntax: sknPasswordInput
Read/Write: Read + Write
Example:
this.view.basiclogin.sknPasswordInput= "skin_name";
Remarks: Skin assigned to the property is accepted only by same widget type.
Password Underline Skin
Description: This property enables the consumer to change the password underline skin of the component.
Syntax: sknPasswordUnderline
Read/Write: Read + Write
Example:
this.view.basiclogin.sknPasswordUnderline = "skin_name";
Remarks: Skin assigned to the property is accepted only by same widget type.
Login Button Skin
Description: This property enables the consumer to change the login button skin of the component.
Syntax: sknbtnLogin
Read/Write: Read + Write
Example:
this.view.basiclogin.sknbtnLogin= "skin_name";
Remarks: Skin assigned to the property is accepted only by same widget type.
Forgot Password Skin
Description: This property enables the consumer to change the forgot password skin of the component.
Syntax: sknForgotPassword
Read/Write: Read + Write
Example:
this.view.basiclogin.sknForgotPassword = "skin_name";
Remarks: Skin assigned to the property is accepted only by same widget type.
Remember Me Skin
Description: This property enables the consumer to change the remember me skin of the component.
Syntax: sknRememberMe
Read/Write: Read + Write
Example:
this.view.basiclogin.sknRememberMe = "skin_name";
Remarks: Skin assigned to the property is accepted only by same widget type.

Defining Events

You can define events to be executed when an action is performed. You can configure the events directly on the Actions tab or by writing a JavaScript. To configure the events on the Actions tab, click the Edit button against each event. For more information, refer to Add Actions.

This section provides details about each event that help you define the actions by writing a JavaScript.

usernameOnDone
Description: The event is invoked when a user taps the keyboard action key of the Username field.
Syntax:

usernameOnDone()

Example:
this.view.basiclogin.usernameOnDone= function(){ alert(“username on done”);}
forgotPasswordOnClick
Description: The event is invoked when the user clicks on Forgot password button. In the event, define actions to be executed when Forgot password button is clicked.
Syntax:

forgotPasswordOnClick()

Example:
this.view.basiclogin.forgotPasswordOnClick= function(eventobject){ alert(eventobject);}
loginFailure
Description: The event is invoked when the login is failure. In the event, define actions to be executed if login is failure.
Syntax:

loginFailureEvent(response)

Example:
this.view.basiclogin.loginFailureEvent= function(){alert(“Login failed”);}
loginSuccess
Description: The event is invoked when the login is successful. In the event, define actions to be executed if login is successful.
Syntax:

loginSuccessEvent(response)

Example:
this.view.basiclogin. loginSuccessEvent = function(response){alert(“Login is Successful”);}
passwordOnDone
Description: The event is invoked when a user taps the keyboard action key of the Password field.
Syntax:

passwordOnDone()

Example:
this.view.basiclogin.passwordOnDone= function(){alert(“Password on done); }
remembermeOnSelection Event
Description: The event is invoked when the Remember Me check box is toggled. In the event, define actions to be executed when the Remember Me check box is selected and unselected.
Syntax:

remembermeOnSelection()

Example:
this.view.basiclogin.remembermeOnSelection = function(){ alert(“Remember me is clicked”); }
submitOnClick
Description: The event is invoked when the Submit button is clicked/tapped. In the event, define actions to be executed when the Submit button is clicked.
Syntax:

submitOnClick()

Example:
this.view.basiclogin.submitOnClick= function(){ alert(“Login button is clicked”); }

APIs

The following are the APIs pertaining to the Basic Login component.

getPassword

The API fetches the text specified in the Password field.

Syntax
getPassword()
Parameters

None

Return Value
Password [String]:

Returns the text entered in the Password field.
Example
var pwd = this.view.basiclogin.getPassword();
if (pwd.length() < 4) {
    alert("Invalid Password Entered. Please try again.");
}
getUsername

The API fetches the text specified in the Username field.

Syntax
getUsername()
Parameters

None

Return Value
Username [String]:

Returns the text entered in the Username field.
Example
var username = this.view.basiclogin.getUsername();if (!this.validateUsername(username)) {alert("Invalid user name. Please try again.");}

Publishing an App

After adding the basiclogin component to your app and configuring the necessary configurations, you must publish the app to Kony Fabric. For more information, refer to Publish a Project to Kony Fabric.

Deleting the Basic Login Component

To delete the Basic Login component from your app, you must delete the component from the form and the ReusableLogin app from Kony Fabric.

To delete the Basic Login component, do the following:

  1. In Kony Visualizer, open your app and then open the form to which you added the component.
  2. Click the context menu of the Basic Login component, and then click Delete. A confirmation dialog appears.
    login_tooldel.png
  3. Click OK.
  4. Log on to your Kony account. The Dashboard page appears by default.
  5. In the left pane, click the Apps menu. The Custom Apps page appears.
  6. Find the ReusableLogin app.
    Note:

    You can find the app by typing the app's name in the Search box.

  7. Point to the context menu of ReusableLogin, and click Delete Application.
    login_delete.png