Add App deployment configuration

README.md

@@ -29,7 +29,7 @@ currently `cobbler-frontend` though. Serving will only work if you have built ou
 
 ## Code scaffolding
 
-Run `ng generate component component-name` to generate a new component. You can also use
+Run `ng generate component component-name --project projectName` to generate a new component. You can also use
 `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
 ## Build

package.json

@@ -24,7 +24,7 @@
     "@angular/platform-browser": "^17.3.12",
     "@angular/platform-browser-dynamic": "^17.3.12",
     "@angular/router": "^17.3.12",
-    "rxjs": "~6.6.6",
+    "rxjs": "^7.4.0",
     "stream": "0.0.2",
     "timers": "^0.1.1",
     "tslib": "^2.6.3",

projects/cobbler-frontend/src/app/login/login.component.html

@@ -6,14 +6,25 @@
   >
     <h1>Cobbler</h1>
 
-    <div class="form-group">
+    <div
+      class="form-group"
+      [className]="
+        (config | async).cobblerUrls.length === 1 ? 'cdk-visually-hidden' : ''
+      "
+    >
       <mat-form-field class="example-full-width" appearance="fill">
         <mat-label>Server</mat-label>
         <input
-          formControlName="server"
           matInput
           placeholder="Enter server URL"
+          formControlName="server"
+          [matAutocomplete]="cobblerUrls"
         />
+        <mat-autocomplete #cobblerUrls="matAutocomplete">
+          @for (item of (config | async).cobblerUrls; track item) {
+            <mat-option [value]="item">{{ item }}</mat-option>
+          }
+        </mat-autocomplete>
         @if (server.touched && server.invalid) {
           <mat-error>&#9888; {{ errMsgServer() }}</mat-error>
         }

projects/cobbler-frontend/src/app/login/login.component.ts

@@ -1,21 +1,29 @@
-import { Component, Inject, OnDestroy, signal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  Inject,
+  OnDestroy,
+  signal,
+} from '@angular/core';
 import {
   AbstractControl,
+  FormBuilder,
   ReactiveFormsModule,
-  UntypedFormControl,
-  UntypedFormGroup,
   ValidationErrors,
   Validators,
 } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { Router } from '@angular/router';
 import { COBBLER_URL, CobblerApiService } from 'cobbler-api';
+import { AppConfigService, AppConfig } from '../services/app-config.service';
 
-import { CommonModule } from '@angular/common';
+import { AsyncPipe, CommonModule } from '@angular/common';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { AuthGuardService } from '../services/auth-guard.service';
 import { UserService } from '../services/user.service';
-import { merge, Subscription } from 'rxjs';
+import { merge, Observable, Subscription } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { MatButtonModule } from '@angular/material/button';
 
@@ -30,26 +38,25 @@ import { MatButtonModule } from '@angular/material/button';
     MatFormFieldModule,
     MatInputModule,
     MatButtonModule,
+    MatAutocompleteModule,
+    AsyncPipe,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LogInFormComponent implements OnDestroy {
   subs = new Subscription();
   errMsgServer = signal('');
   errMsgUser = signal('');
   errMsgPassword = signal('');
 
+  private readonly _formBuilder = inject(FormBuilder);
   server_prefilled: string;
   message = null;
-  login_form = new UntypedFormGroup({
-    server: new UntypedFormControl('', [
-      Validators.required,
-      LogInFormComponent.urlValidator,
-    ]),
-    username: new UntypedFormControl('', [
-      Validators.required,
-      Validators.minLength(2),
-    ]),
-    password: new UntypedFormControl('', Validators.required),
+  config: Observable<AppConfig>;
+  login_form = this._formBuilder.group({
+    server: ['', [Validators.required, LogInFormComponent.urlValidator]],
+    username: ['', [Validators.required, Validators.minLength(2)]],
+    password: ['', Validators.required],
   });
 
   private static urlValidator({
@@ -69,22 +76,26 @@ export class LogInFormComponent implements OnDestroy {
     private guard: AuthGuardService,
     @Inject(COBBLER_URL) url: URL,
     private cobblerApiService: CobblerApiService,
+    private configService: AppConfigService,
   ) {
+    this.configService.loadConfig();
+    this.config = configService.AppConfig$;
+    // The injection token has a default value and as such is always set.
     this.server_prefilled = url.toString();
-    this.login_form.get('server').setValue(this.server_prefilled);
+    this.login_form.controls.server.setValue(this.server_prefilled);
 
     this.subs.add(
       merge(
-        this.login_form.controls['server'].statusChanges,
-        this.login_form.controls['server'].valueChanges,
+        this.login_form.controls.server.statusChanges,
+        this.login_form.controls.server.valueChanges,
       )
         .pipe(distinctUntilChanged())
         .subscribe(() => this.updateErrServer()),
     );
     this.subs.add(
       merge(
-        this.login_form.controls['username'].statusChanges,
-        this.login_form.controls['username'].valueChanges,
+        this.login_form.controls.username.statusChanges,
+        this.login_form.controls.username.valueChanges,
       )
         .pipe(distinctUntilChanged())
         .subscribe(() => {
@@ -93,8 +104,8 @@ export class LogInFormComponent implements OnDestroy {
     );
     this.subs.add(
       merge(
-        this.login_form.controls['password'].statusChanges,
-        this.login_form.controls['password'].valueChanges,
+        this.login_form.controls.password.statusChanges,
+        this.login_form.controls.password.valueChanges,
       )
         .pipe(distinctUntilChanged())
         .subscribe(() => this.updateErrPassword()),
@@ -126,8 +137,8 @@ export class LogInFormComponent implements OnDestroy {
     this.cobblerApiService.reconfigureService(new URL(formData.server));
 
     this.subs.add(
-      this.cobblerApiService.login(user, pass).subscribe(
-        (data) => {
+      this.cobblerApiService.login(user, pass).subscribe({
+        next: (data) => {
           this.authO.changeAuthorizedState(true);
           // sets username in session storage
           this.authO.username = user;
@@ -137,10 +148,10 @@ export class LogInFormComponent implements OnDestroy {
           this.guard.setBool(true);
           this.router.navigate(['/manage']);
         },
-        () =>
+        error: () =>
           (this.message =
             'Server, Username or Password did not Validate. Please try again.'),
-      ),
+      }),
     );
   }
 

projects/cobbler-frontend/src/app/navbar/navbar.component.html

@@ -20,7 +20,12 @@
   </div>
   <span class="navbar-spacer"></span>
   <div>
-    <span class="align-center pad">Version: {{ cobbler_version }}</span>
+    <div style="display: inline-block; line-height: normal" class="pad">
+      <span style="text-align: left; font-size: 0.75em" class="align-center">
+        Server: {{ cobbler_server }}<br />
+        Version: {{ cobbler_version }}
+      </span>
+    </div>
     @if (!islogged) {
       <span class="user_logged align-center pad">
         <mat-icon class="align-center" aria-hidden="false" aria-label="Login"