Skip to content
This repository was archived by the owner on Sep 24, 2020. It is now read-only.

Commit d980fce

Browse files
CajetanRodriguesCajetanRodrigues
committed
add profile component
update password component
1 parent 993cc3e commit d980fce

8 files changed

+229
-2
lines changed

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

+2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { NgModule } from '@angular/core';
22
import { Routes, RouterModule } from '@angular/router';
33
import { LoginComponent } from './authentication/login/login.component';
4+
import { ProfileComponent } from './profile/profile.component';
45
const routes: Routes = [
56
{path: '', component : LoginComponent},
7+
{path: 'profile', component : ProfileComponent},
68
{path: '**', redirectTo : ''}
79
];
810
@NgModule({

‎src/app/app.component.ts

+13
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,16 @@ export class AppComponent implements OnInit, OnDestroy {
3030
icon: 'person',
3131
link: 'login'
3232
},
33+
{
34+
title: 'Surveys',
35+
icon: 'description',
36+
link: 'surveys'
37+
},
38+
{
39+
title: 'Profile',
40+
icon: 'face',
41+
link: 'profile'
42+
},
3343
];
3444
title = 'Online-Banking-App-3.0';
3545
mobileQuery: MediaQueryList;
@@ -42,4 +52,7 @@ export class AppComponent implements OnInit, OnDestroy {
4252
this.authorizationService.userStatus = false;
4353
this.router.navigate(['/login']).then();
4454
}
55+
onProfileComponent() {
56+
this.router.navigate(['profile']);
57+
}
4558
}

‎src/app/app.module.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,18 @@ import { SignUpComponent } from './authentication/sign-up/sign-up.component';
1212
import { ForgotPasswordComponent } from './authentication/forgot-password/forgot-password.component';
1313
import { VerificationComponent } from './authentication/verification/verification.component';
1414
import { AppService } from './app.service';
15+
import { Profile } from 'selenium-webdriver/firefox';
16+
import { ProfileDialogComponent, ProfileComponent } from './profile/profile.component';
1517

1618
@NgModule({
1719
declarations: [
1820
AppComponent,
1921
LoginComponent,
2022
ForgotPasswordComponent,
2123
SignUpComponent,
22-
VerificationComponent
24+
VerificationComponent,
25+
ProfileDialogComponent,
26+
ProfileComponent
2327
],
2428
imports: [
2529
BrowserAnimationsModule,
@@ -31,6 +35,6 @@ import { AppService } from './app.service';
3135
],
3236
providers: [AuthorizationService, AppService],
3337
bootstrap: [AppComponent],
34-
entryComponents : [SignUpComponent, VerificationComponent, ForgotPasswordComponent]
38+
entryComponents : [SignUpComponent, VerificationComponent, ForgotPasswordComponent, ProfileDialogComponent]
3539
})
3640
export class AppModule { }

‎src/app/models/user.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export class User {
2+
firstname: string;
3+
middlename: string;
4+
lastname: string;
5+
number: number;
6+
birthdate: string;
7+
address: string;
8+
gender: string;
9+
}

‎src/app/profile/profile-dialog.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div mat-dialog-content>
2+
<h3>Enter password to confirm</h3>
3+
<mat-form-field>
4+
<input [(ngModel)]="password" name="password" matInput placeholder="Enter your password">
5+
</mat-form-field>
6+
</div>
7+
<div mat-dialog-actions>
8+
<button mat-button (click)="onNoClick()">No Thanks</button>
9+
<button mat-button [mat-dialog-close]="password" cdkFocusInitial>Ok</button>
10+
</div>

‎src/app/profile/profile.component.html

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<div class="row">
2+
<div class="col-md-5">
3+
<mat-card>
4+
<form #loginForm="ngForm" >
5+
<img id="profile-picture" src="data:image/jpeg;base64,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" alt="Avatar">
6+
<hr>
7+
<div class="row space">
8+
<div class="col-md-1">
9+
<mat-icon>account_circle</mat-icon>
10+
</div>
11+
<div class="col-md-11">
12+
{{user.firstname}} {{user.middlename}} {{user.lastname}}
13+
</div>
14+
</div>
15+
<div class="row space">
16+
<div class="col-md-1">
17+
<mat-icon>call</mat-icon>
18+
</div>
19+
<div class="col-md-11">
20+
{{user.number}}
21+
</div>
22+
</div>
23+
<div class="row space">
24+
<div class="col-md-1">
25+
<mat-icon>cake</mat-icon>
26+
</div>
27+
<div class="col-md-11">
28+
{{user.birthdate}}
29+
</div>
30+
</div>
31+
<div class="row space">
32+
<div class="col-md-1">
33+
<mat-icon>face</mat-icon>
34+
</div>
35+
<div class="col-md-11">
36+
{{user.gender}}
37+
</div>
38+
</div>
39+
<div class="row space">
40+
<div class="col-md-1">
41+
<mat-icon>place</mat-icon>
42+
</div>
43+
<div class="col-md-11">
44+
{{user.address}}
45+
</div>
46+
</div>
47+
48+
<hr>
49+
<h4>Account Activated</h4> 30 Aug 1945
50+
51+
52+
</form>
53+
</mat-card>
54+
</div>
55+
<div class="col-md-7">
56+
57+
58+
59+
<mat-card>
60+
<form #loginForm="ngForm" >
61+
<h3>Profile Information</h3>
62+
<hr>
63+
<mat-form-field>
64+
<input [(ngModel)]="user.firstname" name="firstname" matInput placeholder="First Name">
65+
</mat-form-field>
66+
<mat-form-field>
67+
<input [(ngModel)]="user.middlename" name="middlename" matInput placeholder="Middle Name">
68+
</mat-form-field>
69+
<mat-form-field>
70+
<input [(ngModel)]="user.lastname" name="lastname" matInput placeholder="Last Name">
71+
</mat-form-field>
72+
<mat-form-field>
73+
<input [(ngModel)]="user.number" name="mobile" type="number" matInput placeholder="Mobile Number">
74+
</mat-form-field>
75+
<mat-form-field>
76+
<input [(ngModel)]="user.birthdate" name="birthdate" matInput [matDatepicker]="picker" placeholder="Date of Birth">
77+
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
78+
<mat-datepicker #picker></mat-datepicker>
79+
</mat-form-field>
80+
<mat-form-field>
81+
<mat-label>Gender</mat-label>
82+
<mat-select [(value)]="user.gender" name="gender">
83+
<mat-option value="Male">
84+
Male
85+
</mat-option>
86+
<mat-option value="Female">
87+
Female
88+
</mat-option>
89+
<mat-option value="Others">
90+
Others
91+
</mat-option>
92+
</mat-select>
93+
</mat-form-field>
94+
95+
<mat-form-field>
96+
<input [(ngModel)]="user.address" name="address" type="text" matInput placeholder="Address">
97+
</mat-form-field>
98+
99+
<button mat-raised-button color="primary" (click)="openDialog()" >Save</button>
100+
</form>
101+
</mat-card>
102+
</div>
103+
</div>

‎src/app/profile/profile.component.scss

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.mat-form-field{
2+
width: 100%;
3+
padding: 10px;
4+
display:block;
5+
margin:auto;
6+
}
7+
button{
8+
display:block;
9+
margin:auto;
10+
width: 70%;
11+
margin-top: 5px;
12+
}
13+
mat-card{
14+
margin : 10px;
15+
}
16+
#profile-picture {
17+
background-image: url('../../assets/images/toolbar.png');
18+
background-size: cover;
19+
height: 28vh;
20+
color:white;
21+
font-weight: bold;
22+
font-size: 25px;
23+
border-radius: 0%;
24+
display:block;
25+
margin:auto;
26+
}
27+
.space{
28+
margin: 10px 0px;
29+
}

‎src/app/profile/profile.component.ts

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { User } from '../models/user';
3+
import {MatDialog, MatDialogRef} from '@angular/material/dialog';
4+
5+
@Component({
6+
selector: 'app-profile-dialog',
7+
templateUrl: 'profile-dialog.html',
8+
})
9+
export class ProfileDialogComponent implements OnInit {
10+
password: string;
11+
constructor(
12+
public dialogRef: MatDialogRef<ProfileDialogComponent>) {
13+
}
14+
ngOnInit(): void {
15+
}
16+
onNoClick(): void {
17+
this.dialogRef.close();
18+
}
19+
}
20+
21+
@Component({
22+
selector: 'app-profile',
23+
templateUrl: './profile.component.html',
24+
styleUrls: ['./profile.component.scss']
25+
})
26+
export class ProfileComponent implements OnInit {
27+
male = 'Male';
28+
female = 'Female';
29+
others = 'Others';
30+
user = new User();
31+
32+
constructor(public dialog: MatDialog) {
33+
this.user.firstname = 'Warren';
34+
this.user.middlename = 'Edward';
35+
this.user.lastname = 'Buffet';
36+
this.user.number = 9769430801;
37+
this.user.birthdate = '30/08/1930';
38+
this.user.address = 'Omaha, Nebraska';
39+
this.user.gender = 'Male';
40+
}
41+
42+
ngOnInit() {
43+
}
44+
login() {
45+
46+
}
47+
openDialog(): void {
48+
const dialogRef = this.dialog.open(ProfileDialogComponent, {
49+
width: '500px',
50+
});
51+
52+
dialogRef.afterClosed().subscribe(result => {
53+
54+
});
55+
}
56+
57+
}

0 commit comments

Comments
 (0)