Merge pull request #370 from cobbler/feature/add-profile-page

Cobbler-Frontend: Add user preferences

projects/cobbler-frontend/src/app/app-routing.module.ts

@@ -39,10 +39,16 @@ import { SettingsViewComponent } from './settings/view/settings-view.component';
 import { UnauthorizedComponent } from './unauthorized/unauthorized.component';
 import { SignaturesComponent } from './signatures/signatures.component';
 import { MkloadersComponent } from './actions/mkloaders/mkloaders.component';
+import { PreferencesComponent } from './user/preferences/preferences.component';
 /* eslint-enable max-len */
 
 export const routes: Routes = [
   { path: 'login', component: LogInFormComponent },
+  {
+    path: 'user/:name/preferences',
+    component: PreferencesComponent,
+    canActivate: [AuthGuardService],
+  },
   { path: '', pathMatch: 'full', redirectTo: '/login' },
   { path: 'unauthorized', component: UnauthorizedComponent },
   {

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

@@ -20,27 +20,39 @@
   </div>
   <span class="navbar-spacer"></span>
   <div>
-    <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"
-          >login</mat-icon
-        >
-      </span>
-    }
     @if (islogged) {
-      <span class="align-center pad">
-        <a [routerLink]="['/login']" (click)="logout()">
-          <mat-icon class="align-center" aria-hidden="false" aria-label="Logout"
-            >logout</mat-icon
-          >
-        </a>
-      </span>
+      <button mat-button [matMenuTriggerFor]="profileMenu">
+        <mat-icon>account_circle</mat-icon> {{ authO.username }}
+      </button>
+    } @else {
+      <button mat-icon-button [matMenuTriggerFor]="profileMenu">
+        <mat-icon>account_circle</mat-icon>
+      </button>
     }
+    <mat-menu #profileMenu="matMenu">
+      <button mat-menu-item matTooltip="{{ authO.server }}">
+        <mat-icon>dns</mat-icon>
+        {{ cobbler_server }}
+      </button>
+      <button mat-menu-item>
+        <mat-icon>info</mat-icon>
+        {{ cobbler_version }}
+      </button>
+      @if (islogged) {
+        <button mat-menu-item (click)="redirectToAccountPreferences()">
+          <mat-icon>manage_accounts</mat-icon>
+          Preferences
+        </button>
+        <button mat-menu-item (click)="logout()">
+          <mat-icon aria-hidden="false" aria-label="Login"> logout </mat-icon>
+          Logout
+        </button>
+      } @else {
+        <button mat-menu-item (click)="redirectToLogin()">
+          <mat-icon aria-hidden="false" aria-label="Login"> login </mat-icon>
+          Login
+        </button>
+      }
+    </mat-menu>
   </div>
 </mat-toolbar>

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

@@ -1,9 +1,11 @@
 import { Component, EventEmitter, OnDestroy, Output } from '@angular/core';
 import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Router, RouterLink } from '@angular/router';
-import { CobblerApiService } from 'cobbler-api';
+import { CobblerApiService, ExtendedVersion } from 'cobbler-api';
 import { Subject, Subscription } from 'rxjs';
 import { AuthGuardService } from '../services/auth-guard.service';
 import { UserService } from '../services/user.service';
@@ -23,6 +25,8 @@ import { takeUntil } from 'rxjs/operators';
     MatIconModule,
     CommonModule,
     MatButtonModule,
+    MatMenuModule,
+    MatTooltipModule,
   ],
 })
 export class NavbarComponent implements OnDestroy {
@@ -63,24 +67,25 @@ export class NavbarComponent implements OnDestroy {
           this.islogged = value;
         } else {
           this.islogged = false;
+          this.guard.setBool(false);
         }
       });
 
     // should not call version unless user has authenticated
     // as it could try to hit an invalid / incorrect URL
     if (this.islogged) {
-      cobblerApiService
+      this.cobblerApiService
         .extended_version()
         .pipe(takeUntil(this.ngUnsubscribe))
-        .subscribe(
-          (value) => {
+        .subscribe({
+          next: (value: ExtendedVersion) => {
             this.cobbler_version = value.version;
           },
-          (error) => {
+          error: (error) => {
             this.cobbler_version = 'Error';
             this._snackBar.open(error.message, 'Close');
           },
-        );
+        });
     }
   }
 
@@ -89,6 +94,14 @@ export class NavbarComponent implements OnDestroy {
     this.ngUnsubscribe.complete();
   }
 
+  redirectToLogin() {
+    this.router.navigate(['/login']);
+  }
+
+  redirectToAccountPreferences() {
+    this.router.navigate(['/user', this.authO.username, 'preferences']);
+  }
+
   logout(): void {
     this.authO.changeAuthorizedState(false);
     this.authO.username = 'username';

projects/cobbler-frontend/src/app/user/preferences/preferences.component.html

@@ -0,0 +1,38 @@
+<h1>User Preferences</h1>
+
+<mat-accordion multi="true">
+  <mat-expansion-panel [expanded]="true">
+    <mat-expansion-panel-header>
+      <mat-panel-title>User Information</mat-panel-title>
+    </mat-expansion-panel-header>
+    <p>User information is not retrievable with Cobbler 3.3.x.</p>
+  </mat-expansion-panel>
+  <mat-expansion-panel [expanded]="true">
+    <mat-expansion-panel-header>
+      <mat-panel-title>User Preferences</mat-panel-title>
+    </mat-expansion-panel-header>
+    <form class="preferences-form">
+      <mat-slide-toggle class="pad-bottom" [disabled]="true"
+        >Dark Mode</mat-slide-toggle
+      >
+      <mat-form-field class="full-width">
+        <mat-label>Language</mat-label>
+        <mat-select value="english" [disabled]="true">
+          <mat-option value="english">English</mat-option>
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field class="full-width">
+        <mat-label>Date Format</mat-label>
+        <!-- TODO: Switch to autocomplete once more then one format is supported -->
+        <input matInput value="DD/MM/YYYY" readonly />
+      </mat-form-field>
+      <mat-form-field class="full-width">
+        <mat-label>Number Format (floating point separator)</mat-label>
+        <mat-select value="comma" [disabled]="true">
+          <mat-option value="comma">Comma</mat-option>
+          <mat-option value="dot">Dot</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </form>
+  </mat-expansion-panel>
+</mat-accordion>

projects/cobbler-frontend/src/app/user/preferences/preferences.component.scss

@@ -0,0 +1,13 @@
+.preferences-form {
+  min-width: 150px;
+  max-width: 800px;
+  width: 100%;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.pad-bottom {
+  padding-bottom: 1em;
+}

projects/cobbler-frontend/src/app/user/preferences/preferences.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { PreferencesComponent } from './preferences.component';
+
+describe('PreferencesComponent', () => {
+  let component: PreferencesComponent;
+  let fixture: ComponentFixture<PreferencesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PreferencesComponent, NoopAnimationsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PreferencesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/cobbler-frontend/src/app/user/preferences/preferences.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatOptionModule } from '@angular/material/core';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+
+@Component({
+  selector: 'cobbler-preferences',
+  standalone: true,
+  imports: [
+    MatExpansionModule,
+    FormsModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatOptionModule,
+    MatSlideToggleModule,
+  ],
+  templateUrl: './preferences.component.html',
+  styleUrl: './preferences.component.scss',
+})
+export class PreferencesComponent {}