feat: add hints options for username and password fields (#6416)

* feat: add hints options for username and paossword fileds in the login dialog

* refactor arguments checks

* parsing of login options moved to common file

* add zero login options check

* parsing optimizations

* api refernces improvments

* refactor: argiment passing

* review code improvments

tns-core-modules/ui/dialogs/dialogs-common.ts

@@ -4,6 +4,8 @@ import { Color } from "../../color";
 import { Page } from "../page";
 import { isIOS } from "../../platform";
 import * as frameModule from "../frame";
+import { LoginOptions } from "./dialogs";
+import { isObject, isString } from "../../utils/types";
 
 export const STRING = "string";
 export const PROMPT = "Prompt";
@@ -152,3 +154,34 @@ export function getTextFieldColor(): Color {
 export function isDialogOptions(arg): boolean {
     return arg && (arg.message || arg.title);
 }
+
+export function parseLoginOptions(args: any[]): LoginOptions {
+    // Handle options object first
+    if (args.length === 1 && isObject(args[0])) {
+        return args[0];
+    }
+
+    let options: LoginOptions = { title: LOGIN, okButtonText: OK, cancelButtonText: CANCEL };
+
+    if (isString(args[0])) {
+        options.message = args[0];
+    }
+
+    if (isString(args[1])) {
+        options.userNameHint = args[1];
+    }
+
+    if (isString(args[2])) {
+        options.passwordHint = args[2];
+    }
+
+    if (isString(args[3])) {
+        options.userName = args[3];
+    }
+
+    if (isString(args[4])) {
+        options.password = args[4];
+    }
+
+    return options;
+}

tns-core-modules/ui/dialogs/dialogs.android.ts

@@ -2,7 +2,7 @@
  * Android specific dialogs functions implementation.
  */
 import { DialogOptions, ConfirmOptions, PromptOptions, PromptResult, LoginOptions, LoginResult, ActionOptions } from ".";
-import { getLabelColor, getButtonColors, isDialogOptions, inputType, capitalizationType, ALERT, OK, CONFIRM, CANCEL, PROMPT, LOGIN } from "./dialogs-common";
+import { getLabelColor, getButtonColors, isDialogOptions, inputType, capitalizationType, ALERT, OK, CONFIRM, CANCEL, PROMPT, parseLoginOptions } from "./dialogs-common";
 import { android as androidApp } from "../../application";
 
 export * from "./dialogs-common";
@@ -223,31 +223,8 @@ export function prompt(arg: any): Promise<PromptResult> {
     });
 }
 
-export function login(arg: any): Promise<LoginResult> {
+export function login(...args: any[]): Promise<LoginResult> {
-    let options: LoginOptions;
+    let options: LoginOptions = parseLoginOptions(args);
-    const defaultOptions = { title: LOGIN, okButtonText: OK, cancelButtonText: CANCEL };
-
-    if (arguments.length === 1) {
-        if (isString(arguments[0])) {
-            options = defaultOptions;
-            options.message = arguments[0];
-        } else {
-            options = arguments[0];
-        }
-    } else if (arguments.length === 2) {
-        if (isString(arguments[0]) && isString(arguments[1])) {
-            options = defaultOptions;
-            options.message = arguments[0];
-            options.userName = arguments[1];
-        }
-    } else if (arguments.length === 3) {
-        if (isString(arguments[0]) && isString(arguments[1]) && isString(arguments[2])) {
-            options = defaultOptions;
-            options.message = arguments[0];
-            options.userName = arguments[1];
-            options.password = arguments[2];
-        }
-    }
 
     return new Promise<LoginResult>((resolve, reject) => {
         try {
@@ -256,10 +233,15 @@ export function login(arg: any): Promise<LoginResult> {
             const alert = createAlertDialog(options);
 
             const userNameInput = new android.widget.EditText(context);
+
+            userNameInput.setHint(options.userNameHint ? options.userNameHint : "");
             userNameInput.setText(options.userName ? options.userName : "");
 
             const passwordInput = new android.widget.EditText(context);
             passwordInput.setInputType(android.text.InputType.TYPE_CLASS_TEXT | android.text.InputType.TYPE_TEXT_VARIATION_PASSWORD);
+            passwordInput.setTypeface(android.graphics.Typeface.DEFAULT);
+
+            passwordInput.setHint(options.userNameHint ? options.userNameHint : "");
             passwordInput.setText(options.password ? options.password : "");
 
             const layout = new android.widget.LinearLayout(context);
@@ -278,11 +260,9 @@ export function login(arg: any): Promise<LoginResult> {
             });
 
             showDialog(alert);
-
         } catch (ex) {
             reject(ex);
         }
-
     });
 }
 

tns-core-modules/ui/dialogs/dialogs.d.ts

@@ -98,10 +98,20 @@ export function prompt(options: PromptOptions): Promise<PromptResult>;
 /**
  * The login() method displays a login dialog box that prompts the visitor for user name and password.
  * @param message The text to display in the dialog box.
+ * @param userNameHint The default text to display as a hint in the username input. Optional.
+ * @param passwordHint The default text to display as a hint in the password input. Optional.
  * @param userName The default text to display in the user name input box. Optional.
  * @param password The default text to display in the password input box. Optional.
  */
-export function login(message: string, userName?: string, password?: string): Promise<LoginResult>;
+export function login(message: string, userNameHint?: string, passwordHint?: string, userName?: string, password?: string): Promise<LoginResult>;
+
+/**
+ * The login() method displays a login dialog box that prompts the visitor for user name and password.
+ * @param message The text to display in the dialog box.
+ * @param userNameHint The default text to display as a hint in the username input. Optional.
+ * @param passwordHint The default text to display as a hint in the password input. Optional.
+ */
+export function login(message: string, userNameHint?: string, passwordHint?: string): Promise<LoginResult>;
 
 /**
  * The login() method displays a login dialog box that prompts the visitor for user name and password.
@@ -223,6 +233,16 @@ export interface PromptOptions extends ConfirmOptions {
  * Provides options for the login dialog.
  */
 export interface LoginOptions extends ConfirmOptions {
+    /**
+     * Gets or sets the default text to display as hint in the user name input box.
+     */
+    userNameHint?: string;
+    
+    /**
+     * Gets or sets the default text to display as hint in the password input box.
+     */
+    passwordHint?: string;
+
     /**
      * Gets or sets the default text to display in the user name input box.
      */

tns-core-modules/ui/dialogs/dialogs.ios.ts

@@ -3,7 +3,7 @@
  */
 import { View, ios as iosView } from "../core/view";
 import { ConfirmOptions, PromptOptions, PromptResult, LoginOptions, LoginResult, ActionOptions } from ".";
-import { getCurrentPage, getLabelColor, getButtonColors, getTextFieldColor, isDialogOptions, inputType, capitalizationType, ALERT, OK, CONFIRM, CANCEL, PROMPT, LOGIN } from "./dialogs-common";
+import { getCurrentPage, getLabelColor, getButtonColors, getTextFieldColor, isDialogOptions, inputType, capitalizationType, ALERT, OK, CONFIRM, CANCEL, PROMPT, parseLoginOptions } from "./dialogs-common";
 import { isString, isDefined, isFunction } from "../../utils/types";
 import { getRootView } from "../../application";
 
@@ -145,32 +145,8 @@ export function prompt(arg: any): Promise<PromptResult> {
     });
 }
 
-export function login(): Promise<LoginResult> {
+export function login(...args: any[]): Promise<LoginResult> {
-    let options: LoginOptions;
+    let options: LoginOptions = parseLoginOptions(args);
-
-    let defaultOptions = { title: LOGIN, okButtonText: OK, cancelButtonText: CANCEL };
-
-    if (arguments.length === 1) {
-        if (isString(arguments[0])) {
-            options = defaultOptions;
-            options.message = arguments[0];
-        } else {
-            options = arguments[0];
-        }
-    } else if (arguments.length === 2) {
-        if (isString(arguments[0]) && isString(arguments[1])) {
-            options = defaultOptions;
-            options.message = arguments[0];
-            options.userName = arguments[1];
-        }
-    } else if (arguments.length === 3) {
-        if (isString(arguments[0]) && isString(arguments[1]) && isString(arguments[2])) {
-            options = defaultOptions;
-            options.message = arguments[0];
-            options.userName = arguments[1];
-            options.password = arguments[2];
-        }
-    }
 
     return new Promise<LoginResult>((resolve, reject) => {
         try {
@@ -182,6 +158,7 @@ export function login(): Promise<LoginResult> {
 
             alertController.addTextFieldWithConfigurationHandler((arg: UITextField) => {
                 arg.placeholder = "Login";
+                arg.placeholder = options.userNameHint ? options.userNameHint : "";
                 arg.text = isString(options.userName) ? options.userName : "";
 
                 if (textFieldColor) {
@@ -192,6 +169,7 @@ export function login(): Promise<LoginResult> {
             alertController.addTextFieldWithConfigurationHandler((arg: UITextField) => {
                 arg.placeholder = "Password";
                 arg.secureTextEntry = true;
+                arg.placeholder = options.passwordHint ? options.passwordHint : "";
                 arg.text = isString(options.password) ? options.password : "";
 
                 if (textFieldColor) {