Skip to content

Commit 822eb41

Browse files
marcode24marcode24
committed
✨ register users added
1 parent 7500ca6 commit 822eb41

File tree

15 files changed

+173
-50
lines changed

15 files changed

+173
-50
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
.modal {
2-
z-index: 100;
2+
z-index: 200;
33
background-color: rgba(71, 80, 87, 0.4);
44
top: 0;
55
right: 0;
66
bottom: 0;
77
left: 0;
8-
opacity: 0;
8+
opacity: 1;
99
display: none;
1010
justify-content: center;
1111
align-items: center;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</div>
66
<div class="body">
77
<app-login *ngIf="showLogin" (showRegister)="changePage($event)" (closeModal)="closeModal()"></app-login>
8-
<app-register *ngIf="!showLogin" (showLogin)="changePage($event)"></app-register>
8+
<app-register *ngIf="!showLogin" (showLogin)="changePage($event)" (closeModal)="closeModal()"></app-register>
99
</div>
1010
</div>
1111
</div>

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@ import { CommonModule } from '@angular/common';
33

44
import { AuthComponent } from './auth.component';
55
import { ComponentsModule } from './components/components.module';
6+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
67

78
@NgModule({
89
declarations: [
910
AuthComponent
1011
],
1112
imports: [
1213
CommonModule,
13-
ComponentsModule
14+
ComponentsModule,
15+
FormsModule,
16+
ReactiveFormsModule
1417
],
1518
exports: [
1619
AuthComponent

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<div _ngcontent-vhs-c8="" class="line"></div>
1818
</div>
1919
<div class="no-account">
20-
<span>¿No tienes una cuenta?</span>
21-
<a (click)="changePage()" class="link">Registrarme</a>
20+
<span>Have no account?</span>
21+
<a (click)="changePage()" class="link">Sign in</a>
2222
</div>
2323
</div>

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,12 @@ form .sign-on {
3636
color: var(--primary-color);
3737
cursor: pointer;
3838
}
39+
40+
.input-group {
41+
display: flex;
42+
flex-direction: column;
43+
}
44+
45+
span.error > ul > li {
46+
margin-left: 1rem;
47+
}

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

Lines changed: 44 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,54 @@
11
<div class="register-container">
2-
<form>
2+
<form [formGroup]="registerForm" (submit)="register()">
33
<span class="sign-on">Register</span>
4-
<label for="email" class="floating">
5-
<input type="text" id="email" placeholder="email">
6-
<span>Email</span>
7-
</label>
8-
<label for="password" class="floating">
9-
<input type="password" id="password" placeholder="password">
10-
<span>Password</span>
11-
</label>
12-
<label for="confirm-password" class="floating">
13-
<input type="password" id="confirm-password" placeholder="confirmar password">
14-
<span>Confirmar Password</span>
15-
</label>
16-
<button class="btn btn-primary btn-lg">Ingresar</button>
4+
<div class="input-group">
5+
<label for="email" class="floating">
6+
<input formControlName="email" type="text" id="email" placeholder="email">
7+
<span>Email</span>
8+
</label>
9+
<div *ngIf="validateForm('email')" class="text-error">
10+
<span *ngIf="validateField('email', 'required')" class="error">must provide an email</span>
11+
<span *ngIf="validateField('email', 'pattern')" class="error">email format wrong</span>
12+
</div>
13+
</div>
14+
15+
<div class="input-group">
16+
<label for="password" class="floating">
17+
<input formControlName="password" type="password" id="password" placeholder="password">
18+
<span>Password</span>
19+
</label>
20+
<div *ngIf="validateForm('password')" class="text-error">
21+
<span *ngIf="validateField('password', 'required')" class="error">must provide a password</span>
22+
<span *ngIf="validateField('password', 'pattern')" class="error">must contain:
23+
<ul>
24+
<li>1 lower case</li>
25+
<li>1 upper case</li>
26+
<li>1 numeric character</li>
27+
<li>1 special character</li>
28+
</ul>
29+
</span>
30+
</div>
31+
</div>
32+
33+
<div class="input-group">
34+
<label for="confirm-password" class="floating">
35+
<input formControlName="password2" type="password" id="confirm-password" placeholder="confirmar password">
36+
<span>Confirm Password</span>
37+
</label>
38+
<div *ngIf="validateForm('password2')" class="text-error">
39+
<span *ngIf="validateField('password2', 'required')" class="error">must provide a password</span>
40+
<span *ngIf="validateField('password2', 'matching')" class="error">password has to match</span>
41+
</div>
42+
</div>
43+
<span class="error">{{message}}</span>
44+
<button [disabled]="!registerForm.valid" type="submit" class="btn btn-primary btn-lg">Create account</button>
1745
</form>
1846
<div _ngcontent-vhs-c8="" class="divisor">
1947
<div _ngcontent-vhs-c8="" class="line"></div><span _ngcontent-vhs-c8="">o</span>
2048
<div _ngcontent-vhs-c8="" class="line"></div>
2149
</div>
2250
<div class="has-account">
23-
<span>¿Ya tienes una cuenta?</span>
24-
<a (click)="changePage()" class="link">Iniciar Sesión</a>
51+
<span>Already have account?</span>
52+
<a (click)="changePage()" class="link">Sign on</a>
2553
</div>
2654
</div>

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

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
2+
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
3+
import { ILogin } from '@interfaces/login.interface';
4+
import { AuthService } from '@services/auth.service';
5+
import MatchPassword from '@utils/match-password.util';
6+
import { RegexExpressions } from '@utils/regex.util';
27

38
@Component({
49
selector: 'app-register',
@@ -7,13 +12,65 @@ import { Component, EventEmitter, OnInit, Output } from '@angular/core';
712
})
813
export class RegisterComponent implements OnInit {
914
@Output() showLogin: EventEmitter<boolean> = new EventEmitter();
10-
constructor() { }
15+
@Output() closeModal: EventEmitter<boolean> = new EventEmitter();
16+
private regexExpressions = RegexExpressions;
17+
18+
public registerForm: FormGroup;
19+
public message: string;
20+
21+
constructor(
22+
private fb: FormBuilder,
23+
private authService: AuthService,
24+
) { }
1125

1226
ngOnInit(): void {
27+
this.loadForm();
28+
}
29+
30+
loadForm() {
31+
this.registerForm = this.fb.group({
32+
email: ['', [Validators.required, Validators.pattern(this.regexExpressions.EMAIL)]],
33+
password: ['', [Validators.required, Validators.pattern(this.regexExpressions.PASSWORD)]],
34+
password2: ['', [Validators.required]],
35+
},{
36+
validators: [
37+
MatchPassword.match('password', 'password2'),
38+
]
39+
})
40+
}
41+
42+
register() {
43+
if(this.registerForm.valid) {
44+
const data: ILogin = {
45+
email: this.registerForm.get('email')?.value,
46+
password: this.registerForm.get('password')?.value,
47+
}
48+
this.authService.signIn(data).subscribe({
49+
next: () => {
50+
this.closeModal.emit(true);
51+
},
52+
error: (e) => {
53+
if(e.status === 400) {
54+
const error = e.error;
55+
const message = error?.msg;
56+
this.message = message;
57+
}
58+
}
59+
})
60+
}
1361
}
1462

1563
changePage(): void{
1664
this.showLogin.emit(true);
1765
}
1866

67+
validateForm(field: string): boolean | undefined | null {
68+
const myForm = this.registerForm.get(field);
69+
return myForm?.errors && (myForm?.dirty || myForm?.touched);
70+
}
71+
72+
validateField(field: string, error: string): boolean | undefined | null {
73+
return (this.registerForm.get(field)?.hasError(error));
74+
}
75+
1976
}

‎src/app/core/components/sidebar/sidebar.component.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,8 +110,9 @@ nav li a {
110110
}
111111

112112
nav li a:hover,
113-
.profile .profile-details:hover {
114-
background: var(--bg-hover);
113+
.profile .profile-details:hover,
114+
.active {
115+
background: var(--bg-hover) !important;
115116
}
116117

117118
nav li a .links_name {

‎src/app/core/components/sidebar/sidebar.component.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,32 @@
55
</div>
66
<ul class="nav-list">
77
<li>
8-
<a routerLink="/">
8+
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
99
<i class='bx bx-news'></i>
1010
<span class="links_name">News</span>
1111
</a>
1212
<span class="tooltip">News</span>
1313
</li>
1414
<li>
15-
<a (click)="navigate('/explore')">
15+
<a routerLink="/explore" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
1616
<i class='bx bx-world'></i>
1717
<span class="links_name">Explore</span>
1818
</a>
1919
<span class="tooltip">Explore</span>
2020
</li>
2121
<li>
22-
<a (click)="navigate('/feed/saved')">
22+
<a routerLink="/feed/saved" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
2323
<i class='bx bx-bookmark'></i>
2424
<span class="links_name">Saved</span>
2525
</a>
2626
<span class="tooltip">Saved</span>
2727
</li>
2828
<li>
29-
<a routerLink="/settings">
29+
<a routerLink="/settings" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
3030
<i class='bx bx-cog'></i>
31-
<span class="links_name">Configuration</span>
31+
<span class="links_name">Settings</span>
3232
</a>
33-
<span class="tooltip">Configuration</span>
33+
<span class="tooltip">Settings</span>
3434
</li>
3535
</ul>
3636
<div class="profile" *ngIf="userActive">

‎src/app/core/components/sidebar/sidebar.component.ts‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
2-
import { Router } from '@angular/router';
3-
import { User } from '@models/user.model';
4-
import { AuthService } from '@services/auth.service';
5-
import { FeedService } from '@services/feed.service';
62
import { Subscription } from 'rxjs';
73

4+
import { User } from '@models/user.model';
5+
6+
import { AuthService } from '@services/auth.service';
87

98
@Component({
109
selector: 'app-sidebar',
@@ -21,8 +20,6 @@ export class SidebarComponent implements OnInit, AfterViewInit, OnDestroy {
2120

2221
constructor(
2322
private authService: AuthService,
24-
private feedService: FeedService,
25-
private router: Router
2623
) {
2724
this.userActive = authService.getUserActive;
2825
}
@@ -50,16 +47,4 @@ export class SidebarComponent implements OnInit, AfterViewInit, OnDestroy {
5047
this.userActive = this.authService.getUserActive;
5148
}
5249

53-
changeExplore(value: boolean): void {
54-
this.router.navigate(['/']);
55-
this.feedService.changeToExplore(value);
56-
}
57-
58-
navigate(route: string): void {
59-
if(!this.isAuthenticated) {
60-
return this.authService.showModalAuth();
61-
}
62-
this.router.navigate([route]);
63-
}
64-
6550
}

0 commit comments

Comments
 (0)