form for password change created

frontend/src/app/components/auth/forgot-password/forgot-password.component.html

@@ -1,15 +1,7 @@
 <section>
   <div class="content">
     <div class="headline">Forgot your password?</div>
-    @if (sendSuccess) {
-    <div class="note">
-      <p>
-        If the email you entered exists on our server, you will receive a
-        message with instructions on how to reset your password.
-      </p>
-      <a routerLink="/login">To the login</a>
-    </div>
-    } @else {
+    @if (!queryEmail && !sendSuccess && !queryEmailSuccess) {
     <div class="note">
       <p>We will send you an email with instructions to reset your password.</p>
     </div>
@@ -48,6 +40,87 @@
         [disabled]="!isUserEmailValid(authData.mail)"
       ></app-btn-large>
     </form>
+    } @else { @if (sendSuccess) {
+    <div class="note">
+      <p>
+        If the email you entered exists on our server, you will receive a
+        message with instructions on how to reset your password.
+      </p>
+      <a routerLink="/login">To the login</a>
+    </div>
+    } @if (queryEmailSuccess) {
+    <div class="note">
+      <p>
+        Password change successful.<br />You can now log in with your new
+        password.
+      </p>
+      <a routerLink="/login">To the login</a>
+    </div>
+    } @if (queryEmail && !queryEmailSuccess) {
+    <div class="note">
+      <p>Please enter your new password and confirm it.</p>
+    </div>
+    <form
+      #taskForm="ngForm"
+      (ngSubmit)="onSubmit(taskForm, password)"
+      onsubmit="return false"
+    >
+      <input
+        type="password"
+        id="password"
+        name="password"
+        #password="ngModel"
+        placeholder="Enter a password"
+        autocomplete="new-password"
+        [(ngModel)]="authData.password"
+        pattern="[^<>]*"
+        minlength="6"
+        [class.error-border]="
+          password.invalid && password.touched && authData.password.length < 6
+        "
+        required
+      />
+      <div class="error-msg">
+        @if (!password.valid && password.touched && authData.password.length <
+        1) {
+        <p>Please enter a password</p>
+        } @else { @if (authData.password && authData.password.length < 6 &&
+        password.touched) {
+        <p>Password is too short, min 6 characters</p>
+        } }
+      </div>
+      <input
+        type="password"
+        id="passwordConfirm"
+        name="passwordConfirm"
+        #passwordConfirm="ngModel"
+        placeholder="Confirm password"
+        autocomplete="new-password"
+        [(ngModel)]="authData.passwordConfirm"
+        pattern="[^<>]*"
+        minlength="6"
+        [class.error-border]="
+          authData.password !== authData.passwordConfirm &&
+          passwordConfirm.touched
+        "
+        required
+      />
+      <div class="error-msg">
+        @if (authData.password !== authData.passwordConfirm &&
+        passwordConfirm.touched) {
+        <p>The passwords do not match</p>
         }
       </div>
+      <app-btn-large
+        [value]="'Update Password'"
+        [disabled]="
+          !isUserEmailValid(authData.mail) ||
+          authData.password !== authData.passwordConfirm ||
+          !authData.password ||
+          !authData.passwordConfirm
+        "
+      ></app-btn-large>
+    </form>
+    } }
+  </div>
 </section>

frontend/src/app/components/auth/forgot-password/forgot-password.component.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { BtnLargeComponent } from '../../../shared/components/btn-large/btn-large.component';
 import { FormsModule, NgForm } from '@angular/forms';
-import { RouterLink } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-forgot-password',
@@ -14,9 +14,22 @@ import { RouterLink } from '@angular/router';
 export class ForgotPasswordComponent {
   authData = {
     mail: '',
+    password: '',
+    passwordConfirm: '',
   };
 
   sendSuccess: boolean = false;
+  queryEmail: boolean = false;
+  queryEmailSuccess: boolean = false;
+
+  constructor(private route: ActivatedRoute, private router: Router) {}
+
+  ngOnInit(): void {
+    this.route.queryParams.subscribe((params) => {
+      this.authData.mail = params['mail'] || '';
+      this.queryEmailSuccess = params['pw-change'] || '';
+    });
+  }
 
   isUserEmailValid(emailValue: string) {
     const emailRegex = /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/;
@@ -25,9 +38,15 @@ export class ForgotPasswordComponent {
 
   onSubmit(ngForm: NgForm, mailInput: any) {
     if (ngForm.submitted && ngForm.form.valid) {
-      console.log(this.authData);
+      if (mailInput.name === 'mail') {
         ngForm.form.reset();
         this.sendSuccess = true;
+      } else if (mailInput.name === 'password') {
+        ngForm.form.reset();
+        this.queryEmail = false;
+        this.queryEmailSuccess = true;
+      }
+      console.log(this.authData);
     } else {
       mailInput.control.markAsTouched();
     }