From d98dc6e561c466dc72387cbeed79469f43182a1f Mon Sep 17 00:00:00 2001
From: Han Trinh Viet <hntrnn12@gmail.com>
Date: Sun, 16 Jun 2024 16:48:42 +0700
Subject: [PATCH] Complete Sign In Component

---
 src/app/share/footer/footer.component.html |   1 -
 src/app/share/header/header.component.html |  12 +--
 src/app/share/header/header.component.scss |   6 +-
 src/app/sign-in/sign-in.component.html     |  30 +++++-
 src/app/sign-in/sign-in.component.scss     | 117 +++++++++++++++++++++
 src/styles/_mixins.scss                    |   2 +-
 6 files changed, 158 insertions(+), 10 deletions(-)

diff --git a/src/app/share/footer/footer.component.html b/src/app/share/footer/footer.component.html
index b5e36c6..e69de29 100644
--- a/src/app/share/footer/footer.component.html
+++ b/src/app/share/footer/footer.component.html
@@ -1 +0,0 @@
-<h1>NGU</h1>
diff --git a/src/app/share/header/header.component.html b/src/app/share/header/header.component.html
index 60ef3b1..e564775 100644
--- a/src/app/share/header/header.component.html
+++ b/src/app/share/header/header.component.html
@@ -1,24 +1,24 @@
 <header class="header">
   <div class="header__logo">
-    <a class="header__logo-link" [routerLink]="['/home']">
+    <a class="header__logo-link" [routerLink]="['home']">
       <img [priority]="true" ngSrc="/assets/images/brand-logo.png" alt="logo" height="69.087" width="157">
     </a>
   </div>
   <div class="header__menu">
     <ul class="header__menu-list">
       <li class="header__menu-item">
-        <a class="header__menu-item-link" [routerLink]="['/home']" [routerLinkActive]="['active']">TRANG CHỦ</a>
+        <a class="header__menu-item-link" [routerLink]="['home']" [routerLinkActive]="['active']">TRANG CHỦ</a>
       </li>
       <li class="header__menu-item">
-        <a class="header__menu-item-link" [routerLink]="['/courses']" [routerLinkActive]="['active']">KHÓA HỌC</a>
+        <a class="header__menu-item-link" [routerLink]="['courses']" [routerLinkActive]="['active']">KHÓA HỌC</a>
       </li>
       <li class="header__menu-item">
-        <a class="header__menu-item-link" [routerLink]="['/about-us']" [routerLinkActive]="['active']">VỀ CHÚNG TÔI</a>
+        <a class="header__menu-item-link" [routerLink]="['about-us']" [routerLinkActive]="['active']">VỀ CHÚNG TÔI</a>
       </li>
     </ul>
   </div>
   <div class="header__buttons">
-    <a class="header__button header__button--sign-in" [routerLink]="['/sign-in']">Đăng nhập</a>
-    <a class="header__button header__button--sign-up" [routerLink]="['/sign-up']">Đăng ký</a>
+    <a class="header__button header__button--sign-in" [routerLink]="['sign-in']">Đăng nhập</a>
+    <a class="header__button header__button--sign-up" [routerLink]="['sign-up']">Đăng ký</a>
   </div>
 </header>
diff --git a/src/app/share/header/header.component.scss b/src/app/share/header/header.component.scss
index c17f1b1..dae2a21 100644
--- a/src/app/share/header/header.component.scss
+++ b/src/app/share/header/header.component.scss
@@ -17,9 +17,9 @@
   &-list {
     list-style-type: none;
     display: flex;
-    gap: 6rem;
     align-items: center;
     padding: 1rem;
+    gap: 6rem;
   }
 
   &-item-link {
@@ -66,3 +66,7 @@
   background-color: $on-surface;
   color: $white;
 }
+
+@media (max-width: 992px) {
+
+}
diff --git a/src/app/sign-in/sign-in.component.html b/src/app/sign-in/sign-in.component.html
index 371a36b..6d02e63 100644
--- a/src/app/sign-in/sign-in.component.html
+++ b/src/app/sign-in/sign-in.component.html
@@ -1 +1,29 @@
-<p>sign-in works!</p>
+<div class="sign-in">
+  <h1 class="sign-in__title">Đăng nhập</h1>
+  <form class="sign-in__form">
+    <div class="sign-in__inputs">
+      <div class="sign-in__input-wrapper">
+        <label class="sign-in__label" for="email">Email</label>
+        <input type="email" id="email" class="sign-in__input" placeholder="Email"/>
+      </div>
+      <div class="sign-in__input-wrapper">
+        <label class="sign-in__label" for="password">Mật khẩu (tối thiểu 12 kí tự bao gồm....)</label>
+        <input type="password" id="password" class="sign-in__input" placeholder="Mật khẩu (tối thiểu 12 kí tự bao gồm....)"/>
+      </div>
+    </div>
+    <div class="sign-in__options">
+      <div class="sign-in__remember">
+        <input type="checkbox" id="remember" class="sign-in__checkbox"/>
+        <label for="remember" class="sign-in__checkbox-label">Duy trì đăng nhập</label>
+      </div>
+      <a href="#" class="sign-in__forgot">Quên mật khẩu</a>
+    </div>
+    <div class="sign-in__actions">
+      <button type="submit" class="sign-in__submit">Đăng nhập</button>
+      <div class="sign-in__signup">
+        <span>Bạn chưa có tài khoản?</span>
+        <a href="#" class="sign-in__signup-link">Đăng kí ngay</a>
+      </div>
+    </div>
+  </form>
+</div>
diff --git a/src/app/sign-in/sign-in.component.scss b/src/app/sign-in/sign-in.component.scss
index e69de29..8d45055 100644
--- a/src/app/sign-in/sign-in.component.scss
+++ b/src/app/sign-in/sign-in.component.scss
@@ -0,0 +1,117 @@
+@import "styles";
+
+.sign-in {
+  width: 768px;
+  height: 550px;
+  padding: 8rem;
+  margin: 8rem auto 40rem auto;
+  border: 0.2rem solid $secondary2;
+  border-radius: 1.2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4rem;
+}
+
+.sign-in__title {
+  color: $on-surface;
+  @include font-heading-3
+}
+
+.sign-in__form {
+  width: 608px;
+  display: flex;
+  flex-direction: column;
+  gap: 3.6rem;
+}
+
+.sign-in__inputs {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.sign-in__input-wrapper {
+  display: flex;
+}
+
+.sign-in__input-wrapper label {
+  display: none; /* Hide label as the original HTML does not use visible labels */
+}
+
+
+.sign-in__input {
+  flex: 1 1 auto;
+  padding: 1.6rem 2rem;
+  @include font-caption-1;
+  color: $secondary2;
+  background: $white;
+  border-radius: 8px;
+  border: 1px solid $line;
+}
+
+.sign-in__options {
+  display: flex;
+  justify-content: space-between;
+}
+
+.sign-in__remember {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 12px;
+}
+
+.sign-in__checkbox {
+  width: 20px;
+  height: 20px;
+  background: $white;
+  border: 2px solid $primary;
+}
+
+.sign-in__checkbox-label {
+  color: $on-surface;
+  @include font-body-title
+}
+
+.sign-in__forgot {
+  color: $on-surface;
+  @include font-body-title;
+  text-decoration: none;
+}
+
+.sign-in__actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+}
+
+.sign-in__submit {
+  padding: 10px 200px;
+  color: $white;
+  background: $primary;
+  @include font-button;
+  text-transform: capitalize;
+  border-radius: 0.8rem;
+  border: none;
+  cursor: pointer;
+}
+
+.sign-in__signup {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.sign-in__signup > span {
+  @include font-body-title;
+}
+
+.sign-in__signup-link {
+  color: $primary;
+  @include font-body-title;
+  text-decoration: none;
+}
+
+
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index a0d4e87..0a13921 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -65,7 +65,7 @@
 ;
 @mixin font-body-title() {
   font-size: 1.6rem;
-  font-weight: 500;
+  font-weight: 600;
   line-height: 2.4rem;
 }