Add functionality to allow a user to change their password when logged in
Chris Veilleux
parent
b8de3f2d0b
commit
3d21653c7c
|
|
@ -83,8 +83,8 @@ export class ProfileService {
|
|||
return this.http.delete(ACCOUNT_URL);
|
||||
}
|
||||
|
||||
changePassword(passwordControl: AbstractControl) {
|
||||
const codedPassword = btoa(passwordControl.value);
|
||||
changePassword(newPassword: string) {
|
||||
const codedPassword = btoa(newPassword);
|
||||
return this.http.put(CHANGE_PASSWORD_URL, {password: codedPassword});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,6 @@
|
|||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<a mat-button>CHANGE EMAIL ADDRESS</a>
|
||||
<a mat-button [href]="changePasswordUrl">CHANGE PASSWORD</a>
|
||||
<button mat-button (click)="onPasswordChange()">CHANGE PASSWORD</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
|
|
|
|||
|
|
@ -17,11 +17,17 @@ and limitations under the License.
|
|||
***************************************************************************** */
|
||||
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
|
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
|
||||
|
||||
import { faAddressCard, IconDefinition } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import { Account } from '@account/models/account.model';
|
||||
import { environment } from '@account/environments/environment';
|
||||
import { ChangePasswordComponent } from '@account/app/modules/profile/components/views/change-password/change-password.component';
|
||||
import { ProfileService } from '@account/http/profile.service';
|
||||
import { SnackbarComponent } from 'shared';
|
||||
|
||||
const fiveSeconds = 5000;
|
||||
|
||||
@Component({
|
||||
selector: 'account-login-edit',
|
||||
|
|
@ -31,7 +37,49 @@ import { environment } from '@account/environments/environment';
|
|||
export class LoginComponent {
|
||||
@Input() account: Account;
|
||||
public loginIcon: IconDefinition = faAddressCard;
|
||||
public changePasswordUrl = environment.mycroftUrls.account + '/password-change';
|
||||
|
||||
constructor() { }
|
||||
constructor(
|
||||
private profileService: ProfileService,
|
||||
public passwordDialog: MatDialog,
|
||||
private snackbar: MatSnackBar
|
||||
) { }
|
||||
|
||||
onPasswordChange() {
|
||||
this.openPasswordDialog();
|
||||
}
|
||||
|
||||
openPasswordDialog() {
|
||||
const dialogConfig = new MatDialogConfig();
|
||||
dialogConfig.disableClose = true;
|
||||
dialogConfig.restoreFocus = true;
|
||||
const dialogRef = this.passwordDialog.open(ChangePasswordComponent, dialogConfig);
|
||||
dialogRef.afterClosed().subscribe(
|
||||
(newPassword) => {
|
||||
if (newPassword) {
|
||||
this.updatePassword(newPassword);
|
||||
}}
|
||||
);
|
||||
}
|
||||
|
||||
updatePassword (newPassword) {
|
||||
this.profileService.changePassword(newPassword).subscribe({
|
||||
next: () => { this.openSuccessSnackbar(); },
|
||||
error: () => { this.openErrorSnackbar(); }
|
||||
});
|
||||
}
|
||||
|
||||
openErrorSnackbar() {
|
||||
const config = new MatSnackBarConfig();
|
||||
config.duration = fiveSeconds;
|
||||
config.data = {type: 'error', message: 'An error occurred changing the password'};
|
||||
this.snackbar.openFromComponent(SnackbarComponent, config);
|
||||
}
|
||||
|
||||
openSuccessSnackbar() {
|
||||
const config = new MatSnackBarConfig();
|
||||
config.duration = fiveSeconds;
|
||||
config.data = {type: 'success', message: 'Password successfully changed'};
|
||||
this.snackbar.openFromComponent(SnackbarComponent, config);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<mat-card>
|
||||
<mat-card class="mat-elevation-z0">
|
||||
<mat-card-header>
|
||||
<fa-icon mat-card-avatar [icon]="changePasswordIcon"></fa-icon>
|
||||
<mat-card-title>Change your password</mat-card-title>
|
||||
<mat-card-title>Enter your new password</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<mat-form-field appearance="outline">
|
||||
|
|
@ -20,7 +19,7 @@
|
|||
mat-button
|
||||
id="submit-button"
|
||||
[disabled]="passwordControl.invalid"
|
||||
(click)="onChangePassword()"
|
||||
(click)="changePassword()"
|
||||
>
|
||||
SUBMIT
|
||||
</button>
|
||||
|
|
@ -23,9 +23,8 @@
|
|||
|
||||
mat-card {
|
||||
@include cards.selene-card;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 48px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
mat-card-content {
|
||||
padding: 16px;
|
||||
|
|
@ -17,17 +17,13 @@ and limitations under the License.
|
|||
***************************************************************************** */
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { UntypedFormControl, Validators } from '@angular/forms';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
|
||||
import { MatDialogRef } from '@angular/material/dialog';
|
||||
|
||||
import {faEye, faEyeSlash, faUserSecret, IconDefinition } from '@fortawesome/free-solid-svg-icons';
|
||||
import {faEye, faEyeSlash, IconDefinition } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import { ProfileService } from '@account/http/profile.service';
|
||||
import { SnackbarComponent } from 'shared';
|
||||
|
||||
const fiveSeconds = 5000;
|
||||
|
||||
@Component({
|
||||
selector: 'account-change-password',
|
||||
|
|
@ -35,49 +31,27 @@ const fiveSeconds = 5000;
|
|||
styleUrls: ['./change-password.component.scss']
|
||||
})
|
||||
export class ChangePasswordComponent implements OnInit {
|
||||
public changePasswordIcon: IconDefinition = faUserSecret;
|
||||
public hideIcon: IconDefinition = faEyeSlash;
|
||||
public passwordControl = new UntypedFormControl(null, [Validators.required]);
|
||||
public showIcon: IconDefinition = faEye;
|
||||
public showPassword = false;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private profileService: ProfileService,
|
||||
private snackbar: MatSnackBar,
|
||||
private dialog: MatDialog,
|
||||
private router: Router
|
||||
private dialogRef: MatDialogRef<ChangePasswordComponent>,
|
||||
) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
onChangePassword() {
|
||||
this.profileService.changePassword(this.passwordControl).subscribe({
|
||||
next: () => { this.openSuccessSnackbar(); },
|
||||
error: () => { this.openErrorSnackbar(); }
|
||||
});
|
||||
changePassword() {
|
||||
this.dialogRef.close(this.passwordControl.value);
|
||||
}
|
||||
|
||||
openErrorSnackbar() {
|
||||
const config = new MatSnackBarConfig();
|
||||
config.data = {type: 'error', message: 'An error occurred changing the password'};
|
||||
this.snackbar.openFromComponent(SnackbarComponent, config);
|
||||
}
|
||||
|
||||
openSuccessSnackbar() {
|
||||
const config = new MatSnackBarConfig();
|
||||
config.duration = fiveSeconds;
|
||||
config.data = {type: 'success', message: 'Password successfully changed'};
|
||||
const successSnackbar = this.snackbar.openFromComponent(SnackbarComponent, config);
|
||||
successSnackbar.afterDismissed().subscribe(
|
||||
() => { this.router.navigate(['/profile']); }
|
||||
);
|
||||
}
|
||||
|
||||
onCancel() {
|
||||
this.router.navigate(['/profile']);
|
||||
this.dialogRef.close();
|
||||
}
|
||||
|
||||
showHidePassword() {
|
||||
|
|
@ -23,7 +23,6 @@ import { AccountResolverService } from '@account/app/core/guards/account-resolve
|
|||
import { MembershipResolverService } from '@account/app/core/guards/membership-resolver.service';
|
||||
import { EditComponent } from './pages/edit/edit.component';
|
||||
import { NewComponent } from './pages/new/new.component';
|
||||
import { ChangePasswordComponent } from '@account/app/modules/profile/pages/change-password/change-password.component';
|
||||
|
||||
const profileRoutes: Routes = [
|
||||
{
|
||||
|
|
@ -41,10 +40,6 @@ const profileRoutes: Routes = [
|
|||
membershipTypes: MembershipResolverService
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'password-change',
|
||||
component: ChangePasswordComponent
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|||
import { NgxStripeModule } from 'ngx-stripe';
|
||||
|
||||
import { AgreementsComponent } from './components/cards/agreements/agreements.component';
|
||||
import { ChangePasswordComponent } from './pages/change-password/change-password.component';
|
||||
import { ChangePasswordComponent } from './components/views/change-password/change-password.component';
|
||||
import { DeleteComponent } from './components/cards/delete/delete.component';
|
||||
import { EditComponent } from './pages/edit/edit.component';
|
||||
import { environment} from '../../../environments/environment';
|
||||
|
|
|
|||
Loading…
Reference in New Issue