Fix errors and warnings on login/logout

src/app/app.component.ts

@@ -63,8 +63,8 @@ export class AppComponent {
   }
 
   logout() {
+    this.navService.closeNav();
     this.authService.logout().subscribe().add(() => this.router.navigate(['login']));
-    this.sideNav.close();
   }
 
   ngAfterViewInit() {

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

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

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

@@ -6,3 +6,7 @@
     border-radius:50%;
     margin-top:10px;
 }
+
+.sidenav-profile {
+    outline: none;
+}

src/app/pages/login/login.component.html

@@ -1,41 +1,46 @@
-<div id="login-form">
+<div id="login-wrapper">
   <h1>fLotte Login</h1>
-  <mat-form-field (keyup.enter)="login()">
+  <form id="login-form">
-    <mat-label>E-Mail-Adresse eingeben</mat-label>
+    <mat-form-field (keyup.enter)="login()">
-    <input matInput placeholder="fLotte@beispiel.de" [formControl]="email" />
+      <mat-label>E-Mail-Adresse eingeben</mat-label>
-    <mat-error *ngIf="email.hasError('required')">
+      <input matInput placeholder="fLotte@beispiel.de" autocomplete="email" [formControl]="email" />
-      Bitte geben Sie eine E-Mail-Adresse ein.
+      <mat-error *ngIf="email.hasError('required')">
-    </mat-error>
+        Bitte geben Sie eine E-Mail-Adresse ein.
-    <mat-error *ngIf="email.hasError('email')">
+      </mat-error>
-      Bitte geben Sie eine valide E-Mail-Adresse ein.
+      <mat-error *ngIf="email.hasError('email')">
-    </mat-error>
+        Bitte geben Sie eine valide E-Mail-Adresse ein.
-  </mat-form-field>
+      </mat-error>
+    </mat-form-field>
 
-  <mat-form-field (keyup.enter)="login()">
+    <mat-form-field (keyup.enter)="login()">
-    <mat-label>Passwort eingeben</mat-label>
+      <mat-label>Passwort eingeben</mat-label>
-    <input
+      <input
-      matInput
+        matInput
-      [type]="hide ? 'password' : 'text'"
+        autocomplete="password"
-      [formControl]="password"
+        [type]="hide ? 'password' : 'text'"
-    />
+        [formControl]="password"
-    <mat-error *ngIf="password.hasError('required')">
+      />
-      Bitte geben Sie Ihr Passwort ein.
+      <mat-error *ngIf="password.hasError('required')">
-    </mat-error>
+        Bitte geben Sie Ihr Passwort ein.
-    <button
+      </mat-error>
-      mat-icon-button
+      <button
-      matSuffix
+        mat-icon-button
-      (click)="hide = !hide"
+        matSuffix
-      [attr.aria-label]="'Hide password'"
+        (click)="hide = !hide"
-      [attr.aria-pressed]="hide"
+        [attr.aria-label]="'Hide password'"
-    >
+        [attr.aria-pressed]="hide"
-      <mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
+      >
-    </button>
+        <mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
-  </mat-form-field>
+      </button>
-  <mat-progress-bar mode="indeterminate" id="loading-bar" *ngIf="loading"></mat-progress-bar>
+    </mat-form-field>
-  <button mat-stroked-button color="primary" (click)="login()">
+  </form>
-    Login
+  <mat-progress-bar
-  </button>
+    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}}
+    {{ errorMessage }}
   </mat-error>
 </div>

src/app/pages/login/login.component.scss

@@ -1,4 +1,7 @@
-#login-form {
+#login-wrapper {
+    #login-form {
+        display: contents;
+    }
     display: flex;
     flex-direction: column;
     max-width: 32em;