Complete Sign Up Component. Closes #4

viethantrinh · Jun 16, 2024 · abe4b0c · abe4b0c
1 parent d98dc6e
commit abe4b0c
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 9 deletions.
diff --git a/src/app/sign-in/sign-in.component.scss b/src/app/sign-in/sign-in.component.scss
@@ -2,7 +2,6 @@
 
 .sign-in {
   width: 768px;
-  height: 550px;
   padding: 8rem;
   margin: 8rem auto 40rem auto;
   border: 0.2rem solid $secondary2;
@@ -19,7 +18,7 @@
 }
 
 .sign-in__form {
-  width: 608px;
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 3.6rem;
@@ -43,10 +42,11 @@
 .sign-in__input {
   flex: 1 1 auto;
   padding: 1.6rem 2rem;
+
   @include font-caption-1;
   color: $secondary2;
   background: $white;
-  border-radius: 8px;
+  border-radius: 0.8rem;
   border: 1px solid $line;
 }
 
@@ -59,14 +59,13 @@
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  gap: 12px;
+  gap: 1.2rem;
 }
 
 .sign-in__checkbox {
-  width: 20px;
-  height: 20px;
+  width: 2rem;
+  height: 2rem;
   background: $white;
-  border: 2px solid $primary;
 }
 
 .sign-in__checkbox-label {
@@ -88,7 +87,7 @@
 }
 
 .sign-in__submit {
-  padding: 10px 200px;
+  padding: 1rem 20rem;
   color: $white;
   background: $primary;
   @include font-button;

diff --git a/src/app/sign-up/sign-up.component.html b/src/app/sign-up/sign-up.component.html
@@ -1 +1,40 @@
-<p>sign-up works!</p>
+<div class="sign-up">
+  <h1 class="sign-up__title">Đăng ký tài khoản mới</h1>
+  <form class="sign-up__form">
+    <div class="sign-up__fields">
+      <div class="sign-up__field-group">
+        <div class="sign-up__field sign-up__field--short">
+          <label for="last-name" class="sign-up__label">Họ</label>
+          <input type="text" id="last-name" class="sign-up__input" placeholder="Họ">
+        </div>
+        <div class="sign-up__field sign-up__field--short">
+          <label for="first-name" class="sign-up__label">Tên</label>
+          <input type="text" id="first-name" class="sign-up__input" placeholder="Tên">
+        </div>
+      </div>
+      <div class="sign-up__field">
+        <label for="email" class="sign-up__label">Email</label>
+        <input type="email" id="email" class="sign-up__input" placeholder="Email">
+      </div>
+      <div class="sign-up__field">
+        <label for="password" class="sign-up__label">Mật khẩu (tối thiểu 12 kí tự bao gồm....)</label>
+        <input type="password" id="password" class="sign-up__input"
+               placeholder="Mật khẩu (tối thiểu 12 kí tự bao gồm....)">
+      </div>
+      <div class="sign-up__field">
+        <label for="confirm-password" class="sign-up__label">Xác nhận mật khẩu</label>
+        <input type="password" id="confirm-password" class="sign-up__input" placeholder="Xác nhân mật khẩu">
+      </div>
+    </div>
+    <div class="sign-up__terms">
+      <input type="checkbox" id="terms" class="sign-up__checkbox">
+      <label for="terms" class="sign-up__terms-text">Tôi đồng ý với
+        <a href="#" class="sign-up__terms-link">điều khoản dịch vụ</a>
+      </label>
+    </div>
+    <div class="sign-up__actions">
+      <button type="submit" class="sign-up__submit">Đăng Ký</button>
+      <p class="sign-up__login-prompt">Bạn đã có tài khoản? <a href="#" class="sign-up__login-link">Đăng nhập</a></p>
+    </div>
+  </form>
+</div>
diff --git a/src/app/sign-up/sign-up.component.scss b/src/app/sign-up/sign-up.component.scss
@@ -0,0 +1,104 @@
+@import "styles";
+
+.sign-up {
+  width: 768px;
+  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-up__title {
+  color: $on-surface;
+  @include font-heading-3;
+}
+
+.sign-up__form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 3.6rem;
+}
+
+.sign-up__fields {
+  display: flex;
+  flex-direction: column;
+  gap: 3.2rem;
+}
+
+.sign-up__field-group {
+  display: flex;
+  gap: 2.4rem;
+}
+
+.sign-up__field {
+  display: flex;
+  flex: 1 1 auto;
+}
+
+.sign-up__label {
+  display: none;
+}
+
+.sign-up__input {
+  flex: 1 1 auto;
+  padding: 1.6rem 2rem;
+  @include font-caption-1;
+  color: $secondary2;
+  background: $white;
+  border-radius: 0.8rem;
+  border: 1px solid $line;
+}
+
+.sign-up__terms {
+  display: flex;
+  gap: 1.2rem;
+}
+
+.sign-up__checkbox {
+  width: 2rem;
+  height: 2rem;
+  background: $white;
+}
+
+.sign-up__terms-text {
+  @include font-body-title
+}
+
+.sign-up__terms-link {
+  @include font-body-title;
+  color: $primary;
+  text-decoration: none;
+}
+
+.sign-up__actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+}
+
+.sign-up__submit {
+  padding: 1rem 20rem;
+  color: $white;
+  background: $primary;
+  @include font-button;
+  text-transform: capitalize;
+  border-radius: 0.8rem;
+  border: none;
+  cursor: pointer;
+}
+
+.sign-up__login-prompt {
+  @include font-body-title;
+}
+
+.sign-up__login-link {
+  color: $primary;
+  @include font-body-title;
+  text-decoration: none;
+}