mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-07 09:31:31 +01:00
password generator options toggle
This commit is contained in:
parent
e52b104a72
commit
06106e1775
@ -17,9 +17,13 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="box-header">
|
<div class="box-header">
|
||||||
{{'options' | i18n}}
|
<button type="button" (click)="toggleOptions()">
|
||||||
|
<i class="fa fa-plus-square-o" [hidden]="showOptions"></i>
|
||||||
|
<i class="fa fa-minus-square-o" [hidden]="!showOptions"></i>
|
||||||
|
{{'options' | i18n}}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content condensed">
|
<div class="box-content condensed" *ngIf="showOptions">
|
||||||
<div class="box-content-row box-content-row-slider" appBoxRow>
|
<div class="box-content-row box-content-row-slider" appBoxRow>
|
||||||
<label for="length">{{'length' | i18n}}</label>
|
<label for="length">{{'length' | i18n}}</label>
|
||||||
<span>{{options.length}}</span>
|
<span>{{options.length}}</span>
|
||||||
@ -47,7 +51,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box">
|
<div class="box" *ngIf="showOptions">
|
||||||
<div class="box-content condensed">
|
<div class="box-content condensed">
|
||||||
<div class="box-content-row box-content-row-input" appBoxRow>
|
<div class="box-content-row box-content-row-input" appBoxRow>
|
||||||
<label for="min-number">{{'minNumbers' | i18n}}</label>
|
<label for="min-number">{{'minNumbers' | i18n}}</label>
|
||||||
@ -68,8 +72,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="button" class="primary" appBlurClick *ngIf="showSelect" (click)="select()">
|
<button type="button" class="primary" appBlurClick *ngIf="showSelect" (click)="select()"
|
||||||
<i class="fa fa-lg fa-check"></i> {{'select' | i18n}}
|
title="{{'select' | i18n}}">
|
||||||
|
<i class="fa fa-lg fa-fw fa-check"></i>
|
||||||
</button>
|
</button>
|
||||||
<button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
|
<button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -24,6 +24,7 @@ export class PasswordGeneratorComponent implements OnInit {
|
|||||||
|
|
||||||
options: any = {};
|
options: any = {};
|
||||||
password: string = '-';
|
password: string = '-';
|
||||||
|
showOptions = false;
|
||||||
|
|
||||||
constructor(private passwordGenerationService: PasswordGenerationService, private analytics: Angulartics2,
|
constructor(private passwordGenerationService: PasswordGenerationService, private analytics: Angulartics2,
|
||||||
private utilsService: UtilsService) { }
|
private utilsService: UtilsService) { }
|
||||||
@ -89,4 +90,8 @@ export class PasswordGeneratorComponent implements OnInit {
|
|||||||
this.analytics.eventTrack.next({ action: 'Selected Generated Password' });
|
this.analytics.eventTrack.next({ action: 'Selected Generated Password' });
|
||||||
this.onSelected.emit(this.password);
|
this.onSelected.emit(this.password);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
toggleOptions() {
|
||||||
|
this.showOptions = !this.showOptions;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -44,6 +44,7 @@ input, select, textarea, button {
|
|||||||
|
|
||||||
button {
|
button {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
|
@ -7,6 +7,13 @@
|
|||||||
margin: 0 10px 5px 10px;
|
margin: 0 10px 5px 10px;
|
||||||
color: $gray-light;
|
color: $gray-light;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
button {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
color: $gray-light;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-content {
|
.box-content {
|
||||||
|
@ -9,6 +9,7 @@
|
|||||||
color: $button-color;
|
color: $button-color;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover:not([disabled]), &:focus:not([disabled]) {
|
&:hover:not([disabled]), &:focus:not([disabled]) {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
Loading…
Reference in New Issue
Block a user