Merge pull request #62 from BinaryStudioAcademy/bug/2-design-login-page

Bug/2 design login page
BinaryStudioAcademy · Aug 31, 2023 · 2932e9c · 2932e9c
2 parents e732cc0 + af872a0
commit 2932e9c
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 24 deletions.
diff --git a/frontend/src/app/modules/login/log-in-page/log-in-page.component.html b/frontend/src/app/modules/login/log-in-page/log-in-page.component.html
@@ -11,25 +11,24 @@ <H4 class="sign-in-label">Sign in</H4>
             <H5 class="or-label">or</H5>
 
             <form class="logInForm" [formGroup]="logInForm">
-                <app-custom-input 
-                    [InputType]="'email'" 
-                    [Identifier]="'email'" 
-                    [Width]="'100%'" 
+                <app-custom-input
+                    [InputType]="'email'"
+                    [Identifier]="'email'"
+                    [Width]="'100%'"
                     [InputLabel]="'Email'"
                     [InputPlaceholder]="'Enter your email'"
                     (InputValueChange)="logInForm.controls['email'].setValue($event)">
                 </app-custom-input>
-                <app-custom-input 
-                    [InputType]="'password'" 
-                    [Identifier]="'password'" 
+                <app-custom-input
+                    [InputType]="'password'"
+                    [Identifier]="'password'"
                     [Width]="'100%'"
-                    [InputLabel]="'Password:'"
+                    [InputLabel]="'Password'"
                     [InputPlaceholder]="'&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;'"
+                    [IsForgetPassword]="true"
                     (InputValueChange)="logInForm.controls['password'].setValue($event)">
                 </app-custom-input>
-                <div class="forget-password">
-                    <a href="someUrl" class="forget-password-link">Forget password?</a>
-                </div>
+
                 <button class="submit-sign-in" [disabled]="!logInForm.valid" (click)="signIn()">Sign In</button>
             </form>
         </div>
@@ -38,4 +37,4 @@ <H5 class="or-label">or</H5>
             <a class="sign-up-link" routerLink="/auth/register">Sign up</a>
         </div>
     </div>
-</div>
+</div>
diff --git a/frontend/src/app/modules/login/log-in-page/log-in-page.component.sass b/frontend/src/app/modules/login/log-in-page/log-in-page.component.sass
@@ -1,4 +1,5 @@
 @import 'color-variables'
+@import 'screen-sizes-variables'
 
 .log-in-body
     position: absolute
@@ -7,7 +8,7 @@
     padding: 0px
 
     display: grid
-    grid-template-columns: 70vw 30vw
+    grid-template-columns: 55vw 45vw
 
 .logo-part
     grid-column: 1
@@ -47,7 +48,6 @@
     align-items: center
 
     margin: 0px
-    height: 100%
     width: 100%
 
 .log-in-part
@@ -103,16 +103,6 @@
     flex-direction: column
     gap: 1.4vw
 
-.forget-password
-    display: flex
-    flex-direction: row
-    justify-content: space-between
-    &-link
-        color: $cornflower
-        font-family: Montserrat
-        font-size: 12px
-        line-height: normal
-
 .submit-sign-in
     border-radius: 7px
     background-color: $green
@@ -133,6 +123,7 @@
     background-color: $dark-green
 
 .no-account
+    margin-top: 16px
     margin-bottom: 50px
     align-self: flex-end
     color: $white
@@ -150,3 +141,19 @@
 
     font-weight: 300
     line-height: normal
+
+@media screen and (max-width: $large)
+  .log-in-body
+    grid-template-columns: none
+    grid-template-rows: 35vh 65vh
+    width: 100%
+  .logo-part, .log-in-part
+    grid-column: auto
+  .sign-in-label
+    margin: 16px 0
+  .or-label
+    margin: 0
+
+@media screen and (max-width: $mobile)
+  .log-in-part > *
+    width: 90%
diff --git a/frontend/src/app/shared/components/custom-input/custom-input.component.html b/frontend/src/app/shared/components/custom-input/custom-input.component.html
@@ -1,6 +1,7 @@
 <div class="input-form">
     <div [style.height]="Height" [style.width]="Width" class="input-form-container">
         <label for="{{ Identifier }}" class="input-form-label">{{ InputLabel }}</label>
+        <a *ngIf="IsForgetPassword" href="someUrl" class="forget-password-link">Forget password</a>
         <input
             type="{{ InputType }}"
             id="{{ Identifier }}"

diff --git a/frontend/src/app/shared/components/custom-input/custom-input.component.sass b/frontend/src/app/shared/components/custom-input/custom-input.component.sass
@@ -38,3 +38,11 @@
         color: $transparent-grey
     fa-icon:hover
         color: $grey
+
+.forget-password-link
+    color: $cornflower
+    font-family: Montserrat
+    font-size: 12px
+    line-height: normal
+    float: right
+    margin-top: 5px
diff --git a/frontend/src/app/shared/components/custom-input/custom-input.component.ts b/frontend/src/app/shared/components/custom-input/custom-input.component.ts
@@ -16,6 +16,8 @@ export class CustomInputComponent {
 
     @Input() FormTextHeight: string = '45px';
 
+    @Input() IsForgetPassword: boolean = false;
+
     @Input() InputValue?: string;
 
     @Input() InputLabel?: string;