feat(login): added randomized background images

frontend/bec_atlas/src/app/login/login.component.html

@@ -1,4 +1,7 @@
-<div class="background-image"></div>
+<div
+  class="background-image"
+  [ngStyle]="{ 'background-image': 'url(' + backgroundImage + ')' }"
+></div>
 <div class="login-form-flex">
   <mat-card class="mat-card">
     <mat-card-title>

frontend/bec_atlas/src/app/login/login.component.scss

@@ -9,9 +9,9 @@
 }
 
 .background-image {
-  background-image: url("../../assets/psi_background.jpg");
-  filter: blur(4px);
-  -webkit-filter: blur(4px);
+  // background-image: url("../../assets/psi_background.jpg");
+  filter: blur(3px);
+  -webkit-filter: blur(3px);
   height: 100vh;
   background-position: center;
   background-repeat: no-repeat;

frontend/bec_atlas/src/app/login/login.component.ts

@@ -17,10 +17,12 @@ import { AuthService } from '../core/auth.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AppConfig, AppConfigService } from '../app-config.service';
 import { HttpErrorResponse } from '@angular/common/http';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-login',
   imports: [
+    CommonModule,
     MatCardModule,
     MatFormFieldModule,
     MatInputModule,
@@ -38,6 +40,13 @@ export class LoginComponent {
   form: UntypedFormGroup;
   loginMessage = ' ';
   appConfig!: AppConfig;
+  backgroundImage!: string;
+  images: string[] = [
+    'assets/backgrounds/psi_background_north.jpg',
+    'assets/backgrounds/psi_background_south.jpg',
+    'assets/backgrounds/psi_sdsc.jpg',
+    'assets/backgrounds/psi_cable.jpg',
+  ];
 
   constructor(
     private appConfigService: AppConfigService,
@@ -54,6 +63,10 @@ export class LoginComponent {
   }
 
   ngOnInit(): void {
+    // select a random background image
+    this.backgroundImage =
+      this.images[Math.floor(Math.random() * this.images.length)];
+
     if (this.authService.forceReload) {
       window.location.reload();
     }
@@ -67,7 +80,7 @@ export class LoginComponent {
           this.authService.login(val.email, val.password)
         );
         console.log('User is logged in');
-        this.router.navigateByUrl('/dashboard');
+        this.router.navigateByUrl('/overview-grid');
       } catch (error: unknown) {
         switch ((error as HttpErrorResponse).statusText) {
           case 'Unknown Error':