✨ modal more view added

Author: marcode24

src/app/auth/auth.component.html

@@ -4,8 +4,11 @@
       <div class="i-wrapper"><i class="bx bx-x" (click)="closeModal()"></i></div>
     </div>
     <div class="body">
-      <app-login *ngIf="showLogin" (showRegister)="changePage($event)" (closeModal)="closeModal()"></app-login>
-      <app-register *ngIf="!showLogin" (showLogin)="changePage($event)" (closeModal)="closeModal()"></app-register>
+      <app-more-features *ngIf="showMore && !showLogin" (changeView)="changePage($event)"></app-more-features>
+      <app-login *ngIf="!showMore && showLogin" (showRegister)="changePage($event)" (closeModal)="closeModal()">
+      </app-login>
+      <app-register *ngIf="!showMore && !showLogin" (showLogin)="changePage($event)" (closeModal)="closeModal()">
+      </app-register>
     </div>
   </div>
 </div>

src/app/auth/auth.component.ts

@@ -13,8 +13,9 @@ export class AuthComponent implements OnInit, OnDestroy {
   private authSubscription: Subscription;
   @ViewChild('modalAuth') modalAuth: ElementRef;
   private bodyElement = document.body as HTMLBodyElement;
-  public showLogin: boolean = true;
 
+  public showLogin: boolean = false;
+  public showMore: boolean = true;
   private modalOpen: boolean = false;
 
   constructor(private authService: AuthService) {}
@@ -37,9 +38,12 @@ export class AuthComponent implements OnInit, OnDestroy {
     this.bodyElement.classList.remove('modal-open');
     this.modalAuth.nativeElement.classList.remove('modal-open');
     this.modalOpen = false;
+    this.showLogin = false;
+    this.showMore = true;
   }
 
   changePage(show: boolean) {
+    this.showMore = false;
     this.showLogin = show;
   }
 

src/app/auth/components/components.module.ts

@@ -3,12 +3,14 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { LoginComponent } from './login/login.component';
+import { MoreFeaturesComponent } from './more-features/more-features.component';
 import { RegisterComponent } from './register/register.component';
 
 @NgModule({
   declarations: [
     LoginComponent,
-    RegisterComponent
+    RegisterComponent,
+    MoreFeaturesComponent
   ],
   imports: [
     CommonModule,
@@ -17,7 +19,8 @@ import { RegisterComponent } from './register/register.component';
   ],
   exports: [
     LoginComponent,
-    RegisterComponent
+    RegisterComponent,
+    MoreFeaturesComponent
   ]
 })
 export class ComponentsModule { }

src/app/auth/components/login/login.component.css

@@ -36,3 +36,9 @@ form .sign-in {
   color: var(--primary-color);
   cursor: pointer;
 }
+
+@media (max-width: 480px) {
+  .login-container {
+    padding: 0 1rem 1rem;
+  }
+}

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

@@ -1,6 +1,6 @@
 <div class="login-container">
   <form [formGroup]="loginForm" (submit)="login()">
-    <span class="sign-in">Login</span>
+    <span class="sign-in">Sign in</span>
     <label for="email" class="floating">
       <input formControlName="email" type="text" id="email" placeholder="email">
       <span>Email</span>
@@ -10,14 +10,14 @@
       <span>Password</span>
     </label>
     <span class="error">{{message}}</span>
-    <button type="submit" class="btn btn-primary btn-lg">Ingresar</button>
+    <button type="submit" class="btn btn-primary btn-lg">Sign in</button>
   </form>
   <div _ngcontent-vhs-c8="" class="divisor">
     <div _ngcontent-vhs-c8="" class="line"></div><span _ngcontent-vhs-c8="">o</span>
     <div _ngcontent-vhs-c8="" class="line"></div>
   </div>
   <div class="no-account">
     <span>Have no account?</span>
-    <a (click)="changePage()" class="link">Sign in</a>
+    <a (click)="changePage()" class="link">Sign on</a>
   </div>
 </div>

src/app/auth/components/more-features/more-features.component.css

@@ -0,0 +1,43 @@
+.more-container {
+  padding: 0rem 1.8rem 1.8rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.more-container img {
+  max-width: 100%;
+  max-height: 15rem;
+}
+
+.more-container .content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  gap: 10px;
+  max-width: 90%;
+}
+
+.more-container .content .description {
+  color: var(--font-color-primary);
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.btn {
+  max-width: 70%;
+  border-radius: 40px;
+}
+
+@media (max-width: 480px) {
+  .more-container {
+    padding: 0 1rem 1rem;
+  }
+
+  .more-container .content {
+    max-width: 100%;
+  }
+}

src/app/auth/components/more-features/more-features.component.html

@@ -0,0 +1,9 @@
+<div class="more-container">
+  <img src="/assets/svg/explore.svg" alt="explore">
+  <div class="content">
+    <span class="description">You want to unlock more features</span>
+    <button (click)="change(true)" class="btn btn-primary btn-lg">Sign in</button>
+    <span class="description">or</span>
+    <button (click)="change(false)" class="btn btn-following btn-lg">Sign on</button>
+  </div>
+</div>

src/app/auth/components/more-features/more-features.component.ts

@@ -0,0 +1,19 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-more-features',
+  templateUrl: './more-features.component.html',
+  styleUrls: ['./more-features.component.css']
+})
+export class MoreFeaturesComponent implements OnInit {
+  @Output() changeView: EventEmitter<boolean> = new EventEmitter();
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  change(value: boolean): void {
+    this.changeView.emit(value);
+  }
+
+}

src/app/auth/components/register/register.component.css

@@ -24,6 +24,7 @@ form .sign-on {
   flex-direction: column;
   justify-content: flex-end;
   align-items: center;
+  text-align: center;
 }
 
 .has-account span {
@@ -45,3 +46,9 @@ form .sign-on {
 span.error > ul > li {
   margin-left: 1rem;
 }
+
+@media (max-width: 480px) {
+  .register-container {
+    padding: 0 1rem 1rem;
+  }
+}

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

@@ -1,6 +1,6 @@
 <div class="register-container">
   <form [formGroup]="registerForm" (submit)="register()">
-    <span class="sign-on">Register</span>
+    <span class="sign-on">Sign on</span>
     <div class="input-group">
       <label for="email" class="floating">
         <input formControlName="email" type="text" id="email" placeholder="email">
@@ -49,6 +49,6 @@
   </div>
   <div class="has-account">
     <span>Already have account?</span>
-    <a (click)="changePage()" class="link">Sign on</a>
+    <a (click)="changePage()" class="link">Sign in</a>
   </div>
 </div>