integration with backend for login success.

src/app/app.component.ts

 import { mainMenuItems } from './main-menu-items';
 import { AuthService } from './service/auth.service';
 import { MenuService } from './service/menu.service';
+import {apiv1LoginResponse} from './models/api-v1-login-response';
 
 @Component({
   selector: 'app-root',
 })
 export class AppComponent implements OnInit , OnDestroy {
   title = 'SFM broker';
-  public login :boolean  = false;
+  public login  = false;
   public items: any[] = mainMenuItems;
   kendokaAvatar = "./assets/img/avatar.png"
-  @ViewChild('loanEditComponent', {static: true}) loanEdit: LoanEditComponent;
+      @ViewChild('loanEditComponent', {static: true}) loanEdit: LoanEditComponent;
 
-  private loginSub: Subscription;
-  
-  constructor(private menuService: MenuService, private authService: AuthService){
-  }
+      private loginSub: Subscription;
 
-  //check menuItem has fontawesome
-  public menuItemHasFontawesome (item: any) : boolean {
-    return item.hasOwnProperty('fa');
-  }
+        constructor(private menuService: MenuService, private authService: AuthService){
+        }
 
-  //menuItem clicked
-  public onSelect({ item }): void {
-    if (!item.items) {
-      this.menuService.itemClicked.emit(item);
-      //console.log("emit on select : " + item.text);
-      if ( item.popup ==  "loanEdit"){
-        this.loanEdit.somedata = "" + Math.random() + "changed";
+        // check menuItem has fontawesome
+      public menuItemHasFontawesome (item: any) : boolean {
+          return item.hasOwnProperty('fa');
+        }
+
+        // menuItem clicked
+      public onSelect({ item }): void {
+          if (!item.items) {
+          this.menuService.itemClicked.emit(item);
+          //console.log("emit on select : " + item.text);
+          if ( item.popup ==  "loanEdit"){
+            this.loanEdit.somedata = "" + Math.random() + "changed";
         this.loanEdit.open('dialog');
       }
 
-      if (item.text == "Logout"){
+      if (item.text == 'Logout'){
         this.authService.logout();
-        this.login = false; 
-        //this.authService.loginSuccess.emit("loggedout");
+        this.login = false;
+        // this.authService.loginSuccess.emit("loggedout");
       }
     }
-  }  
+  }
 
+  // tslint:disable-next-line:typedef
   ngOnInit (){
     this.loginSub = this.authService.loginSuccess.subscribe(
-      (success: boolean) => {
-          this.login = success;
+      (rsp: apiv1LoginResponse) => {
+          this.login = rsp.login;
       }
-    )
+    );
   }
 
+  // tslint:disable-next-line:typedef
   ngOnDestroy (){
     this.loginSub.unsubscribe();
   }

src/app/app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule} from '@angular/common/http';
 //Kendo
 import { MenuModule, ContextMenuModule } from '@progress/kendo-angular-menu';
 import { IconsModule } from '@progress/kendo-angular-icons';
 
 
 
-
-
-
-
-
-
-
 @NgModule({
   declarations: [
     AppComponent,
     BrowserModule,
     FormsModule,
     CommonModule,
-    ReactiveFormsModule,    
+    HttpClientModule,
+    ReactiveFormsModule,
     AppRoutingModule,
     MenuModule,
     ContextMenuModule,

src/app/auth/auth.component.ts

 import { NotificationService } from '@progress/kendo-angular-notification';
 import { Subscription } from 'rxjs';
 import { AuthService } from '../service/auth.service';
-
+import {apiv1LoginResponse} from '../models/api-v1-login-response';
 
 @Component({
   selector: 'app-auth',
   styleUrls: ['./auth.component.scss']
 })
 export class AuthComponent implements OnInit, OnDestroy{
-  loading : boolean ; // a state that user is currently loading loggin
-  loginSub: Subscription; 
+  loading: boolean ; // a state that user is currently loading loggin
+  loginSub: Subscription;
 
   public userForm: FormGroup = new FormGroup({
-    password: new FormControl('password', [Validators.minLength(3), Validators.maxLength(20)]),
-    email: new FormControl('email@email.com', Validators.email)
+    password: new FormControl('pass', [Validators.minLength(3), Validators.maxLength(20)]),
+    email: new FormControl('admin@supercredit.com.au', Validators.email)
   });
 
-  constructor(private authService: AuthService, private rounter: Router, private notificationService: NotificationService) { }
+  constructor(private authService: AuthService, private router: Router, private notificationService: NotificationService) { }
 
   ngOnInit(): void {
     this.loginSub = this.authService.loginSuccess.subscribe(
-      (ok:boolean) =>{this.onLogin(ok)}
+        responseData => {
+          console.log(responseData);
+          this.onLogin(responseData);
+        }
     );
   }
 
     this.loginSub.unsubscribe();
   }
 
+  // tslint:disable-next-line:typedef
   submitForm() {
     console.log(this.userForm);
-    this.loading = true; 
+    this.loading = true;
     this.authService.login(this.userForm.value.email, this.userForm.value.password);
-
   }
 
-  public onLogin(ok:boolean) {
-    this.loading = false
-    console.log (" found login success " + ok );
-    if (ok)
-        this.rounter.navigate(["/dashboard"]);
-     else
+  public onLogin(rsp: apiv1LoginResponse) {
+    this.loading = false;
+    console.log ('found login ' , rsp );
+    if (rsp.login) {
+        this.router.navigate(['/dashboard']);
+    }
+    else {
        this.show();
+    }
   }
 
   public show(): void {

src/app/models/api-v1-login-response.ts

+
+
+// tslint:disable-next-line:class-name
+export class  apiv1LoginResponse {
+  id?: string;
+  login: boolean;
+
+}

src/app/service/auth.service.ts

 import { EventEmitter, Injectable } from '@angular/core';
 import { NotificationService } from '@progress/kendo-angular-notification';
+import {HttpClient} from '@angular/common/http';
+import {apiv1LoginResponse} from '../models/api-v1-login-response';
 
 @Injectable()
 export class AuthService {
-    private loggedIn: boolean  = false; 
-    loginSuccess = new EventEmitter <any>();
-    
+    private loggedIn  = false;
+    loginSuccess = new EventEmitter <apiv1LoginResponse>();
 
+    constructor( private http: HttpClient) {
+    }
 
+  // tslint:disable-next-line:typedef
     isAuthenticated()  {
       return this.loggedIn;
     }
 
+  // tslint:disable-next-line:typedef
     login(email: string, password: string) {
-      
-      const promise = new Promise(
-        (resolve, reject) => {
-          setTimeout(() => {
-            resolve(this.loggedIn);
-            console.log("email = " +  email  + "  password = " + password);
-            var result = (( email == "email@email.com" ) && (password == "password"));
-            this.loggedIn = result;
-            this.loginSuccess.emit(result);
-          }, 800);
+
+      this.http.post<apiv1LoginResponse>('http://svr2021:8080/api/v1/login', {u: email, p: password}).subscribe(
+        responseData => {
+            this.loggedIn = responseData.login;
+            this.loginSuccess.emit(responseData);
+         },
+        error => {
+          const fail = {
+            login: false
+          };
+          console.log(error);
+          this.loginSuccess.emit(fail);
         }
+
       );
-      return promise;
+
+      // const promise = new Promise(
+      //   (resolve, reject) => {
+      //     setTimeout(() => {
+      //       resolve(this.loggedIn);
+      //       console.log('email = ' +  email  + '  password = ' + password);
+      //       const result = (( email === 'email@email.com' ) && (password === 'password'));
+      //       this.loggedIn = result;
+      //       this.loginSuccess.emit(result);
+      //     }, 800);
+      //   }
+      // );
+      // return promise;
 
     }
 
+  // tslint:disable-next-line:typedef
     logout() {
         this.loggedIn = false;
     }
 
 
 
-}
+}

src/app/trans-details/trans-details.component.html

 <div class='transaction-details'>
     <trans-tails [item] = "item"> </trans-tails>
     <hr> 
-    <p>Address: {{item.address}} </p>
+    <!-- <p>Address: {{item.address}} 
     <p>bdm: {{item.bdm}}</p>
-    <p>brokers: {{item.broker}}</p>
+    <p>brokers: {{item.brokers}}</p>
     <p>budget: {{item.budget}}</p>
     <p>clients: {{item.clients}}</p>
     <p>country: {{item.country}}</p>
     <p>settlement_date: {{item.settlement_date | date: "yyyy-MM-dd"}}</p>
     <p>status: {{item.status}}</p>
     <p>submittsion_date: {{item.submittsion_date | date: "yyyy-MMM-dd"}}</p>
-    <p>target: {{item.target}}</p>
+    <p>target: {{item.target}}</p> -->
 
+    <!-- <img
+    src="https://www.flyingsolo.com.au/wp-content/uploads/2021/01/Untitled-design-1-3-450x270.jpg">
+    <iframe src="http://biukop.com/" width=800 height=600 title="fuck google"></iframe> -->
 
 </div>

src/app/trans-details/trans-tails/trans-tails.component.html

     scrollable="none" 
     [navigable]="true" 
     kendoGridFocusable>
-    <kendo-grid-column field="clients" title="Product ID" width="120">
+    <kendo-grid-column field="clients" title="clients" width="120">
     </kendo-grid-column>
-    <kendo-grid-column field="brokers" title="Product Name">
+    <kendo-grid-column field="brokers" title="brokers">
     </kendo-grid-column>
-    <kendo-grid-column field="bdm" title="Unit Price" format="{0:c}">
+    <kendo-grid-column field="bdm" title="BDM/Referals" format="{0:c}">
     </kendo-grid-column>
 </kendo-grid>