From c4dfe20c08ecb9e50b7cb7bef6eb603e04d56387 Mon Sep 17 00:00:00 2001
From: Nizamudeen A <nia@localhost.localdomain>
Date: Wed, 22 Apr 2020 16:53:41 +0530
Subject: [PATCH] mgr/dashboard: Asynchronous unique username validation for
 User Component

Implements an asynchronous validation for the username field in the Create User form which immediately display an error message if the username already exists.

Fixes: https://tracker.ceph.com/issues/36375
Signed-off-by: Nizamudeen <nia@redhat.com>
---
 .../app/core/auth/user-form/user-form.component.html |  3 +++
 .../app/core/auth/user-form/user-form.component.ts   |  6 +++++-
 .../frontend/src/app/shared/api/user.service.ts      | 12 ++++++++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html
index 66835259f33..e0a27c9a0c2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html
@@ -29,6 +29,9 @@
             <span class="invalid-feedback"
                   *ngIf="userForm.showError('username', formDir, 'required')"
                   i18n>This field is required.</span>
+            <span class="invalid-feedback"
+                  *ngIf="userForm.showError('username', formDir, 'notUnique')"
+                  i18n>The username already exists.</span>
           </div>
         </div>
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.ts
index 75e14e33036..952508ca0d0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.ts
@@ -84,7 +84,11 @@ export class UserFormComponent implements OnInit {
     });
     this.userForm = this.formBuilder.group(
       {
-        username: ['', [Validators.required]],
+        username: [
+          '',
+          [Validators.required],
+          [CdValidators.unique(this.userService.validateUserName, this.userService)]
+        ],
         name: [''],
         password: [
           '',
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/user.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/user.service.ts
index 05c53de0cca..c0b7acdb6de 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/user.service.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/user.service.ts
@@ -1,5 +1,7 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { Observable, of as observableOf } from 'rxjs';
+import { catchError, mapTo } from 'rxjs/operators';
 
 import { UserFormModel } from '../../core/auth/user-form/user-form.model';
 import { ApiModule } from './api.module';
@@ -40,6 +42,16 @@ export class UserService {
     });
   }
 
+  validateUserName(user_name: string): Observable<boolean> {
+    return this.get(user_name).pipe(
+      mapTo(true),
+      catchError((error) => {
+        error.preventDefault();
+        return observableOf(false);
+      })
+    );
+  }
+
   validatePassword(password: string, username: string = null, oldPassword: string = null) {
     let params = new HttpParams();
     params = params.append('password', password);