add ip field to frontend login

angular.json

@@ -47,13 +47,7 @@
                   "maximumError": "8kB"
                 }
               ],
-              "outputHashing": "all",
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ]
+              "outputHashing": "all"
             },
             "development": {
               "optimization": false,

src/app/app.routes.ts

@@ -4,6 +4,7 @@ import { AuthGuard } from './auth.guard';
 import { Login } from './login/login';
 
 export const routes: Routes = [
-    { path: "home", component: Home, canActivate: [AuthGuard] },
-    { path: "login", component: Login }
+    { path: "home", component: Home, canActivate: [AuthGuard], title: "MCSC | Home" },
+    { path: "login", component: Login, title: "MCSC | Login" },
+    { path: "**", redirectTo: "home"},
 ];

src/app/app.ts

@@ -1,19 +1,12 @@
-import { Component, signal, OnInit } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { environment } from '../environments/environment';
-
-const { API_URL } = environment;
 
 @Component({
   selector: 'app-root',
   imports: [RouterOutlet],
   templateUrl: './app.html',
   styleUrl: './app.scss',
 })
-export class App implements OnInit {
-  protected readonly title = signal('mc-server-starter-frontend');
-
-  ngOnInit() {
-    console.log(API_URL);
-  }
+export class App {
+  protected readonly title = signal('MC Server Control');
 }

src/app/auth.service.ts

@@ -1,9 +1,6 @@
 import { inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Router } from '@angular/router';
-import { environment } from '../environments/environment';
-
-const { API_URL } = environment;
 
 @Injectable({ providedIn: 'root' })
 export class AuthService {
@@ -12,8 +9,8 @@ export class AuthService {
   private http: HttpClient = inject(HttpClient)
   private router: Router = inject(Router)
 
-  login(username: string, password: string) {
-    return this.http.post<{ token: string }>(`${API_URL}/login`, { username, password });
+  login(username: string, password: string, url: string) {
+    return this.http.post<{ token: string }>(`${url}/login`, { username, password });
   }
 
   saveToken(token: string) {
@@ -25,7 +22,7 @@ export class AuthService {
   }
 
   isLoggedIn(): boolean {
-    return !!this.getToken();
+    return !!this.getToken() && !!localStorage.getItem("serverIp");
   }
 
   logout() {

src/app/home/home.html

@@ -1,23 +1,34 @@
 <div class="home-container">
-  @if (running !== null) {
-    <div class="status-text" [ngClass]="running ? 'running' : 'stopped'">
-      Server is {{ running ? 'RUNNING' : 'STOPPED' }}
-    </div>
-  } @else {
-    <div class="status-text unknown">
-      Status UNKNOWN
-    </div>
-  }
-
-  @if (loading) {
-    <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
-  } @else if (running !== null) {
-    <button
-      mat-raised-button
-      [color]="running ? 'warn' : 'primary'"
-      (click)="toggleServer()"
-    >
-      {{ running ? 'Stop' : 'Start' }} Server
-    </button>
-  }
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>
+        {{ serverIp }}
+      </mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <div class="control-content">
+        @if (running !== null) {
+        <p class="status-text" [ngClass]="running ? 'running' : 'stopped'">
+          Server is {{ running ? "RUNNING" : "STOPPED" }}
+        </p>
+        } @else {
+        <p class="status-text unknown">Status UNKNOWN</p>
+        } @if (loading) {
+        <div class="overlay">
+          <mat-progress-spinner mode="indeterminate" diameter="80">
+          </mat-progress-spinner>
+        </div>
+        }
+        <button
+          class="control-button"
+          mat-raised-button
+          [color]="running ? 'warn' : 'primary'"
+          (click)="toggleServer()"
+          [disabled]="running === null"
+        >
+          {{ running ? "Stop" : "Start" }} Server
+        </button>
+      </div>
+    </mat-card-content>
+  </mat-card>
 </div>

src/app/home/home.scss

@@ -22,3 +22,26 @@
 .unknown {
   color: #9e9e9e; /* Grey */
 }
+
+.control-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.control-button {
+  height: 4em;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5); // dim effect
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000; // ensure it’s above everything else
+}

src/app/home/home.ts

@@ -22,6 +22,7 @@ import { ServerService } from '../server.service';
 export class Home implements OnInit {
   running: boolean | null = null;
   loading = false;
+  serverIp = localStorage.getItem("serverIp")
 
   private serverService: ServerService = inject(ServerService)
 

src/app/login/login.html

@@ -2,6 +2,11 @@
   <mat-card class="login-card">
     <h2>Login</h2>
     <form (ngSubmit)="login()">
+      <mat-form-field appearance="outline" class="full-width">
+        <mat-label>Server-IP</mat-label>
+        <input matInput [(ngModel)]="serverIp" name="serverIp" required />
+      </mat-form-field>
+
       <mat-form-field appearance="outline" class="full-width">
         <mat-label>Username</mat-label>
         <input matInput [(ngModel)]="username" name="username" required />

src/app/login/login.ts

@@ -27,6 +27,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 export class Login {
   username = '';
   password = '';
+  serverIp = '';
   errorMessage = '';
   loading = false;
 
@@ -37,11 +38,12 @@ export class Login {
     this.errorMessage = '';
     this.loading = true;
 
-    this.authService.login(this.username, this.password).subscribe({
+    this.authService.login(this.username, this.password, this.serverIp).subscribe({
       next: (res) => {
         this.authService.saveToken(res.token)
         this.loading = false;
         this.router.navigateByUrl('/home');
+        localStorage.setItem("serverIp", this.serverIp)
       },
       error: (err) => {
         this.loading = false;

src/app/server.service.ts

@@ -1,9 +1,8 @@
 import { inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { AuthService } from './auth.service';
-import { environment } from '../environments/environment';
 
-const { API_URL } = environment;
+const API_URL = localStorage.getItem("serverIp");
 
 @Injectable({ providedIn: 'root' })
 export class ServerService {