Skip to content

Commit e0ef9b5

Browse files
marcode24marcode24
authored
Merge pull request #3 from marcode24/dev
✨ add create user from register form
2 parents 5a0d420 + b25434d commit e0ef9b5

File tree

65 files changed

+1526
-133
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+1526
-133
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/app.routing.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@ const routes: Routes = [
1313
{
1414
path: '**',
1515
redirectTo: '/',
16-
pathMatch: 'full',
17-
},
16+
}
1817
];
1918

2019
@NgModule({

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

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<form [formGroup]="loginForm" (submit)="login()">
2+
<div class="input-group">
3+
<label for="email">Correo electrónico</label>
4+
<input formControlName="email" type="email" id="email" placeholder="Correo electrónico">
5+
</div>
6+
<div class="input-group">
7+
<label for="password">Contraseña</label>
8+
<div class="input-icon">
9+
<input formControlName="password" type="password" id="password" placeholder="Contraseña">
10+
<i class="bx bx-hide" id="password-icon" (click)="showPassword('password')"></i>
11+
</div>
12+
</div>
13+
<div class="options">
14+
<div class="input-group row">
15+
<input formControlName="remember" (change)="changeRemember($event)" type="checkbox" id="remember">
16+
<label for="remember">Recordar</label>
17+
</div>
18+
<a href="#">¿Olvidaste tu contraseña?</a>
19+
</div>
20+
<div class="input-container">
21+
<button class="btn btn-primary" [disabled]="loginForm.invalid" type="submit">Iniciar sesión</button>
22+
</div>
23+
<ng-container *ngIf="showErrors && errors.length > 0">
24+
<ul>
25+
<li *ngFor="let error of errors">{{ error }}</li>
26+
</ul>
27+
</ng-container>
28+
</form>

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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+
ul {
14+
list-style: none;
15+
padding: 0;
16+
margin: 0;
17+
18+
li {
19+
@include fs-6;
20+
@include fw-500;
21+
color: var(--fc-purple);
22+
margin-bottom: 0.5rem;
23+
}
24+
}

‎src/app/auth/components/login-form/login-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 { LoginFormComponent } from './login-form.component';
4+
5+
describe('LoginFormComponent', () => {
6+
let component: LoginFormComponent;
7+
let fixture: ComponentFixture<LoginFormComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ LoginFormComponent ]
12+
})
13+
.compileComponents();
14+
});
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(LoginFormComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

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

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

‎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+
}

0 commit comments

Comments
 (0)