Skip to content

Commit 3d44676

Browse files
azharaneesazharanees
authored
Merge pull request #1 from azharanees/registerForm
Register Component & Login Component
2 parents b09643f + 2a61269 commit 3d44676

17 files changed

+280
-51
lines changed

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

+5-3
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,20 @@ import { SupportComponent } from './view/support/support.component';
1010
import { ToolsComponent } from './view/tools/tools.component';
1111

1212
import { Top10Component } from './view/tools/top10/top10.component';
13-
13+
import { RegistrationComponent } from './view/registration/registration.component';
14+
import { AuthGuardService } from './guards/auth-guard.service';
1415
const routes: Routes = [
15-
{path : '', component: HomeComponent},
1616
{path : 'login', component: LoginComponent},
17-
{path : 'home', component: HomeComponent},
17+
{path : 'home', component: HomeComponent, canActivate: [AuthGuardService]},
1818
{path : 'history', component: HistoryComponent},
1919
{path : 'profile', component: ProfileComponent},
2020
{path : 'resources', component : ResourcesComponent},
2121
{path : 'settings', component : SettingsComponent},
2222
{path : 'support', component : SupportComponent},
2323
{path : 'tools', component : ToolsComponent},
2424
{path : 'tools/top10', component : Top10Component},
25+
{path : 'register', component : RegistrationComponent},
26+
{path: '**', redirectTo: 'login'}
2527

2628
];
2729

‎gui/src/app/app.component.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,5 @@
1111
</mat-toolbar>
1212

1313
<!-- <app-login *ngIf="!isAuth"></app-login> -->
14-
<app-navigation *ngIf="!isAuth"></app-navigation>
15-
<router-outlet *ngIf="!isAuth"></router-outlet>
14+
<app-navigation></app-navigation>
1615

‎gui/src/app/app.component.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
22
import { AuthService } from './auth/auth.service';
33
import { Subscription } from 'rxjs';
4+
import { Router } from '@angular/router';
45

56

67

@@ -13,12 +14,19 @@ import { Subscription } from 'rxjs';
1314
export class AppComponent implements OnInit, OnDestroy {
1415
title = 'dashboard';
1516
openSidenav = false;
17+
isShowNav = false;
1618

1719
isAuth = false;
1820
authSubscription: Subscription;
19-
constructor(private authService: AuthService) {
21+
constructor(private authService: AuthService, private router: Router) {
22+
if(this.router.url === 'register' || this.router.url =='login'){
23+
this.isShowNav = false;
24+
}else {
25+
this.isShowNav = true;
26+
}
2027

2128
}
29+
2230
ngOnDestroy() {
2331
this.authSubscription.unsubscribe();
2432
}

‎gui/src/app/app.module.ts

+9-3
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ import { AuthService } from './auth/auth.service';
2020
import { NavigationComponent } from './view/navigation/navigation.component';
2121
import { DialogComponentComponent } from './view/resources/dialog-component/dialog-component.component';
2222
import { FormsModule } from '@angular/forms';
23+
import { RegistrationComponent } from './view/registration/registration.component';
24+
import { ReactiveFormsModule } from '@angular/forms';
25+
import { AuthGuardService } from './guards/auth-guard.service';
26+
2327

2428

2529

@@ -36,7 +40,8 @@ import { FormsModule } from '@angular/forms';
3640
SupportComponent,
3741
Top10Component,
3842
NavigationComponent,
39-
DialogComponentComponent
43+
DialogComponentComponent,
44+
RegistrationComponent
4045

4146
],
4247
imports: [
@@ -47,12 +52,13 @@ import { FormsModule } from '@angular/forms';
4752
HttpClientModule,
4853
EmbedVideo.forRoot(),
4954
FlexLayoutModule,
50-
FormsModule
55+
FormsModule,
56+
ReactiveFormsModule
5157

5258

5359

5460
],
55-
providers: [AuthService],
61+
providers: [AuthGuardService],
5662
bootstrap: [AppComponent],
5763
entryComponents: [DialogComponentComponent]
5864
})

‎gui/src/app/auth/auth-data.model.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export interface AuthData {
2-
email: string;
2+
username: string;
33
password: string;
44

55
}

‎gui/src/app/auth/auth.service.ts

+5-6
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,12 @@ import { Subject } from 'rxjs';
77
providedIn: 'root'
88
})
99
export class AuthService {
10+
1011
authChange = new Subject<boolean>();
1112
private user: User;
12-
login(authData: AuthData) {
13-
this.user = {
14-
email: authData.email,
15-
userId: '3'
16-
};
13+
login() {
14+
this.user = new User();
15+
console.log(this.user);
1716
this.authChange.next(true);
1817

1918
}
@@ -27,7 +26,7 @@ logout() {
2726
// tslint:disable-next-line: one-line
2827
registerUser(authData: AuthData){
2928
this.user = {
30-
email: authData.email,
29+
username: authData.username,
3130
userId: Math.round(Math.random() * 10000).toString()
3231
};
3332
this.authChange.next(true);

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

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
.login-card {
22

3-
height: 40vh;
4-
width: 40vh;
3+
width: fit-content;
4+
padding: 15%;
5+
align-items: center;
6+
background-color: rgba(24, 28, 47, 0.7);
57
}
68

79
.body-div{
810
height: 100vh;
911
display: flex;
1012
justify-content: center;
1113
align-items: center;
14+
position: absolute;
15+
left: 35%;
1216
}
13-
17+

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

+16-15
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,34 @@
33

44
<mat-card class = "login-card">
55

6-
<h2>Login</h2>
7-
<form (onsubmit)="onSubmit($event)" >
6+
<h1 style="text-align: center">Login</h1>
7+
8+
<div style="width:100%;">
9+
10+
<img src="/assets/img/OWASP-Logo-White.png" width="240" style="position:relative;; " alt="OWASP LOGO">
11+
</div>
12+
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()" >
813
<div class="form-group">
9-
<label for="username">Username</label>
10-
<mat-form-field appearance="outline">
14+
<mat-form-field appearance="outline" style="width:100%">
1115
<mat-label>Username</mat-label>
12-
<input matInput placeholder="Placeholder">
13-
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
14-
<mat-hint>Hint</mat-hint>
16+
<input matInput placeholder="username" formControlName="username" [ngClass]="{ 'is-invalid': submitted && f.username.errors }">
17+
<mat-icon matSuffix>person</mat-icon>
1518
</mat-form-field> <div class="invalid-feedback">
1619
<div>Username is required</div>
1720
</div>
1821
</div>
19-
<div class="form-group">
20-
<label for="password">Password</label>
21-
<mat-form-field appearance="outline">
22+
<div class="form-group" >
23+
<mat-form-field appearance="outline" style="width:100%" >
2224
<mat-label>Password</mat-label>
23-
<input type = "password" matInput placeholder="">
24-
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
25-
<mat-hint>Hint</mat-hint>
25+
<input type = "password" matInput placeholder="password" formControlName="password" [ngClass]="{ 'is-invalid': submitted && f.password.errors }">
26+
<mat-icon matSuffix>lock</mat-icon>
2627
</mat-form-field> <div class="invalid-feedback">
2728
<div>Password is required</div>
2829
</div>
2930
</div>
3031
<div class="form-group">
31-
<button mat-raised-button onClick="onSubmit($event)"color="accent">Login</button>
32-
<!-- <a routerLink="/register" class="btn btn-link">Register</a> -->
32+
<button style="width:100%" mat-raised-button onClick="onSubmit($event)"color="primary">Login</button>
33+
<button mat-raised-button color="warn" style="width: 100%; margin-top: 1%" [routerLink]="['/register']" class="btn btn-link">Register</button>
3334
</div>
3435
</form>
3536

‎gui/src/app/auth/login/login.component.ts

+49-12
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,65 @@
11
import { Component, OnInit } from '@angular/core';
22
import { MatDialog } from '@angular/material';
33
import { Router } from '@angular/router';
4-
import { FormGroup, FormControl, Validators } from '@angular/forms';
4+
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
55
import { AuthService } from '../auth.service';
6+
import { User } from '../user.model';
7+
import { HomeComponent } from 'src/app/view/home/home.component';
68

79
@Component({
810
selector: 'app-login',
911
templateUrl: './login.component.html',
1012
styleUrls: ['./login.component.css']
1113
})
1214
export class LoginComponent implements OnInit {
13-
public email = '';
14-
public password = '';
15+
16+
registerForm: FormGroup;
17+
loading = false;
18+
submitted = false;
1519

1620
loginForm: FormGroup;
17-
constructor(private authService: AuthService) { }
18-
19-
onSubmit(event) {
20-
event.preventDefault();
21-
console.log('submit done');
22-
// this.authService.login({
23-
// email: this.loginForm.value.email,
24-
// password: this.loginForm.value.password
25-
// });
21+
constructor(private authService: AuthService,
22+
private formBuilder: FormBuilder,
23+
private router: Router) {
24+
this.registerForm = this.formBuilder.group({
25+
username: ['', Validators.required],
26+
password: ['', [Validators.required, Validators.minLength(6)]],
27+
28+
});
29+
}
30+
get f() { return this.registerForm.controls; }
31+
32+
onSubmit() {
33+
this.submitted = true;
34+
35+
// stop here if form is invalid
36+
if (this.registerForm.invalid) {
37+
return;
38+
}
39+
40+
this.loading = true;
41+
var user = new User();
42+
// this.userService.register(this.registerForm.value)
43+
// .pipe(first())
44+
// .subscribe(
45+
// data => {
46+
// this.alertService.success('Registration successful', true);
47+
// this.router.navigate(['/login']);
48+
// },
49+
// error => {
50+
// this.alertService.error(error);
51+
// this.loading = false;
52+
// });
53+
console.log(this.registerForm.get('username').value)
54+
55+
if(this.registerForm.get('username').value=='admin' && this.registerForm.get('password').value == 'test1234'){
56+
console.log('Successful login');
57+
this.authService.login();
58+
this.router.navigate(['home']);
59+
60+
}else{
61+
console.log("invalid login");
62+
}
2663

2764
}
2865

‎gui/src/app/auth/user.model.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
export class User {
2-
email: string;
2+
username: string;
33
userId: string;
44
}

‎gui/src/app/guards/auth-guard.service.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Injectable } from '@angular/core';
2+
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, Route } from '@angular/router';
3+
import { Observable } from 'rxjs';
4+
import { AuthService } from '../auth/auth.service';
5+
@Injectable({
6+
providedIn: 'root'
7+
})
8+
export class AuthGuardService implements CanActivate {
9+
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
10+
if (this._authService.isAuth()) {
11+
return true;
12+
}
13+
this._router.navigate(['/login']);
14+
// you can save redirect url so after authing we can move them back to the page they requested
15+
return false;
16+
}
17+
18+
19+
20+
21+
22+
constructor(private _authService: AuthService, private _router: Router) { }
23+
}

‎gui/src/app/view/navigation/navigation.component.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<mat-drawer-container *ngIf="!isAuth" hasBackdrop="false">
2-
<mat-drawer opened="true" mode="push" true >
3-
<mat-nav-list>
1+
<mat-drawer-container hasBackdrop="false">
2+
<mat-drawer *ngIf='router.url != "/register" && router.url !="/login"' opened="true" mode="push" true >
3+
<mat-nav-list >
44

55
<div mat-list-item class="avatarDiv">
66
<mat-icon>security</mat-icon>

‎gui/src/app/view/navigation/navigation.component.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component, OnInit } from '@angular/core';
2+
import { Router } from '@angular/router';
23

34
@Component({
45
selector: 'app-navigation',
@@ -7,7 +8,7 @@ import { Component, OnInit } from '@angular/core';
78
})
89
export class NavigationComponent implements OnInit {
910

10-
constructor() { }
11+
constructor(private router: Router) { }
1112

1213
ngOnInit() {
1314
}

‎gui/src/app/view/registration/registration.component.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
.detail-card
3+
{
4+
width: fit-content;
5+
padding: 2%;
6+
align-items: center;
7+
margin-top: 3%;
8+
background-color: rgba(24, 28, 47, 0.7);
9+
}

0 commit comments

Comments
 (0)