Clients also implemented.

I think the only things left are the login history and other past errors

overlord/src/app/auth/auth.service.ts

@@ -24,10 +24,11 @@ export class AuthService {
     return this.currentUserSubject.value;
   }
 
-  login(username: string, password: string) {
+  login(username: string, password: string, otp: string) {
     const formData: FormData = new FormData();
     formData.append('username', username);
     formData.append('password', password);
+    formData.append('otp', otp);
     formData.append('grant_type', 'password');
     return this.http.post<any>(loginUrl, formData)
       .pipe(map(u => u.access_token))

overlord/src/app/auth/login/login.component.html

@@ -19,19 +19,13 @@
         </mat-form-field>
       </div>
       <mat-divider></mat-divider>
-      <h2 *ngIf="showOtp">Client ID: {{clientID}}</h2>
+      <h2 *ngIf="showOtp">Client ID: {{clientId}}</h2>
       <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px" *ngIf="showOtp">
         <mat-form-field fxFlex>
           <mat-label>Otp</mat-label>
           <input matInput placeholder="Otp" formControlName="otp">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px" *ngIf="showOtp">
-        <mat-form-field fxFlex>
-          <mat-label>Client Name</mat-label>
-          <input matInput placeholder="Client Name" formControlName="clientName">
-        </mat-form-field>
-      </div>
     </form>
   </mat-card-content>
   <mat-card-actions>

overlord/src/app/auth/login/login.component.ts

@@ -15,7 +15,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
   form: FormGroup;
   hide: boolean;
   showOtp: boolean;
-  clientID: string;
+  clientId: string;
   private returnUrl: string;
 
   constructor(private route: ActivatedRoute,
@@ -34,8 +34,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
     this.form = this.fb.group({
       username: '',
       password: '',
-      otp: '',
-      clientName: ''
+      otp: ''
     });
   }
 
@@ -53,17 +52,20 @@ export class LoginComponent implements OnInit, AfterViewInit {
     const formModel = this.form.value;
     const username = formModel.username;
     const password = formModel.password;
-    this.auth.login(username, password).subscribe(
-      (result) => {
-        this.router.navigateByUrl(this.returnUrl);
-      },
-      (error) => {
-            if (error.status === 403 && ['Unknown Client', 'OTP not supplied', 'OTP is wrong'].indexOf(error.error) !== -1) {
-                this.showOtp = true;
-                this.clientID = this.cs.getCookie('ClientID');
-            }
-        this.toaster.show('Danger', error.error);
-      }
-    );
+    const otp = formModel.otp;
+    this.auth.login(username, password, otp)
+      // .pipe(first())
+      .subscribe(
+        data => {
+          this.router.navigate([this.returnUrl]);
+        },
+        (error) => {
+          if (error.status === 401 && 'Client is not registered' == error.error.detail) {
+            this.showOtp = true;
+            this.clientId = this.cs.getCookie('client_id');
+          }
+          this.toaster.show('Danger', error.error.details);
+        }
+      )
   }
 }