Skip to content

Commit

Permalink
Merge pull request #438 from ncats/awb042_changepasswordbutton
Browse files Browse the repository at this point in the history 
WIP: Make change password button configurable in user profile self-edit
  • Loading branch information
@NikoAnderson
NikoAnderson authored Jul 11, 2023
2 parents 12b1ac0 + c0f21a0 commit bf62a9e
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 83 deletions.
167 changes: 84 additions & 83 deletions src/app/core/auth/user-profile/user-profile.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,94 @@
<div mat-dialog-title>
<h2 >User Profile</h2>
<div class = "username">
{{ user.user.username}}
</div>
</div>
<mat-dialog-content *ngIf = "user" >
<div class = "user-container">


<div class = "left-side">
<div *ngIf = "user.user.email && user.user.email !== ''" class = "label-value">
<div class = "label">Email: </div>
<div class = "value">{{user.user.email}}</div>
</div>
<div class = "label-value">
<div class = "label">
Roles:
</div>
<div class = "value">
<span *ngFor = "let role of user.roles; last as islast">
{{role}}{{!islast? ', ':''}}
</span>
</div>
</div>
<div class = "label-value">
<div class = "label">
Groups:
</div>
<div class = "value">
<span *ngFor = "let group of user.groups; last as islast">
{{group.name}}{{!islast? ', ':''}}
</span>
</div>
<h2 >User Profile</h2>
<div class = "username">
{{ user.user.username}}
</div>



</div>
</div>
<mat-dialog-content *ngIf = "user" >
<div class = "user-container">

<div class = "password-column" *ngIf = "!newUser ">
<div class = "spinner-container">
<button (click) = "changePassword = !changePassword" mat-button class = " mat-flat-button" [disabled] = "loading">
{{!changePassword?"Change Password":"Cancel"}}
</button>
<div *ngIf = "loading" class = "password-column">
<mat-progress-spinner
class="spinner"
color="primary"
mode="indeterminate"
diameter = "30"
>
</mat-progress-spinner>

<div class = "left-side">
<div *ngIf = "user.user.email && user.user.email !== ''" class = "label-value">
<div class = "label">Email: </div>
<div class = "value">{{user.user.email}}</div>
</div>
<div class = "label-value">
<div class = "label">
Roles:
</div>
<div class = "value">
<span *ngFor = "let role of user.roles; last as islast">
{{role}}{{!islast? ', ':''}}
</span>
</div>
</div>
</div>
<span *ngIf = "changePassword === true" >
<div>
<mat-form-field>
<input [disabled] = "loading" matInput type = "password" [(ngModel)] = "oldPassword" placeholder="old password" required name="Password" />
</mat-form-field>
<div class = "label-value">
<div class = "label">
Groups:
</div>
<div class = "value">
<span *ngFor = "let group of user.groups; last as islast">
{{group.name}}{{!islast? ', ':''}}
</span>
</div>
<div>
<mat-form-field>
<input [disabled] = "loading" matInput type = "password" [(ngModel)] = "newPassword" placeholder="new password" required name="Password" />
</mat-form-field>
</div>



</div>
<div *ngIf = "showChangeUserPasswordButton">
<div class = "password-column" *ngIf = "!newUser ">
<div class = "spinner-container">
<button (click) = "changePassword = !changePassword" mat-button class = " mat-flat-button" [disabled] = "loading">
{{!changePassword?"Change Password":"Cancel"}}
</button>
<div *ngIf = "loading" class = "password-column">
<mat-progress-spinner
class="spinner"
color="primary"
mode="indeterminate"
diameter = "30"
>
</mat-progress-spinner>
</div>
</div>
<span *ngIf = "changePassword === true" >
<div>
<mat-form-field>
<input [disabled] = "loading" matInput type = "password" [(ngModel)] = "newPasswordConfirm" placeholder="confirm new password" required name="Password" />
</mat-form-field>
<mat-form-field>
<input [disabled] = "loading" matInput type = "password" [(ngModel)] = "oldPassword" placeholder="old password" required name="Password" />
</mat-form-field>
</div>


<div>
<button [disabled] = "loading" mat-button class = " mat-primary mat-flat-button" (click) = "validatePassword()">Submit Change</button>
</div>
</span>
</div>
<mat-form-field>
<input [disabled] = "loading" matInput type = "password" [(ngModel)] = "newPassword" placeholder="new password" required name="Password" />
</mat-form-field>
</div>
<div>
<mat-form-field>
<input [disabled] = "loading" matInput type = "password" [(ngModel)] = "newPasswordConfirm" placeholder="confirm new password" required name="Password" />
</mat-form-field>
</div>


<div>
<button [disabled] = "loading" mat-button class = " mat-primary mat-flat-button" (click) = "validatePassword()">Submit Change</button>
</div>
</span>
</div>
</div>
<div class = "message" *ngIf = "changePassword">
{{this.message}}
</div>
</div>
<div class = "message" *ngIf = "changePassword">
{{this.message}}
</div>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button (click) = "viewDownloads()" [disabled] = "loading">
View Downloads
</button>
<button mat-button (click) = "viewDrafts()" [disabled] = "loading">
View Edit Drafts
</button>
<span class = "middle-fill"></span>
<button mat-button mat-dialog-close [disabled] = "loading">Close</button>
</mat-dialog-actions>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button (click) = "viewDownloads()" [disabled] = "loading">
View Downloads
</button>
<button mat-button (click) = "viewDrafts()" [disabled] = "loading">
View Edit Drafts
</button>
<span class = "middle-fill"></span>
<button mat-button mat-dialog-close [disabled] = "loading">Close</button>
</mat-dialog-actions>
21 changes: 21 additions & 0 deletions src/app/core/auth/user-profile/user-profile.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,36 @@ import { isString } from 'util';
import { Router } from '@angular/router';
import { MatDialogRef, MatDialog } from '@angular/material/dialog';
import { SubstanceDraftsComponent } from '@gsrs-core/substance-form/substance-drafts/substance-drafts.component';
import { ConfigService } from '@gsrs-core/config';

@Component({
selector: 'app-user-profile',
templateUrl: './user-profile.component.html',
styleUrls: ['./user-profile.component.scss']
})
export class UserProfileComponent implements OnInit {

/*
To prevent the change password button from showing add this to the configuration
"userProfile": {
"showChangeUserPasswordButton": false
},
*/

user: Auth;
newPassword = '';
oldPassword = '';
newPasswordConfirm = '';
changePassword = false;
message = '';
loading = false;
showChangeUserPasswordButton: boolean;

constructor(
public configService: ConfigService,
private authService: AuthService,
private adminService: AdminService,
private router: Router,
Expand All @@ -31,6 +46,12 @@ export class UserProfileComponent implements OnInit {
) { }

ngOnInit() {
this.showChangeUserPasswordButton = this.configService.configData?.userProfile?.showChangeUserPasswordButton;
if (!this.showChangeUserPasswordButton && this.showChangeUserPasswordButton===false) {
this.showChangeUserPasswordButton=false;
} else {
this.showChangeUserPasswordButton=true;
}
this.authService.getAuth().pipe(take(1)).subscribe( response => {
this.user = response;
});
Expand Down
1 change: 1 addition & 0 deletions src/app/core/config/config.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export interface Config {
elementLabelDisplay?:any;
bulkSearch?: any
useDataUrl?: any;
userProfile?: any;
}

export interface LoadedComponents {
Expand Down

0 comments on commit bf62a9e

Please sign in to comment.