From 7053d0c7ecc882ac8e1e9f45260676ff7877210b Mon Sep 17 00:00:00 2001
From: KiruthigaManivannan
 <162679756+KiruthigaManivannan@users.noreply.github.com>
Date: Tue, 21 May 2024 18:46:31 +0530
Subject: [PATCH] AC-2390 Migrate Password Generator component (#8799)

---
 .../password-generator.component.html         | 194 +++++-------------
 .../policies/password-generator.component.ts  |  10 +-
 2 files changed, 62 insertions(+), 142 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/policies/password-generator.component.html b/apps/web/src/app/admin-console/organizations/policies/password-generator.component.html
index 350f7da7b4..80df5fa2e6 100644
--- a/apps/web/src/app/admin-console/organizations/policies/password-generator.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/password-generator.component.html
@@ -1,144 +1,64 @@
 <div [formGroup]="data">
-  <div class="form-group">
-    <div class="form-check">
-      <input
-        class="form-check-input"
-        type="checkbox"
-        id="enabled"
-        [formControl]="enabled"
-        name="Enabled"
-      />
-      <label class="form-check-label" for="enabled">{{ "turnOn" | i18n }}</label>
-    </div>
+  <bit-form-control>
+    <input type="checkbox" bitCheckbox [formControl]="enabled" id="enabled" />
+    <bit-label>{{ "turnOn" | i18n }}</bit-label>
+  </bit-form-control>
+
+  <div class="tw-grid tw-grid-cols-12 tw-gap-4">
+    <bit-form-field class="tw-col-span-6 tw-mb-0">
+      <bit-label>{{ "defaultType" | i18n }}</bit-label>
+      <bit-select formControlName="defaultType" id="defaultType">
+        <bit-option *ngFor="let o of defaultTypes" [value]="o.value" [label]="o.name"></bit-option>
+      </bit-select>
+    </bit-form-field>
   </div>
 
-  <div class="row">
-    <div class="col-6 form-group mb-0">
-      <label for="defaultType">{{ "defaultType" | i18n }}</label>
-      <select
-        id="defaultType"
-        name="defaultType"
-        formControlName="defaultType"
-        class="form-control"
-      >
-        <option *ngFor="let o of defaultTypes" [ngValue]="o.value">{{ o.name }}</option>
-      </select>
-    </div>
+  <h3 bitTypography="h3" class="tw-mt-4">{{ "password" | i18n }}</h3>
+  <div class="tw-grid tw-grid-cols-12 tw-gap-4">
+    <bit-form-field class="tw-col-span-6">
+      <bit-label>{{ "minLength" | i18n }}</bit-label>
+      <input bitInput type="number" min="5" max="128" formControlName="minLength" />
+    </bit-form-field>
   </div>
-  <h3 class="mt-4">{{ "password" | i18n }}</h3>
-  <div class="row">
-    <div class="col-6 form-group">
-      <label for="minLength">{{ "minLength" | i18n }}</label>
-      <input
-        id="minLength"
-        class="form-control"
-        type="number"
-        name="minLength"
-        min="5"
-        max="128"
-        formControlName="minLength"
-      />
-    </div>
+  <div class="tw-grid tw-grid-cols-12 tw-gap-4">
+    <bit-form-field class="tw-col-span-6">
+      <bit-label>{{ "minNumbers" | i18n }}</bit-label>
+      <input bitInput type="number" min="0" max="9" formControlName="minNumbers" />
+    </bit-form-field>
+    <bit-form-field class="tw-col-span-6">
+      <bit-label>{{ "minSpecial" | i18n }}</bit-label>
+      <input bitInput type="number" min="0" max="9" formControlName="minSpecial" />
+    </bit-form-field>
   </div>
-  <div class="row">
-    <div class="col-6 form-group">
-      <label for="minNumbers">{{ "minNumbers" | i18n }}</label>
-      <input
-        id="minNumbers"
-        class="form-control"
-        type="number"
-        name="minNumbers"
-        min="0"
-        max="9"
-        formControlName="minNumbers"
-      />
-    </div>
-    <div class="col-6 form-group">
-      <label for="minSpecial">{{ "minSpecial" | i18n }}</label>
-      <input
-        id="minSpecial"
-        class="form-control"
-        type="number"
-        name="minSpecial"
-        min="0"
-        max="9"
-        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">!@#$%^&amp;*</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>
+  <bit-form-control>
+    <input type="checkbox" bitCheckbox formControlName="useUpper" id="useUpper" />
+    <bit-label>A-Z</bit-label>
+  </bit-form-control>
+  <bit-form-control>
+    <input type="checkbox" bitCheckbox formControlName="useLower" id="useLower" />
+    <bit-label>a-z</bit-label>
+  </bit-form-control>
+  <bit-form-control>
+    <input type="checkbox" bitCheckbox formControlName="useNumbers" id="useNumbers" />
+    <bit-label>0-9</bit-label>
+  </bit-form-control>
+  <bit-form-control>
+    <input type="checkbox" bitCheckbox formControlName="useSpecial" id="useSpecial" />
+    <bit-label>!@#$%^&amp;*</bit-label>
+  </bit-form-control>
+  <h3 bitTypography="h3" class="tw-mt-4">{{ "passphrase" | i18n }}</h3>
+  <div class="tw-grid tw-grid-cols-12 tw-gap-4">
+    <bit-form-field class="tw-col-span-6">
+      <bit-label>{{ "minimumNumberOfWords" | i18n }}</bit-label>
+      <input bitInput type="number" min="3" max="20" formControlName="minNumberWords" />
+    </bit-form-field>
   </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>
diff --git a/apps/web/src/app/admin-console/organizations/policies/password-generator.component.ts b/apps/web/src/app/admin-console/organizations/policies/password-generator.component.ts
index 464586d685..93124c42fa 100644
--- a/apps/web/src/app/admin-console/organizations/policies/password-generator.component.ts
+++ b/apps/web/src/app/admin-console/organizations/policies/password-generator.component.ts
@@ -1,5 +1,5 @@
 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 { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -20,14 +20,14 @@ export class PasswordGeneratorPolicy extends BasePolicy {
 export class PasswordGeneratorPolicyComponent extends BasePolicyComponent {
   data = this.formBuilder.group({
     defaultType: [null],
-    minLength: [null],
+    minLength: [null, [Validators.min(5), Validators.max(128)]],
     useUpper: [null],
     useLower: [null],
     useNumbers: [null],
     useSpecial: [null],
-    minNumbers: [null],
-    minSpecial: [null],
-    minNumberWords: [null],
+    minNumbers: [null, [Validators.min(0), Validators.max(9)]],
+    minSpecial: [null, [Validators.min(0), Validators.max(9)]],
+    minNumberWords: [null, [Validators.min(3), Validators.max(20)]],
     capitalize: [null],
     includeNumber: [null],
   });