AC-2390 Migrate Password Generator component (#8799)
This commit is contained in:
KiruthigaManivannan
GitHub
parent
e2c90310a3
commit
7053d0c7ec
|
|
@ -1,144 +1,64 @@
|
||||||
<div [formGroup]="data">
|
<div [formGroup]="data">
|
||||||
<div class="form-group">
|
<bit-form-control>
|
||||||
<div class="form-check">
|
<input type="checkbox" bitCheckbox [formControl]="enabled" id="enabled" />
|
||||||
<input
|
<bit-label>{{ "turnOn" | i18n }}</bit-label>
|
||||||
class="form-check-input"
|
</bit-form-control>
|
||||||
type="checkbox"
|
|
||||||
id="enabled"
|
<div class="tw-grid tw-grid-cols-12 tw-gap-4">
|
||||||
[formControl]="enabled"
|
<bit-form-field class="tw-col-span-6 tw-mb-0">
|
||||||
name="Enabled"
|
<bit-label>{{ "defaultType" | i18n }}</bit-label>
|
||||||
/>
|
<bit-select formControlName="defaultType" id="defaultType">
|
||||||
<label class="form-check-label" for="enabled">{{ "turnOn" | i18n }}</label>
|
<bit-option *ngFor="let o of defaultTypes" [value]="o.value" [label]="o.name"></bit-option>
|
||||||
</div>
|
</bit-select>
|
||||||
|
</bit-form-field>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<h3 bitTypography="h3" class="tw-mt-4">{{ "password" | i18n }}</h3>
|
||||||
<div class="col-6 form-group mb-0">
|
<div class="tw-grid tw-grid-cols-12 tw-gap-4">
|
||||||
<label for="defaultType">{{ "defaultType" | i18n }}</label>
|
<bit-form-field class="tw-col-span-6">
|
||||||
<select
|
<bit-label>{{ "minLength" | i18n }}</bit-label>
|
||||||
id="defaultType"
|
<input bitInput type="number" min="5" max="128" formControlName="minLength" />
|
||||||
name="defaultType"
|
</bit-form-field>
|
||||||
formControlName="defaultType"
|
|
||||||
class="form-control"
|
|
||||||
>
|
|
||||||
<option *ngFor="let o of defaultTypes" [ngValue]="o.value">{{ o.name }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<h3 class="mt-4">{{ "password" | i18n }}</h3>
|
<div class="tw-grid tw-grid-cols-12 tw-gap-4">
|
||||||
<div class="row">
|
<bit-form-field class="tw-col-span-6">
|
||||||
<div class="col-6 form-group">
|
<bit-label>{{ "minNumbers" | i18n }}</bit-label>
|
||||||
<label for="minLength">{{ "minLength" | i18n }}</label>
|
<input bitInput type="number" min="0" max="9" formControlName="minNumbers" />
|
||||||
<input
|
</bit-form-field>
|
||||||
id="minLength"
|
<bit-form-field class="tw-col-span-6">
|
||||||
class="form-control"
|
<bit-label>{{ "minSpecial" | i18n }}</bit-label>
|
||||||
type="number"
|
<input bitInput type="number" min="0" max="9" formControlName="minSpecial" />
|
||||||
name="minLength"
|
</bit-form-field>
|
||||||
min="5"
|
|
||||||
max="128"
|
|
||||||
formControlName="minLength"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<bit-form-control>
|
||||||
<div class="col-6 form-group">
|
<input type="checkbox" bitCheckbox formControlName="useUpper" id="useUpper" />
|
||||||
<label for="minNumbers">{{ "minNumbers" | i18n }}</label>
|
<bit-label>A-Z</bit-label>
|
||||||
<input
|
</bit-form-control>
|
||||||
id="minNumbers"
|
<bit-form-control>
|
||||||
class="form-control"
|
<input type="checkbox" bitCheckbox formControlName="useLower" id="useLower" />
|
||||||
type="number"
|
<bit-label>a-z</bit-label>
|
||||||
name="minNumbers"
|
</bit-form-control>
|
||||||
min="0"
|
<bit-form-control>
|
||||||
max="9"
|
<input type="checkbox" bitCheckbox formControlName="useNumbers" id="useNumbers" />
|
||||||
formControlName="minNumbers"
|
<bit-label>0-9</bit-label>
|
||||||
/>
|
</bit-form-control>
|
||||||
</div>
|
<bit-form-control>
|
||||||
<div class="col-6 form-group">
|
<input type="checkbox" bitCheckbox formControlName="useSpecial" id="useSpecial" />
|
||||||
<label for="minSpecial">{{ "minSpecial" | i18n }}</label>
|
<bit-label>!@#$%^&*</bit-label>
|
||||||
<input
|
</bit-form-control>
|
||||||
id="minSpecial"
|
<h3 bitTypography="h3" class="tw-mt-4">{{ "passphrase" | i18n }}</h3>
|
||||||
class="form-control"
|
<div class="tw-grid tw-grid-cols-12 tw-gap-4">
|
||||||
type="number"
|
<bit-form-field class="tw-col-span-6">
|
||||||
name="minSpecial"
|
<bit-label>{{ "minimumNumberOfWords" | i18n }}</bit-label>
|
||||||
min="0"
|
<input bitInput type="number" min="3" max="20" formControlName="minNumberWords" />
|
||||||
max="9"
|
</bit-form-field>
|
||||||
formControlName="minSpecial"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-check">
|
|
||||||
<input
|
|
||||||
class="form-check-input"
|
|
||||||
type="checkbox"
|
|
||||||
id="useUpper"
|
|
||||||
formControlName="useUpper"
|
|
||||||
name="useUpper"
|
|
||||||
/>
|
|
||||||
<label class="form-check-label" for="useUpper">A-Z</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-check">
|
|
||||||
<input
|
|
||||||
class="form-check-input"
|
|
||||||
type="checkbox"
|
|
||||||
id="useLower"
|
|
||||||
name="useLower"
|
|
||||||
formControlName="useLower"
|
|
||||||
/>
|
|
||||||
<label class="form-check-label" for="useLower">a-z</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-check">
|
|
||||||
<input
|
|
||||||
class="form-check-input"
|
|
||||||
type="checkbox"
|
|
||||||
id="useNumbers"
|
|
||||||
name="useNumbers"
|
|
||||||
formControlName="useNumbers"
|
|
||||||
/>
|
|
||||||
<label class="form-check-label" for="useNumbers">0-9</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-check">
|
|
||||||
<input
|
|
||||||
class="form-check-input"
|
|
||||||
type="checkbox"
|
|
||||||
id="useSpecial"
|
|
||||||
name="useSpecial"
|
|
||||||
formControlName="useSpecial"
|
|
||||||
/>
|
|
||||||
<label class="form-check-label" for="useSpecial">!@#$%^&*</label>
|
|
||||||
</div>
|
|
||||||
<h3 class="mt-4">{{ "passphrase" | i18n }}</h3>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-6 form-group">
|
|
||||||
<label for="minNumberWords">{{ "minimumNumberOfWords" | i18n }}</label>
|
|
||||||
<input
|
|
||||||
id="minNumberWords"
|
|
||||||
class="form-control"
|
|
||||||
type="number"
|
|
||||||
name="minNumberWords"
|
|
||||||
min="3"
|
|
||||||
max="20"
|
|
||||||
formControlName="minNumberWords"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-check">
|
|
||||||
<input
|
|
||||||
class="form-check-input"
|
|
||||||
type="checkbox"
|
|
||||||
id="capitalize"
|
|
||||||
name="capitalize"
|
|
||||||
formControlName="capitalize"
|
|
||||||
/>
|
|
||||||
<label class="form-check-label" for="capitalize">{{ "capitalize" | i18n }}</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-check">
|
|
||||||
<input
|
|
||||||
class="form-check-input"
|
|
||||||
type="checkbox"
|
|
||||||
id="includeNumber"
|
|
||||||
name="includeNumber"
|
|
||||||
formControlName="includeNumber"
|
|
||||||
/>
|
|
||||||
<label class="form-check-label" for="includeNumber">{{ "includeNumber" | i18n }}</label>
|
|
||||||
</div>
|
</div>
|
||||||
|
<bit-form-control>
|
||||||
|
<input type="checkbox" bitCheckbox formControlName="capitalize" id="capitalize" />
|
||||||
|
<bit-label>{{ "capitalize" | i18n }}</bit-label>
|
||||||
|
</bit-form-control>
|
||||||
|
<bit-form-control>
|
||||||
|
<input type="checkbox" bitCheckbox formControlName="includeNumber" id="includeNumber" />
|
||||||
|
<bit-label>{{ "includeNumber" | i18n }}</bit-label>
|
||||||
|
</bit-form-control>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { Component } from "@angular/core";
|
import { Component } from "@angular/core";
|
||||||
import { UntypedFormBuilder } from "@angular/forms";
|
import { UntypedFormBuilder, Validators } from "@angular/forms";
|
||||||
|
|
||||||
import { PolicyType } from "@bitwarden/common/admin-console/enums";
|
import { PolicyType } from "@bitwarden/common/admin-console/enums";
|
||||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||||
|
|
@ -20,14 +20,14 @@ export class PasswordGeneratorPolicy extends BasePolicy {
|
||||||
export class PasswordGeneratorPolicyComponent extends BasePolicyComponent {
|
export class PasswordGeneratorPolicyComponent extends BasePolicyComponent {
|
||||||
data = this.formBuilder.group({
|
data = this.formBuilder.group({
|
||||||
defaultType: [null],
|
defaultType: [null],
|
||||||
minLength: [null],
|
minLength: [null, [Validators.min(5), Validators.max(128)]],
|
||||||
useUpper: [null],
|
useUpper: [null],
|
||||||
useLower: [null],
|
useLower: [null],
|
||||||
useNumbers: [null],
|
useNumbers: [null],
|
||||||
useSpecial: [null],
|
useSpecial: [null],
|
||||||
minNumbers: [null],
|
minNumbers: [null, [Validators.min(0), Validators.max(9)]],
|
||||||
minSpecial: [null],
|
minSpecial: [null, [Validators.min(0), Validators.max(9)]],
|
||||||
minNumberWords: [null],
|
minNumberWords: [null, [Validators.min(3), Validators.max(20)]],
|
||||||
capitalize: [null],
|
capitalize: [null],
|
||||||
includeNumber: [null],
|
includeNumber: [null],
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue