integrasi login

src/app/app.routing.ts

@@ -50,23 +50,23 @@ const appRoutes: Routes = [
       { path: 'changelog', component: ChangelogComponent, canActivate: [AuthGuard] },
       {
         path: 'monitoring', loadChildren: () => import('../app/content/hemat-app/monitoring/monitoring.module').then(m => m.MonitoringModule)
-        // , canActivate: [AuthGuard]
+        , canActivate: [AuthGuard]
       },
       {
         path: 'device', loadChildren: () => import('../app/content/hemat-app/device/device.module').then(m => m.DeviceModule)
-        // , canActivate: [AuthGuard]
+        , canActivate: [AuthGuard]
       },
       {
         path: 'cost-management', loadChildren: () => import('../app/content/hemat-app/cost-management/cost-management.module').then(m => m.CostManagementModule)
-        // , canActivate: [AuthGuard]
+        , canActivate: [AuthGuard]
       },
       {
         path: 'user-access', loadChildren: () => import('../app/content/hemat-app/user-access/user-access.module').then(m => m.UserAccessModule)
-        // , canActivate: [AuthGuard]
+        , canActivate: [AuthGuard]
       },
       {
         path: 'master', loadChildren: () => import('../app/content/hemat-app/master/master.module').then(m => m.MasterModule)
-        // , canActivate: [AuthGuard]
+        , canActivate: [AuthGuard]
       },
       {
         path: 'dashboard', loadChildren: () => import('../app/content/dashboard/dashboard.module').then(m => m.DashboardModule)

src/app/content/hemat-app/service/monitoring-api.service.ts

@@ -8,6 +8,15 @@ import { Observable } from "rxjs";
 export class BuildingService {
   constructor(private http: HttpClient) {}
 
+  postLogin(data: any): Observable<any> {
+    const url = `https://kapi.absys.ninja/hemat/users/login`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+    });
+    return this.http.post<any>(url, data, { headers });
+  }
+
   getBuildingData(page: number = 1, limit: number = 10): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/building?page=${page}&limit=${limit}`;
     // const headers = new HttpHeaders().set('Content-Type', 'application/json');

src/app/login/login.component.html

@@ -1,4 +1,4 @@
-<div class="app-content content" *ngIf="isPageLoaded">
+<div class="app-content content">
   <div class="content-overlay"></div>
   <div class="content-wrapper">
     <div class="content-header row"></div>

src/app/login/login.component.ts

@@ -3,6 +3,8 @@ import { Router, ActivatedRoute } from "@angular/router";
 import { FormBuilder, FormGroup, Validators } from "@angular/forms";
 import { AuthService } from "../_services/auth.service";
 import { AlertService } from "../_services/alert.service";
+import { HttpClient } from "@angular/common/http";
+import { BuildingService } from "../content/hemat-app/service/monitoring-api.service";
 
 @Component({
   templateUrl: "login.component.html",
@@ -18,10 +20,10 @@ export class LoginComponent implements OnInit {
   constructor(
     private formBuilder: FormBuilder,
     private route: ActivatedRoute,
-    private router: Router,
-    private alertService: AlertService,
     public authService: AuthService,
-    private renderer: Renderer2
+    private renderer: Renderer2,
+    private router: Router,
+    private monitoringApiService: BuildingService
   ) {
     this.route.queryParams.subscribe((params) => {
       this.returnUrl = params["returnUrl"];
@@ -29,23 +31,30 @@ export class LoginComponent implements OnInit {
   }
 
   ngOnInit() {
+    // this.loginForm = this.formBuilder.group({
+    //   email: ["john@pixinvent.com", Validators.required],
+    //   password: ["password@123", Validators.required],
+    //   rememberMe: false,
+    // });
     this.loginForm = this.formBuilder.group({
-      email: ["john@pixinvent.com", Validators.required],
+      email: ["user1", Validators.required],
-      password: ["password@123", Validators.required],
+      password: ["password", Validators.required],
       rememberMe: false,
     });
     // Remember Me
-    if (localStorage.getItem("remember")) {
+    // console.log(localStorage.getItem("remember"));
-      this.renderer.removeClass(document.body, "bg-full-screen-image");
+    
-      localStorage.removeItem("currentLayoutStyle");
+    // if (localStorage.getItem("remember")) {
-      this.router.navigate(["/monitoring"]);
+    //   this.renderer.removeClass(document.body, "bg-full-screen-image");
-    } else if (localStorage.getItem("currentUser")) {
+    //   localStorage.removeItem("currentLayoutStyle");
-      // Force logout on login if not remember me
+    //   this.router.navigate(["/monitoring"]);
-      this.authService.doLogout();
+    // } else if (localStorage.getItem("currentUser")) {
-      this.isPageLoaded = true;
+    //   // Force logout on login if not remember me
-    } else {
+    //   this.authService.doLogout();
-      this.isPageLoaded = true;
+    //   this.isPageLoaded = true;
-    }
+    // } else {
+    //   this.isPageLoaded = true;
+    // }
   }
 
   // convenience getter for easy access to form fields
@@ -53,43 +62,75 @@ export class LoginComponent implements OnInit {
     return this.loginForm.controls;
   }
 
+  // tryLogin() {
+  //   this.submitted = true;
+
+  //   // stop here if form is invalid
+  //   if (this.loginForm.invalid) {
+  //     return;
+  //   }
+  //   const value = {
+  //     email: this.f.email.value,
+  //     password: this.f.password.value,
+  //   };
+
+  //   this.authService.doLogin(value).then(
+  //     (res) => {
+  //       console.log(res, 'res login');
+        
+  //       if (
+  //         this.loginForm.controls["rememberMe"] &&
+  //         this.loginForm.controls["rememberMe"].value
+  //       ) {
+  //         localStorage.setItem("remember", "true");
+  //       } else {
+  //         localStorage.removeItem("remember");
+  //       }
+  //       this.setUserInStorage(res);
+  //       localStorage.removeItem("currentLayoutStyle");
+  //       let returnUrl = "/monitoring";
+  //       if (this.returnUrl) {
+  //         returnUrl = this.returnUrl;
+  //       }
+  //       this.router.navigate([returnUrl]);
+  //     },
+  //     (err) => {
+  //       this.submitted = false;
+  //       this.alertService.error(err.message);
+  //     }
+  //   );
+  // }
+
   tryLogin() {
     this.submitted = true;
 
-    // stop here if form is invalid
     if (this.loginForm.invalid) {
       return;
     }
-    const value = {
+
-      email: this.f.email.value,
+    const loginData = {
-      password: this.f.password.value,
+      username: this.loginForm.value.email,
+      password: this.loginForm.value.password
     };
 
-    this.authService.doLogin(value).then(
+    this.monitoringApiService.postLogin(loginData)
-      (res) => {
+      .subscribe(
-        console.log(res, 'res login');
+        (response: any) => {
-        
+          console.log('Login successful:', response);
-        if (
+          localStorage.setItem('access_token', response.access_token);
-          this.loginForm.controls["rememberMe"] &&
+          
-          this.loginForm.controls["rememberMe"].value
+          // Store the user profile information
-        ) {
+          const userProfile = {
-          localStorage.setItem("remember", "true");
+            displayName: this.loginForm.value.email,
-        } else {
+          };
-          localStorage.removeItem("remember");
+          localStorage.setItem('currentUser', JSON.stringify(userProfile));
+
+          this.router.navigate(['/monitoring']);
+        },
+        error => {
+          console.error('Login failed:', error);
         }
-        this.setUserInStorage(res);
+      );
-        localStorage.removeItem("currentLayoutStyle");
-        let returnUrl = "/monitoring";
-        if (this.returnUrl) {
-          returnUrl = this.returnUrl;
-        }
-        this.router.navigate([returnUrl]);
-      },
-      (err) => {
-        this.submitted = false;
-        this.alertService.error(err.message);
-      }
-    );
   }
   addCheckbox(event) {
     const toggle = document.getElementById("icheckbox");