File
Implements
Constructor
constructor(profileService: ProfileService, dialog: MatDialog)
|
|
|
Parameters :
| Name |
Type |
Optional |
| profileService |
ProfileService
|
No
|
| dialog |
MatDialog
|
No
|
|
Methods
|
openDialog
|
openDialog(action: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| action |
string
|
No
|
|
|
Public
dialog
|
Type : MatDialog
|
|
|
|
form
|
Type : any
|
Default value : {
username: null,
email: 'example@web.com',
password: 'password',
}
|
|
|
|
passwordFormControl
|
Default value : new FormControl('', [
Validators.required,
Validators.minLength(6),
])
|
|
|
|
telegramIdFormControl
|
Default value : new FormControl('', [Validators.required])
|
|
|
|
userId
|
Type : string
|
Default value : ''
|
|
|
|
userNameFormControl
|
Default value : new FormControl('', [Validators.required])
|
|
|
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { ProfileService } from 'src/app/Services/profile.service';
import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
import { HelpDialogComponent } from './help-dialog/help-dialog.component';
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.scss'],
})
export class ProfileComponent implements OnInit {
userNameFormControl = new FormControl('', [Validators.required]);
passwordFormControl = new FormControl('', [
Validators.required,
Validators.minLength(6),
]);
telegramIdFormControl = new FormControl('', [Validators.required]);
userId = '';
form: any = {
username: null,
email: 'example@web.com',
password: 'password',
};
constructor(
private profileService: ProfileService,
public dialog: MatDialog
) {}
ngOnInit(): void {
this.profileService.getUserData().subscribe((result) => {
console.log(result);
result = JSON.parse(result);
this.form.username = result.data.username;
this.form.password = result.data.password;
this.form.email = result.data.email;
this.userId = result.data.telegram_user_id;
});
}
onSubmit() {
if (this.userId != '') {
console.log(this.userId);
this.profileService.addTelegramId(this.userId).subscribe((result) => {
console.log(result);
});
}
}
updateUser() {
const { username, email, password } = this.form;
this.profileService
.updateProfile(this.form.username, this.form.password)
.subscribe((result) => {
console.log(result);
});
}
openDialog(action: string) {
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
width: '50vw',
height: '20vh',
});
dialogRef.afterClosed().subscribe((result) => {
if (result === true) {
if (action === 'addTelegram') {
this.onSubmit();
} else if (action === 'updateUser') {
this.updateUser();
}
}
});
}
openHelp() {
const dialogRef = this.dialog.open(HelpDialogComponent, {
width: '50vw',
height: '20vh',
});
}
}
<mat-grid-list cols="2" rowHeight="45%">
<mat-grid-tile colspan="1" rowspan="2">
<mat-card class="card placeholder">
<mat-card-title class="card-title">Profile Information</mat-card-title>
<mat-card-content>
<form
class="example-form form"
name="form"
(ngSubmit)="f.form.valid && openDialog('updateUser')"
#f="ngForm"
novalidate
>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Username</mat-label>
<input
type="text"
name="username"
matInput
[formControl]="userNameFormControl"
placeholder="Ex. patrick-bateman"
[(ngModel)]="form.username"
#username
/>
<mat-error *ngIf="userNameFormControl.hasError('required')">
Username is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>{{ form.email }}</mat-label>
<input
type="email"
matInput
name="email"
disabled
placeholder="Ex. patrickbateman@example.com"
/>
</mat-form-field>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Password</mat-label>
<input
type="password"
matInput
name="password"
[formControl]="passwordFormControl"
placeholder="Password"
minlength="6"
[(ngModel)]="form.password"
#password
/>
<mat-error
*ngIf="
passwordFormControl.hasError('minlength') &&
!passwordFormControl.hasError('required')
"
>
Please enter a valid password
</mat-error>
<mat-error *ngIf="passwordFormControl.hasError('required')">
Password is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Repeat Password</mat-label>
<input
type="password"
matInput
[formControl]="passwordFormControl"
placeholder="Ex. pat@example.com"
/>
<mat-error
*ngIf="
passwordFormControl.hasError('minLength') &&
!passwordFormControl.hasError('required')
"
>
Please enter a valid password
</mat-error>
<mat-error *ngIf="passwordFormControl.hasError('required')">
Password is <strong>required</strong>
</mat-error>
</mat-form-field>
<div class="form-group footer-buttons">
<button
class="btn btn-primary btn-block"
[disabled]="
passwordFormControl.hasError('required') ||
passwordFormControl.hasError('minLength') ||
userNameFormControl.hasError('required')
"
>
Update
</button>
</div>
</form>
</mat-card-content>
</mat-card>
</mat-grid-tile>
<mat-grid-tile colspan="1" rowspan="2">
<mat-card class="card placeholder">
<mat-card-title class="card-title">
<span>Connect Telegram Account</span>
</mat-card-title>
<mat-card-content>
<form
name="form"
(ngSubmit)="f.form.valid && openDialog('addTelegram')"
#f="ngForm"
novalidate
class="backgorund form"
>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Telegram UserId</mat-label>
<input
type="text"
matInput
[formControl]="telegramIdFormControl"
[(ngModel)]="userId"
required
#telegramId
/>
<mat-error *ngIf="telegramIdFormControl.hasError('required')">
Id is <strong>required</strong>
</mat-error>
</mat-form-field>
<div class="form-group footer-buttons">
<button
class="btn btn-primary btn-block"
[disabled]="telegramIdFormControl.hasError('required')"
>
Add
</button>
</div>
</form>
<button class="btn btn-secondary btn-block" (click)="openHelp()">
Help
</button>
</mat-card-content>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
.form {
width: 100%;
}
.card {
width: 90%;
height: 90%;
margin: 5%;
}
.example-full-width {
width: 100%;
}
.card-title {
padding-bottom: 2.5vh;
}
mat-grid {
width: 100%;
height: 100%;
}
.placeholder {
height: 95%;
}
.placeholderRHS {
height: 90%;
}
.cron-content {
height: 70%;
overflow: auto;
}
Legend
Html element with directive