MainView refactor

Frontend/src/app/views/login/login-view.component.ts

@@ -0,0 +1,109 @@
+import { Component, NgZone, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import jwt_decode from "jwt-decode";
+import { AuthService } from 'src/app/auth/auth.service';
+import { User } from 'src/app/models/user.model';
+import { NotificationsService } from 'src/app/services/notifications.service';
+import { environment } from 'src/environments/environment';
+import { MatCardModule } from '@angular/material/card';
+import { NgIf } from '@angular/common';
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+
+@Component({
+    selector: 'diunabi-view-page',
+    templateUrl: './login-view.component.html',
+    styleUrls: ['./login-view.component.scss'],
+    standalone: true,
+    imports: [NgIf, MatCardModule, MatBottomSheetModule]
+})
+
+export class LoginViewComponent implements OnInit {
+  constructor(
+    private router$: Router,
+    private auth$: AuthService,
+    private ngZone$: NgZone,
+    private notifications$: NotificationsService
+  ) { }
+
+  loading = false;
+
+  ngOnInit(): void {
+    
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    window.onGoogleLibraryLoad = () => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      
+      google.accounts.id.initialize({
+        client_id: environment.google.clientId,
+        callback: this.handleCredentialResponse.bind(this),
+        auto_select: true,
+        cancel_on_tap_outside: true
+      });
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      
+      google.accounts.id.renderButton(
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        document.getElementById("google-button"),
+        { theme: "outline", size: "large", width: "100%" }
+      );
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      google.accounts.id.prompt();
+    };
+    
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async handleCredentialResponse(response: any) {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any      
+      const responsePayload: any = jwt_decode(response.credential);
+      
+      this.auth$.user = new User({
+        googleCredentials: response.credential,
+        userName: `${responsePayload.given_name} ${responsePayload.family_name}`,
+        email: responsePayload.email,
+        avatar: responsePayload.picture
+      });      
+      this.ngZone$.run(() => {
+        this.loading = true;
+      });
+      this.auth$.googleCredential = response.credential;
+      await this.auth$.getAPIToken();
+      this.ngZone$.run(() => {
+        this.router$.navigate(['/app']);
+      });
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (e: any) {
+      console.error('handleCredentialResponse', e);
+      this.ngZone$.run(() => {
+        this.loading = false;
+      });
+      if (e.status === 401) {
+        this.ngZone$.run(() => {
+          this.notifications$.add({
+            text: "User not exists in DiunaBI database.",
+            btn: "OK",
+            duration: 15000
+          });
+        });
+      } else {
+        this.ngZone$.run(() => {
+          this.notifications$.add({
+            text: "DiunaBI server not responded.",
+            btn: "OK",
+            duration: 15000
+          });
+        });
+      }
+    } finally {
+      this.loading = false;
+    }
+    
+  }
+}
+