2018-01-29 15:33:43 +01:00
|
|
|
import * as template from './password-generator.component.html';
|
|
|
|
|
2018-01-29 22:13:37 +01:00
|
|
|
import { ToasterService } from 'angular2-toaster';
|
2018-02-08 16:37:54 +01:00
|
|
|
import { Angulartics2 } from 'angulartics2';
|
2018-01-29 22:13:37 +01:00
|
|
|
|
2018-01-29 15:33:43 +01:00
|
|
|
import {
|
|
|
|
Component,
|
|
|
|
EventEmitter,
|
|
|
|
Input,
|
|
|
|
OnInit,
|
|
|
|
Output,
|
|
|
|
} from '@angular/core';
|
|
|
|
|
2018-02-23 22:31:52 +01:00
|
|
|
import { I18nService } from 'jslib/abstractions/i18n.service';
|
2018-02-23 22:32:32 +01:00
|
|
|
import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
|
2018-02-16 20:15:35 +01:00
|
|
|
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
|
2018-01-29 15:33:43 +01:00
|
|
|
|
|
|
|
@Component({
|
2018-02-18 04:37:43 +01:00
|
|
|
selector: 'app-password-generator',
|
2018-01-29 15:33:43 +01:00
|
|
|
template: template,
|
|
|
|
})
|
|
|
|
export class PasswordGeneratorComponent implements OnInit {
|
2018-01-29 22:13:37 +01:00
|
|
|
@Input() showSelect: boolean = false;
|
2018-01-29 22:33:38 +01:00
|
|
|
@Output() onSelected = new EventEmitter<string>();
|
2018-01-29 15:33:43 +01:00
|
|
|
|
2018-01-29 22:13:37 +01:00
|
|
|
options: any = {};
|
|
|
|
password: string = '-';
|
2018-02-01 03:13:42 +01:00
|
|
|
showOptions = false;
|
2018-02-11 07:26:19 +01:00
|
|
|
avoidAmbiguous = false;
|
2018-01-29 22:13:37 +01:00
|
|
|
|
|
|
|
constructor(private passwordGenerationService: PasswordGenerationService, private analytics: Angulartics2,
|
2018-02-23 22:31:52 +01:00
|
|
|
private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
|
|
|
|
private toasterService: ToasterService) { }
|
2018-01-29 15:33:43 +01:00
|
|
|
|
|
|
|
async ngOnInit() {
|
2018-01-29 22:13:37 +01:00
|
|
|
this.options = await this.passwordGenerationService.getOptions();
|
2018-02-11 07:26:19 +01:00
|
|
|
this.avoidAmbiguous = !this.options.ambiguous;
|
2018-01-29 22:13:37 +01:00
|
|
|
this.password = this.passwordGenerationService.generatePassword(this.options);
|
|
|
|
this.analytics.eventTrack.next({ action: 'Generated Password' });
|
|
|
|
await this.passwordGenerationService.addHistory(this.password);
|
|
|
|
|
2018-02-01 03:33:55 +01:00
|
|
|
const slider = document.querySelector('#lengthRange');
|
2018-01-29 22:13:37 +01:00
|
|
|
if (slider) {
|
|
|
|
// Save password once the slider stop moving.
|
|
|
|
slider.addEventListener('change', async (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
this.saveOptions(false);
|
|
|
|
await this.passwordGenerationService.addHistory(this.password);
|
|
|
|
this.analytics.eventTrack.next({ action: 'Regenerated Password' });
|
|
|
|
});
|
|
|
|
// Regenerate while slider moving
|
|
|
|
slider.addEventListener('input', (e) => {
|
|
|
|
e.preventDefault();
|
2018-02-01 03:33:55 +01:00
|
|
|
this.normalizeOptions();
|
2018-01-29 22:13:37 +01:00
|
|
|
this.password = this.passwordGenerationService.generatePassword(this.options);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
async saveOptions(regenerate: boolean = true) {
|
2018-02-01 03:33:55 +01:00
|
|
|
this.normalizeOptions();
|
2018-01-29 22:13:37 +01:00
|
|
|
await this.passwordGenerationService.saveOptions(this.options);
|
|
|
|
|
|
|
|
if (regenerate) {
|
2018-02-18 04:37:43 +01:00
|
|
|
await this.regenerate();
|
2018-01-29 22:13:37 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-02-18 04:37:43 +01:00
|
|
|
async regenerate() {
|
2018-01-29 22:13:37 +01:00
|
|
|
this.password = this.passwordGenerationService.generatePassword(this.options);
|
2018-02-18 04:37:43 +01:00
|
|
|
await this.passwordGenerationService.addHistory(this.password);
|
2018-01-29 22:13:37 +01:00
|
|
|
this.analytics.eventTrack.next({ action: 'Regenerated Password' });
|
|
|
|
}
|
|
|
|
|
|
|
|
copy() {
|
|
|
|
this.analytics.eventTrack.next({ action: 'Copied Generated Password' });
|
2018-02-16 20:15:35 +01:00
|
|
|
this.platformUtilsService.copyToClipboard(this.password);
|
2018-02-23 22:31:52 +01:00
|
|
|
this.toasterService.popAsync('info', null, this.i18nService.t('valueCopied', this.i18nService.t('password')));
|
2018-01-29 15:33:43 +01:00
|
|
|
}
|
2018-01-29 22:33:38 +01:00
|
|
|
|
|
|
|
select() {
|
|
|
|
this.analytics.eventTrack.next({ action: 'Selected Generated Password' });
|
|
|
|
this.onSelected.emit(this.password);
|
|
|
|
}
|
2018-02-01 03:13:42 +01:00
|
|
|
|
|
|
|
toggleOptions() {
|
|
|
|
this.showOptions = !this.showOptions;
|
|
|
|
}
|
2018-02-01 03:33:55 +01:00
|
|
|
|
|
|
|
private normalizeOptions() {
|
2018-02-09 18:12:41 +01:00
|
|
|
this.options.minLowercase = 0;
|
|
|
|
this.options.minUppercase = 0;
|
2018-02-11 07:26:19 +01:00
|
|
|
this.options.ambiguous = !this.avoidAmbiguous;
|
2018-02-09 18:12:41 +01:00
|
|
|
|
2018-02-01 03:33:55 +01:00
|
|
|
if (!this.options.uppercase && !this.options.lowercase && !this.options.number && !this.options.special) {
|
|
|
|
this.options.lowercase = true;
|
|
|
|
const lowercase = document.querySelector('#lowercase') as HTMLInputElement;
|
|
|
|
if (lowercase) {
|
|
|
|
lowercase.checked = true;
|
|
|
|
}
|
|
|
|
}
|
2018-02-09 18:12:41 +01:00
|
|
|
|
|
|
|
if (!this.options.length) {
|
|
|
|
this.options.length = 5;
|
|
|
|
} else if (this.options.length > 128) {
|
|
|
|
this.options.length = 128;
|
|
|
|
}
|
|
|
|
|
2018-02-01 03:33:55 +01:00
|
|
|
if (!this.options.minNumber) {
|
|
|
|
this.options.minNumber = 0;
|
2018-02-09 18:12:41 +01:00
|
|
|
} else if (this.options.minNumber > this.options.length) {
|
|
|
|
this.options.minNumber = this.options.length;
|
|
|
|
} else if (this.options.minNumber > 9) {
|
|
|
|
this.options.minNumber = 9;
|
2018-02-01 03:33:55 +01:00
|
|
|
}
|
2018-02-01 03:40:02 +01:00
|
|
|
|
2018-02-01 03:33:55 +01:00
|
|
|
if (!this.options.minSpecial) {
|
|
|
|
this.options.minSpecial = 0;
|
2018-02-09 18:12:41 +01:00
|
|
|
} else if (this.options.minSpecial > this.options.length) {
|
|
|
|
this.options.minSpecial = this.options.length;
|
|
|
|
} else if (this.options.minSpecial > 9) {
|
|
|
|
this.options.minSpecial = 9;
|
2018-02-01 03:33:55 +01:00
|
|
|
}
|
2018-02-01 03:40:02 +01:00
|
|
|
|
2018-02-09 18:12:41 +01:00
|
|
|
if (this.options.minSpecial + this.options.minNumber > this.options.length) {
|
|
|
|
this.options.minSpecial = this.options.length - this.options.minNumber;
|
2018-02-01 03:33:55 +01:00
|
|
|
}
|
|
|
|
}
|
2018-01-29 15:33:43 +01:00
|
|
|
}
|