Home: Various Improvements

src/app/app.config.ts

@@ -3,12 +3,14 @@ import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
-    provideHttpClient()
+    provideHttpClient(),
+    provideHttpClientTesting()
   ]
 };

src/app/app.spec.ts

@@ -13,11 +13,4 @@ describe('App', () => {
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(App);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, mc-server-starter-frontend');
-  });
 });

src/app/auth.service.spec.ts

@@ -1,12 +1,16 @@
 import { TestBed } from '@angular/core/testing';
 
 import { AuthService } from './auth.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('AuthService', () => {
   let service: AuthService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [AuthService],
+    });
     service = TestBed.inject(AuthService);
   });
 

src/app/auth.service.ts

@@ -27,6 +27,7 @@ export class AuthService {
 
   logout() {
     localStorage.removeItem(this.tokenKey);
+    localStorage.removeItem('serverIp');
     this.router.navigate(['/login']);
   }
 }

src/app/home/home.html

@@ -1,3 +1,13 @@
+<div class="refresh-btn">
+  <button mat-fab color="primary" (click)="onRefresh()">
+    <mat-icon>refresh</mat-icon>
+  </button>
+</div>
+<div class="logout-btn">
+  <button mat-fab color="primary" (click)="onLogout()">
+    <p>Logout</p>
+  </button>
+</div>
 <div class="home-container">
   <mat-card>
     <mat-card-header>
@@ -28,6 +38,9 @@
         >
           {{ running ? "Stop" : "Start" }} Server
         </button>
+        @if (error) {
+        <p style="color: red;">{{ error }}</p>
+        }
       </div>
     </mat-card-content>
   </mat-card>

src/app/home/home.scss

@@ -45,3 +45,15 @@
   align-items: center;
   z-index: 1000; // ensure it’s above everything else
 }
+
+.refresh-btn {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+
+.logout-btn {
+  position: absolute;
+  top: 10px;
+  left: 80px;
+}

src/app/home/home.spec.ts

@@ -1,14 +1,15 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { Home } from './home';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('Home', () => {
   let component: Home;
   let fixture: ComponentFixture<Home>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [Home]
+      imports: [Home, HttpClientTestingModule]
     })
     .compileComponents();
 

src/app/home/home.ts

@@ -5,6 +5,8 @@ import { MatCardModule } from '@angular/material/card';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatChipsModule } from '@angular/material/chips';
 import { ServerService } from '../server.service';
+import { MatIconModule } from '@angular/material/icon';
+import { AuthService } from '../auth.service';
 
 @Component({
   selector: 'app-home',
@@ -14,24 +16,28 @@ import { ServerService } from '../server.service';
     MatButtonModule,
     MatCardModule,
     MatProgressSpinnerModule,
-    MatChipsModule
+    MatChipsModule,
+    MatIconModule,
   ],
   templateUrl: './home.html',
-  styleUrls: ['./home.scss']
+  styleUrls: ['./home.scss'],
 })
 export class Home implements OnInit {
   running: boolean | null = null;
   loading = false;
-  serverIp = localStorage.getItem("serverIp")
+  serverIp = localStorage.getItem('serverIp');
+  error = '';
 
-  private serverService: ServerService = inject(ServerService)
+  private serverService: ServerService = inject(ServerService);
+  private authService: AuthService = inject(AuthService);
 
   ngOnInit() {
+    this.loading = true;
     this.fetchStatus();
+    setInterval(() => this.fetchStatus(), 5000);
   }
 
   fetchStatus() {
-    this.loading = true;
     this.serverService.getStatus().subscribe({
       next: (res) => {
         this.running = res.running;
@@ -40,7 +46,8 @@ export class Home implements OnInit {
       error: () => {
         this.running = null;
         this.loading = false;
-      }
+        this.error = 'Error fetching status, try reloading page';
+      },
     });
   }
 
@@ -54,7 +61,15 @@ export class Home implements OnInit {
 
     action$.subscribe({
       next: () => this.fetchStatus(),
-      error: () => this.loading = false
+      error: () => (this.loading = false),
     });
   }
+
+  onRefresh() {
+    this.ngOnInit();
+  }
+
+  onLogout() {
+    this.authService.logout();
+  }
 }

src/app/login/login.spec.ts

@@ -1,14 +1,15 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { Login } from './login';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('Login', () => {
   let component: Login;
   let fixture: ComponentFixture<Login>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [Login]
+      imports: [Login, HttpClientTestingModule]
     })
     .compileComponents();
 

src/app/server.service.spec.ts

@@ -1,12 +1,15 @@
 import { TestBed } from '@angular/core/testing';
 
 import { ServerService } from './server.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('ServerService', () => {
   let service: ServerService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+    });
     service = TestBed.inject(ServerService);
   });