feat(admin-ui): Add password form input

Closes #445

packages/admin-ui/src/lib/core/src/common/generated-types.ts

@@ -607,7 +607,7 @@ export type CreateZoneInput = {
 /**
  * @description
  * ISO 4217 currency code
- *
+ * 
  * @docsCategory common
  */
 export enum CurrencyCode {
@@ -1407,7 +1407,7 @@ export type JobSortParameter = {
 /**
  * @description
  * The state of a Job in the JobQueue
- *
+ * 
  * @docsCategory common
  */
 export enum JobState {
@@ -1425,7 +1425,7 @@ export enum JobState {
  * region or script modifier (e.g. de_AT). The selection available is based
  * on the [Unicode CLDR summary list](https://unicode-org.github.io/cldr-staging/charts/37/summary/root.html)
  * and includes the major spoken languages of the world and any widely-used variants.
- *
+ * 
  * @docsCategory common
  */
 export enum LanguageCode {
@@ -2661,7 +2661,7 @@ export type PaymentMethodSortParameter = {
  * @description
  * Permissions for administrators and customers. Used to control access to
  * GraphQL resolvers via the {@link Allow} decorator.
- *
+ * 
  * @docsCategory common
  */
 export enum Permission {

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/password-form-input/password-form-input.component.html

@@ -0,0 +1,5 @@
+<input
+    type="password"
+    [readonly]="readonly"
+    [formControl]="formControl"
+/>

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/password-form-input/password-form-input.component.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { DefaultFormComponentId } from '@vendure/common/lib/shared-types';
+
+import { FormInputComponent, InputComponentConfig } from '../../../common/component-registry-types';
+
+@Component({
+    selector: 'vdr-password-form-input',
+    templateUrl: './password-form-input.component.html',
+    styleUrls: ['./password-form-input.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PasswordFormInputComponent implements FormInputComponent {
+    static readonly id: DefaultFormComponentId = 'password-form-input';
+    readonly: boolean;
+    formControl: FormControl;
+    config: InputComponentConfig;
+}

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/register-dynamic-input-components.ts

@@ -14,6 +14,7 @@ import { CustomerGroupFormInputComponent } from './customer-group-form-input/cus
 import { DateFormInputComponent } from './date-form-input/date-form-input.component';
 import { FacetValueFormInputComponent } from './facet-value-form-input/facet-value-form-input.component';
 import { NumberFormInputComponent } from './number-form-input/number-form-input.component';
+import { PasswordFormInputComponent } from './password-form-input/password-form-input.component';
 import { ProductSelectorFormInputComponent } from './product-selector-form-input/product-selector-form-input.component';
 import { SelectFormInputComponent } from './select-form-input/select-form-input.component';
 import { TextFormInputComponent } from './text-form-input/text-form-input.component';
@@ -28,6 +29,7 @@ export const defaultFormInputs = [
     TextFormInputComponent,
     ProductSelectorFormInputComponent,
     CustomerGroupFormInputComponent,
+    PasswordFormInputComponent,
 ];
 
 /**

packages/admin-ui/src/lib/core/src/shared/shared.module.ts

@@ -83,6 +83,7 @@ import { DateFormInputComponent } from './dynamic-form-inputs/date-form-input/da
 import { DynamicFormInputComponent } from './dynamic-form-inputs/dynamic-form-input/dynamic-form-input.component';
 import { FacetValueFormInputComponent } from './dynamic-form-inputs/facet-value-form-input/facet-value-form-input.component';
 import { NumberFormInputComponent } from './dynamic-form-inputs/number-form-input/number-form-input.component';
+import { PasswordFormInputComponent } from './dynamic-form-inputs/password-form-input/password-form-input.component';
 import { ProductSelectorFormInputComponent } from './dynamic-form-inputs/product-selector-form-input/product-selector-form-input.component';
 import { SelectFormInputComponent } from './dynamic-form-inputs/select-form-input/select-form-input.component';
 import { TextFormInputComponent } from './dynamic-form-inputs/text-form-input/text-form-input.component';
@@ -191,6 +192,7 @@ const DECLARATIONS = [
 
 const DYNAMIC_FORM_INPUTS = [
     TextFormInputComponent,
+    PasswordFormInputComponent,
     NumberFormInputComponent,
     DateFormInputComponent,
     CurrencyFormInputComponent,

packages/common/src/shared-types.ts

@@ -110,8 +110,12 @@ export type CustomFieldType = 'string' | 'localeString' | 'int' | 'float' | 'boo
 export type ConfigArgType = 'string' | 'int' | 'float' | 'boolean' | 'datetime' | 'ID';
 
 /**
+ * @description
  * The ids of the default form input components that ship with the
  * Admin UI.
+ *
+ * @docsCategory common
+ * @docsPage Configurable Operations
  */
 export type DefaultFormComponentId =
     | 'boolean-form-input'
@@ -122,7 +126,8 @@ export type DefaultFormComponentId =
     | 'select-form-input'
     | 'product-selector-form-input'
     | 'customer-group-form-input'
-    | 'text-form-input';
+    | 'text-form-input'
+    | 'password-form-input';
 
 /**
  * Used to defined the expected arguments for a given default form input component.
@@ -137,6 +142,7 @@ type DefaultFormConfigHash = {
     'product-selector-form-input': {};
     'customer-group-form-input': {};
     'text-form-input': {};
+    'password-form-input': {};
 };
 
 export type DefaultFormComponentConfig<T extends DefaultFormComponentId> = DefaultFormConfigHash[T];