container changes

Gururajj77 · Jan 10, 2024 · 9999433 · 9999433
1 parent 0b5ecb2
commit 9999433
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 24 deletions.
diff --git a/src/app/sign-in/sign-in.component.html b/src/app/sign-in/sign-in.component.html
@@ -5,7 +5,7 @@ <h2 class="heading">Log In</h2>
   <p class="main-text">
     Type in your Email ID and Password for logging into you Brevipost account
   </p>
-  <form [formGroup]="loginForm" (ngSubmit)="signIn()">
+  <form class="custom-form" [formGroup]="loginForm" (ngSubmit)="signIn()">
     <div class="input-group">
       <input
         formControlName="email"
@@ -14,13 +14,16 @@ <h2 class="heading">Log In</h2>
         required
       />
     </div>
-    @if (loginForm.controls['email'].errors?.['required'] &&
-    loginForm.controls['email'].touched) {
-    <p class="error-message">Email is required.</p>
-    } @if (loginForm.controls['email'].errors?.['email'] &&
-    loginForm.controls['email'].touched) {
-    <p class="error-message">Enter a valid email.</p>
-    }
+    <div class="error-container">
+      @if (loginForm.controls['email'].errors?.['required'] &&
+      loginForm.controls['email'].touched) {
+      <p class="error-message">Email is required.</p>
+      } @if (loginForm.controls['email'].errors?.['email'] &&
+      loginForm.controls['email'].touched) {
+      <p class="error-message">Enter a valid email.</p>
+      }
+    </div>
+
     <div class="input-group">
       <input
         formControlName="password"
@@ -29,17 +32,23 @@ <h2 class="heading">Log In</h2>
         required
       />
     </div>
-    @if ( loginForm.controls['password'].errors?.['required'] &&
-    loginForm.controls['password'].touched ) {
-    <p class="error-message">Password is required.</p>
-    } @if (loginForm.controls['password'].errors?.['pattern'] &&
-    loginForm.controls['password'].touched) {
-    <p class="error-message">Password does not meet complexity requirements.</p>
-    } @if (ERROR_CODE==="auth/invalid-credential") {
-    <p class="error-message">Invalid Login credentails.</p>
-    }
+    <div class="error-container">
+      @if ( loginForm.controls['password'].errors?.['required'] &&
+      loginForm.controls['password'].touched ) {
+      <p class="error-message">Password is required.</p>
+      } @if (loginForm.controls['password'].errors?.['pattern'] &&
+      loginForm.controls['password'].touched) {
+      <p class="error-message">
+        Password should have a capital letter, a number and a special character
+      </p>
+      } @if (ERROR_CODE==="auth/invalid-credential") {
+      <p class="error-message">Invalid Login credentails.</p>
+      }
+    </div>
 
-    <button type="submit">Log In</button>
+    <div>
+      <button [disabled]="!loginForm.valid" type="submit">Log In</button>
+    </div>
   </form>
 
   <div class="help-text">

diff --git a/src/app/sign-in/sign-in.component.scss b/src/app/sign-in/sign-in.component.scss
@@ -19,11 +19,16 @@
   margin-bottom: 20px;
   font-weight: bold;
 }
+.custom-form {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
 
 .input-group {
   width: 100%;
   max-width: 300px;
-  margin-bottom: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -39,21 +44,42 @@ input[type="password"] {
   box-sizing: border-box;
   border-radius: 4px;
 }
+
+.error-container {
+  height: 50px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
 .error-message {
   color: #ff0000;
   text-align: center;
   font-size: 0.8rem;
-  height: 20px;
+}
+.error-message.ng-star-inserted {
+  visibility: visible;
+  height: auto;
 }
 
 button {
   background-color: $accent-color;
   color: white;
   padding: 14px 20px;
   margin: 8px 0;
-  border: none;
+  border: 0.5px solid $accent-color;
   cursor: pointer;
-  width: 100%;
+  width: 250px;
+  border-radius: 4px;
+}
+
+button:disabled {
+  background-color: white;
+  color: $accent-color;
+  padding: 14px 20px;
+  margin: 8px 0;
+  border: 0.5px solid $accent-color;
+  cursor: not-allowed;
+  width: 250px;
   border-radius: 4px;
 }
 
@@ -63,7 +89,6 @@ button:hover {
 
 .help-text {
   text-align: center;
-  padding: 12px;
   color: #a0a0a0;
 }
 
@@ -109,12 +134,12 @@ button:hover {
 
 .register-link {
   text-align: center;
-  margin-top: 20px;
 }
 
 .register-link a {
   color: #007bff;
   text-decoration: none;
+  cursor: pointer;
 }
 
 .register-link a:hover {
@@ -141,4 +166,10 @@ button:hover {
   .input-group {
     width: 400px;
   }
+  button {
+    width: 300px;
+  }
+  button:disabled {
+    width: 300px;
+  }
 }