From 89bcdbef246b5ab2a77a4ff59bb8d3eaaf35f154 Mon Sep 17 00:00:00 2001
From: Maurizio Vitale <maurizio.vitale@alfresco.com>
Date: Tue, 24 Jan 2017 10:20:20 +0000
Subject: [PATCH] Fix dynamic value inside the min length error message (#1523)

---
 .../components/login/login-demo.component.ts  |  5 +++--
 .../alfresco-login/i18n/en.json               |  2 +-
 .../components/alfresco-login.component.ts    | 21 ++++++++++++++-----
 .../ng2-alfresco-login/src/i18n/en.json       |  2 +-
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/demo-shell-ng2/app/components/login/login-demo.component.ts b/demo-shell-ng2/app/components/login/login-demo.component.ts
index 380f81b946..2026b9044e 100644
--- a/demo-shell-ng2/app/components/login/login-demo.component.ts
+++ b/demo-shell-ng2/app/components/login/login-demo.component.ts
@@ -37,19 +37,20 @@ export class LoginDemoComponent implements OnInit {
     disableCsrf: boolean = false;
     isECM: boolean = true;
     isBPM: boolean = false;
+    customMinLenght: number = 2;
 
     constructor(private router: Router,
                 private storage: StorageService,
                 private logService: LogService) {
         this.customValidation = {
-            username: ['', Validators.compose([Validators.required, Validators.minLength(2)])],
+            username: ['', Validators.compose([Validators.required, Validators.minLength(this.customMinLenght)])],
             password: ['', Validators.required]
         };
     }
 
     ngOnInit() {
         this.alfrescologin.addCustomValidationError('username', 'required', 'LOGIN.MESSAGES.USERNAME-REQUIRED');
-        this.alfrescologin.addCustomValidationError('username', 'minlength', 'LOGIN.MESSAGES.USERNAME-MIN');
+        this.alfrescologin.addCustomValidationError('username', 'minlength', 'LOGIN.MESSAGES.USERNAME-MIN', {customMinLenght: this.customMinLenght});
         this.alfrescologin.addCustomValidationError('password', 'required', 'LOGIN.MESSAGES.PASSWORD-REQUIRED');
 
         if (this.storage.hasItem('providers')) {
diff --git a/demo-shell-ng2/custom-translation/alfresco-login/i18n/en.json b/demo-shell-ng2/custom-translation/alfresco-login/i18n/en.json
index 5982c16a33..d7e59007bd 100644
--- a/demo-shell-ng2/custom-translation/alfresco-login/i18n/en.json
+++ b/demo-shell-ng2/custom-translation/alfresco-login/i18n/en.json
@@ -9,7 +9,7 @@
         },
         "MESSAGES": {
             "USERNAME-REQUIRED": "Required",
-            "USERNAME-MIN": "Your username needs to be at least 4 characters.",
+            "USERNAME-MIN": "Your username needs to be at least {{customMinLenght}} characters.",
             "PASSWORD-REQUIRED": "Enter your password to sign in",
             "LOGIN-ERROR-CREDENTIALS": "You have entered an invalid username or password",
             "LOGIN-ERROR-PROVIDERS": "Providers cannot be undefined",
diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts
index 789b4e794d..d7b6fd97b8 100644
--- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts
+++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts
@@ -65,6 +65,8 @@ export class AlfrescoLoginComponent implements OnInit {
 
     formError: { [id: string]: string };
 
+    minLenght: number = 2;
+
     private _message: { [id: string]: { [id: string]: string } };
 
     /**
@@ -220,8 +222,14 @@ export class AlfrescoLoginComponent implements OnInit {
      * @param ruleId - i.e. required | minlength | maxlength
      * @param msg
      */
-    public addCustomValidationError(field: string, ruleId: string, msg: string) {
-        this._message[field][ruleId] = msg;
+    public addCustomValidationError(field: string, ruleId: string, msg: string, params?: any) {
+        if (params) {
+            this.translateService.get(msg, params).subscribe((res: string) => {
+                this._message[field][ruleId] = res;
+            });
+        } else {
+            this._message[field][ruleId] = msg;
+        }
     }
 
     /**
@@ -274,18 +282,21 @@ export class AlfrescoLoginComponent implements OnInit {
     private initFormFieldsMessagesDefault() {
         this._message = {
             'username': {
-                'required': 'LOGIN.MESSAGES.USERNAME-REQUIRED',
-                'minlength': 'LOGIN.MESSAGES.USERNAME-MIN'
+                'required': 'LOGIN.MESSAGES.USERNAME-REQUIRED'
             },
             'password': {
                 'required': 'LOGIN.MESSAGES.PASSWORD-REQUIRED'
             }
         };
+
+        this.translateService.get('LOGIN.MESSAGES.USERNAME-MIN',  {minLenght: this.minLenght}).subscribe((res: string) => {
+            this._message['username']['minlength'] = res;
+        });
     }
 
     private initFormFieldsDefault() {
         this.form = this._fb.group({
-            username: ['', Validators.compose([Validators.required, Validators.minLength(2)])],
+            username: ['', Validators.compose([Validators.required, Validators.minLength(this.minLenght)])],
             password: ['', Validators.required]
         });
     }
diff --git a/ng2-components/ng2-alfresco-login/src/i18n/en.json b/ng2-components/ng2-alfresco-login/src/i18n/en.json
index 5982c16a33..6abc552965 100644
--- a/ng2-components/ng2-alfresco-login/src/i18n/en.json
+++ b/ng2-components/ng2-alfresco-login/src/i18n/en.json
@@ -9,7 +9,7 @@
         },
         "MESSAGES": {
             "USERNAME-REQUIRED": "Required",
-            "USERNAME-MIN": "Your username needs to be at least 4 characters.",
+            "USERNAME-MIN": "Your username needs to be at least {{minLenght}} characters.",
             "PASSWORD-REQUIRED": "Enter your password to sign in",
             "LOGIN-ERROR-CREDENTIALS": "You have entered an invalid username or password",
             "LOGIN-ERROR-PROVIDERS": "Providers cannot be undefined",