update register design

frontend/src/app/app.routes.ts

@@ -1,4 +1,8 @@
 import { Routes } from '@angular/router';
 import { HomeComponent } from './components/home/home.component';
+import { RegisterComponent } from './components/auth/register/register.component';
 
-export const routes: Routes = [{ path: '', component: HomeComponent }];
+export const routes: Routes = [
+  { path: '', component: HomeComponent },
+  { path: 'register', component: HomeComponent },
+];

frontend/src/app/components/auth/auth.component.html

@@ -1,3 +1,30 @@
 <section>
-  <app-register></app-register>
+  <div class="headline">
+    <p>Movies, TV shows, and more</p>
+    <p>Watch whenever you want wherever you want</p>
+    <p>Enter your email to create or restart your subscription.</p>
+  </div>
+  <form
+    id="form"
+    class="register-form"
+    #taskForm="ngForm"
+    (ngSubmit)="onSubmit(taskForm)"
+    onsubmit="return false"
+  >
+    <input
+      type="mail"
+      id="mail"
+      name="mail"
+      #mail="ngModel"
+      placeholder="Email Address"
+      class="custom-input"
+      autocomplete="email"
+      [(ngModel)]="authData.mail"
+      required
+    />
+    <app-btn-large
+      [value]="'Sign Up'"
+      [disabled]="!isUserEmailValid(authData.mail) && authData.mail.length > 0"
+    ></app-btn-large>
+  </form>
 </section>

frontend/src/app/components/auth/auth.component.scss

@@ -13,4 +13,55 @@ section {
   width: 100vw;
   height: 100vh;
   text-align: center;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
+    url(./../../../assets/img/backgrounds/home.png);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.headline {
+  p:nth-child(1) {
+    font-size: 48px;
+    font-weight: 700;
+    padding: 12px;
+  }
+  p:nth-child(2) {
+    font-size: 24px;
+    font-weight: 500;
+    padding: 12px;
+  }
+  p:nth-child(3) {
+    font-size: 18px;
+    font-weight: 400;
+    padding: 12px;
+  }
+}
+
+.register-form {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 500px;
+  padding: 24px;
+  input {
+    width: 70%;
+    padding: 12px 18px;
+    margin: 8px 0;
+    box-sizing: border-box;
+    background: transparent;
+    border: 2px solid $white;
+    border-radius: 24px;
+    font-size: 18px;
+    font-weight: 400;
+    transition: background-color 250ms ease-in-out, color 250ms ease-in-out,
+      border-color 250ms ease-in-out;
+    &::placeholder {
+      color: rgba($white, 0.6);
+    }
+    &:focus {
+      outline: none;
+      background-color: rgba($white, 0.1);
+    }
+  }
 }

frontend/src/app/components/auth/auth.component.ts

@@ -1,11 +1,28 @@
 import { Component } from '@angular/core';
-import { RegisterComponent } from './register/register.component';
+import { FormsModule, NgForm } from '@angular/forms';
+import { BtnLargeComponent } from '../../shared/components/btn-large/btn-large.component';
 
 @Component({
   selector: 'app-auth',
   standalone: true,
-  imports: [RegisterComponent],
+  imports: [BtnLargeComponent, FormsModule],
   templateUrl: './auth.component.html',
   styleUrl: './auth.component.scss',
 })
-export class AuthComponent {}
+export class AuthComponent {
+  authData = {
+    mail: '',
+  };
+
+  isUserEmailValid(emailValue: string) {
+    const emailRegex = /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/;
+    return emailRegex.test(emailValue);
+  }
+
+  onSubmit(ngForm: NgForm) {
+    if (ngForm.submitted && ngForm.form.valid) {
+      console.log(this.authData.mail);
+      this.authData.mail = '';
+    }
+  }
+}

frontend/src/app/components/auth/register/register.component.html

@@ -1,9 +1,6 @@
 <section>
-  <div class="headline">
+  <div class="content">
-    <p>Movies, TV shows, and more</p>
+    <div class="headline">Sign Up</div>
-    <p>Watch whenever you want wherever you want</p>
-    <p>Enter your email to create or restart your subscription.</p>
-  </div>
     <form
       id="form"
       class="register-form"
@@ -17,11 +14,36 @@
         name="mail"
         #mail="ngModel"
         placeholder="Email Address"
-      class="custom-input"
         autocomplete="email"
         [(ngModel)]="authData.mail"
         required
       />
-    <app-btn-large [value]="'Sign Up'"></app-btn-large>
+      <input
+        type="password"
+        id="password"
+        name="password"
+        #password="ngModel"
+        placeholder="Enter a password"
+        autocomplete="new-password"
+        [(ngModel)]="authData.password"
+        required
+      />
+      <input
+        type="password"
+        id="passwordConfirm"
+        name="passwordConfirm"
+        #passwordConfirm="ngModel"
+        placeholder="Confirm password"
+        autocomplete="new-password"
+        [(ngModel)]="authData.passwordConfirm"
+        required
+      />
+      <app-btn-large
+        [value]="'Get Started'"
+        [disabled]="
+          !isUserEmailValid(authData.mail) && authData.mail.length > 0
+        "
+      ></app-btn-large>
     </form>
+  </div>
 </section>

frontend/src/app/components/auth/register/register.component.scss

@@ -13,46 +13,51 @@ section {
   width: 100vw;
   height: 100vh;
   text-align: center;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
+    url(./../../../../assets/img/backgrounds/register.png);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
+.content {
+  width: 520px;
+  height: 492px;
+  padding: 43px 56px;
+  border-radius: 48px;
+  background-color: $white;
   .headline {
-  p:nth-child(1) {
     font-size: 48px;
     font-weight: 700;
-    padding: 12px;
+    color: $blue;
+    margin-bottom: 24px;
   }
-  p:nth-child(2) {
+  app-btn-large {
-    font-size: 24px;
+    margin-top: 36px;
-    font-weight: 500;
-    padding: 12px;
-  }
-  p:nth-child(3) {
-    font-size: 18px;
-    font-weight: 400;
-    padding: 12px;
   }
 }
 
 .register-form {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  width: 500px;
+  gap: 32px;
-  padding: 24px;
   input {
-    width: 70%;
+    width: 90%;
-    padding: 12px;
+    padding: 12px 18px;
     margin: 8px 0;
     box-sizing: border-box;
     background: transparent;
-    border: 2px solid $white;
+    color: $blue;
-    border-radius: 24px;
+    border: 1px solid $blue;
+    border-radius: 12px;
     font-size: 18px;
     font-weight: 400;
     transition: background-color 250ms ease-in-out, color 250ms ease-in-out,
       border-color 250ms ease-in-out;
     &::placeholder {
-      color: rgba($white, 0.6);
+      color: rgba($blue, 0.6);
     }
     &:focus {
       outline: none;

frontend/src/app/components/auth/register/register.component.ts

@@ -12,11 +12,19 @@ import { FormsModule, NgForm } from '@angular/forms';
 export class RegisterComponent {
   authData = {
     mail: '',
+    password: '',
+    passwordConfirm: '',
   };
 
+  isUserEmailValid(emailValue: string) {
+    const emailRegex = /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/;
+    return emailRegex.test(emailValue);
+  }
+
   onSubmit(ngForm: NgForm) {
     if (ngForm.submitted && ngForm.form.valid) {
-      console.log('pass');
+      console.log(this.authData.mail);
+      this.authData.mail = '';
     }
   }
 }

frontend/src/app/components/home/footer/footer.component.scss

@@ -10,6 +10,7 @@ footer {
   right: 0;
   height: 88px;
   padding: 12px;
+  z-index: 1;
   p {
     padding: 0 36px;
     font-size: 18px;

frontend/src/app/components/home/header/header.component.scss

@@ -10,6 +10,7 @@ header {
   right: 0;
   height: 88px;
   padding: 10px 96px;
+  z-index: 1;
 }
 
 .logo {

frontend/src/app/components/home/home.component.html

@@ -1,5 +1,9 @@
 <section class="bg-home">
   <app-header></app-header>
+  @if (currentRoute === '') {
   <app-auth></app-auth>
+  } @if (currentRoute === 'register') {
+  <app-register></app-register>
+  }
   <app-footer></app-footer>
 </section>

frontend/src/app/components/home/home.component.scss

@@ -3,10 +3,10 @@ section {
   height: 100vh;
 }
 
-.bg-home {
+// .bg-home {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
+//   background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
-    url(./../../../assets/img/backgrounds/home.png);
+//     url(./../../../assets/img/backgrounds/home.png);
-  background-size: cover;
+//   background-size: cover;
-  background-position: center;
+//   background-position: center;
-  background-repeat: no-repeat;
+//   background-repeat: no-repeat;
-}
+// }

frontend/src/app/components/home/home.component.ts

@@ -1,13 +1,26 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { HeaderComponent } from './header/header.component';
 import { FooterComponent } from './footer/footer.component';
 import { AuthComponent } from '../auth/auth.component';
+import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
+import { filter } from 'rxjs/operators';
+import { RegisterComponent } from '../auth/register/register.component';
 
 @Component({
   selector: 'app-home',
   standalone: true,
-  imports: [HeaderComponent, FooterComponent, AuthComponent],
+  imports: [HeaderComponent, FooterComponent, AuthComponent, RegisterComponent],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',
 })
-export class HomeComponent {}
+export class HomeComponent implements OnInit {
+  currentRoute: any;
+
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit(): void {
+    this.route.url.subscribe((url) => {
+      this.currentRoute = url[0]?.path || '';
+    });
+  }
+}