Login

Login

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Apr 21, 2017 By: Kony Team
30 0 0 14
The Login component provides key front end capabilities typically used in a mobile apps login page. The modules provides typical functionality such as enforcing a minimum password length,minimum user ID length,local password encryption via the component properties directly within Visualizer. The component also provides a typical login UI that includes connectivity to Facebook, Google, LinkedIn and Touch ID providing a quick login asset for use within apps the require authentication.

Requirements

  • Visualizer Enterprise
  • MobileFabric
 

Devices

 

Platforms

Features

  • Ready-to-use login form/screen for mobile apps
  • Ability to authenticate with Facebook, LinkedIn, and Office365 credentials
  • Ability to authenticate with fingerprint
  • Facility to customize every UI element
  • Easy connect to custom identity services

Platforms Supported

  • Android
  • iOS

Prerequisites

  • Kony Account
  • Kony Visualizer Enterprise 7.3
  • Kony MobileFabric 7.3
  • A Kony Reference Architecture app created in Kony Visualizer

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 app users. The fields in the component are configured with necessary constraints and actions.

The component also supports Touch ID and social authentications. Touch ID is a biometric fingerprint authenticating mechanism, which allows users to log into your app with their fingerprint. With the Social authentication, users can log into your app with their social website (Facebook, Office365, and LinkedIn) credentials.

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 7.3
  3. Kony MobileFabric 7.3
  4. A Kony Reference Architecture app. You can create a Kony Reference Architecture app in Visualizer using the following procedure:
    1. Open Kony Visualizer.
    2. On the File Menu, click New Project. The New Project dialog appears.
    3. In the Project Name box, type a name for your project.
    4. Select Kony Reference Architecture, and click Create.
  5. For Android apps, add the USE_FINGERPRINT permission to your app project. You can add the permission using the following procedure.
    1. Open the application, and click Project Settings icon. The Project Settings dialog appears.
    2. Click the Native tab, and then click the Android sub-tab.
    3. In the Manifest Properties section, click the Permissions tab.
    4. Select the USE_FINGERPRINT option from the left box, and click Add. Make sure that the USE_FINGERPRINT option is moved to the right box.
    5. Click Finish.
  1. For Windows apps, add internetClient and internetClientServer permissions in your app project. You can add the permissions using the following procedure.
    1. Open the application, and click Project Settings icon. The Project Settings dialog appears.
    2. Click the Native tab, and then click the Windows Phone sub-tab.
    3. Click Windows 10 Mobile, and then click Capabilities.
    4. Select the internetClient and internetClientServer options from the left box, and click Add. Make sure that the selected options are moved to the right box.
    5. Click Finish.

Importing the 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 component zip file, do the following:

  1. Open your app project in Kony Visualizer.
  2. In the Project Explorer, click the context menu arrow of KonyLibrary, and then click Import Library. 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. In the Collections library, you will see a new component added.

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 Login Component into your App

You can add a Login component to FlexForm, FlexContainer, and FlexScrollContainer widgets.

To add a login component, do the following:

  1. Open your app, and then open the form to which you want to add the component.
  2. 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.login 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 Pass Through and Custom properties. The Pass Through properties are the default properties of individual widgets in the component. Custom Properties are user-defined properties based on the use case of the component.

Note:

Changes made to the Custom properties are reflected only at the run time, but not at the design time (Visualizer Canvas).

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

  1. In the Project Explorer, on the Projects tab, click the context menu arrow of Modules, and then click New JS module. A new JavaScript file opens in the Code Editor.
  2. Copy and paste the following code snippet in the JavaScript file.
    /* Creating a component's Object */
    var login = new component.ui.login({
                    "clipBounds": true,
                    "height": "100%",
                    "id": "login",
                    "isVisible": true,
                    "left": "0dp",
                    "skin": "CopyslFbox0i25b6c13d6274d",
                    "top": "0dp",
                    "width": "100%",
                    "zIndex": 1
                }, {}, {});
    /* Setting component's Pass Through and Custom properties */
                login.logoSource = "logo.png";
                login.usernamePlaceholder = "Username";
               login.facebookLogin = true;
                login.linkedInLogin = true;           
    /*Adding the Component to the Form*/
                this.view.add(login);

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

  3. Save the file.

To delete the 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 Login component, and then click Delete. A confirmation dialog appears.
  3. Click OK.

Configuring Social Authentication

The Login component comes along with social authentication embedded in it. With the integration of social authentication, the app users can log into your app directly using their social website credentials. The Login component contains icons of Facebook, LinkedIn, and Office 365 at the bottom of the screen. When a user taps on any one of the icons, the respective login form opens as illustrated in the following figure.

The social authentication works because of a MobileFabric app, ReusableLogin, is bundled with the Login component. When you import the component into your app project (Kony Visualizer), and then drag the component on to the Canvas, the ReusableLogin app will be uploaded to your Kony account.

Note:

Ensure that you are logged on to your Kony account.

The ReusableLogin app contains a set of identity services related to social authentication. The identity services set helps you invoke the social authentication process when a user tries to log into your app using the social website credentials. When a user clicks any of the social website icons, the corresponding identity service gets invoked. For example, if a user clicks the Facebook icon, the Facebook service is invoked, and then the Facebook login screen opens using which the user can log into your app. The following are the available identity services.

  • reusableFacebookLogin: provides the oAuth login service for Facebook.
  • reusableLinkedinLogin: provides the oAuth login service for LinkedIn.
  • reusableOffice365Login: provides the oAuth login service for Office 365.

To enable the social authentication process, you must associate your app with the ReusableLogin app in the MobileFabric.

To associate your app with the ReusableLogin app, do the following:

  1. In Kony Visualizer, open your app to which you have added the component.
  2. On the Projects tab, click MobileFabric. The Bind MobileFabric Application dialog appears.
  3. Click Use Existing. The MobileFabicApplication dialog appears with a list of existing apps.
  4. Find the ReusableLogin app, and click the Associate button against the app.
  5. Note:

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

After you associate your app with the ReusableLogin app, you must specify client details (client ID and client secret) for each identity service to enable respective social authentication. You can generate the client details for each identity service by logging on to the respective social website as a developer and creating an app in it. For example, if you want to enable the Facebook social authentication for your app, log on to https://developers.facebook.com/ and create an app. When you create an app, the client ID and client secret key are generated.

The following procedure explains how to specify the client details for the reusableFacebookLogin identity service.

  1. Log on to your Kony account. The Dashboard page appears by default.
  2. In the left pane, click the Apps menu. The Custom Apps page appears.
  3. Find and click the ReusableLogin app. The ReusableLogin page appears along with the Configure Services tab and the Identity sub-tab opened by default.
    Note:

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

  4. Click reusableFacebookLogin. The FacebookLogin page opens.
  5. In the Client ID box, type the client ID of the Facebook that you generated.
  6. In the Client Secret box, type the client secret key.
  7. Click Save.

You can follow the above procedure to specify the client details for other identity services.

Configuring User Credentials Authentication

To enable the authentication process when a user provides the user credentials to log into your app, you must integrate the component with the Kony User Repository service in the MobileFabric console.

Kony User Repository is a repository service provided by Kony. The repository service helps you authenticate your app users when they try to log into your app using the user credentials. With the help of Kony User Repository service, you can also add users and create credentials for them to log into your app. The service also provides you an option to import your users list as a CSV file. Ensure that the CSV file conforms to the sample.

To integrate the Login component with Kony User Repository, do the following:

  1. Log on to your Kony account. The Dashboard page appears by default.
  2. In the left pane, click the Apps menu. The Custom Apps page appears.
  3. Find and click the ReusableLogin app. The ReusableLogin page appears along with the Configure Services tab and the Identity sub-tab opened by default.
    Note:

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

  4. Click Use Existing. The Existing Services dialog appears.
  5. Select Kony User Repository, and then click Add. The Add Services confirmation dialog appears.
  6. Click Close. The Kony User Repository service will be added to the Identity sub-tab.

After integrating the Kony User Repository service with your app, you can add users to the repository. For more information, refer to Kony User Repository.

Configuring Identity Service Authentication

An identity service allows you to connect to your existing user accounts directory. For example, if you are maintaining your user account details in Microsoft Active Directory, using the identity service, you can connect to the Active Directory and enable authentication of users to access your application. In the MobileFabric console, you can create identity services. For more information, refer to Identity Services. The Login component allows you to associate with identity services for user authentication.

Note:

Ensure that you know the name of the identity service name to which you want to associate.

To associate the Login component with an identity service, do the following:

  1. In Kony Visualizer, open your app and the form on which Login component is placed.
  2. Select the Login component, and click the Component tab on the Properties pane.
  3. In the Provider Name box, type the name of the identity service to which the component to be associated.
  4. You can invoke the associated identity service using the invokeIdentityService API.

Setting Properties

The Properties provided on the Component tab allow you to customize the UI elements and set constraints for fields in the Login 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.

Encrypt Credentials
Category: Custom
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.
Example:
this.view.ComponentID.encryptCredentials = true;

Replace the "ComponentID" with the ID of the component in all examples in this document.
You can find the ID of the component on the Look tab.

Facebook Center X
Category: Pass Through
Description: Specifies the horizontal position of the Facebook icon on the screen.
Syntax: facebookCenterX
Type: String
Read/Write: Read + Write
Example:
this.view.ComponentID.facebookCenterX = "30%";
Facebook Image
Category: Pass Through
Description: Specifies the file name of the image to be set as a Facebook icon.
Syntax: facebookSource
Type: String
Read/Write: Read + Write
Remarks: The property is respected only when the Facebook Login property is set to true.
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.
  • The image dimensions should be 40x40 DP.
Example:
this.view.ComponentID.facebookSource = "fbLogo.png";
Facebook Login
Category: Pass Through
Description: Controls whether or not the Facebook icon is visible to the user.
Syntax: facebookLogin
Type: Boolean
Read/Write: Read + Write
Example:
this.view.ComponentID.facebookLogin = false;
Forgot Password Text
Category: Pass Through
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.ComponentID.forgotPasswordText = "Forgot Password?";
LinkedIn Center X
Category: Pass Through
Description: Specifies the horizontal position of the LinkedIn icon on the screen.
Syntax: linkedinCenterX
Type: String
Read/Write: Read + Write
Example:
this.view.ComponentID.linkedinCenterX = "30%";
LinkedIn Image
Category: Pass Through
Description: Specifies the file name of the image to be set as LinkedIn icon.
Syntax: linkedinSource
Type: String
Read/Write: Read + Write
Remarks: The property is respected only when the LinkedIn Login property is set to true.
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.
  • The image dimensions should be 40x40 DP.
Example:
this.view.ComponentID.linkedinSource = "linkLogo.png";
LinkedIn Login
Category: Pass Through
Description: Controls whether or not the LinkedIn icon is visible to the user.
Syntax: linkedinLogin
Type: Boolean
Read/Write: Read + Write
Example:
this.view.ComponentID.linkedinLogin = true;
Logo Scale Mode
Category: Pass Through
Description: Specifies the scaling mode of the logo image.
Syntax: logoScaleMode
Type: Constant
Read/Write: Read + Write
Remarks: The following are the image scale options:
  • Fit To Dimensions
  • Maintain Aspect Ratio
  • Crop

For more information, refer to imageScaleMode.

Example:
this.view.ComponentID.logoScaleMode = constants.IMAGE_SCALE_MODE_FIT_TO_DIMENSIONS;
Logo Source
Category: Pass Through
Description: Specifies the file name of the image to be set as app's logo.
Syntax: logoSource
Type: String
Read/Write: Read + Write
Remarks: 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.
  • The image dimensions should be 40x40 DP.
Example:
this.view.ComponentID.logoSource = "appLogo.png";
Office365 Center X
Category: Pass Through
Description: Specifies the horizontal position of the Office365 icon on the screen.
Syntax: office365CenterX
Type: String
Read/Write: Read + Write
Example:
this.view.ComponentID.office365CenterX = "20%";
Office365 Login
Category: Pass Through
Description: Controls whether or not the Office365 icon is visible to the user.
Syntax: office365Login
Type: Boolean
Read/Write: Read + Write
Example:
this.view.ComponentID.office365Login = false;
Password Input Mode
Category: Pass Through
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: You can specify any one of the following:
  • Any: accepts all characters.
  • Numeric Only: accepts only numbers.
Example:
this.view.ComponentID.passwordInputMode = constants.TEXTBOX_INPUT_MODE_ANY;
Password Max Characters
Category: Pass Through
Description: Specifies the maximum number of characters accepted by the Password field.
Syntax: passwordMaxChar
Type: Number
Read/Write: Read + Write
Example:
this.view.ComponentID.passwordMaxChar = 12;
Password Min Characters
Category: Custom
Description: Specifies the minimum number of characters to be entered in the Password field.
Syntax: passwordMinimumChar
Type: Number
Read/Write: Read + Write
Example:
this.view.ComponentID.passwordMinimumChar = 8;
Password Placeholder
Category: Pass Through
Description: Specifies a placeholder text to be displayed in the Password field.
Syntax: passwordPlaceholder
Type: String
Read/Write: Read + Write
Example:
this.view.ComponentID.passwordPlaceholder = "Password";
Password Validation Message
Category: Custom
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, “Invalid Password” message will be displayed by default.
Example:
this.view.ComponentID.passwordValidationMsg = "Password must be minimum of 8 characters";
Remember Me
Category: Pass Through
Description: Controls whether or not the Remember Me check box is visible to the user.
Syntax: remembermeProperty
Type: Boolean
Read/Write: Read + Write
Example:
this.view.ComponentID.remembermeProperty = true;
RememberMe Selected Image
Category: Pass Through
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:

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.ComponentID.rememberMeSelectedSource = "selectedChkbx.png";
RememberMe Unselected Image
Category: Pass Through
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:

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.ComponentID.rememberMeUnSelectedSource = "unselectedChkbx.png";
Social Login Enable
Category: Pass Through
Description: Controls whether or not the social authentication option is visible to the user.
Syntax: socialLoginVisible
Type: Boolean
Read/Write: Read + Write
Example:
this.view.ComponentID. socialLoginVisible = true;
Social Login Center Y
Category: Pass Through
Description: Specifies the position of the Social Login FlexContainer vertically on the screen.
Syntax: socialLoginCenterY
Type: String
Read/Write: Read + Write
Example:
this.view.ComponentID.socialLoginCenterY= "20%";
Submit Button Text
Category: Pass Through
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.ComponentID.submitButtonText = "Sign In";
Touch ID
Category: Pass Through
Description: Controls whether or not the TouchID option is visible to the user.
Syntax: touchIDProperty
Type: Boolean
Read/Write: Read + Write
Example:
this.view.ComponentID.touchIDProperty = false;
Touch ID Center Y
Category: Pass Through
Description: Specifies the position of the Touch ID FlexContainer vertically on the screen.
Syntax: touchIdCenterY
Type: String
Read/Write: Read + Write
Example:
this.view.ComponentID.touchIdCenterY = "20%";
Username Input Mode
Category: Pass Through
Description: Specifies a type of input characters accepted by the Username field. Using the property, you can restrict the Username field to accept only required characters. For example, only numbers.
Syntax: usernameInputMode
Type: Constant
Read/Write: Read + Write
Remarks:

You can specify any one of the following:

  • Any: accepts all characters.
  • Numeric Only: accepts only numbers.
Example:
this.view.ComponentID.usernameInputMode = constants.TEXTBOX_INPUT_MODE_ANY;
Username Max Characters
Category: Pass Through
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
Example:
this.view.ComponentID.usernameMaxChar = 25;
Username Min Characters
Category: Custom
Description: Specifies the minimum number of characters to be entered in the Username field.
Syntax: usernameMinimumChar
Type: Number
Read/Write: Read + Write
Example:
this.view.ComponentID.usernameMinimumChar = 10;
Username Placeholder
Category: Pass Through
Description: Specifies a placeholder text to be displayed in the Username field.
Syntax: usernamePlaceholder
Type: String
Read/Write: Read + Write
Example:
this.view.ComponentID.usernamePlaceholder = "username";
Username Validation Message
Category: Custom
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.
Example:
this.view.ComponentID.usernameValidationMsg = "User name must be minimum of 8 characters";

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.

forgotPasswordOnClick Event
Description: The event is invoked when the Forgot password button is clicked/tapped. In the event, define actions to be executed when Forgot password button is clicked.
Syntax:

forgotPasswordOnClick()

loginFailure Event
Description: The event is invoked when the login is failure. In the event, define actions to be executed if login is failure.
Syntax:

loginFailureEvent()

loginSuccess Event
Description: The event is invoked when the login is successful. In the event, define actions to be executed if login is successful.
Syntax:

loginSuccessEvent()

passwordOnDone Event
Description: The event is invoked when a user taps the keyboard action key of the Password field.
Syntax:

passwordOnDone()

Remarks: The event will not be invoked when a user clicks next text field without clicking the keyboard action key.
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 RememberMe check box is selected and unselected.
Syntax:

remembermeOnSelection()

submitOnClick Event
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()

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

usernameOnDone()

Remarks: The event will not be invoked when a user clicks the next text field without clicking keyboard action key.

APIs

The following are the APIs pertaining to the Login component.

enableTouchID

The API enables or disables the Touch ID functionality.

Syntax
enableTouchID()
Parameters
true [Boolean]:
Enables the Touch ID functionality.

false [Boolean]:
Disables the Touch ID functionality.
Return Value

None

Remarks

If the device supports the Touch feature, the Touch ID functionality is enabled automatically.

Example
this.view.ComponentID.enableTouchID(true);
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.
Remarks

If you use any third-party login such as Facebook, LinkedIn, and so on, the API returns an empty string.

Example
var pwd = this.view.ComponentID.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.
Remarks

If you use any third-party login such as Facebook, LinkedIn, and so on, the API returns an empty string.

Example
var username = this.view.ComponentID.getUsername();if (!this.validateUsername(username)) {alert("Invalid user name. Please try again.");}
invokeIdentityService

The API invokes the specified identity service.

Syntax
invokeIdentityService(    providename)
Parameters
providername [Mandatory]:
Name of the identity service to be invoked.

None

Return Value

None

Remarks

You will need the API to invoke a service when you use custom identity service for user authentication.

Example
this.invokeIdentityService("userstore")
rememberMe

Use the API to make your app remember the specified user credentials. Invoke the API only when the login is successful.

Syntax
rememberMe()
Parameters
true [Boolean]:
Enables the rememberMe functionality.

false [Boolean]:
Disables the rememberMe functionality.
Return Value

None

Example
this.view.ComponentID.rememberMe(true);

Publishing an App

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

Deleting the Login Component

To delete the Login component from your app, you must delete the component from the form and the ReusableLogin app from MobileFabric.

To delete the 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 Login component, and then click Delete. A confirmation dialog appears.
  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.