clean code & bugfixes

frontend/src/app/components/auth/auth.component.html

@@ -5,8 +5,6 @@
     <p>Enter your email to create or restart your subscription.</p>
   </div>
   <form
-    id="form"
-    class="register-form"
     #taskForm="ngForm"
     (ngSubmit)="onSubmit(taskForm, mail)"
     onsubmit="return false"
@@ -20,7 +18,12 @@
       class="custom-input"
       autocomplete="email"
       [(ngModel)]="authData.mail"
-      [ngClass]="{ 'error-border': mail.invalid && mail.touched }"
+      [class.error-border]="
+        (!mail.valid && mail.touched) ||
+        (mail.touched &&
+          !isUserEmailValid(authData.mail.toLowerCase()) &&
+          authData.mail.length > 0)
+      "
       required
     />
     <div class="error-msg">

frontend/src/app/components/auth/auth.component.scss

@@ -1,4 +1,5 @@
 @import "./../../../assets/style/colors.scss";
+@import "./../../../assets/style/form.scss";
 
 section {
   display: flex;
@@ -38,10 +39,8 @@ section {
   }
 }
 
-.register-form {
+form {
-  display: flex;
+  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
   position: relative;
   width: 500px;
   padding: 24px;
@@ -49,43 +48,22 @@ section {
     width: 70%;
     padding: 12px 18px;
     margin: 8px 0;
-    box-sizing: border-box;
+    color: $white;
-    background: transparent;
     border: 2px solid $white;
     border-radius: 24px;
     font-size: 18px;
-    font-weight: 400;
-    transition: background-color 250ms ease-in-out, color 250ms ease-in-out,
-      border-color 250ms ease-in-out;
     &::placeholder {
       color: rgba($white, 0.6);
     }
-    &:focus {
-      outline: none;
-      background-color: rgba($white, 0.1);
-    }
   }
   .error-border {
     border: 2px solid $red;
-    color: $red;
-    &::placeholder {
-      color: $red;
-    }
   }
 }
 
 .error-msg {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   position: absolute;
   bottom: 0;
-  height: 24px;
   padding: 6px;
   width: 62%;
-  p {
-    color: $red;
-    font-size: 12px !important;
-    font-weight: 400 !important;
-  }
 }

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

@@ -2,8 +2,6 @@
   <div class="content">
     <div class="headline">Log in</div>
     <form
-      id="form"
-      class="login-form"
       #loginForm="ngForm"
       (ngSubmit)="onSubmit(loginForm)"
       onsubmit="return false"
@@ -56,14 +54,32 @@
         <p>Password is too short, min 6 characters</p>
         } }
       </div>
+      <div class="checkbox">
+        <input
+          type="checkbox"
+          id="checkbox"
+          name="checkbox"
+          #checkbox
+          [(ngModel)]="authData.checkbox"
+        />
+        <label for="checkbox">Remember me</label>
+      </div>
       <app-btn-large
         [value]="'Log in'"
         [disabled]="
+          !checkbox.checked ||
           !authData.mail ||
           (!isUserEmailValid(authData.mail) && authData.mail.length > 0) ||
           !password.valid
         "
       ></app-btn-large>
     </form>
+    <div class="footer">
+      <a routerLink="/forgot-password">Forgot password?</a>
+      <div class="footer-content">
+        <p>New to Videoflix?</p>
+        <a routerLink="/register">Sign Up now</a>
+      </div>
+    </div>
   </div>
 </section>

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

@@ -1,4 +1,5 @@
 @import "./../../../../assets/style/colors.scss";
+@import "./../../../../assets/style/form.scss";
 
 section {
   display: flex;
@@ -26,6 +27,7 @@ section {
   padding: 43px 56px;
   border-radius: 48px;
   background-color: $white;
+  position: relative;
   .headline {
     font-size: 48px;
     font-weight: 700;
@@ -37,59 +39,48 @@ section {
   }
 }
 
-.error-msg {
+.checkbox {
   display: flex;
   align-items: center;
-  justify-content: center;
+  width: 90%;
   height: 24px;
-  padding: 6px;
+  input {
-  width: 120%;
+    width: 16px;
-  p {
+    height: 16px;
-    color: $red;
+    margin: 12px;
-    font-size: 12px !important;
-    font-weight: 400 !important;
-  }
-  a {
-    color: $red;
-    text-decoration: underline;
-    cursor: pointer;
-    &:hover {
-      text-decoration: none;
   }
+  label {
+    width: fit-content;
+    font-size: 16px;
+    font-weight: 400;
+    color: $black;
   }
 }
 
-.login-form {
+.footer {
-  display: flex;
+  position: absolute;
-  flex-direction: column;
+  bottom: 43px;
-  align-items: center;
+  left: 0;
-  justify-content: space-between;
+  right: 0;
-  input {
+  a {
-    width: 90%;
-    padding: 12px 18px;
-    margin: 8px 0;
-    box-sizing: border-box;
-    background: transparent;
-    color: $blue;
-    border: 1px solid $blue;
-    border-radius: 12px;
     font-size: 18px;
-    font-weight: 400;
+    font-weight: 700;
-    transition: background-color 250ms ease-in-out, color 250ms ease-in-out,
+    color: $blue;
-      border-color 250ms ease-in-out;
+    text-decoration: none;
-    &::placeholder {
+    cursor: pointer;
-      color: rgba($blue, 0.6);
+    &:hover {
-    }
+      text-decoration: underline;
-    &:focus {
-      outline: none;
-      background-color: rgba($white, 0.1);
     }
   }
-  .error-border {
+  .footer-content {
-    border: 1px solid $red;
+    display: flex;
-    color: $red;
+    justify-content: center;
-    &::placeholder {
+    margin-top: 24px;
-      color: $red;
+    gap: 24px;
+    p {
+      font-size: 18px;
+      font-weight: 700;
+      color: $black;
     }
   }
 }

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

@@ -14,6 +14,7 @@ export class LoginComponent {
   authData = {
     mail: '',
     password: '',
+    checkbox: false,
     send: false,
   };
 

frontend/src/app/components/auth/register/register.component.html

@@ -14,8 +14,6 @@
     </div>
     } @else {
     <form
-      id="form"
-      class="register-form"
       #registerForm="ngForm"
       (ngSubmit)="onSubmit(registerForm)"
       onsubmit="return false"

frontend/src/app/components/auth/register/register.component.scss

@@ -1,4 +1,5 @@
 @import "./../../../../assets/style/colors.scss";
+@import "./../../../../assets/style/form.scss";
 
 section {
   display: flex;
@@ -55,52 +56,3 @@ section {
     }
   }
 }
-
-.error-msg {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 24px;
-  padding: 6px;
-  width: 120%;
-  p {
-    color: $red;
-    font-size: 12px !important;
-    font-weight: 400 !important;
-  }
-}
-
-.register-form {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  input {
-    width: 90%;
-    padding: 12px 18px;
-    margin: 8px 0;
-    box-sizing: border-box;
-    background: transparent;
-    color: $blue;
-    border: 1px solid $blue;
-    border-radius: 12px;
-    font-size: 18px;
-    font-weight: 400;
-    transition: background-color 250ms ease-in-out, color 250ms ease-in-out,
-      border-color 250ms ease-in-out;
-    &::placeholder {
-      color: rgba($blue, 0.6);
-    }
-    &:focus {
-      outline: none;
-      background-color: rgba($white, 0.1);
-    }
-  }
-  .error-border {
-    border: 1px solid $red;
-    color: $red;
-    &::placeholder {
-      color: $red;
-    }
-  }
-}

frontend/src/assets/style/form.scss

@@ -0,0 +1,46 @@
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  input {
+    width: 90%;
+    padding: 12px 18px;
+    box-sizing: border-box;
+    background: transparent;
+    color: $blue;
+    border: 1px solid $blue;
+    border-radius: 12px;
+    font-size: 18px;
+    font-weight: 400;
+    transition: background-color 250ms ease-in-out, color 250ms ease-in-out,
+      border-color 250ms ease-in-out;
+    &::placeholder {
+      color: rgba($blue, 0.6);
+    }
+    &:focus {
+      outline: none;
+      background-color: rgba($white, 0.1);
+    }
+  }
+  .error-border {
+    border: 1px solid $red;
+    color: $red;
+    &::placeholder {
+      color: $red;
+    }
+  }
+}
+
+.error-msg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding: 9px;
+  p {
+    color: $red;
+    font-size: 12px !important;
+    font-weight: 400 !important;
+  }
+}