Skip to content

Commit 430b726

Browse files
marcode24marcode24
committed
✨ auth section added
1 parent 809e59e commit 430b726

26 files changed

+596
-11
lines changed

‎src/app/app.module.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
3-
import { HttpClientModule } from '@angular/common/http';
3+
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
44

55
import { AppComponent } from './app.component';
66
import { AppRoutingModule } from './app.routing';

‎src/app/auth/auth.component.css

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.modal {
2+
z-index: 100;
3+
background-color: rgba(71, 80, 87, 0.4);
4+
top: 0;
5+
right: 0;
6+
bottom: 0;
7+
left: 0;
8+
transition: 0.5s;
9+
opacity: 0;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
}
14+
.modal.modal-open {
15+
opacity: 1;
16+
position: fixed;
17+
}
18+
19+
.modal-content .header {
20+
display: flex;
21+
justify-content: flex-end;
22+
align-items: center;
23+
}
24+
25+
.modal-content .header .i-wrapper {
26+
display: flex;
27+
align-items: center;
28+
justify-content: center;
29+
color: var(--primary-color);
30+
transition: 0.5s;
31+
border-radius: 10px;
32+
}
33+
34+
.modal-content .header .i-wrapper:hover {
35+
background-color: #0096fa41;
36+
cursor: pointer;
37+
}
38+
39+
.modal-content .header .i-wrapper i {
40+
font-size: 28px;
41+
padding: 5px;
42+
}
43+
44+
.modal-content {
45+
min-width: 500px;
46+
display: flex;
47+
flex-direction: column;
48+
border-radius: 1rem;
49+
max-width: 30rem;
50+
background-color: #ffffff;
51+
padding: 1rem;
52+
gap: 1.2rem;
53+
}

‎src/app/auth/auth.component.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div class="modal" #modalAuth>
2+
<div class="modal-content">
3+
<div class="header">
4+
<div class="i-wrapper"><i class="bx bx-x" (click)="closeModal()"></i></div>
5+
</div>
6+
<div class="body">
7+
<app-login *ngIf="showLogin" (showRegister)="changePage($event)" (closeModal)="closeModal()"></app-login>
8+
<app-register *ngIf="!showLogin" (showLogin)="changePage($event)"></app-register>
9+
</div>
10+
</div>
11+
</div>

‎src/app/auth/auth.component.ts

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
2+
import { Subscription } from 'rxjs';
3+
4+
import { AuthService } from '@services/auth.service';
5+
6+
@Component({
7+
selector: 'app-auth',
8+
templateUrl: './auth.component.html',
9+
styleUrls: ['./auth.component.css']
10+
})
11+
export class AuthComponent implements OnInit, OnDestroy {
12+
13+
private authSubscription: Subscription;
14+
@ViewChild('modalAuth') modalAuth: ElementRef;
15+
private bodyElement = document.body as HTMLBodyElement;
16+
public showLogin: boolean = true;
17+
18+
constructor(private authService: AuthService) { }
19+
20+
ngOnDestroy(): void {
21+
this.authSubscription.unsubscribe();
22+
}
23+
24+
ngOnInit(): void {
25+
this.authSubscription = this.authService.isAuthenticatedEmitter.subscribe(isAuth => !isAuth ? this.openModal() : '');
26+
}
27+
28+
openModal(): void {
29+
this.bodyElement.classList.add('modal-open');
30+
this.modalAuth.nativeElement.classList.add('modal-open');
31+
}
32+
33+
closeModal(): void {
34+
this.bodyElement.classList.remove('modal-open');
35+
this.modalAuth.nativeElement.classList.remove('modal-open');
36+
}
37+
38+
changePage(value: boolean) {
39+
this.showLogin = value;
40+
}
41+
42+
}

‎src/app/auth/auth.module.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
4+
import { AuthComponent } from './auth.component';
5+
import { ComponentsModule } from './components/components.module';
6+
7+
@NgModule({
8+
declarations: [
9+
AuthComponent
10+
],
11+
imports: [
12+
CommonModule,
13+
ComponentsModule
14+
],
15+
exports: [
16+
AuthComponent
17+
],
18+
})
19+
export class AuthModule { }

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
4+
5+
import { LoginComponent } from './login/login.component';
6+
import { RegisterComponent } from './register/register.component';
7+
8+
@NgModule({
9+
declarations: [
10+
LoginComponent,
11+
RegisterComponent
12+
],
13+
imports: [
14+
CommonModule,
15+
FormsModule,
16+
ReactiveFormsModule
17+
],
18+
exports: [
19+
LoginComponent,
20+
RegisterComponent
21+
]
22+
})
23+
export class ComponentsModule { }

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.login-container {
2+
padding: 0rem 1.8rem 1.8rem;
3+
display: flex;
4+
flex-direction: column;
5+
}
6+
7+
form {
8+
display: flex;
9+
flex-direction: column;
10+
width: 100%;
11+
height: 100%;
12+
gap: 1rem;
13+
}
14+
15+
form .sign-in {
16+
font-size: 42px;
17+
text-align: center;
18+
font-weight: bold;
19+
}
20+
21+
.no-account {
22+
display: flex;
23+
flex-direction: column;
24+
justify-content: flex-end;
25+
align-items: center;
26+
}
27+
28+
.no-account span {
29+
font-size: 24px;
30+
font-weight: bold;
31+
}
32+
33+
.no-account a.link {
34+
color: var(--primary-color);
35+
cursor: pointer;
36+
}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div class="login-container">
2+
<form [formGroup]="loginForm" (submit)="login()">
3+
<span class="sign-in">Login</span>
4+
<label for="email" class="floating">
5+
<input formControlName="email" type="text" id="email" placeholder="email">
6+
<span>Email</span>
7+
</label>
8+
<label for="password" class="floating">
9+
<input formControlName="password" type="password" id="password" placeholder="password">
10+
<span>Password</span>
11+
</label>
12+
<span class="error">{{message}}</span>
13+
<button type="submit" class="btn btn-primary btn-lg">Ingresar</button>
14+
</form>
15+
<div _ngcontent-vhs-c8="" class="divisor">
16+
<div _ngcontent-vhs-c8="" class="line"></div><span _ngcontent-vhs-c8="">o</span>
17+
<div _ngcontent-vhs-c8="" class="line"></div>
18+
</div>
19+
<div class="no-account">
20+
<span>¿No tienes una cuenta?</span>
21+
<a (click)="changePage()" class="link">Registrarme</a>
22+
</div>
23+
</div>

‎src/app/auth/components/login/login.component.ts

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
2+
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
3+
import { AuthService } from '@services/auth.service';
4+
5+
@Component({
6+
selector: 'app-login',
7+
templateUrl: './login.component.html',
8+
styleUrls: ['./login.component.css']
9+
})
10+
export class LoginComponent implements OnInit {
11+
@Output() showRegister: EventEmitter<boolean> = new EventEmitter();
12+
@Output() closeModal: EventEmitter<boolean> = new EventEmitter();
13+
public loginForm: FormGroup;
14+
public message: string;
15+
16+
constructor(
17+
private fb: FormBuilder,
18+
private authService: AuthService
19+
) { }
20+
21+
ngOnInit(): void {
22+
this.loadForm();
23+
}
24+
25+
loadForm() {
26+
this.loginForm = this.fb.group({
27+
email: ['[email protected]', Validators.required],
28+
password: ['Mysecret123$', Validators.required]
29+
});
30+
}
31+
32+
login() {
33+
if(this.loginForm.valid) {
34+
this.authService.login(this.loginForm.value).subscribe({
35+
next: () => {
36+
this.closeModal.emit(true);
37+
},
38+
error: (e) => {
39+
if(e.status === 400) {
40+
const error = e.error;
41+
const message = error?.msg;
42+
this.message = message;
43+
}
44+
}
45+
})
46+
}
47+
}
48+
49+
changePage(): void {
50+
this.showRegister.emit(false);
51+
}
52+
53+
}

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.register-container {
2+
padding: 0rem 1.8rem 1.8rem;
3+
display: flex;
4+
flex-direction: column;
5+
}
6+
7+
form {
8+
display: flex;
9+
flex-direction: column;
10+
width: 100%;
11+
height: 100%;
12+
gap: 1rem;
13+
}
14+
15+
form .sign-in {
16+
font-size: 42px;
17+
text-align: center;
18+
font-weight: bold;
19+
}
20+
21+
.has-account {
22+
display: flex;
23+
flex-direction: column;
24+
justify-content: flex-end;
25+
align-items: center;
26+
}
27+
28+
.has-account span {
29+
font-size: 24px;
30+
font-weight: bold;
31+
}
32+
33+
.has-account a.link {
34+
color: var(--primary-color);
35+
cursor: pointer;
36+
}

0 commit comments

Comments
 (0)