add passwort-reset

serve-all.sh

@@ -0,0 +1 @@
+cd ../mkjAPI && php artisan serve & cd ../mkjAPI && php artisan reverb:start & cd ../mkjAPI&& php artisan queue:work & cd ../mkjAPP && ng serve && fg

src/app/app-routing.module.ts

@@ -47,13 +47,15 @@ import { SynthesizerComponent } from './tools/views/synthesizer/synthesizer.comp
 import { TransposerComponent } from './tools/views/transposer/transposer.component';
 import { CircleOfFifthsComponent } from './tools/views/circle-of-fifths/circle-of-fifths.component';
 import { MetronomeComponent } from './tools/views/metronome/metronome.component';
+import { PasswordResetComponent } from './pages/password-reset/password-reset.component';
 
 @NgModule({
   imports: [
     RouterModule.forRoot(
       [
         { path: 'signup', component: SignupComponent },
         { path: 'login', component: LoginComponent },
+        { path: 'reset-password', component: PasswordResetComponent },
         { path: 'error', component: AppErrorComponent },
         { path: 'access', component: AppAccessdeniedComponent },
         { path: 'notfound', component: AppNotfoundComponent },

src/app/app.module.ts

@@ -209,6 +209,7 @@ import { MitgliedInstrumenteListComponent } from './components/mitglieder/mitgli
 import { MkjRatingComponent } from './utilities/form-input-components/mkj-rating/mkj-rating.component';
 import { MkjUserNotificationsComponent } from './utilities/mkj-user-notifications/mkj-user-notifications.component';
 import { MkjCommentsComponent } from './utilities/mkj-comments/mkj-comments.component';
+import { PasswordResetComponent } from './pages/password-reset/password-reset.component';
 
 // FullCalendarModule.registerPlugins([
 //     dayGridPlugin,
@@ -339,6 +340,7 @@ registerLocaleData(localeDe);
     MkjDashboardComponent,
     SignupComponent,
     LoginComponent,
+    PasswordResetComponent,
     MitgliederOverviewComponent,
     MitgliederEditComponent,
     NotenOverviewComponent,

src/app/guards/auth-interceptor.ts

@@ -36,7 +36,7 @@ export class AuthInterceptor implements HttpInterceptor {
       }),
       catchError((httpErrorResponse: HttpErrorResponse, _: Observable<HttpEvent<any>>) => {
         if (httpErrorResponse.status === HttpStatusCode.Unauthorized) {
-          if (!this.tokenService.isLoggedIn()) {
+          if (!this.tokenService.isLoggedIn() && req.headers.has('Authorization')) {
             setTimeout(() => this.infoService.info('Sitzung abgelaufen/ungültig!'), 1000);
           }
           this.authStateService.setAuthState(false);

src/app/pages/login/login.component.ts

@@ -68,7 +68,7 @@ export class LoginComponent implements OnInit {
       return;
     }
 
-    this.authService.forgotPassword(this.user.email).subscribe();
+    this.authService.forgotPassword(this.user.email).subscribe((res) => this.infoService.info(res.message));
   }
 
   private checkInput(): boolean {

src/app/pages/password-reset/password-reset.component.html

@@ -0,0 +1,64 @@
+<div style="z-index: 10000">
+  <p-toast></p-toast>
+  <p-toast key="bottom-center" position="bottom-center"></p-toast>
+</div>
+<div class="login-body">
+  <div class="login-panel p-fluid">
+    <div class="grid grid-nogutter">
+      <div class="col-12 login-header">
+        <h1>Passwort zurücksetzen</h1>
+        <h2>Setze hier ein neues Passwort für deinen Account.</h2>
+        <img src="assets\images\app_logo.png" />
+      </div>
+
+      <div class="col-12">
+        <span class="p-float-label">
+          <p-password [(ngModel)]="pwd" [inputStyleClass]="submitted && !pwd ? 'ng-invalid ng-dirty' : ''">
+            <ng-template pTemplate="footer">
+              <p-divider></p-divider>
+              <p class="mt-2">Empfohlen:</p>
+              <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
+                <li>min. 1 Kleinbuchstabe</li>
+                <li>min. 1 Großbuchstabe</li>
+                <li>min. 1 Zahl</li>
+                <li>min. 8 Zeichen lang</li>
+              </ul>
+            </ng-template>
+          </p-password>
+          @if (submitted && !pwd) {
+            <small class="p-error">Passwort ist erforderlich!</small>
+          }
+          <label>Passwort wählen</label>
+        </span>
+      </div>
+      <div class="col-12">
+        <span class="p-float-label">
+          <input
+            type="password"
+            pInputText
+            [(ngModel)]="pwdCheck"
+            [ngClass]="{
+              'ng-invalid ng-dirty': submitted && !pwdCheck
+            }"
+            (keydown.enter)="onSubmit()"
+            required
+          />
+          @if (submitted && !pwdCheck) {
+            <small class="p-error">Wiederholung ist erforderlich!</small>
+          }
+          <label>Passwort wiederholen</label>
+        </span>
+      </div>
+      <div class="col-12 button-container">
+        <button
+          pButton
+          type="button"
+          label="Zurücksetzen"
+          [icon]="isChecking ? 'pi pi-spin pi-spinner' : 'pi pi-check'"
+          [disabled]="!pwdCheck || pwdCheck !== pwd"
+          (click)="onSubmit()"
+        ></button>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/password-reset/password-reset.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AuthAPIService } from 'src/app/services/api/auth-api.service';
+import { InfoService } from 'src/app/services/info.service';
+
+@Component({
+  selector: 'app-password-reset',
+  templateUrl: './password-reset.component.html',
+})
+export class PasswordResetComponent implements OnInit {
+  submitted: boolean = false;
+  isChecking: boolean = false;
+  pwd: string = null;
+  pwdCheck: string = null;
+
+  constructor(
+    private router: Router,
+    private authService: AuthAPIService,
+    private route: ActivatedRoute,
+    private infoService: InfoService
+  ) {}
+
+  public ngOnInit(): void {}
+
+  public onSubmit() {
+    this.submitted = true;
+    const queryParams = {
+      token: this.route.snapshot.queryParams.token,
+      email: this.route.snapshot.queryParams.email,
+    };
+
+    this.authService.resetPassword(queryParams.token, queryParams.email, this.pwd, this.pwdCheck).subscribe({
+      next: (result) => {
+        setTimeout(() => this.infoService.success(result.message), 1000);
+        this.router.navigate(['login']);
+      },
+      error: (error) => {
+        this.infoService.error(error);
+      },
+    });
+  }
+}

src/app/services/api/auth-api.service.ts

@@ -1,9 +1,14 @@
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { HttpClient } from '@angular/common/http';
+import {
+  MessageOutput,
+  UserLoginInput,
+  UserLoginOutput,
+  UserRegistrationInput,
+} from 'src/app/interfaces/api-middleware';
 import { environment } from 'src/environments/environment';
 import { User } from '../../models/User';
-import { UserRegistrationInput, UserLoginInput, UserLoginOutput } from 'src/app/interfaces/api-middleware';
 
 @Injectable({
   providedIn: 'root',
@@ -40,13 +45,18 @@ export class AuthAPIService {
     return this.http.post<any>(url, user);
   }
 
-  public forgotPassword(email: string): Observable<any> {
+  public forgotPassword(email: string): Observable<MessageOutput> {
     const url = this.apiURL + 'forgot-password';
     return this.http.post<any>(url, { email });
   }
 
-  public resetPassword(token: string, email: string, password: string): Observable<any> {
+  public resetPassword(
+    token: string,
+    email: string,
+    password: string,
+    password_confirmation: string
+  ): Observable<MessageOutput> {
     const url = this.apiURL + 'reset-password';
-    return this.http.post<any>(url, { token, email, password });
+    return this.http.post<any>(url, { token, email, password, password_confirmation });
   }
 }

src/app/services/user-notification.service.ts

@@ -27,15 +27,19 @@ export class UserNotificationService {
     private router: Router,
     webSocketService: WebsocketService
   ) {
-    this.getUnreadNotifications();
-
     this._subs.add(
       webSocketService.getUserNotificationsChannel().subscribe((notification: UserNotification) => {
         this.insertNotification(notification);
       })
     );
   }
 
+  public updateUnreadNotifications(): void {
+    this.apiService.getUnreadNotifications().subscribe((notifications) => {
+      this._userNotifications.next(notifications);
+    });
+  }
+
   public addNotification(notification: UserNotification): void {
     this.insertNotification(notification);
   }
@@ -58,12 +62,6 @@ export class UserNotificationService {
     this._userNotifications.next(notifications);
   }
 
-  private getUnreadNotifications(): void {
-    this.apiService.getUnreadNotifications().subscribe((notifications) => {
-      this._userNotifications.next(notifications);
-    });
-  }
-
   private markAsRead(notification: UserNotification): void {
     console.log(notification);
     if (notification.type === UserNotificationType.SwUpdate || notification.type === UserNotificationType.TestSocket) {

src/app/utilities/mkj-user-notifications/mkj-user-notifications.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { MenuItem } from 'primeng/api';
 import { UserNotificationService } from 'src/app/services/user-notification.service';
 import { SubSink } from 'subsink';
@@ -8,7 +8,7 @@ import { SubSink } from 'subsink';
   templateUrl: './mkj-user-notifications.component.html',
   styleUrl: './mkj-user-notifications.component.scss',
 })
-export class MkjUserNotificationsComponent implements OnDestroy {
+export class MkjUserNotificationsComponent implements OnInit, OnDestroy {
   public menuItems: MenuItem[] = [];
 
   private _subs = new SubSink();
@@ -25,6 +25,10 @@ export class MkjUserNotificationsComponent implements OnDestroy {
     );
   }
 
+  public ngOnInit(): void {
+    this.userNotificationsService.updateUnreadNotifications();
+  }
+
   public ngOnDestroy(): void {
     this._subs.unsubscribe();
   }