bugfixes login

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

@@ -15,7 +15,7 @@
       <img src="./../../../assets/img/login/blue-line.svg" alt="" />
       <div class="input-fields">
         <input
-          type="text"
+          type="mail"
           id="mail"
           name="mail"
           #mail="ngModel"
@@ -24,11 +24,15 @@
           [(ngModel)]="loginData.mail"
           required
         />
+        @if(!loginData.mail) {
         <img
           class="custom-img"
           src="./../../../assets/img/login/mail.svg"
           alt=""
         />
+        } @else {
+        <img class="custom-img" alt="" />
+        }
         <div class="error-msg">
           @if (!mail.valid && mail.touched) {
           <p>You must enter a mail.</p>
@@ -46,11 +50,15 @@
           [(ngModel)]="loginData.password"
           required
         />
+        @if(!loginData.password) {
         <img
           class="custom-img"
           src="./../../../assets/img/login/lock.svg"
           alt=""
         />
+        } @else {
+        <img class="custom-img" alt="" />
+        }
         <div class="error-msg">
           @if (!password.valid && password.touched) {
           <p>You must enter a password.</p>
@@ -78,7 +86,8 @@
             !loginData.mail ||
             password.invalid ||
             !loginData.password ||
-            sharedService.isBtnDisabled
+            sharedService.isBtnDisabled ||
+            !checkIfUserEmailIsValid(loginData.mail)
           "
         ></app-form-btn>
         <app-form-btn

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

@@ -126,6 +126,15 @@ section {
 
 /*------------- RESPONSIVE -------------*/
 
+@media (max-height: 820px) {
+  .content {
+    top: 40%;
+  }
+  .logo {
+    display: none;
+  }
+}
+
 @media screen and (max-width: 650px) {
   .content {
     width: 322px;
@@ -154,6 +163,12 @@ section {
   }
 }
 
+@media (max-height: 550px) {
+  .content {
+    top: 45%;
+  }
+}
+
 @media screen and (max-width: 450px) {
   .content {
     width: 252px;
@@ -164,6 +179,20 @@ section {
     }
   }
 
+  .input-fields {
+    .custom-input {
+      font-size: 16px;
+    }
+    .custom-img {
+      &:nth-child(2) {
+        top: 2px;
+      }
+      &:nth-child(5) {
+        top: 73px;
+      }
+    }
+  }
+
   .input-fields {
     width: 80%;
   }
@@ -175,18 +204,3 @@ section {
     }
   }
 }
-
-@media (max-height: 820px) {
-  .content {
-    top: 40%;
-  }
-  .logo {
-    display: none;
-  }
-}
-
-@media (max-height: 550px) {
-  .content {
-    top: 45%;
-  }
-}

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

@@ -45,4 +45,14 @@ export class LoginComponent {
   googleLogin() {
     this.loginSerivce.googleLogin();
   }
+
+  checkIfUserEmailIsValid(emailValue: string) {
+    const channelNameLenght = emailValue.length;
+    const emailRegex = /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/;
+    if (emailRegex.test(emailValue)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
 }

src/app/services/login.service.ts

@@ -28,9 +28,7 @@ export class LoginService {
   constructor(
     private firebaseService: FirebaseService,
     public sharedService: SharedService
-  ) {
-    console.log(this.sharedService.generateRandomColor());
-  }
+  ) {}
 
   login(loginData: { mail: string; password: string }) {
     signInWithEmailAndPassword(getAuth(), loginData.mail, loginData.password)