Skip to content

Commit d442655

Browse files
alvaro-barreraalvaro-barrera
committed
Configuración - permiso de registro de usuarios
1 parent a8b8c2d commit d442655

15 files changed

+375
-29
lines changed

‎src/app/app-routing.module.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@ import { LoginComponent } from './components/login/login.component';
66
import { NotFoundComponent } from './components/not-found/not-found.component';
77
import { RegisterComponent } from './components/register/register.component';
88
import { SettingComponent } from './components/setting/setting.component';
9+
import { AuthGuard } from './guards/auth.guard';
910

1011
const routes: Routes = [
11-
{path: "", component: BoardComponent},
12+
{path: "", component: BoardComponent, canActivate: [AuthGuard]},
1213
{path: "login", component: LoginComponent},
1314
{path: "register", component: RegisterComponent},
14-
{path: "setting", component: SettingComponent},
15-
{path: "client/:id", component: ClientEditComponent},
15+
{path: "setting", component: SettingComponent,canActivate: [AuthGuard]},
16+
{path: "client/:id", component: ClientEditComponent,canActivate: [AuthGuard]},
1617
{path: "**", component: NotFoundComponent},
1718
];
1819

‎src/app/app.module.ts‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
33
import { environment } from 'src/environments/environment';
44
import { AngularFireModule } from '@angular/fire';
5-
import {AngularFirestoreModule, } from "@Angular/fire/firestore";
5+
import { AngularFirestoreModule } from '@Angular/fire/firestore';
66
// FirestoreSettingsToken
7-
import {AngularFireAuthModule} from "@angular/fire/auth";
7+
import { AngularFireAuthModule, SETTINGS } from '@angular/fire/auth';
88

99
import { AppRoutingModule } from './app-routing.module';
1010
import { AppComponent } from './app.component';
@@ -20,6 +20,9 @@ import { BoardComponent } from './components/board/board.component';
2020
import { FlashMessagesModule } from 'angular2-flash-messages';
2121
import { ClientService } from './services/client.service';
2222
import { FormsModule } from '@angular/forms';
23+
import { LoginService } from './services/login.service';
24+
import { AuthGuard } from './guards/auth.guard';
25+
import { SettingService } from './services/setting.service';
2326

2427
@NgModule({
2528
declarations: [
@@ -32,17 +35,21 @@ import { FormsModule } from '@angular/forms';
3235
NotFoundComponent,
3336
FooterComponent,
3437
RegisterComponent,
35-
BoardComponent
38+
BoardComponent,
3639
],
3740
imports: [
3841
BrowserModule,
3942
AppRoutingModule,
40-
AngularFireModule.initializeApp(environment.firestore, "ManageClientApp"),
43+
AngularFireModule.initializeApp(environment.firestore, 'ManageClientApp'),
4144
AngularFireAuthModule,
4245
FlashMessagesModule.forRoot(),
43-
FormsModule
46+
FormsModule,
4447
],
45-
providers: [ClientService],
46-
bootstrap: [AppComponent]
48+
providers: [
49+
ClientService, LoginService, AuthGuard,
50+
SettingService,
51+
{provide: SETTINGS, useValue:{}}
52+
],
53+
bootstrap: [AppComponent],
4754
})
48-
export class AppModule { }
55+
export class AppModule {}

‎src/app/components/header/header.component.html‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,43 @@
1010
</button>
1111

1212
<div class="collapse navbar-collapse" id="navbarCollapse">
13-
<ul class="navbar-nav">
13+
<ul *ngIf="isLoggedIn" class="navbar-nav">
1414
<li class="nav-item px-2">
1515
<a routerLink="/" class="nav-link">Inicio</a>
1616
</li>
1717
</ul>
1818
<ul class="navbar-nav ms-auto">
19-
<li class="nav-item dropdown mr-3">
19+
<li *ngIf="isLoggedIn" class="nav-item dropdown mr-3">
2020
<a
2121
href="#"
2222
class="nav-link dropdown-toggle"
2323
data-bs-toggle="dropdown"
2424
>
25-
<i class="fas fa-user"></i> Bienvenido
25+
<i class="fas fa-user"></i> Bienvenido {{loggedInUser}}
2626
</a>
2727
<div class="dropdown-menu">
2828
<a routerLink="/setting" class="dropdown-item">
2929
<i class="fas fa-cog"></i> Configuración
3030
</a>
3131
</div>
3232
</li>
33+
<li *ngIf="!isLoggedIn" class="nav-item">
34+
<a routerLink="/login" class="nav-link"
35+
routerLinkActive="router-link-active">
36+
<i class="fas fa-user"></i> Login
37+
</a>
38+
</li>
39+
<li *ngIf="!isLoggedIn" class="nav-item">
40+
<a routerLink="/register" class="nav-link"
41+
routerLinkActive="router-link-active">
42+
<i class="fas fa-user"></i> Registrarme
43+
</a>
44+
</li>
45+
<li *ngIf="isLoggedIn" class="nav-item">
46+
<a class="nav-link cursor-pointer" (click)="logout()">
47+
<i class="fas fa-user-times"></i> Salir
48+
</a>
49+
</li>
3350
</ul>
3451
</div>
3552
</div>

‎src/app/components/header/header.component.ts‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,36 @@
11
import { Component, OnInit } from '@angular/core';
2+
import { Router } from '@angular/router';
3+
import { LoginService } from 'src/app/services/login.service';
24

35
@Component({
46
selector: 'app-header',
57
templateUrl: './header.component.html',
68
styleUrls: ['./header.component.css']
79
})
810
export class HeaderComponent implements OnInit {
9-
constructor() { }
11+
isLoggedIn: boolean;
12+
loggedInUser: string | null;
13+
14+
constructor(
15+
private loginService: LoginService,
16+
private router: Router
17+
) { }
1018

1119
ngOnInit(): void {
20+
this.loginService.getAuth()
21+
.subscribe(auth => {
22+
if(auth){
23+
this.isLoggedIn = true;
24+
this.loggedInUser = auth.email;
25+
}else{
26+
this.isLoggedIn = false;
27+
}
28+
});
29+
}
30+
logout(){
31+
this.loginService.logout();
32+
this.isLoggedIn = false;
33+
this.router.navigate(["/login"]);
1234
}
1335

1436
}

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

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,44 @@
1-
<p>login works!</p>
1+
<header class="py-2 bg-info text-white">
2+
<div class="container">
3+
<div class="col-md-6">
4+
<h1><i class="fas fa-user"></i> Login</h1>
5+
</div>
6+
</div>
7+
</header>
8+
9+
<section class="py-4 mb-4 bg-light">
10+
<div class="container">
11+
<div class="row"></div>
12+
</div>
13+
</section>
14+
15+
<flash-messages></flash-messages>
16+
<section id="login">
17+
<div class="container">
18+
<div class="row">
19+
<div class="col-md-6 mx-auto">
20+
<div class="card">
21+
<div class="card-header">
22+
<h4>Login</h4>
23+
</div>
24+
<div class="card-body">
25+
<form (submit)="login()">
26+
<div class="form-group">
27+
<label for="email">Email</label>
28+
<input type="text" class="form-control" name="email" [(ngModel)]="email" required>
29+
</div>
30+
<div class="form-group">
31+
<label for="password">Password</label>
32+
<input type="password" class="form-control" name="password" [(ngModel)]="password" required>
33+
</div>
34+
<br>
35+
<div class="form-group d-grid gap-2">
36+
<button class="btn btn-primary" type="submit">Login</button>
37+
</div>
38+
</form>
39+
</div>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
</section>

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

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,38 @@
11
import { Component, OnInit } from '@angular/core';
2+
import { Router } from '@angular/router';
3+
import { FlashMessagesService } from 'angular2-flash-messages';
4+
import { LoginService } from 'src/app/services/login.service';
25

36
@Component({
47
selector: 'app-login',
58
templateUrl: './login.component.html',
6-
styleUrls: ['./login.component.css']
9+
styleUrls: ['./login.component.css'],
710
})
811
export class LoginComponent implements OnInit {
9-
10-
constructor() { }
12+
email: string;
13+
password: string;
14+
constructor(
15+
private router: Router,
16+
private flashMessages: FlashMessagesService,
17+
private loginService: LoginService
18+
) {}
1119

1220
ngOnInit(): void {
21+
this.loginService.getAuth()
22+
.subscribe(auth =>{
23+
if(auth){
24+
this.router.navigate(["/"]);
25+
}
26+
});
27+
}
28+
login() {
29+
this.loginService.login(this.email, this.password).then((res) => {
30+
this.router.navigate(['/']);
31+
})
32+
.catch(error=>{
33+
this.flashMessages.show(error.message,{
34+
cssClass: "alert-danger", timeout: 4000
35+
});
36+
});
1337
}
14-
1538
}

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

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,44 @@
1-
<p>register works!</p>
1+
<header class="py-2 bg-info text-white">
2+
<div class="container">
3+
<div class="col-md-6">
4+
<h1><i class="fas fa-user"></i> Registrarme</h1>
5+
</div>
6+
</div>
7+
</header>
8+
9+
<section class="py-4 mb-4 bg-light">
10+
<div class="container">
11+
<div class="row"></div>
12+
</div>
13+
</section>
14+
15+
<flash-messages></flash-messages>
16+
<section id="register">
17+
<div class="container">
18+
<div class="row">
19+
<div class="col-md-6 mx-auto">
20+
<div class="card">
21+
<div class="card-header">
22+
<h4>Registrarme</h4>
23+
</div>
24+
<div class="card-body">
25+
<form (submit)="register()">
26+
<div class="form-group">
27+
<label for="email">Email</label>
28+
<input type="text" class="form-control" name="email" [(ngModel)]="email" required>
29+
</div>
30+
<div class="form-group">
31+
<label for="password">Password</label>
32+
<input type="password" class="form-control" name="password" [(ngModel)]="password" required>
33+
</div>
34+
<br>
35+
<div class="form-group d-grid gap-2">
36+
<button class="btn btn-primary" type="submit">Login</button>
37+
</div>
38+
</form>
39+
</div>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
</section>

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

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,39 @@
11
import { Component, OnInit } from '@angular/core';
2+
import { Router } from '@angular/router';
3+
import { FlashMessagesService } from 'angular2-flash-messages';
4+
import { LoginService } from 'src/app/services/login.service';
25

36
@Component({
47
selector: 'app-register',
58
templateUrl: './register.component.html',
6-
styleUrls: ['./register.component.css']
9+
styleUrls: ['./register.component.css'],
710
})
811
export class RegisterComponent implements OnInit {
9-
10-
constructor() { }
12+
email: string;
13+
password: string;
14+
constructor(
15+
private router: Router,
16+
private flashMessages: FlashMessagesService,
17+
private loginService: LoginService
18+
) {}
1119

1220
ngOnInit(): void {
21+
this.loginService.getAuth().subscribe((auth) => {
22+
if (auth) {
23+
this.router.navigate(['/']);
24+
}
25+
});
1326
}
1427

28+
register() {
29+
this.loginService.register(this.email, this.password)
30+
.then((res) => {
31+
this.router.navigate(["/"]);
32+
})
33+
.catch(error => {
34+
this.flashMessages.show(error.message, {
35+
cssClass: "alert-danger",timeout: 4000
36+
})
37+
});
38+
}
1539
}

‎src/app/components/setting/setting.component.html‎

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,54 @@
1-
<p>setting works!</p>
1+
<header class="py-2 bg-info text-white">
2+
<div class="container">
3+
<div class="col-md-6">
4+
<h1><i class="fas fa-user"></i> Configuración</h1>
5+
</div>
6+
</div>
7+
</header>
8+
9+
<section class="py-4 mb-4 bg-light">
10+
<div class="container">
11+
<div class="row">
12+
<div class="col-md-3">
13+
<a routerLink="/" class="btn btn-light btn-block">
14+
<i class="fas fa-arrow-left"></i> Regresar al Inicio
15+
</a>
16+
</div>
17+
<div class="col-md-3">
18+
<button type="submit" (click)="save()" class="btn btn-success btn-block">
19+
<i class="fas fa-chack"></i> Guardar cambios
20+
</button>
21+
</div>
22+
</div>
23+
</div>
24+
</section>
25+
26+
<section id="setting">
27+
<div class="container">
28+
<div class="row">
29+
<div class="col">
30+
<div class="card">
31+
<div class="card-header">
32+
<h4>Editar configuración</h4>
33+
</div>
34+
<div class="card-body">
35+
<fieldset class="form-group">
36+
<legend>Permitir registro de usuarios</legend>
37+
<div class="form-check">
38+
<div class="form-check-label">
39+
<input type="checkbox"
40+
class="form-check-input"
41+
name="registerPermission"
42+
[(ngModel)]="registerPermission"
43+
[checked]="registerPermission"
44+
>
45+
{{registerPermission? "Sí":"No"}}
46+
</div>
47+
</div>
48+
</fieldset>
49+
</div>
50+
</div>
51+
</div>
52+
</div>
53+
</div>
54+
</section>

0 commit comments

Comments
 (0)