Added remember me option

Author: Bernardo-MG

src/app/authentication/service/authentication.service.ts

@@ -20,17 +20,12 @@ export class AuthenticationService {
 
   private user: Observable<User>;
 
+  private rememberMe = false;
+
   constructor(
     private http: HttpClient
   ) {
-    const localUser = localStorage.getItem(this.userKey);
-    if (localUser) {
-      const readUser = JSON.parse(localUser);
-      this.userSubject = new BehaviorSubject<User>(readUser);
-    } else {
-      this.userSubject = new BehaviorSubject<User>(new User());
-    }
-
+    this.userSubject = this.readUserFromLocal();
     this.user = this.userSubject.asObservable();
   }
 
@@ -53,19 +48,41 @@ export class AuthenticationService {
     return this.user;
   }
 
+  public setRememberMe(remember: boolean) {
+    this.rememberMe = remember;
+  }
+
+  private readUserFromLocal(): BehaviorSubject<User> {
+    let subject: BehaviorSubject<User>;
+
+    // If the user was stored, load it
+    const localUser = localStorage.getItem(this.userKey);
+    if (localUser) {
+      // User found in local storage
+      const readUser = JSON.parse(localUser);
+      subject = new BehaviorSubject<User>(readUser);
+    } else {
+      // User not found
+      // Use default user
+      subject = new BehaviorSubject<User>(new User());
+    }
+
+    return subject;
+  }
+
   private loadUser(status: LoginStatus): User {
     let loggedUser;
 
     loggedUser = new User();
     if (status) {
+      // Received data
       loggedUser.username = status.username;
       loggedUser.logged = status.logged;
       loggedUser.token = status.token;
 
-      if (loggedUser.logged) {
+      if (this.rememberMe) {
+        // Store user
         localStorage.setItem(this.userKey, JSON.stringify(loggedUser));
-      } else {
-        localStorage.removeItem(this.userKey);
       }
     }
 

src/app/login/components/login-form/login-form.component.html

@@ -15,6 +15,10 @@
             Password is required
         </div>
     </div>
+    <div class="form-group">
+        <label for="rememberMe">Remember me</label>
+        <input type="checkbox" formControlName="rememberMe" class="form-check-input">
+    </div>
     <button [disabled]="!canLogin()" class="btn btn-primary" [attr.aria-disabled]="!canLogin()" aria-label="Login">
         <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
         Login

src/app/login/components/login-form/login-form.component.ts

@@ -15,7 +15,8 @@ export class LoginFormComponent {
 
   public form = this.formBuilder.group({
     username: ['', Validators.required],
-    password: ['', Validators.required]
+    password: ['', Validators.required],
+    rememberMe: [false, Validators.required]
   });
 
   constructor(
@@ -28,6 +29,9 @@ export class LoginFormComponent {
         const user = new LoginUser();
         user.username = this.form.value.username;
         user.password = this.form.value.password;
+        if(this.form.value.rememberMe){
+          user.rememberMe = this.form.value.rememberMe;
+        }
 
         this.login.emit(user);
       }

src/app/login/model/login-user.ts

@@ -1,4 +1,5 @@
 export class LoginUser {
     username: string = '';
     password: string = '';
+    rememberMe: boolean = false;
 }

src/app/login/view/login-view/login-view.component.ts

@@ -28,6 +28,7 @@ export class LoginViewComponent implements OnInit {
   }
 
   public onLogin(login: LoginUser) {
+    this.authenticationService.setRememberMe(login.rememberMe);
     this.authenticationService.login(login.username, login.password)
       .subscribe({
         next: user => {