feat: implement styles for sign-in

Kleostro · Aug 19, 2024 · 9594771 · 9594771
1 parent f0946b3
commit 9594771
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 57 deletions.
diff --git a/src/app/auth/pages/login/login.component.html b/src/app/auth/pages/login/login.component.html
@@ -1,64 +1,65 @@
 <section class="login-container">
   <form class="login-form" [formGroup]="loginForm" (ngSubmit)="submitForm()">
     <h2 class="login-title">Sign In</h2>
-
-    <div class="login-form-item">
-      <label for="email" class="login-label">Email</label>
-      <div class="login-field">
-        <input
-          id="email"
-          type="email"
-          pInputText
-          formControlName="email"
-          placeholder="Enter your email"
-          class="login-input p-inputtext"
-        />
-        @if (loginForm.get('email')?.invalid && loginForm.get('email')?.touched) {
-          @if (loginForm.get('email')?.errors?.['required']) {
-            <small class="p-error">Please input your email!</small>
+    <div class="login-inputs-container">
+      <div class="login-form-item">
+        <label for="email" class="login-label">Email</label>
+        <div class="login-field">
+          <input
+            id="email"
+            type="email"
+            pInputText
+            formControlName="email"
+            placeholder="Enter your email"
+            class="login-input p-inputtext"
+          />
+          @if (loginForm.get('email')?.invalid && loginForm.get('email')?.touched) {
+            @if (loginForm.get('email')?.errors?.['required']) {
+              <small class="p-error">Please input your email!</small>
+            }
+            @if (loginForm.get('email')?.errors?.['pattern']) {
+              <small class="p-error">Incorrect email. Please input a valid email!</small>
+            }
           }
-          @if (loginForm.get('email')?.errors?.['pattern']) {
-            <small class="p-error">Incorrect email. Please input a valid email address!</small>
+          @if (loginForm.hasError('invalidEmail')) {
+            <small class="p-error">Email is wrong. Please input a valid email!</small>
           }
-        }
-        @if (loginForm.hasError('invalidEmail')) {
-          <small class="p-error">Email is wrong. Please input a valid email address!</small>
-        }
-        @if (loginForm.hasError('alreadyLoggedIn')) {
-          <small class="p-error">Authorization error</small>
-        }
-      </div>
-    </div>
-    <div class="login-form-item">
-      <label for="password" class="login-label">Password</label>
-      <div class="login-field">
-        <input
-          id="password"
-          type="password"
-          pInputText
-          formControlName="password"
-          placeholder="Enter your password"
-          class="login-input p-inputtext"
-        />
-        @if (loginForm.get('password')?.invalid && loginForm.get('password')?.touched) {
-          @if (loginForm.get('password')?.errors?.['required']) {
-            <small class="p-error">Please input your password!</small>
+          @if (loginForm.hasError('alreadyLoggedIn')) {
+            <small class="p-error">Authorization error</small>
           }
-          @if (loginForm.get('password')?.hasError('minTrimmedLength')) {
-            <small class="p-error">Password must be at least 8 characters long</small>
+        </div>
+      </div>
+      <div class="login-form-item">
+        <label for="password" class="login-label">Password</label>
+        <div class="login-field">
+          <input
+            id="password"
+            type="password"
+            pInputText
+            formControlName="password"
+            placeholder="Enter your password"
+            class="login-input p-inputtext"
+          />
+          @if (loginForm.get('password')?.invalid && loginForm.get('password')?.touched) {
+            @if (loginForm.get('password')?.errors?.['required']) {
+              <small class="p-error">Please input your password!</small>
+            }
+            @if (loginForm.get('password')?.hasError('minTrimmedLength')) {
+              <small class="p-error">Password must be at least 8 characters long.</small>
+            }
           }
-        }
+        </div>
       </div>
+      @if (loginForm.hasError('invalidFields')) {
+        <small class="p-error">Fields are empty</small>
+      }
+      @if (loginForm.hasError('alreadyLoggedIn')) {
+        <small class="p-error">You are already logged in.</small>
+      }
+      @if (loginForm.hasError('userNotFound')) {
+        <small class="p-error">Incorrect email or password</small>
+      }
     </div>
-    @if (loginForm.hasError('invalidFields')) {
-      <small class="p-error">Fields are empty</small>
-    }
-    @if (loginForm.hasError('alreadyLoggedIn')) {
-      <small class="p-error">You are already logged in.</small>
-    }
-    @if (loginForm.hasError('userNotFound')) {
-      <small class="p-error">Incorrect email or password</small>
-    }
     <div class="login-button-container">
       <p-button type="submit" label="Sign in" [disabled]="!loginForm.valid" class="p-mt-2"></p-button>
       <p-link pButton routerLink="/sign-up" label="Sign Up" class="p-button-text p-mt-2"></p-link>

diff --git a/src/app/auth/pages/login/login.component.scss b/src/app/auth/pages/login/login.component.scss
@@ -1,3 +1,5 @@
+@import 'variables';
+
 .login-container {
   display: flex;
   justify-content: center;
@@ -10,16 +12,47 @@
   align-items: center;
   justify-content: center;
 
-  width: 30rem;
+  width: $offset-xxxl * 5;
   height: auto;
   margin: auto;
-  padding: 2rem;
+  padding: $offset-ms;
 
-  background-color: rgb(199 199 199 / 14%);
-  box-shadow: 0 0 10px 0 rgb(0 0 0 / 30%);
+  background-color: $gray-100;
+  box-shadow: $shadow-100;
 
   .login-title {
-    margin-bottom: 1rem;
+    margin-bottom: $offset-xs;
     font-weight: 700;
   }
+
+  .login-form-item {
+    height: $offset-xl;
+    margin-bottom: $offset-xs;
+
+    .login-field {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .login-button-container {
+    display: flex;
+    gap: $offset-xs;
+    margin-top: $offset-s;
+  }
+
+  .p-error,
+  .login-input {
+    width: $offset-xl * 5;
+  }
+
+  .p-error {
+    min-height: $offset-xs;
+    margin-top: $four;
+  }
+
+  .login-inputs-container {
+    height: $offset-xxxl * 2;
+  }
 }