design register component

src/app/components/login/footer/footer.component.scss

@@ -24,6 +24,8 @@
   }
 }
 
+/*------------- RESPONSIVE -------------*/
+
 @media (max-height: 820px) {
   .footer {
     margin-bottom: 24x;

src/app/components/login/register/register.component.html

@@ -1,4 +1,131 @@
 <section>
   <app-header [signUpBtn]="false"></app-header>
+  <form
+    id="form"
+    #taskForm="ngForm"
+    (ngSubmit)="onSubmit(taskForm)"
+    onsubmit="return false"
+  >
+    <div class="content">
+      <div class="headline">
+        <app-btn-back></app-btn-back>
+        <p>Sign up</p>
+        <img src="./../../../assets/img/login/blue-line.svg" alt="" />
+      </div>
+      <div class="input-fields">
+        <input
+          type="name"
+          id="name"
+          name="name"
+          #name="ngModel"
+          placeholder="Name"
+          class="custom-input"
+          [(ngModel)]="registerData.name"
+          required
+        />
+        @if(!registerData.name) {
+        <img
+          class="custom-img"
+          src="./../../../assets/img/login/user.svg"
+          alt=""
+        />
+        } @else {
+        <img class="custom-img" alt="" />
+        }
+        <div class="error-msg">
+          @if (!name.valid && name.touched) {
+          <p>You must enter a name.</p>
+          }
+        </div>
+        <input
+          type="mail"
+          id="mail"
+          name="mail"
+          #mail="ngModel"
+          placeholder="Email"
+          class="custom-input"
+          [(ngModel)]="registerData.mail"
+          required
+        />
+        @if(!registerData.mail) {
+        <img
+          class="custom-img"
+          src="./../../../assets/img/login/mail.svg"
+          alt=""
+        />
+        } @else {
+        <img class="custom-img" alt="" />
+        }
+        <div class="error-msg">
+          @if (!mail.valid && mail.touched) {
+          <p>You must enter a mail.</p>
+          }
+        </div>
+        <input
+          type="password"
+          id="password"
+          name="password"
+          #password="ngModel"
+          placeholder="Password"
+          class="custom-input"
+          [(ngModel)]="registerData.password"
+          required
+        />
+        @if(!registerData.password) {
+        <img
+          class="custom-img"
+          src="./../../../assets/img/login/lock.svg"
+          alt=""
+        />
+        } @else {
+        <img class="custom-img" alt="" />
+        }
+        <div class="error-msg">
+          @if (!password.valid && password.touched) {
+          <p>You must enter a password.</p>
+          }
+        </div>
+        <input
+          type="passwordConfirm"
+          id="passwordConfirm"
+          name="passwordConfirm"
+          #passwordConfirm="ngModel"
+          placeholder="Password"
+          class="custom-input"
+          [(ngModel)]="registerData.passwordConfirm"
+          required
+        />
+        @if(!registerData.passwordConfirm) {
+        <img
+          class="custom-img"
+          src="./../../../assets/img/login/lock.svg"
+          alt=""
+        />
+        } @else {
+        <img class="custom-img" alt="" />
+        }
+        <div class="error-msg">
+          @if (!passwordConfirm.valid && passwordConfirm.touched) {
+          <p>You must enter a password.</p>
+          }
+        </div>
+      </div>
+      <div class="form-buttons">
+        <app-form-btn
+          [class]="'btn-login'"
+          [type]="'submit'"
+          [value]="'Sign up'"
+          [disabled]="
+            mail.invalid ||
+            !registerData.mail ||
+            password.invalid ||
+            !registerData.password ||
+            sharedService.isBtnDisabled ||
+            !checkIfUserEmailIsValid(registerData.mail)
+          "
+        ></app-form-btn>
+      </div>
+    </div>
+  </form>
   <app-footer></app-footer>
 </section>

src/app/components/login/register/register.component.scss

@@ -3,10 +3,103 @@ section {
   height: 100vh;
 }
 
-.logo {
+// REGISTER
-  position: absolute;
+
-  left: 57px;
+.content {
-  top: 60px;
+  display: flex;
-  height: 100px;
+  flex-direction: column;
-  width: 122px;
+  align-items: center;
+  position: fixed;
+  top: 50%;
+  right: 50%;
+  transform: translate(50%, -50%);
+  width: 422px;
+  height: fit-content;
+  background: var(--white);
+  box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.05);
+  border-radius: 30px;
+  padding: 48px 96px;
+  p {
+    font-size: 61px;
+    font-weight: 700;
+    position: relative;
+  }
+  img {
+    padding: 12px 0 24px 0;
+  }
+}
+
+.headline {
+  position: relative;
+  text-align: center;
+  width: 100%;
+  app-btn-back {
+    position: absolute;
+    top: 20px;
+    left: -50px;
+  }
+}
+
+.input-fields {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  .custom-input::-webkit-contacts-auto-fill-button {
+    visibility: hidden;
+  }
+  .custom-input {
+    font-size: 20px;
+    font-weight: 400;
+    width: 100%;
+    border-radius: 10px;
+    border: 1px solid var(--light-gray);
+    padding: 12px 21px;
+  }
+  .custom-img {
+    &:nth-child(2) {
+      position: absolute;
+      right: 0;
+      top: 5px;
+    }
+    &:nth-child(5) {
+      position: absolute;
+      right: 0;
+      top: 92px;
+    }
+    &:nth-child(8) {
+      position: absolute;
+      right: 0;
+      top: 176px;
+    }
+    &:nth-child(11) {
+      position: absolute;
+      right: 0;
+      top: 262px;
+    }
+  }
+  .custom-input:focus + .custom-img {
+    display: none;
+  }
+}
+
+.error-msg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding: 6px;
+  width: 120%;
+  p {
+    color: var(--red);
+    font-size: 12px !important;
+    font-weight: 400 !important;
+  }
+}
+
+.form-buttons {
+  display: flex;
+  justify-content: end;
+  padding: 12px 0;
 }

src/app/components/login/register/register.component.ts

@@ -1,12 +1,56 @@
 import { Component } from '@angular/core';
 import { HeaderComponent } from '../header/header.component';
 import { FooterComponent } from '../footer/footer.component';
+import { FormsModule, NgForm } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { FormBtnComponent } from '../../../shared/components/buttons/form-btn/form-btn.component';
+import { FirebaseService } from '../../../services/firebase.service';
+import { LoginService } from '../../../services/login.service';
+import { SharedService } from '../../../services/shared.service';
+import { BtnBackComponent } from '../../../shared/components/buttons/btn-back/btn-back.component';
 
 @Component({
   selector: 'app-register',
   standalone: true,
-  imports: [HeaderComponent, FooterComponent],
+  imports: [
+    HeaderComponent,
+    FooterComponent,
+    FormBtnComponent,
+    BtnBackComponent,
+    FormsModule,
+    CommonModule,
+  ],
   templateUrl: './register.component.html',
   styleUrl: './register.component.scss',
 })
-export class RegisterComponent {}
+export class RegisterComponent {
+  registerData = {
+    name: '',
+    mail: '',
+    password: '',
+    passwordConfirm: '',
+  };
+
+  constructor(
+    private firebaseService: FirebaseService,
+    public loginSerivce: LoginService,
+    public sharedService: SharedService
+  ) {}
+
+  onSubmit(ngForm: NgForm) {
+    this.sharedService.isBtnDisabled = true;
+    if (ngForm.submitted && ngForm.form.valid) {
+      //this.loginSerivce.register(this.registerData);
+    }
+  }
+
+  checkIfUserEmailIsValid(emailValue: string) {
+    const channelNameLenght = emailValue.length;
+    const emailRegex = /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/;
+    if (emailRegex.test(emailValue)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+}

src/assets/img/login/user.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 8C6.9 8 5.95833 7.60833 5.175 6.825C4.39167 6.04167 4 5.1 4 4C4 2.9 4.39167 1.95833 5.175 1.175C5.95833 0.391667 6.9 0 8 0C9.1 0 10.0417 0.391667 10.825 1.175C11.6083 1.95833 12 2.9 12 4C12 5.1 11.6083 6.04167 10.825 6.825C10.0417 7.60833 9.1 8 8 8ZM14 16H2C1.45 16 0.979167 15.8042 0.5875 15.4125C0.195833 15.0208 0 14.55 0 14V13.2C0 12.6333 0.145833 12.1125 0.4375 11.6375C0.729167 11.1625 1.11667 10.8 1.6 10.55C2.63333 10.0333 3.68333 9.64583 4.75 9.3875C5.81667 9.12917 6.9 9 8 9C9.1 9 10.1833 9.12917 11.25 9.3875C12.3167 9.64583 13.3667 10.0333 14.4 10.55C14.8833 10.8 15.2708 11.1625 15.5625 11.6375C15.8542 12.1125 16 12.6333 16 13.2V14C16 14.55 15.8042 15.0208 15.4125 15.4125C15.0208 15.8042 14.55 16 14 16ZM2 14H14V13.2C14 13.0167 13.9542 12.85 13.8625 12.7C13.7708 12.55 13.65 12.4333 13.5 12.35C12.6 11.9 11.6917 11.5625 10.775 11.3375C9.85833 11.1125 8.93333 11 8 11C7.06667 11 6.14167 11.1125 5.225 11.3375C4.30833 11.5625 3.4 11.9 2.5 12.35C2.35 12.4333 2.22917 12.55 2.1375 12.7C2.04583 12.85 2 13.0167 2 13.2V14ZM8 6C8.55 6 9.02083 5.80417 9.4125 5.4125C9.80417 5.02083 10 4.55 10 4C10 3.45 9.80417 2.97917 9.4125 2.5875C9.02083 2.19583 8.55 2 8 2C7.45 2 6.97917 2.19583 6.5875 2.5875C6.19583 2.97917 6 3.45 6 4C6 4.55 6.19583 5.02083 6.5875 5.4125C6.97917 5.80417 7.45 6 8 6Z" fill="#A8A8A8"/>
+</svg>