added forgot password + firebase email

package.json

@@ -11,10 +11,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^18.2.0",
+    "@angular/cdk": "^18.2.5",
     "@angular/common": "^18.2.0",
     "@angular/compiler": "^18.2.0",
     "@angular/core": "^18.2.0",
     "@angular/forms": "^18.2.0",
+    "@angular/material": "^18.2.5",
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
@@ -36,4 +38,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.5.2"
   }
-}
+}

src/app/app.config.ts

@@ -1,8 +1,13 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core';
 import { provideRouter } from '@angular/router';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    importProvidersFrom(BrowserAnimationsModule)
+  ]
 };

src/app/app.routes.ts

@@ -9,6 +9,6 @@ export const routes: Routes = [
     {path: '', component: LoginComponent},
     {path: 'register', component: RegisterComponent},
     {path: 'create-profile', component: ChooseProfilePictureComponent},
-    {path: 'reset-password', component: ResetPasswordComponent},
+    {path: 'forgot-password', component: ResetPasswordComponent},
     {path: 'choose-new-password', component: ChooseNewPasswordComponent},
 ];

src/app/login/login.component.html

@@ -22,7 +22,7 @@ <h1>Anmeldung</h1>
 
       <div class="wrong-data" *ngIf="errorMessage">{{ errorMessage }}</div>
 
-      <a class="forgot-password" routerLink="/passwort-vergessen">Passwort vergessen?</a>
+      <a class="forgot-password" routerLink="/forgot-password">Passwort vergessen?</a>
 
       <div class="or-div">
         <div class="border-bottom-purple-light"></div>

src/app/login/login.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import { Router } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { auth, signInWithEmailAndPassword } from './firebase/firebase-config';
 import { FirebaseError } from 'firebase/app';
 import { LoginHeaderComponent } from './shared/login-header/login-header.component';
@@ -11,6 +11,7 @@ import { CommonModule } from '@angular/common';
 import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
 
 
+
 @Component({
   selector: 'app-login',
   standalone: true,
@@ -19,7 +20,8 @@ import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
     LoginHeaderComponent,
     LoginFooterComponent,
     ResponsiveCreateUserSectionComponent,
-    CommonModule
+    CommonModule,
+    RouterLink
   ],
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
@@ -58,7 +60,7 @@ export class LoginComponent implements OnInit, OnDestroy {
     try {
       await signInWithEmailAndPassword(auth, email, password);
       this.errorMessage = null;
-      this.router.navigate(['/dashboard']);
+      this.router.navigate(['/forgot-password']);
     } catch (error) {
       if (error instanceof FirebaseError) {
         switch (error.code) {

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

@@ -1,7 +1,7 @@
 <app-login-logo></app-login-logo>
 <main>
     <section>
-        <form action="">
+        <form (ngSubmit)="resetPassword()" #resetForm="ngForm">
             <div class="header-div">
                 <img src="assets/img/return.svg" alt="return">
                 <h1>Passwort zurücksetzen</h1>
@@ -12,18 +12,27 @@ <h1>Passwort zurücksetzen</h1>
                 <div>Bitte geben Sie Ihre E-Mail-Adresse ein.</div>
             </div>
 
-            <input type="email" placeholder="beispielname@email.com">
-            <div class="wrong-data">Diese E-Mail Adresse ist ungültig</div>
+            <input
+                type="email"
+                placeholder="beispielname@email.com"
+                [(ngModel)]="email"
+                name="email"
+                required
+                email
+                #emailField="ngModel">
+            <div class="wrong-data" *ngIf="emailField.invalid && (emailField.dirty || emailField.touched)">
+                Diese E-Mail Adresse ist ungültig
+            </div>
 
             <div class="sub-text">
                 <div>Wir senden Ihnen eine E-Mail, über die 
                     Sie Ihr Passwort ändern können.</div>
             </div>
 
             <div class="login-btn-div">
-                <button class="login-btn">Weiter</button>
+                <button class="login-btn" type="submit" [disabled]="resetForm.invalid">Weiter</button>
             </div>
         </form>
     </section>
 </main>
-<app-login-footer></app-login-footer>
+<app-login-footer></app-login-footer>

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

@@ -1,15 +1,48 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { LoginLogoComponent } from '../../shared/login-logo/login-logo.component';
 import { LoginFooterComponent } from '../../shared/login-footer/login-footer.component';
+import { getAuth, sendPasswordResetEmail } from 'firebase/auth';
+import { CommonModule } from '@angular/common';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
 
 
 @Component({
   selector: 'app-reset-password',
   standalone: true,
-  imports: [LoginLogoComponent, LoginFooterComponent],
+  imports: [LoginLogoComponent, LoginFooterComponent, FormsModule, CommonModule],
   templateUrl: './reset-password.component.html',
-  styleUrl: './reset-password.component.scss'
+  styleUrls: ['./reset-password.component.scss']
 })
 export class ResetPasswordComponent {
 
+  constructor(private snackBar: MatSnackBar) {}
+  email: string = '';
+
+  resetPassword() {
+    const auth = getAuth();
+    sendPasswordResetEmail(auth, this.email)
+      .then(() => {
+        this.snackBar.open('Ein Link zum Zurücksetzen des Passworts wurde an Ihre E-Mail-Adresse gesendet.', 'Schließen', {
+          duration: 5000,
+        });
+      })
+      .catch((error) => {
+        if (error.code === 'auth/user-not-found') {
+          this.snackBar.open('Es gab einen Fehler beim Senden der E-Mail zum Zurücksetzen des Passworts. Bitte überprüfen Sie Ihre E-Mail-Adresse.', 'Schließen', {
+            duration: 5000,
+          });
+        } else if (error.code === 'auth/invalid-email') {
+          this.snackBar.open('Diese E-Mail-Adresse ist ungültig.', 'Schließen', {
+            duration: 5000,
+          });
+        } else {
+          this.snackBar.open('Es ist ein unbekannter Fehler aufgetreten. Bitte versuchen Sie es später erneut.', 'Schließen', {
+            duration: 5000,
+          });
+        }
+      });
+  }
+
 }

src/index.html

@@ -6,6 +6,8 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

src/styles.scss

@@ -1,3 +1,39 @@
+
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat.core();
+
+// Define the theme object.
+$da-bubble-theme: mat.define-theme((
+  color: (
+    theme-type: light,
+    primary: mat.$azure-palette,
+    tertiary: mat.$blue-palette,
+  ),
+  density: (
+    scale: 0,
+  )
+));
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+:root {
+  @include mat.all-component-themes($da-bubble-theme);
+}
+
+// Comment out the line below if you want to use the pre-defined typography utility classes.
+// For more information: https://material.angular.io/guide/typography#using-typography-styles-in-your-application.
+// @include mat.typography-hierarchy($da-bubble-theme);
+
+// Comment out the line below if you want to use the deprecated `color` inputs.
+// @include mat.color-variants-backwards-compatibility($da-bubble-theme);
 /* You can add global styles to this file, and also import other style files */
 @import '../public/assets/fonts/nunito-v26-latin/nunito-font.scss';
 @import '../public/assets/fonts/figtree-v5-latin/figtree-font.scss';
@@ -21,4 +57,6 @@ body.login-page {
 
 .d-none {
     display: none;
-}
+}
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }