assets/angular/userProfile/user_profile.component.ts
User Profile component
| moduleId | module.id |
| providers |
Location
{ : , : }
|
| selector | user-profile |
| templateUrl | ./userProfile.html |
Properties |
Methods |
constructor(usersService: UserSimpleService, fb: FormBuilder, document: any, translationService: TranslationService, _fb: FormBuilder, location: Location)
|
||||||||||||||||||||||||||||
|
Parameters :
|
| genKey |
genKey()
|
|
Returns :
void
|
| refreshUser |
refreshUser()
|
|
Returns :
void
|
| return |
return()
|
|
Returns :
void
|
| revokeKey |
revokeKey()
|
|
Returns :
void
|
| setUpdateMessage |
setUpdateMessage(msg: string, type: string)
|
|
Returns :
void
|
| setupForm |
setupForm()
|
|
Returns :
void
|
| updateUserSubmit |
updateUserSubmit(user: UserForm, isValid: boolean)
|
|
Returns :
void
|
| currentUser |
currentUser:
|
Type : User
|
| initSubs |
initSubs:
|
Type : any
|
| isDetailsModalShown |
isDetailsModalShown:
|
Type : boolean
|
Default value : false
|
| roleStr |
roleStr:
|
Type : string
|
| submitted |
submitted:
|
Type : boolean
|
| updateDetailsMsg |
updateDetailsMsg:
|
| updateDetailsMsgType |
updateDetailsMsgType:
|
Default value : info
|
| updateUserForm |
updateUserForm:
|
Type : FormGroup
|
| userDetailsModal |
userDetailsModal:
|
Type : ModalDirective
|
Decorators : ViewChild
|
import { Component, Injectable, Inject, ViewChild } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
import { FormArray, FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { ModalDirective } from 'ngx-bootstrap';
import * as _ from "lodash-lib";
import { UserSimpleService } from '../shared/user.service-simple';
import { Role, User, LoginResult, SaveResult } from '../shared/user-models';
import { LoadableComponent } from '../shared/loadable.component';
import { TranslationService } from '../shared/translation-service';
import { UserForm, matchingValuesValidator, optionalEmailValidator } from './forms';
declare var pageData :any;
/**
* User Profile component
*
*
* @author <a target='_' href='https://github.com/thomcuddihy'>Thom Cuddihy</a>
*/
@Component({
moduleId: module.id,
selector: 'user-profile',
templateUrl: './userProfile.html',
providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}]
})
@Injectable()
export class UserProfileComponent extends LoadableComponent {
currentUser: User = new User();
roleStr: string;
updateDetailsMsg = "";
updateDetailsMsgType ="info";
initSubs: any;
@ViewChild('userDetailsModal') userDetailsModal:ModalDirective;
isDetailsModalShown:boolean = false;
updateUserForm: FormGroup;
submitted: boolean;
constructor (@Inject(UserSimpleService) protected usersService: UserSimpleService, @Inject(FormBuilder) fb: FormBuilder, @Inject(DOCUMENT) protected document:any, translationService:TranslationService, private _fb: FormBuilder, @Inject(Location) protected location: Location) {
super();
this.initTranslator(translationService);
this.initSubs = usersService.waitForInit((initStatUsers:any) => {
this.initSubs.unsubscribe();
translationService.isReady(tService => {
this.refreshUser();
});
});
}
refreshUser() {
this.usersService.getInfo().then((user:any) => {
this.currentUser = user;
this.roleStr = _.join(_.map(user.roles, 'name'), ', ');
this.setupForm();
this.checkIfHasLoaded();
});
}
setupForm() {
this.submitted = false;
this.updateUserForm = this._fb.group({
username: this.currentUser.username,
name: [this.currentUser.name, Validators.required],
email: [this.currentUser.email, optionalEmailValidator],
passwords: this._fb.group({
password: [''],
confirmPassword: ['']
}, {validator: matchingValuesValidator('password', 'confirmPassword')})
});
}
return() {
this.location.back();
}
genKey() {
this.setUpdateMessage("Generating...", "primary");
this.usersService.genUserKey().then((saveRes:SaveResult) => {
if (saveRes.status) {
this.currentUser.token = saveRes.message;
this.refreshUser();
this.setUpdateMessage("Token generated.", "primary");
} else {
this.setUpdateMessage(saveRes.message, "danger");
}
});
}
revokeKey() {
this.setUpdateMessage("Revoking...", "primary");
this.usersService.revokeUserKey().then((saveRes:SaveResult) => {
if (saveRes.status) {
this.currentUser.token = null;
this.refreshUser();
this.setUpdateMessage("Token revoked.", "primary");
} else {
this.setUpdateMessage(saveRes.message, "danger");
}
});
}
updateUserSubmit(user: UserForm, isValid: boolean) {
this.submitted = true;
if (!isValid){
this.setUpdateMessage(this.translationService.t('manage-users-validation-submit'), "danger");
return;
}
var details: { name: string, email: string, password: string } =
{ name: user.name, email: user.email, password: user.passwords.password };
this.setUpdateMessage("Saving...", "primary");
this.usersService.updateUserProfile(details).then((saveRes:SaveResult) => {
if (saveRes.status) {
this.refreshUser();
this.setUpdateMessage(this.translationService.t('user-profile-success'), "success");
} else {
this.setUpdateMessage(saveRes.message, "danger");
}
});
}
setUpdateMessage(msg:string="", type:string="primary") {
this.updateDetailsMsg = msg;
this.updateDetailsMsgType = type;
}
}
<div class="col-md-offset-2 col-md-8" *ngIf="!isLoading">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
{{ 'user-profile-edit' | translate }}
</h3>
</div>
<div class="panel-body" style="overflow:scroll">
<form id="detailsform" [formGroup]="updateUserForm" novalidate (ngSubmit)="updateUserSubmit(updateUserForm.value, updateUserForm.valid)">
<div class="table-responsive">
<table class="table">
<tbody>
<tr *ngIf="currentUser.type == 'local'">
<td>{{ 'manage-users-username' | translate }}</td>
<td>{{ currentUser.username }}</td>
</tr>
<tr>
<td>{{ 'manage-users-name' | translate }}</td>
<td *ngIf="currentUser.type == 'local'">
<input type="text" formControlName="name" class="form-control input-sm chat-input"/>
<div class='form-text error' *ngIf='updateUserForm.controls.name.touched || submitted'>
<div *ngIf="updateUserForm.controls.name.hasError('required')">{{ 'manage-users-validation-name' | translate }}</div>
</div>
</td>
<td *ngIf="currentUser.type != 'local'">{{currentUser.name}}</td>
</tr>
<tr>
<td>{{ 'manage-users-email' | translate }}</td>
<td *ngIf="currentUser.type == 'local'">
<input type="email" formControlName="email" class="form-control input-sm chat-input"/>
<div class='form-text error' *ngIf='updateUserForm.controls.email.touched || submitted'>
<div *ngIf="updateUserForm.controls.email.hasError('invalidEmail')">{{ 'manage-users-validation-email' | translate }}</div>
</div>
</td>
<td *ngIf="currentUser.type != 'local'">{{currentUser.email}}</td>
</tr>
<tr>
<td>{{ 'manage-users-password' | translate }}</td>
<td *ngIf="currentUser.type == 'local'">
<div formGroupName="passwords">
<input type="password" formControlName="password" class="form-control input-sm chat-input" placeholder="{{ 'manage-users-update-password' | translate }}"/>
</div>
</td>
<td *ngIf="currentUser.type != 'local'">{{ 'manage-users-aaf-password' | translate}}</td>
</tr>
<tr *ngIf="currentUser.type == 'local'">
<td>{{ 'manage-users-confirm-password' | translate }}</td>
<td>
<div formGroupName="passwords">
<input type="password" formControlName="confirmPassword" class="form-control input-sm chat-input" placeholder="Confirm Password"/>
</div>
<div class='form-text error' *ngIf="updateUserForm.controls.passwords.controls.confirmPassword.touched || submitted">
<div *ngIf="updateUserForm.controls.passwords.hasError('mismatched')">{{ 'manage-users-validation-confirmpassword' | translate }}</div>
</div>
</td>
</tr>
<tr>
<td>{{ 'manage-users-api' | translate }}</td>
<td *ngIf="!currentUser.token">
<button type="button" class="btn btn-primary" (click)="genKey(currentUser.id)">{{ 'manage-users-api-generate' | translate }}</button>
</td>
<td *ngIf="currentUser.token">
{{ currentUser.token }}<br />
<button type="button" class="btn btn-primary" (click)="revokeKey(currentUser.id)">{{ 'manage-users-api-revoke' | translate }}</button>
</td>
</tr>
<tr>
<td class="col-md-2">{{ 'manage-roles-role' | translate }}</td>
<td class="col-md-8">{{ roleStr }}</td>
</tr>
</tbody>
</table>
</div>
</form>
<div class="bg-{{updateDetailsMsgType}} center-block">{{updateDetailsMsg}}</div>
<div>
<br/>
</div>
<div>
<br/>
</div>
<div class="modal-footer">
<button type="button" *ngIf="currentUser.type == 'local'" class="btn btn-primary" form="detailsform" type="submit">{{ 'manage-users-save' | translate }}</button>
<button type="button" class="btn btn-default" (click)="return()">{{ 'user-profile-return' | translate }}</button>
</div>
</div>
</div>
</div>