feat: integrate Google OAuth for user authentication and update login UI

Web/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { Router, RouterOutlet } from '@angular/router';
 import { OAuthService } from 'angular-oauth2-oidc';
 
 @Component({
@@ -12,4 +12,16 @@ import { OAuthService } from 'angular-oauth2-oidc';
 })
 export class AppComponent {
   title = 'Digitálny asistent PAS';
+  constructor(private readonly as: OAuthService, private readonly router: Router) {
+    this.as.configure({
+      issuer: 'https://accounts.google.com',
+      redirectUri: window.location.origin + '/login',
+      clientId: '1000025801082-09ikmt61a9c9vbdjhpdab9b0ui3vdnij.apps.googleusercontent.com',
+      dummyClientSecret: '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',
+      scope: 'openid profile email',
+      responseType: 'code',
+      strictDiscoveryDocumentValidation: false,
+      timeoutFactor: 0.01,
+    });
+  }
 }

Web/src/app/app.config.ts

@@ -38,6 +38,7 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 // code view
 import { provideHighlightOptions } from 'ngx-highlightjs';
 import 'highlight.js/styles/atom-one-dark.min.css';
+import { OAuthModule, provideOAuthClient } from 'angular-oauth2-oidc';
 
 export function HttpLoaderFactory(http: HttpClient): any {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -66,6 +67,13 @@ export const appConfig: ApplicationConfig = {
       withComponentInputBinding()
     ),
     provideHttpClient(withInterceptorsFromDi()),
+    provideOAuthClient({
+      resourceServer: {
+        allowedUrls: ['http://localhost:5000', 'https://localhost:4200', 'https://centrum.lesko.me', 'https://beta.e-dias.sk/'],
+        sendAccessToken: true,
+      },
+    }),
+
     provideClientHydration(),
     provideAnimationsAsync(),
     importProvidersFrom(

Web/src/app/pages/authentication/side-login/side-login.component.html

@@ -17,12 +17,12 @@
             <span class="f-s-14 d-block f-s-14 m-t-8">Váš uživateľský prístup</span>
 
             <div class="row m-t-24 align-items-center">
-              <button mat-stroked-button class="w-100">
+              <a mat-stroked-button class="w-100" (click)="googleLogin()">
                 <div class="d-flex align-items-center">
                   <img src="/assets/images/svgs/google-icon.svg" alt="google" width="16" class="m-r-8" />
                   Prihlásiť sa pomocou Google
                 </div>
-              </button>
+              </a>
               <!-- <div class="col-12 col-sm-6">
                 <button mat-stroked-button class="w-100 d-flex align-items-center">
                   <div class="d-flex align-items-center">

Web/src/app/pages/authentication/side-login/side-login.component.ts

@@ -4,16 +4,17 @@ import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule }
 import { Router, RouterModule } from '@angular/router';
 import { MaterialModule } from '../../../material.module';
 import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
+import { OAuthService } from 'angular-oauth2-oidc';
 
 @Component({
-    selector: 'app-side-login',
+  selector: 'app-side-login',
-    imports: [RouterModule, MaterialModule, FormsModule, ReactiveFormsModule, BrandingComponent],
+  imports: [RouterModule, MaterialModule, FormsModule, ReactiveFormsModule, BrandingComponent],
-    templateUrl: './side-login.component.html'
+  templateUrl: './side-login.component.html'
 })
 export class AppSideLoginComponent {
   options: any;
 
-  constructor(private settings: CoreService, private router: Router) {
+  constructor(private settings: CoreService, private router: Router, private readonly as: OAuthService) {
     this.options = this.settings.getOptions();
   }
 
@@ -26,6 +27,15 @@ export class AppSideLoginComponent {
     return this.form.controls;
   }
 
+  googleLogin() {
+    console.warn('Google login initiated');
+    this.as.loadDiscoveryDocumentAndLogin()
+      .then(_ =>{}
+        // this.as.initLoginFlowInPopup()
+      );
+  }
+
+
   submit() {
     // console.log(this.form.value);
     this.router.navigate(['/dashboards/dashboard1']);

Web/src/app/pages/front-pages/homepage-details/homepage-details.component.ts

@@ -13,7 +13,6 @@ import {
 } from '../front-pagesData';
 import { CommonModule } from '@angular/common';
 import { MediaMatcher } from '@angular/cdk/layout';
-import { ImageSliderComponent } from '../image-slider/image-slider.component';
 import { FooterComponent } from '../footer/footer.component';
 import { MatDialog } from '@angular/material/dialog';
 import { TemplateVideoComponent } from '../template-video/template-video.component';
@@ -26,7 +25,6 @@ import { Router, RouterModule } from '@angular/router';
     MaterialModule,
     IconModule,
     CommonModule,
-    ImageSliderComponent,
     FooterComponent,
     RouterModule
   ],

Web/src/index.html

@@ -3,6 +3,7 @@
 
 <head>
   <meta charset="utf-8">
+  <title>Digitálny asistent PAS</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">