feat: added backgroundimagesource interface

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

@@ -1,11 +1,20 @@
 <div
   class="background-image"
-  [ngStyle]="{ 'background-image': 'url(' + backgroundImage + ')' }"
+  [ngStyle]="{
+    'background-image': 'url(' + backgroundImage.backgroundImage + ')',
+    'filter': 'blur(' + backgroundImage.blur + 'px)',
+    '-webkit-filter': 'blur(' + backgroundImage.blur + 'px)',
+  }"
 ></div>
 <div class="login-form-flex">
   <mat-card class="mat-card">
     <mat-card-title>
-      <!-- <img src="assets/scilog_logo.png" alt="BEC" width="120" height="120"> -->
+      <img
+        src="assets/BEC-Atlas-full-conv-LC.png"
+        alt="BEC"
+        width="80"
+        height="80"
+      />
     </mat-card-title>
     <mat-card-content class="content-container">
       <mat-tab-group

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

@@ -9,9 +9,6 @@
 }
 
 .background-image {
-  // background-image: url("../../assets/psi_background.jpg");
-  filter: blur(3px);
-  -webkit-filter: blur(3px);
   height: 100vh;
   background-position: center;
   background-repeat: no-repeat;
@@ -34,3 +31,10 @@
   margin: 0px;
   overflow: hidden;
 }
+
+mat-card-title {
+  display: flex;
+  justify-content: center; /* Horizontally center the image */
+  align-items: center; /* Vertically center the image */
+  height: 100%; /* Ensure it fills the height of the title area */
+}

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

@@ -19,6 +19,11 @@ import { AppConfig, AppConfigService } from '../app-config.service';
 import { HttpErrorResponse } from '@angular/common/http';
 import { CommonModule } from '@angular/common';
 
+interface BackgroundImageSource {
+  backgroundImage: string;
+  blur: number;
+}
+
 @Component({
   selector: 'app-login',
   imports: [
@@ -40,12 +45,34 @@ 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',
+  backgroundImage!: BackgroundImageSource;
+  images: BackgroundImageSource[] = [
+    {
+      backgroundImage: 'assets/backgrounds/psi_background_north.jpg',
+      blur: 3,
+    },
+    {
+      backgroundImage: 'assets/backgrounds/psi_background_south.jpg',
+      blur: 3,
+    },
+    {
+      backgroundImage: 'assets/backgrounds/psi_sdsc.jpg',
+      blur: 0,
+    },
+    {
+      backgroundImage: 'assets/backgrounds/psi_cable.jpg',
+      blur: 0,
+    },
+    {
+      backgroundImage:
+        'assets/backgrounds/national-cancer-institute-L7en7Lb-Ovc-unsplash.jpg',
+      blur: 0,
+    },
+    {
+      backgroundImage:
+        'assets/backgrounds/ramon-salinero-vEE00Hx5d0Q-unsplash.jpg',
+      blur: 0,
+    },
   ];
 
   constructor(
@@ -80,7 +107,7 @@ export class LoginComponent {
           this.authService.login(val.email, val.password)
         );
         console.log('User is logged in');
-        this.router.navigateByUrl('/overview-grid');
+        this.router.navigateByUrl('/dashboard');
       } catch (error: unknown) {
         switch ((error as HttpErrorResponse).statusText) {
           case 'Unknown Error':