Skip to content

Commit 915d4d7

Browse files
marcode24marcode24
committed
✨ add create user from register form
1 parent 5a0d420 commit 915d4d7

24 files changed

+436
-47
lines changed

‎src/app/app.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { HttpClientModule, } from '@angular/common/http';
12
import { NgModule } from '@angular/core';
23
import { BrowserModule } from '@angular/platform-browser';
34

@@ -12,6 +13,7 @@ import { FeaturesModule } from './features/features.module';
1213
],
1314
imports: [
1415
BrowserModule,
16+
HttpClientModule,
1517
AppRoutingModule,
1618
FeaturesModule,
1719
AuthModule

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
22
import { NgModule } from '@angular/core';
33
import { RouterModule } from '@angular/router';
44

5+
import { ComponentsModule } from './components/components.module';
56
import { LoginComponent } from './login/login.component';
67
import { RegisterComponent } from './register/register.component';
78

@@ -12,7 +13,8 @@ import { RegisterComponent } from './register/register.component';
1213
],
1314
imports: [
1415
CommonModule,
15-
RouterModule
16+
RouterModule,
17+
ComponentsModule
1618
]
1719
})
1820
export class AuthModule { }

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

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

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<form [formGroup]="registerForm" (submit)="onSubmit()">
2+
<div class="input-group">
3+
<label for="name">Nombre<span>*</span></label>
4+
<input formControlName="name" type="text" id="name" placeholder="Nombre">
5+
<ng-container *ngIf="validateForm('name')">
6+
<span *ngIf="validateField('name', 'required')" class="text-danger">Este campo es requerido</span>
7+
<span *ngIf="validateField('name', 'pattern')" class="text-danger">ingrese un nombre
8+
correcto</span>
9+
</ng-container>
10+
</div>
11+
<div class="input-group">
12+
<label for="surname">Apellido<span>*</span></label>
13+
<input formControlName="surname" type="text" id="surname" placeholder="Apellido">
14+
<ng-container *ngIf="validateForm('surname')">
15+
<span *ngIf="validateField('surname', 'required')" class="text-danger">Este campo es
16+
requerido</span>
17+
<span *ngIf="validateField('surname', 'pattern')" class="text-danger">ingrese un apellido
18+
correcto</span>
19+
</ng-container>
20+
</div>
21+
<div class="input-group">
22+
<label for="email">Correo electrónico<span>*</span></label>
23+
<input formControlName="email" type="email" id="email" placeholder="Correo electrónico">
24+
<ng-container *ngIf="validateForm('email')">
25+
<span *ngIf="validateField('email', 'required')" class="text-danger">Este campo es requerido</span>
26+
<span *ngIf="validateField('email', 'pattern')" class="text-danger">ingrese un correo
27+
electrónico correcto</span>
28+
</ng-container>
29+
</div>
30+
<div class="input-group">
31+
<label for="password">Contraseña<span>*</span></label>
32+
<div class="input-icon">
33+
<input formControlName="password" type="password" id="password" placeholder="Contraseña">
34+
<i class="bx bx-hide" id="password-icon" (click)="showPassword('password')"></i>
35+
</div>
36+
<ng-container *ngIf="validateForm('password')">
37+
<span *ngIf="validateField('password', 'required')" class="text-danger">Este campo es
38+
requerido</span>
39+
<span *ngIf="validateField('password', 'pattern')" class="text-danger">
40+
La contraseña debe tener al menos 8 caracteres, una mayúscula, una minúscula, un número y un
41+
caracter especial
42+
</span>
43+
</ng-container>
44+
</div>
45+
<div class="input-group">
46+
<label for="confirm-password">Confirmar contraseña<span>*</span></label>
47+
<div class="input-icon">
48+
<input formControlName="confirmPassword" type="password" id="confirm-password" placeholder="Confirmar contraseña">
49+
<i class="bx bx-hide" id="confirm-password-icon" (click)="showPassword('confirm-password')"></i>
50+
</div>
51+
<ng-container *ngIf="validateForm('confirmPassword')">
52+
<span *ngIf="validateField('confirmPassword', 'required')" class="text-danger">Este campo es
53+
requerido</span>
54+
<span *ngIf="validateField('confirmPassword', 'matching')" class="text-danger">Las contraseñas
55+
no coinciden</span>
56+
</ng-container>
57+
</div>
58+
<div class="input-container">
59+
<button class="btn btn-primary" [disabled]="registerForm.invalid" type="submit">Regístrarme</button>
60+
</div>
61+
<ng-container *ngIf="showErrors && errors.length > 0">
62+
<ul>
63+
<li *ngFor="let error of errors">{{ error }}</li>
64+
</ul>
65+
</ng-container>
66+
</form>

‎src/app/auth/components/register-form/register-form.component.scss

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@import 'settings/_colors.scss';
2+
@import 'settings/_typography.scss';
3+
4+
.btn {
5+
width: 100%;
6+
border-radius: 0.5rem;
7+
}
8+
9+
.input-container {
10+
margin-top: 1rem;
11+
}
12+
13+
14+
ul {
15+
list-style: none;
16+
padding: 0;
17+
margin: 0;
18+
19+
li {
20+
@include fs-6;
21+
@include fw-500;
22+
color: var(--fc-purple);
23+
margin-bottom: 0.5rem;
24+
}
25+
}

‎src/app/auth/components/register-form/register-form.component.spec.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { RegisterFormComponent } from './register-form.component';
4+
5+
describe('RegisterFormComponent', () => {
6+
let component: RegisterFormComponent;
7+
let fixture: ComponentFixture<RegisterFormComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ RegisterFormComponent ]
12+
})
13+
.compileComponents();
14+
});
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(RegisterFormComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

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

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { Component, EventEmitter, Input, Output } from '@angular/core';
2+
import { FormBuilder, Validators } from '@angular/forms';
3+
4+
import { ICreateAccount } from '@interfaces/user.interface';
5+
6+
import CustomValidations from '@utils/custom-validations.util';
7+
import { RegexClass } from '@utils/regex.util';
8+
9+
@Component({
10+
selector: 'app-register-form',
11+
templateUrl: './register-form.component.html',
12+
styleUrls: ['./register-form.component.scss']
13+
})
14+
export class RegisterFormComponent {
15+
@Input() showErrors = false;
16+
@Input() errors: string[] = [];
17+
private regexExpressions = RegexClass;
18+
@Output() registerData: EventEmitter<ICreateAccount> = new EventEmitter<ICreateAccount>();
19+
registerForm = this.fb.group({
20+
name: ['marco', [
21+
Validators.required,
22+
Validators.pattern(this.regexExpressions.ONLY_TEXT),
23+
]],
24+
surname: ['cruz', [
25+
Validators.required,
26+
Validators.pattern(this.regexExpressions.ONLY_TEXT),
27+
]],
28+
email: ['[email protected]', [
29+
Validators.required,
30+
Validators.pattern(this.regexExpressions.EMAIL),
31+
]],
32+
password: ['Mysecret123$', [
33+
Validators.required,
34+
Validators.pattern(this.regexExpressions.PASSWORD),
35+
]],
36+
confirmPassword: ['Mysecret123$', [
37+
Validators.required,
38+
]],
39+
}, {
40+
validators: CustomValidations.match('password', 'confirmPassword'),
41+
});
42+
constructor(
43+
private fb: FormBuilder,
44+
) { }
45+
46+
validateForm(field: string): boolean | undefined | null {
47+
const myForm = this.registerForm.get(field);
48+
return myForm?.errors && (myForm?.dirty || myForm?.touched);
49+
}
50+
51+
validateField(field: string, error: string): boolean | undefined | null {
52+
return (this.registerForm.get(field)?.hasError(error));
53+
}
54+
55+
showPassword(id: string): void {
56+
const password = document.getElementById(id);
57+
const icon = document.getElementById(`${id}-icon`);
58+
if (password?.getAttribute('type') === 'password') {
59+
password.setAttribute('type', 'text');
60+
icon?.classList.remove('bx-hide');
61+
icon?.classList.add('bx-show');
62+
}
63+
else {
64+
password?.setAttribute('type', 'password');
65+
icon?.classList.remove('bx-show');
66+
icon?.classList.add('bx-hide');
67+
}
68+
}
69+
70+
onSubmit(): void {
71+
if (this.registerForm.valid) {
72+
this.registerData.emit(this.registerForm.value);
73+
}
74+
}
75+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
<input type="checkbox" id="remember">
2828
<label for="remember">Recordar</label>
2929
</div>
30-
<a routerLink="/forgot-password">¿Olvidaste tu contraseña?</a>
30+
<a href="#">¿Olvidaste tu contraseña?</a>
3131
</div>
3232
<div class="input-container">
3333
<button class="btn btn-primary">Iniciar sesión</button>

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

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,27 +13,11 @@
1313
<a routerLink="/login">Inicia sesión</a>
1414
</span>
1515
</div>
16-
<form>
17-
<div class="input-group">
18-
<label for="name">Nombre</label>
19-
<input type="text" id="name" placeholder="Nombre">
20-
</div>
21-
<div class="input-group">
22-
<label for="email">Correo electrónico</label>
23-
<input type="email" id="email" placeholder="Correo electrónico">
24-
</div>
25-
<div class="input-group">
26-
<label for="password">Contraseña</label>
27-
<input type="password" id="password" placeholder="Contraseña">
28-
</div>
29-
<div class="input-group">
30-
<label for="confirm-password">Confirmar contraseña</label>
31-
<input type="password" id="confirm-password" placeholder="Confirmar contraseña">
32-
</div>
33-
<div class="input-container">
34-
<button class="btn btn-primary">Regístrarme</button>
35-
</div>
36-
</form>
16+
<app-register-form
17+
(registerData)="createAccount($event)"
18+
[showErrors]="showErrors"
19+
[errors]="errors"
20+
></app-register-form>
3721
</section>
3822
</div>
3923
</div>

‎src/app/auth/register/register.component.scss

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,3 @@
1919
background-size: cover;
2020
background-position: center;
2121
}
22-
23-
24-
.btn {
25-
width: 100%;
26-
border-radius: 0.5rem;
27-
}

0 commit comments

Comments
 (0)