Skip to content
Snippets Groups Projects
Commit c42eb7ff authored by migudel's avatar migudel :speech_balloon:
Browse files

Merge branch 'dev/angular_microservicios' into 'develop' 

Dev/angular microservicios

See merge request !25
parents 0d495e12 06cb24e2
Branches
Tags
2 merge requests!26Revert "Funciona register",!25Dev/angular microservicios
Show whitespace changes
Inline Side-by-side
Showing
with 425 additions and 0 deletions
angular/RestClient/src/app/app.routes.ts
+ 4
− 0
View file @ c42eb7ff
...@@ -7,6 +7,9 @@ import { BookingListComponent } from './core/features/bookings/booking-list/book ...@@ -7,6 +7,9 @@ import { BookingListComponent } from './core/features/bookings/booking-list/book
import { UserBookingListComponent } from './core/features/user/user-booking-list/user-booking-list.component'; import { UserBookingListComponent } from './core/features/user/user-booking-list/user-booking-list.component';
import { UserFormComponent } from './core/features/user/user-form/user-form.component'; import { UserFormComponent } from './core/features/user/user-form/user-form.component';
import { LoginComponent } from './core/features/auth/login/login.component';
import { UserFormComponent } from './core/features/user/user-form/user-form.component';
export const routes: Routes = [ export const routes: Routes = [
{ {
path: '', // Ruta principal path: '', // Ruta principal
...@@ -15,6 +18,7 @@ export const routes: Routes = [ ...@@ -15,6 +18,7 @@ export const routes: Routes = [
// auth // auth
{ {
path: 'login', path: 'login',
component: LoginComponent,
}, },
{ {
path: 'register', path: 'register',
......
angular/RestClient/src/app/core/features/auth/login/login.component.css 0 → 100644
+ 131
− 0
View file @ c42eb7ff
/* General container styles */
.container {
max-width: 400px;
margin: 50px auto;
padding: 30px;
background: linear-gradient(135deg, #1e1e2f, #2a2a45);
border-radius: 12px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
color: #fff;
font-family: 'Roboto', sans-serif;
}
h2 {
text-align: center;
font-size: 1.8em;
font-weight: bold;
margin-bottom: 20px;
color: #fff;
letter-spacing: 1px;
text-transform: uppercase;
background: linear-gradient(90deg, #7f7fd5, #86a8e7, #91eae4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Form fields */
form div {
margin-bottom: 20px;
}
label {
font-size: 0.9em;
font-weight: bold;
margin-bottom: 8px;
display: block;
letter-spacing: 0.5px;
color: #b3b3d1;
}
input {
width: 100%;
padding: 12px 15px;
font-size: 0.95em;
border: 1px solid #3e3e5e;
border-radius: 8px;
background: #252540;
color: #fff;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
input:focus {
outline: none;
border-color: #7f7fd5;
background: #2e2e50;
box-shadow: 0 0 8px rgba(127, 127, 213, 0.8);
}
/* Buttons */
button {
width: 100%;
padding: 12px;
font-size: 1em;
font-weight: bold;
color: #fff;
background: linear-gradient(90deg, #7f7fd5, #86a8e7, #91eae4);
border: none;
border-radius: 8px;
cursor: pointer;
text-transform: uppercase;
transition: transform 0.2s, box-shadow 0.2s;
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 15px rgba(127, 127, 213, 0.5);
}
button:disabled {
background: #3e3e5e;
cursor: not-allowed;
opacity: 0.7;
box-shadow: none;
}
/* Small error messages */
small {
display: block;
margin-top: 5px;
font-size: 0.85em;
color: #ff6b6b;
}
/* Extra animations and effects */
.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(120deg, rgba(127, 127, 213, 0.2), rgba(86, 168, 231, 0.1));
z-index: -1;
filter: blur(20px);
}
input::placeholder {
color: #b3b3d1;
}
form div:last-child {
margin-top: 30px;
}
/* Responsiveness */
@media (max-width: 768px) {
.container {
padding: 20px;
margin: 20px;
}
h2 {
font-size: 1.5em;
}
input,
button {
font-size: 0.9em;
}
}
\ No newline at end of file
angular/RestClient/src/app/core/features/auth/login/login.component.html 0 → 100644
+ 23
− 0
View file @ c42eb7ff
<div class="login-container">
<h2>Login</h2>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div>
<label for="email">Email:</label>
<input id="email" type="email" formControlName="email" />
<div *ngIf="loginForm.get('email')?.invalid && loginForm.get('email')?.touched">
<small>Email is required and must be valid.</small>
</div>
</div>
<div>
<label for="password">Password:</label>
<input id="password" type="password" formControlName="password" />
<div *ngIf="loginForm.get('password')?.invalid && loginForm.get('password')?.touched">
<small>Password is required.</small>
</div>
</div>
<button type="submit" [disabled]="loginForm.invalid">Login</button>
</form>
</div>
angular/RestClient/src/app/core/features/auth/login/login.component.spec.ts 0 → 100644
+ 23
− 0
View file @ c42eb7ff
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LoginComponent } from './login.component';
describe('LoginComponent', () => {
let component: LoginComponent;
let fixture: ComponentFixture<LoginComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [LoginComponent]
})
.compileComponents();
fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
angular/RestClient/src/app/core/features/auth/login/login.component.ts 0 → 100644
+ 28
− 0
View file @ c42eb7ff
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
@Component({
standalone: true,
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
imports: [ReactiveFormsModule]
})
export class LoginComponent {
loginForm: FormGroup;
constructor(private fb: FormBuilder) {
this.loginForm = this.fb.group({
email: ['', [Validators.required, Validators.email]],
password: ['', Validators.required]
});
}
onSubmit() {
if (this.loginForm.valid) {
const { email, password } = this.loginForm.value;
console.log('Login data:', { email, password });
// Aquí iría el llamado al servicio de login con JWT
}
}
}
angular/RestClient/src/app/core/features/auth/register/register.component.css 0 → 100644
+ 131
− 0
View file @ c42eb7ff
/* General container styles */
.container {
max-width: 400px;
margin: 50px auto;
padding: 30px;
background: linear-gradient(135deg, #1e1e2f, #2a2a45);
border-radius: 12px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
color: #fff;
font-family: 'Roboto', sans-serif;
}
h2 {
text-align: center;
font-size: 1.8em;
font-weight: bold;
margin-bottom: 20px;
color: #fff;
letter-spacing: 1px;
text-transform: uppercase;
background: linear-gradient(90deg, #7f7fd5, #86a8e7, #91eae4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Form fields */
form div {
margin-bottom: 20px;
}
label {
font-size: 0.9em;
font-weight: bold;
margin-bottom: 8px;
display: block;
letter-spacing: 0.5px;
color: #b3b3d1;
}
input {
width: 100%;
padding: 12px 15px;
font-size: 0.95em;
border: 1px solid #3e3e5e;
border-radius: 8px;
background: #252540;
color: #fff;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
input:focus {
outline: none;
border-color: #7f7fd5;
background: #2e2e50;
box-shadow: 0 0 8px rgba(127, 127, 213, 0.8);
}
/* Buttons */
button {
width: 100%;
padding: 12px;
font-size: 1em;
font-weight: bold;
color: #fff;
background: linear-gradient(90deg, #7f7fd5, #86a8e7, #91eae4);
border: none;
border-radius: 8px;
cursor: pointer;
text-transform: uppercase;
transition: transform 0.2s, box-shadow 0.2s;
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 15px rgba(127, 127, 213, 0.5);
}
button:disabled {
background: #3e3e5e;
cursor: not-allowed;
opacity: 0.7;
box-shadow: none;
}
/* Small error messages */
small {
display: block;
margin-top: 5px;
font-size: 0.85em;
color: #ff6b6b;
}
/* Extra animations and effects */
.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(120deg, rgba(127, 127, 213, 0.2), rgba(86, 168, 231, 0.1));
z-index: -1;
filter: blur(20px);
}
input::placeholder {
color: #b3b3d1;
}
form div:last-child {
margin-top: 30px;
}
/* Responsiveness */
@media (max-width: 768px) {
.container {
padding: 20px;
margin: 20px;
}
h2 {
font-size: 1.5em;
}
input,
button {
font-size: 0.9em;
}
}
\ No newline at end of file
angular/RestClient/src/app/core/features/auth/register/register.component.html 0 → 100644
+ 31
− 0
View file @ c42eb7ff
<div class="register-container">
<h2>Register</h2>
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div>
<label for="email">Email:</label>
<input id="email" type="email" formControlName="email" />
<div *ngIf="registerForm.get('email')?.invalid && registerForm.get('email')?.touched">
<small>Email is required and must be valid.</small>
</div>
</div>
<div>
<label for="password">Password:</label>
<input id="password" type="password" formControlName="password" />
<div *ngIf="registerForm.get('password')?.invalid && registerForm.get('password')?.touched">
<small>Password is required.</small>
</div>
</div>
<div>
<label for="confirmPassword">Confirm Password:</label>
<input id="confirmPassword" type="password" formControlName="confirmPassword" />
<div *ngIf="registerForm.get('confirmPassword')?.invalid && registerForm.get('confirmPassword')?.touched">
<small>Passwords must match.</small>
</div>
</div>
<button type="submit" [disabled]="registerForm.invalid">Register</button>
</form>
</div>
\ No newline at end of file
angular/RestClient/src/app/core/features/auth/register/register.component.spec.ts 0 → 100644
+ 23
− 0
View file @ c42eb7ff
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RegisterComponent } from './register.component';
describe('RegisterComponent', () => {
let component: RegisterComponent;
let fixture: ComponentFixture<RegisterComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [RegisterComponent]
})
.compileComponents();
fixture = TestBed.createComponent(RegisterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
angular/RestClient/src/app/core/features/auth/register/register.component.ts 0 → 100644
+ 31
− 0
View file @ c42eb7ff
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent {
registerForm: FormGroup;
constructor(private fb: FormBuilder) {
this.registerForm = this.fb.group({
email: ['', [Validators.required, Validators.email]],
password: ['', Validators.required],
confirmPassword: ['', Validators.required]
});
}
onSubmit() {
if (this.registerForm.valid) {
const { email, password, confirmPassword } = this.registerForm.value;
if (password === confirmPassword) {
console.log('Register data:', { email, password });
// Aquí iría el llamado al servicio de register con JWT
} else {
console.error('Passwords do not match.');
}
}
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment