feat: add "Remember Me" checkbox in LoginComponent

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

@@ -81,6 +81,18 @@
           <p>{{ "login.errorPassword1" | translate }}</p>
           }
         </div>
+        <div class="checkbox">
+          <label class="container">
+            <input
+              type="checkbox"
+              id="checkbox"
+              name="checkbox"
+              #checkbox
+              [(ngModel)]="checkboxRememberMe"
+            />
+            {{ "login.rememberMe" | translate }}
+          </label>
+        </div>
         <div class="forgot-pw">
           <a routerLink="/forgot-pw">{{
             "login.forgotPassword" | translate

src/app/components/login/login.component.scss

@@ -87,7 +87,7 @@ section {
 }
 
 .forgot-pw {
-  padding-bottom: 24px;
+  margin: 12px 0;
   a {
     text-align: center;
     font-size: 16px;
@@ -104,6 +104,41 @@ section {
   }
 }
 
+// Checkbox
+
+.checkbox {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 12px;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: var(--gray);
+  cursor: pointer;
+  &:hover {
+    color: var(--light-blue);
+    font-weight: 600;
+  }
+}
+
+input[type="checkbox"] {
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  accent-color: var(--light-blue);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+input[type="checkbox"]:hover {
+  transform: scale(1.1);
+}
+
 /*------------- RESPONSIVE -------------*/
 
 @media (max-height: 800px) {

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

@@ -31,6 +31,7 @@ import { AuthService } from '../../services/auth.service';
 })
 export class LoginComponent {
   isPasswordIconVisible: boolean = true;
+  checkboxRememberMe: boolean = false;
 
   loginData = {
     email: '',
@@ -65,7 +66,7 @@ export class LoginComponent {
     this.sharedService.isBtnDisabled = true;
     if (ngForm.submitted && ngForm.form.valid) {
       try {
-        await this.authService.login(this.loginData, true);
+        await this.authService.login(this.loginData, this.checkboxRememberMe);
         this.router.navigate(['/summary']);
       } catch (error) {
         this.sharedService.isBtnDisabled = false;
@@ -81,10 +82,12 @@ export class LoginComponent {
     this.onSubmit({ submitted: true, form: { valid: true } } as NgForm);
   }
 
+  /*   
   googleLogin() {
     this.sharedService.isBtnDisabled = true;
     this.loginService.googleLogin();
   } 
+  */
 
   checkIfUserEmailIsValid(emailValue: string) {
     const emailRegex = /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/;

src/assets/i18n/de.json

@@ -12,7 +12,8 @@
     "errorPassword0": "Sie müssen ein Passwort eingeben!",
     "errorPassword1": "Das Passwort passt nicht zur E-Mail-Adresse!",
     "loginDialog0": "Einloggen",
-    "loginDialog1": "Bitte warten..."
+    "loginDialog1": "Bitte warten...",
+    "rememberMe": "Eingeloggt bleiben"
   },
   "forgotPW": {
     "forgot": "Passwort zurücksetzen",

src/assets/i18n/en.json

@@ -12,7 +12,8 @@
     "errorPassword0": "You must enter a password!",
     "errorPassword1": "The password does not match the email address!",
     "loginDialog0": "Logging in",
-    "loginDialog1": "Please wait..."
+    "loginDialog1": "Please wait...",
+    "rememberMe": "Remember me"
   },
   "forgotPW": {
     "forgot": "Reset Password",