feat: add formly checkbox field, minor formly improvements (#574)

src/app/pages/contact/contact-form/contact-form.component.html

@@ -4,7 +4,7 @@
   <formly-form [form]="contactForm" [fields]="fields" [model]="model$ | async"></formly-form>
 
   <div class="row form-group">
-    <div class="offset-md-5 col-md-7">
+    <div class="offset-md-4 col-md-8">
       <input
         type="submit"
         [disabled]="formDisabled"

src/app/pages/contact/contact-page.component.html

@@ -4,7 +4,7 @@ <h1>{{ 'helpdesk.contact_us.heading' | translate }}</h1>
 
 <ng-container *ngIf="(success$ | async) === undefined; else contactConfirmation">
   <div class="row">
-    <div class="col-md-10 col-lg-8 col-xl-6">
+    <div class="col-md-10 col-lg-8 col-xl-7">
       <ish-contact-form (request)="createRequest($event)"></ish-contact-form>
     </div>
   </div>

src/app/pages/registration/registration-page.component.html

@@ -3,5 +3,26 @@
 <div data-testing-id="account-create-full-page">
   <form [formGroup]="form" (ngSubmit)="onCreate()">
     <formly-form [model]="model" [form]="form" [fields]="fields"></formly-form>
+
+    <div class="row">
+      <div class="col-md-10 col-lg-8 col-xl-6">
+        <div class="row form-group">
+          <div class="offset-md-4 col-md-8">
+            <input
+              type="submit"
+              [disabled]="formDisabled"
+              class="btn btn-primary"
+              value="{{ 'account.create.button.label' | translate }}"
+            />
+            <input
+              type="button"
+              class="btn btn-secondary"
+              value="{{ 'account.cancel.link' | translate }}"
+              (click)="cancelForm()"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
   </form>
 </div>

src/app/pages/registration/registration-page.component.spec.ts

@@ -4,6 +4,7 @@ import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testin
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 import { FormlyConfig, FormlyForm } from '@ngx-formly/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent } from 'ng-mocks';
 import { anything, instance, mock, when } from 'ts-mockito';
 
@@ -31,7 +32,11 @@ describe('Registration Page Component', () => {
         MockComponent(FormlyForm),
         RegistrationPageComponent,
       ],
-      imports: [ReactiveFormsModule, RouterTestingModule.withRoutes([{ path: 'home', component: DummyComponent }])],
+      imports: [
+        ReactiveFormsModule,
+        RouterTestingModule.withRoutes([{ path: 'home', component: DummyComponent }]),
+        TranslateModule.forRoot(),
+      ],
       providers: [
         { provide: AccountFacade, useFactory: () => instance(mock(AccountFacade)) },
         { provide: FormlyConfig, useFactory: () => instance(formlyConfig) },

src/app/pages/registration/registration-page.component.ts

@@ -3,7 +3,7 @@ import { FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { FormlyConfig, FormlyFieldConfig } from '@ngx-formly/core';
 import { UUID } from 'angular2-uuid';
-import { Observable, Subject } from 'rxjs';
+import { Observable } from 'rxjs';
 
 import { AccountFacade } from 'ish-core/facades/account.facade';
 import { FeatureToggleService } from 'ish-core/feature-toggle.module';
@@ -32,14 +32,13 @@ export class RegistrationPageComponent implements OnInit {
     private config: FormlyConfig
   ) {}
 
-  submittedSubject$ = new Subject();
+  submitted = false;
 
   fields: FormlyFieldConfig[];
   model = {};
   form = new FormGroup({});
 
   ngOnInit() {
-    this.submittedSubject$.next(false);
     this.userError$ = this.accountFacade.userError$;
     this.businessCustomerRegistration = this.featureToggle.enabled('businessCustomerRegistration');
     this.fields = this.getRegistrationConfig();
@@ -51,7 +50,7 @@ export class RegistrationPageComponent implements OnInit {
 
   onCreate() {
     if (this.form.invalid) {
-      this.submittedSubject$.next(true);
+      this.submitted = true;
       return;
     }
     const formValue = this.form.value;
@@ -133,8 +132,6 @@ export class RegistrationPageComponent implements OnInit {
                 type: 'ish-text-input-field',
                 templateOptions: {
                   label: 'account.address.taxation.label',
-                  labelClass: 'col-md-4',
-                  fieldClass: 'col-md-8',
                 },
               }
             : {},
@@ -149,20 +146,13 @@ export class RegistrationPageComponent implements OnInit {
             },
           },
           {
-            type: 'ish-registration-buttons-field',
+            type: 'ish-captcha-field',
             templateOptions: {
-              submitted$: this.submittedSubject$.asObservable(),
-              onCancel: () => this.cancelForm(),
+              topic: 'register',
             },
           },
         ],
       },
-      {
-        type: 'ish-captcha-field',
-        templateOptions: {
-          topic: 'register',
-        },
-      },
     ];
   }
   private getCredentialsConfig(): FormlyFieldConfig[] {
@@ -190,8 +180,6 @@ export class RegistrationPageComponent implements OnInit {
             templateOptions: {
               label: 'account.register.email.label',
               required: true,
-              labelClass: 'col-md-4',
-              fieldClass: 'col-md-8',
             },
             validation: {
               messages: {
@@ -205,8 +193,6 @@ export class RegistrationPageComponent implements OnInit {
             templateOptions: {
               label: 'account.register.email_confirmation.label',
               required: true,
-              labelClass: 'col-md-4',
-              fieldClass: 'col-md-8',
             },
             validators: {
               validation: [SpecialValidators.equalToControl('login')],
@@ -231,8 +217,7 @@ export class RegistrationPageComponent implements OnInit {
                 key: 'account.register.password.extrainfo.message',
                 args: { 0: '7' },
               },
-              labelClass: 'col-md-4',
-              fieldClass: 'col-md-8',
+
               autocomplete: 'new-password',
             },
             validation: {
@@ -247,8 +232,7 @@ export class RegistrationPageComponent implements OnInit {
             templateOptions: {
               required: true,
               label: 'account.register.password_confirmation.label',
-              labelClass: 'col-md-4',
-              fieldClass: 'col-md-8',
+
               autocomplete: 'new-password',
             },
             validators: {
@@ -265,4 +249,9 @@ export class RegistrationPageComponent implements OnInit {
       },
     ];
   }
+
+  /** return boolean to set submit button enabled/disabled */
+  get formDisabled(): boolean {
+    return this.form.invalid && this.submitted;
+  }
 }

src/app/pages/registration/registration-page.module.ts

@@ -5,7 +5,6 @@ import { FormlyModule } from '@ngx-formly/core';
 import { SharedModule } from 'ish-shared/shared.module';
 
 import { RegistrationAddressFieldComponent } from './registration-address-field/registration-address-field.component';
-import { RegistrationButtonsFieldComponent } from './registration-buttons-field/registration-buttons-field.component';
 import { RegistrationHeadingFieldComponent } from './registration-heading-field/registration-heading-field.component';
 import { RegistrationPageComponent } from './registration-page.component';
 import { RegistrationTacFieldComponent } from './registration-tac-field/registration-tac-field.component';
@@ -22,15 +21,13 @@ const registrationPageRoutes: Routes = [{ path: '', component: RegistrationPageC
         },
         { name: 'ish-registration-heading-field', component: RegistrationHeadingFieldComponent },
         { name: 'ish-registration-tac-field', component: RegistrationTacFieldComponent },
-        { name: 'ish-registration-buttons-field', component: RegistrationButtonsFieldComponent },
       ],
     }),
     RouterModule.forChild(registrationPageRoutes),
     SharedModule,
   ],
   declarations: [
     RegistrationAddressFieldComponent,
-    RegistrationButtonsFieldComponent,
     RegistrationHeadingFieldComponent,
     RegistrationPageComponent,
     RegistrationTacFieldComponent,

src/app/shared/formly-address-forms/components/formly-address-form/formly-address-form.component.ts

@@ -75,8 +75,6 @@ export class FormlyAddressFormComponent implements OnInit, OnChanges {
             required: true,
             label: 'account.address.country.label',
             forceRequiredStar: true,
-            labelClass: 'col-md-4',
-            fieldClass: 'col-md-8',
             placeholder: 'account.option.select.text',
             options: this.countries$,
           },

src/app/shared/formly-address-forms/configurations/address-form.configuration.ts

@@ -13,10 +13,7 @@ export abstract class AddressFormConfiguration {
 }
 
 function applyStandardStyles(config: FormlyFieldConfig): FormlyFieldConfig {
-  if (config) {
-    config.templateOptions.labelClass ??= 'col-md-4';
-    config.templateOptions.fieldClass ??= 'col-md-8';
-  }
+  /* do some customization here */
   return config;
 }
 

src/app/shared/formly/formly.module.ts

@@ -6,6 +6,7 @@ import { FORMLY_CONFIG, FormlyModule as FormlyBaseModule } from '@ngx-formly/cor
 import { FormlySelectModule } from '@ngx-formly/core/select';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 
+import { DirectivesModule } from 'ish-core/directives.module';
 import { IconModule } from 'ish-core/icon.module';
 
 import { CaptchaExportsModule } from '../../extensions/captcha/exports/captcha-exports.module';
@@ -17,13 +18,15 @@ import { criticalDefaultValuesExtension } from './extensions/critical-default-va
 import { hideIfEmptyOptionsExtension } from './extensions/hide-if-empty-options.extension';
 import { registerTranslateSelectOptionsExtension } from './extensions/translate-select-options.extension';
 import { CaptchaFieldComponent } from './types/captcha-field/captcha-field.component';
+import { CheckboxFieldComponent } from './types/checkbox-field/checkbox-field.component';
 import { EmailFieldComponent } from './types/email-field/email-field.component';
 import { FieldsetFieldComponent } from './types/fieldset-field/fieldset-field.component';
 import { PasswordFieldComponent } from './types/password-field/password-field.component';
 import { SelectFieldComponent } from './types/select-field/select-field.component';
 import { TextInputFieldComponent } from './types/text-input-field/text-input-field.component';
 import { TextareaFieldComponent } from './types/textarea-field/textarea-field.component';
 import { DescriptionWrapperComponent } from './wrappers/description-wrapper/description-wrapper.component';
+import { HorizontalCheckboxWrapperComponent } from './wrappers/horizontal-checkbox-wrapper/horizontal-checkbox-wrapper.component';
 import { HorizontalWrapperComponent } from './wrappers/horizontal-wrapper/horizontal-wrapper.component';
 import { TextareaDescriptionWrapperComponent } from './wrappers/textarea-description-wrapper/textarea-description-wrapper.component';
 import { TooltipWrapperComponent } from './wrappers/tooltip-wrapper/tooltip-wrapper.component';
@@ -33,6 +36,7 @@ import { ValidationWrapperComponent } from './wrappers/validation-wrapper/valida
   imports: [
     CaptchaExportsModule,
     CommonModule,
+    DirectivesModule,
     FormlyBaseModule.forRoot({
       types: [
         {
@@ -60,6 +64,11 @@ import { ValidationWrapperComponent } from './wrappers/validation-wrapper/valida
           component: TextareaFieldComponent,
           wrappers: ['form-field-horizontal', 'validation', 'textarea-description'],
         },
+        {
+          name: 'ish-checkbox-field',
+          component: CheckboxFieldComponent,
+          wrappers: ['form-field-checkbox-horizontal'],
+        },
         { name: 'ish-captcha-field', component: CaptchaFieldComponent },
         {
           name: 'ish-fieldset-field',
@@ -68,6 +77,7 @@ import { ValidationWrapperComponent } from './wrappers/validation-wrapper/valida
       ],
       wrappers: [
         { name: 'form-field-horizontal', component: HorizontalWrapperComponent },
+        { name: 'form-field-checkbox-horizontal', component: HorizontalCheckboxWrapperComponent },
         { name: 'textarea-description', component: TextareaDescriptionWrapperComponent },
         { name: 'tooltip', component: TooltipWrapperComponent },
         { name: 'validation', component: ValidationWrapperComponent },
@@ -95,10 +105,12 @@ import { ValidationWrapperComponent } from './wrappers/validation-wrapper/valida
   ],
   declarations: [
     CaptchaFieldComponent,
+    CheckboxFieldComponent,
     DescriptionWrapperComponent,
     EmailFieldComponent,
     FieldTooltipComponent,
     FieldsetFieldComponent,
+    HorizontalCheckboxWrapperComponent,
     HorizontalWrapperComponent,
     PasswordFieldComponent,
     SelectFieldComponent,

src/app/shared/formly/types/checkbox-field/checkbox-field.component.html

@@ -0,0 +1 @@
+<input type="checkbox" [formControl]="formControl" [formlyAttributes]="field" [attr.data-testing-id]="field.key" />