WIP profile page

src/app/app-routing.module.ts

@@ -12,10 +12,12 @@ import { LendingStationsComponent } from './pages/tables/lending-stations/lendin
 import { ParticipantsComponent } from './pages/tables/participants/participants.component';
 import { TimeFramesComponent } from './pages/tables/time-frames/time-frames.component';
 import {AuthGuard} from './helper/auth.guard';
+import { ProfileComponent } from './pages/profile/profile.component';
 
 const routes: Routes = [
   { path: 'login', component: LoginComponent },
   { path: 'tableOverview', component: TableOverviewComponent, canActivate: [AuthGuard]},
+  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard]},
   { path: 'table/bikes', component: BikesComponent, canActivate: [AuthGuard] },
   { path: 'bike/:id', component: BikeComponent, canActivate: [AuthGuard] },
   { path: 'table/participants', component: ParticipantsComponent, canActivate: [AuthGuard] },

src/app/app.module.ts

@@ -65,6 +65,7 @@ import { DateRangeCellComponent } from './components/tableComponents/date-range-
 import { SelectObjectDialogComponent } from './components/select-object-dialog/select-object-dialog.component';
 import { AutocompleteSelectComponent } from './components/autocomplete-select/autocomplete-select.component';
 import { LendingStationComponent } from './pages/dataPages/lending-station/lending-station.component';
+import { ProfileComponent } from './pages/profile/profile.component';
 
 
 
@@ -94,6 +95,7 @@ import { LendingStationComponent } from './pages/dataPages/lending-station/lendi
     SelectObjectDialogComponent,
     AutocompleteSelectComponent,
     LendingStationComponent,
+    ProfileComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/sidenav-profile/sidenav-profile.component.html

@@ -1,4 +1,4 @@
-<div (click)="testSnackBar()">
+<div routerLink = "/profile" >
     <img class="navbar-photo" src={{profileURL}}>
     <p>{{name}}</p>
     <p>{{email}}</p>

src/app/pages/profile/profile.component.html

@@ -1,4 +1,71 @@
-<app-table
+<div id="login-form">
+  <h1>Profil aktualisieren</h1>
+
+  <mat-form-field (keyup.enter)="login()">
+    <mat-label>Aktuelles Passwort</mat-label>
+    <input
+      matInput
+      [type]="hide ? 'password' : 'text'"
+      [formControl]="password"
+    />
+    <mat-error *ngIf="password.hasError('required')">
+      Bitte geben Sie Ihr Passwort ein.
+    </mat-error>
+    <button
+      mat-icon-button
+      matSuffix
+      (click)="hide = !hide"
+      [attr.aria-label]="'Hide password'"
+      [attr.aria-pressed]="hide"
+    >
+      <mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
+    </button>
+  </mat-form-field>
+
+
+  <mat-form-field (keyup.enter)="login()">
+    <mat-label>E-Mail-Adresse eingeben</mat-label>
+    <input matInput placeholder="fLotte@beispiel.de" [formControl]="email" />
+    <mat-error *ngIf="email.hasError('required')">
+      Bitte geben Sie eine E-Mail-Adresse ein.
+    </mat-error>
+    <mat-error *ngIf="email.hasError('email')">
+      Bitte geben Sie eine valide E-Mail-Adresse ein.
+    </mat-error>
+  </mat-form-field>
+
+  <mat-form-field (keyup.enter)="login()">
+    <mat-label>Passwort eingeben</mat-label>
+    <input
+      matInput
+      [type]="hide ? 'password' : 'text'"
+      [formControl]="password"
+    />
+    <mat-error *ngIf="password.hasError('required')">
+      Bitte geben Sie Ihr Passwort ein.
+    </mat-error>
+    <button
+      mat-icon-button
+      matSuffix
+      (click)="hide = !hide"
+      [attr.aria-label]="'Hide password'"
+      [attr.aria-pressed]="hide"
+    >
+      <mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
+    </button>
+  </mat-form-field>
+  <mat-progress-bar mode="indeterminate" id="loading-bar" *ngIf="loading"></mat-progress-bar>
+  <button mat-stroked-button color="primary" (click)="login()">
+    Login
+  </button>
+  <mat-error class="login-error-message" *ngIf="errorOccurred">
+    {{errorMessage}}
+  </mat-error>
+</div>
+
+
+
+<!--<app-table
   [headline]="headline"
   [columnInfo]="columnInfo"
   [dataService]="dataService"
@@ -10,4 +77,4 @@
   (saveEvent)="save($event)"
   (cancelEvent)="cancel($event)"
   (deleteEvent)="delete($event)"
-></app-table>
+></app-table>-->

src/app/pages/profile/profile.component.scss

@@ -0,0 +1,18 @@
+#login-form {
+    display: flex;
+    flex-direction: column;
+    max-width: 32em;
+    min-width: 5em;
+    margin: auto;
+    margin-top: 3em;
+    padding: 1em;
+    .mat-form-field {
+        margin: 0.5em 0;
+    }
+    #loading-bar {
+        margin-bottom: 1em;
+    }
+    .login-error-message {
+        margin-top: 0.5em;
+    }
+}

src/app/pages/profile/profile.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AuthService } from 'src/app/services/auth.service';
 import { BikesService } from '../../services/bikes.service';
 
 @Component({
@@ -7,149 +10,41 @@ import { BikesService } from '../../services/bikes.service';
   styleUrls: ['./profile.component.scss'],
 })
 export class ProfileComponent implements OnInit {
-  columnInfo = [
+  email = new FormControl('', [Validators.required, Validators.email]);
-    {
+  password = new FormControl('', [Validators.required]);
-      dataPath: 'name',
+  hide = true;
-      translation: 'Name',
+  loading = false;
-      sticky: true,
+  errorOccurred = false;
-      link: (row: any) => {
+  errorMessage = '';
-        return '/bike/' + row.id;
-      },
-    },
-    { dataPath: 'id', translation: 'ID', readonly: true },
-    { dataPath: 'group', translation: 'Gruppe' },
-    { dataPath: 'modelName', translation: 'Modell' },
-    {
-      dataPath: 'insuranceData.billing',
-      translation: 'Versicherung Abrechnung',
-    },
-    { dataPath: 'insuranceData.hasFixedRate', translation: 'Pauschale j/n' },
-    { dataPath: 'insuranceData.fixedRate', translation: 'Pauschale Betrag' },
-    { dataPath: 'insuranceData.name', translation: 'Versicherer' },
-    { dataPath: 'insuranceData.benefactor', translation: 'Kostenträger' },
-    { dataPath: 'insuranceData.noPnP', translation: 'Nr. P&P' },
-    {
-      dataPath: 'insuranceData.maintenanceResponsible',
-      translation: 'Wartung zuständig',
-    },
-    {
-      dataPath: 'insuranceData.maintenanceBenefactor',
-      translation: 'Wartung Kostenträger',
-    },
-    {
-      dataPath: 'insuranceData.maintenanceAgreement',
-      translation: 'Wartungsvereinbarung',
-    },
-    {
-      dataPath: 'insuranceData.projectAllowance',
-      translation: 'Projektzuschuss',
-    },
-    { dataPath: 'insuranceData.notes', translation: 'Sonstiges' },
-    { dataPath: 'dimensionsAndLoad.bikeLength', translation: 'Länge' },
-    { dataPath: 'dimensionsAndLoad.bikeWeight', translation: 'Gewicht' },
-    { dataPath: 'dimensionsAndLoad.bikeHeight', translation: 'Höhe' },
-    { dataPath: 'dimensionsAndLoad.bikeWidth', translation: 'Breite' },
-    { dataPath: 'dimensionsAndLoad.boxHeightRange', translation: 'Boxhöhe' },
-    { dataPath: 'dimensionsAndLoad.boxLengthRange', translation: 'Boxlänge' },
-    { dataPath: 'dimensionsAndLoad.boxWidthRange', translation: 'Boxbreite' },
-    {
-      dataPath: 'dimensionsAndLoad.hasCoverBox',
-      translation: 'Boxabdeckung j/n',
-    },
-    { dataPath: 'dimensionsAndLoad.lockable', translation: 'Box abschließbar' },
-    {
-      dataPath: 'dimensionsAndLoad.maxWeightBox',
-      translation: 'max Zuladung Box',
-    },
-    {
-      dataPath: 'dimensionsAndLoad.maxWeightLuggageRack',
-      translation: 'max Zuladung Gepäckträger',
-    },
-    {
-      dataPath: 'dimensionsAndLoad.maxWeightTotal',
-      translation: 'max Gesamtgewicht',
-    },
-    { dataPath: 'numberOfChildren', translation: 'Anzahl Kinder' },
-    { dataPath: 'numberOfWheels', translation: 'Anzahl Räder' },
-    { dataPath: 'forCargo', translation: 'für Lasten j/n' },
-    { dataPath: 'forChildren', translation: 'für Kinder j/n' },
-    { dataPath: 'security.frameNumber', translation: 'Rahmennummer' },
-    { dataPath: 'security.adfcCoding', translation: 'ADFC Codierung' },
-    {
-      dataPath: 'security.keyNumberAXAChain',
-      translation: 'Schlüsselnrummer Rahmenschloss',
-    },
-    {
-      dataPath: 'security.keyNumberFrameLock',
-      translation: 'Schlüsselnrummer AXA-Kette',
-    },
-    { dataPath: 'security.policeCoding', translation: 'Polizei Codierung' },
-    { dataPath: 'technicalEquipment.bicycleShift', translation: 'Schaltung' },
-    { dataPath: 'technicalEquipment.isEBike', translation: 'E-Bike j/n' },
-    {
-      dataPath: 'technicalEquipment.hasLightSystem',
-      translation: 'Lichtanlage j/n',
-    },
-    {
-      dataPath: 'technicalEquipment.specialFeatures',
-      translation: 'Besonderheiten',
-    },
-    { dataPath: 'stickerBikeNameState', translation: 'Aufkleber Status' },
-    { dataPath: 'note', translation: 'Aufkleber Kommentar' },
-    { dataPath: 'taxes.costCenter', translation: 'Steuern Kostenstelle' },
-    {
-      dataPath: 'taxes.organisationArea',
-      translation: 'Steuern Vereinsbereich',
-    },
-    { dataPath: 'provider.id', translation: '' },
-    { dataPath: 'provider.formName', translation: '' },
-    { dataPath: 'provider.privatePerson.id', translation: '' },
-    { dataPath: 'provider.privatePerson.person.id', translation: '' },
-    { dataPath: 'provider.privatePerson.person.name', translation: '' },
-    { dataPath: 'provider.privatePerson.person.firstName', translation: '' },
-    {
-      dataPath: 'provider.privatePerson.person.contactInformation.email',
-      translation: '',
-    },
-    { dataPath: 'lendingStation.id', translation: '' },
-    { dataPath: 'lendingStation.name', translation: '' },
-    { dataPath: 'lendingStation.address.number', translation: '' },
-    { dataPath: 'lendingStation.address.street', translation: '' },
-    { dataPath: 'lendingStation.address.zip', translation: '' },
-  ];
 
-  dataService: any;
+  returnUrl : string;
 
-  tableDataGQLType: string = 'CargoBike';
+  constructor(private authService: AuthService, private router: Router, private route: ActivatedRoute) {}
-  tableDataGQLCreateInputType: string = 'CargoBikeCreateInput';
-  tableDataGQLUpdateInputType: string = 'CargoBikeUpdateInput';
 
-  headline = 'Lastenräder';
+  ngOnInit(): void {
-
+    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/tableOverview';
-  loadingRowIds: string[] = [];
-  constructor(private bikesService: BikesService) {}
-
-  ngOnInit() {
-    this.dataService = this.bikesService;
-  }
-
-  create(object: { currentId: string; row: any }) {
-    this.bikesService.createBike(object.currentId, { bike: object.row });
-  }
-
-  lock(row: any) {
-    this.bikesService.lockBike({ id: row.id });
-  }
-
-  save(row: any) {
-    this.bikesService.updateBike({ bike: row });
-  }
-
-  cancel(row: any) {
-    this.bikesService.unlockBike({ id: row.id });
   }
 
-  delete(row: any) {
+  login() {
-    this.bikesService.deleteBike({ id: row.id });
+    this.errorMessage = '';
+    this.errorOccurred = false;
+    if (this.email.invalid || this.password.invalid) {
+      return;
+    }
+    this.loading = true;
+    this.authService
+      .login(this.email.value, this.password.value)
+      .subscribe(
+        () => this.router.navigateByUrl(this.returnUrl),
+        (error) => {
+          this.errorOccurred = true;
+          this.errorMessage =
+            error.error.message ||
+            'Ein Fehler bei Einloggen ist aufgetreten. Überprüfen Sie Ihre Internetverbindung oder versuchen Sie es später erneut.';
+        }
+      )
+      .add(() => {
+        this.loading = false;
+      });
   }
 }