reset password

src/app/modules/user/login/login.component.html

@@ -11,6 +11,7 @@
     </mat-form-field>
     <app-button-row>
       <button (click)="onLogin()" mat-button>Anmelden</button>
+      <button mat-button routerLink="/user/password">neues Passwort anfordern</button>
       <p *ngIf="errorMessage" class="error">{{errorMessage|authMessage}}</p>
     </app-button-row>
 

src/app/modules/user/login/login.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
-import {AngularFireAuth} from '@angular/fire/auth';
 import {Router} from '@angular/router';
+import {UserService} from '../../../services/user.service';
 
 @Component({
   selector: 'app-login',
@@ -12,7 +12,7 @@ export class LoginComponent implements OnInit {
   public form: FormGroup;
   public errorMessage: string;
 
-  constructor(public afAuth: AngularFireAuth, private router: Router) {
+  constructor(private userService: UserService, private router: Router) {
   }
 
   ngOnInit() {
@@ -26,7 +26,7 @@ export class LoginComponent implements OnInit {
     this.form.updateValueAndValidity();
     if (this.form.valid) {
       try {
-        await this.afAuth.auth.signInWithEmailAndPassword(this.form.value.user, this.form.value.pass);
+        await this.userService.login(this.form.value.user, this.form.value.pass);
         await this.router.navigateByUrl('/');
       } catch (ex) {
         this.errorMessage = ex.code;

src/app/modules/user/logout/logout.component.ts

@@ -1,6 +1,6 @@
 import {AfterViewInit, Component} from '@angular/core';
-import {AngularFireAuth} from '@angular/fire/auth';
 import {Router} from '@angular/router';
+import {UserService} from '../../../services/user.service';
 
 @Component({
   selector: 'app-logout',
@@ -8,11 +8,11 @@ import {Router} from '@angular/router';
   styleUrls: ['./logout.component.less']
 })
 export class LogoutComponent implements AfterViewInit {
-  constructor(public afAuth: AngularFireAuth, private router: Router) {
+  constructor(private userService: UserService, private router: Router) {
   }
 
   public async ngAfterViewInit() {
-    await this.afAuth.auth.signOut();
+    await this.userService.logout();
     await this.router.navigateByUrl('/');
   }
 }

src/app/modules/user/password-send/password-send.component.html

@@ -0,0 +1,4 @@
+<app-card>
+  Eine E-Mail mit dem neuen Passwort wurde gesendet.
+  Darin ist der link enthalten, über den das neue Passwort eingegeben werden kann.
+</app-card>

src/app/modules/user/password-send/password-send.component.spec.ts

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {PasswordSendComponent} from './password-send.component';
+
+describe('PasswordSendComponent', () => {
+  let component: PasswordSendComponent;
+  let fixture: ComponentFixture<PasswordSendComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [PasswordSendComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PasswordSendComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/user/password-send/password-send.component.ts

@@ -0,0 +1,16 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-password-send',
+  templateUrl: './password-send.component.html',
+  styleUrls: ['./password-send.component.less']
+})
+export class PasswordSendComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/modules/user/password/password.component.html

@@ -0,0 +1,15 @@
+<app-card>
+  <div [formGroup]="form" class="form">
+    <mat-form-field appearance="outline">
+      <mat-label>E-Mail Addresse</mat-label>
+      <input (keyup.enter)="onResetPassword()" formControlName="user" matInput>
+    </mat-form-field>
+
+    <app-button-row>
+      <button (click)="onResetPassword()" mat-button>neues Passwort anfordern</button>
+      <p *ngIf="errorMessage" class="error">{{errorMessage|authMessage}}</p>
+    </app-button-row>
+
+  </div>
+
+</app-card>

src/app/modules/user/password/password.component.less

@@ -0,0 +1,8 @@
+.form {
+  display: grid;
+}
+
+p.error {
+  margin: 8px 10px;
+  color: darkred;
+}

src/app/modules/user/password/password.component.spec.ts

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {PasswordComponent} from './password.component';
+
+describe('PasswordComponent', () => {
+  let component: PasswordComponent;
+  let fixture: ComponentFixture<PasswordComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [PasswordComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/user/password/password.component.ts

@@ -0,0 +1,36 @@
+import {Component, OnInit} from '@angular/core';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {Router} from '@angular/router';
+import {UserService} from '../../../services/user.service';
+
+@Component({
+  selector: 'app-password',
+  templateUrl: './password.component.html',
+  styleUrls: ['./password.component.less']
+})
+export class PasswordComponent implements OnInit {
+  public form: FormGroup;
+  public errorMessage: string;
+
+  constructor(public userService: UserService, private router: Router) {
+  }
+
+  public ngOnInit(): void {
+    this.form = new FormGroup({
+      user: new FormControl(null, [Validators.required, Validators.email])
+    });
+  }
+
+  public async onResetPassword() {
+    this.form.updateValueAndValidity();
+    if (this.form.valid) {
+      try {
+        await this.userService.changePassword(this.form.value.user);
+        await this.router.navigateByUrl('/user/password-send');
+      } catch (ex) {
+        this.errorMessage = ex.code;
+      }
+    }
+  }
+
+}

src/app/modules/user/user-routing.module.ts

@@ -4,6 +4,8 @@ import {LoginComponent} from './login/login.component';
 import {InfoComponent} from './info/info.component';
 import {LogoutComponent} from './logout/logout.component';
 import {AngularFireAuthGuard, redirectUnauthorizedTo} from '@angular/fire/auth-guard';
+import {PasswordComponent} from './password/password.component';
+import {PasswordSendComponent} from './password-send/password-send.component';
 
 
 const routes: Routes = [
@@ -20,6 +22,14 @@ const routes: Routes = [
     path: 'logout',
     component: LogoutComponent
   },
+  {
+    path: 'password',
+    component: PasswordComponent
+  },
+  {
+    path: 'password-send',
+    component: PasswordSendComponent
+  },
   {
     path: 'info',
     component: InfoComponent,

src/app/modules/user/user.module.ts

@@ -13,10 +13,12 @@ import {InfoComponent} from './info/info.component';
 import {LogoutComponent} from './logout/logout.component';
 import {RolePipe} from './info/role.pipe';
 import {MatSelectModule} from '@angular/material/select';
+import {PasswordComponent} from './password/password.component';
+import {PasswordSendComponent} from './password-send/password-send.component';
 
 
 @NgModule({
-  declarations: [LoginComponent, AuthMessagePipe, InfoComponent, LogoutComponent, RolePipe],
+  declarations: [LoginComponent, AuthMessagePipe, InfoComponent, LogoutComponent, RolePipe, PasswordComponent, PasswordSendComponent],
   imports: [
     CommonModule,
     UserRoutingModule,

src/app/services/user.service.ts

@@ -29,4 +29,16 @@ export class UserService {
   public async update$(uid: string, data: Partial<User>): Promise<void> {
     await this.db.doc<User>('users/' + uid).update(data);
   }
+
+  public async login(user: string, password: string): Promise<any> {
+    await this.afAuth.auth.signInWithEmailAndPassword(user, password);
+  }
+
+  public async logout(): Promise<any> {
+    await this.afAuth.auth.signOut();
+  }
+
+  public async changePassword(email: string): Promise<any> {
+    await this.afAuth.auth.sendPasswordResetEmail(email);
+  }
 }