Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import {Component} from '@angular/core';
- import {CORE_DIRECTIVES} from '@angular/common';
- import {Router} from '@angular/router';
- import {AuthService} from '../../auth.service';
- import {RoleService} from '../../auth/role.service';
- @Component({
- selector: 'settings',
- directives: [ CORE_DIRECTIVES ],
- template: `
- <div class="row">
- <div class="col-xs-12 text-xs-center">
- Username: <strong>{{user()?.attributes?.username}}</strong><br/>
- Member Since: <strong>{{user()?.createdAt | date}}</strong><br/>
- Role: <strong>{{roleService.role?.attributes?.displayName}}</strong>
- <hr/>
- </div>
- </div>
- <div class="row">
- <div class="col-xs-12 col-md-6">
- <div class="card">
- <div class="card-header">
- <h5 style="margin-bottom:0px;">Change Password</h5>
- <small>Use this form to change your password to a new one.</small>
- </div>
- <div class="card-block">
- <form (ngSubmit)="changePassword()">
- <fieldset class="form-group">
- <label>New Password</label>
- <input type="password" class="form-control" autocomplete="off" name="password"
- placeholder="Enter password" [(ngModel)]="password">
- </fieldset>
- <fieldset class="form-group">
- <label>Confirm New Password</label>
- <input type="password" class="form-control" autocomplete="off" name="passwordConfirm"
- placeholder="Repeat password" [(ngModel)]="passwordConfirm">
- </fieldset>
- <div *ngIf="passwordChangeMessage.length > 0 && !passwordChangeInProgress">
- <div class="alert alert-danger" role="alert">
- <i class="fa fa-exclamation-triangle"></i> {{passwordChangeMessage}}
- </div>
- </div>
- <small>
- When the password is changed you will be signed out and will have to sign in again with your new password.
- </small>
- <hr/>
- <div class="text-xs-center">
- <button type="submit" class="btn btn-primary"><i class="fa fa-floppy-o"></i> Change Password</button>
- </div>
- </form>
- </div>
- </div>
- </div>
- <div class="col-md-6">
- </div>
- </div>
- <div class="row">
- <div class="col-xs-12 col-md-6">
- <div class="card">
- <div class="card-header">
- <h5 style="margin-bottom:0px;">Log Out</h5>
- <small>Sign out of your account.</small>
- </div>
- <div class="card-block text-xs-center">
- <button class="btn btn-danger" (click)="logout()"><i class="fa fa-sign-out"></i> Log Out</button>
- </div>
- </div>
- </div>
- </div>`
- })
- export class GeneralSettingsComponent {
- private password: string = '';
- private passwordConfirm: string = '';
- private passwordChangeInProgress = false;
- private passwordChangeMessage = '';
- constructor(private router: Router, private authService: AuthService, private roleService: RoleService) { }
- user() {
- return this.authService.user();
- }
- changePassword() {
- if (!this.password || !this.passwordConfirm) {
- this.passwordChangeMessage = 'Please enter a password and confirm it.';
- return;
- }
- if (this.passwordConfirm !== this.password) {
- this.passwordChangeMessage = 'New passwords do not match.';
- return;
- }
- if (this.password.length < 5) {
- this.passwordChangeMessage = 'Password must be longer than 4 characters.';
- return;
- }
- this.passwordChangeInProgress = true;
- this.authService.changePassword(this.password).then(success => {
- this.authService.logout();
- this.router.navigateByUrl('../login');
- }, error => {
- this.passwordChangeInProgress = false;
- this.passwordChangeMessage = 'Password Update Failed! ' + error.message;
- alert(JSON.stringify(error));
- });
- }
- logout() {
- this.authService.logout();
- this.router.navigateByUrl('/login');
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement