refactor: introduce component for terms and conditions checkbox

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

@@ -45,26 +45,7 @@ <h2>
 
           <ish-lazy-captcha topic="register" [form]="form"></ish-lazy-captcha>
 
-          <div class="row form-group form-group-tc">
-            <div class="offset-md-4 col-md-8">
-              <ish-checkbox
-                [form]="form"
-                controlName="termsAndConditions"
-                [errorMessages]="{ pattern: 'registration.tac.error.tip' }"
-              >
-                <span
-                  [ishServerHtml]="
-                    'registration.tac_privacy_policy.text'
-                      | translate
-                        : {
-                            '0': '/page/page.termsAndConditions.pagelet2-Page',
-                            '1': '/page/page.privacyPolicy.pagelet2-Page'
-                          }
-                  "
-                ></span>
-              </ish-checkbox>
-            </div>
-          </div>
+          <ish-tac-checkbox [form]="form"></ish-tac-checkbox>
 
           <div class="row form-group">
             <div class="offset-md-4 col-md-8">

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

@@ -4,7 +4,6 @@ import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent, MockDirective } from 'ng-mocks';
 import { anything, instance, mock, spy, verify, when } from 'ts-mockito';
 
-import { ServerHtmlDirective } from 'ish-core/directives/server-html.directive';
 import { FeatureToggleModule } from 'ish-core/feature-toggle.module';
 import { AddressFormContainerComponent } from 'ish-shared/address-forms/components/address-form-container/address-form-container.component';
 import { AddressFormFactory } from 'ish-shared/address-forms/components/address-form/address-form.factory';
@@ -13,6 +12,7 @@ import { ContentIncludeComponent } from 'ish-shared/cms/components/content-inclu
 import { ErrorMessageComponent } from 'ish-shared/components/common/error-message/error-message.component';
 import { ModalDialogComponent } from 'ish-shared/components/common/modal-dialog/modal-dialog.component';
 import { CheckboxComponent } from 'ish-shared/forms/components/checkbox/checkbox.component';
+import { TacCheckboxComponent } from 'ish-shared/forms/components/tac-checkbox/tac-checkbox.component';
 
 import { LazyCaptchaComponent } from '../../../extensions/captcha/exports/captcha/lazy-captcha/lazy-captcha.component';
 import { RegistrationCompanyFormComponent } from '../registration-company-form/registration-company-form.component';
@@ -43,7 +43,7 @@ describe('Registration Form Component', () => {
         MockComponent(ModalDialogComponent),
         MockComponent(RegistrationCompanyFormComponent),
         MockComponent(RegistrationCredentialsFormComponent),
-        MockDirective(ServerHtmlDirective),
+        MockDirective(TacCheckboxComponent),
         RegistrationFormComponent,
       ],
       providers: [{ provide: AddressFormFactoryProvider, useFactory: () => instance(addressFormFactoryProviderMock) }],

src/app/shared/forms/components/tac-checkbox/tac-checkbox.component.html

@@ -0,0 +1,20 @@
+<div class="row form-group form-group-tc">
+  <div class="offset-md-4 col-md-8">
+    <ish-checkbox
+      [form]="form"
+      controlName="termsAndConditions"
+      [errorMessages]="{ pattern: 'registration.tac.error.tip' }"
+    >
+      <span
+        [ishServerHtml]="
+          'registration.tac_privacy_policy.text'
+            | translate
+              : {
+                  '0': '/page/page.termsAndConditions.pagelet2-Page',
+                  '1': '/page/page.privacyPolicy.pagelet2-Page'
+                }
+        "
+      ></span>
+    </ish-checkbox>
+  </div>
+</div>

src/app/shared/forms/components/tac-checkbox/tac-checkbox.component.spec.ts

@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { MockComponent, MockDirective } from 'ng-mocks';
+
+import { ServerHtmlDirective } from 'ish-core/directives/server-html.directive';
+import { CheckboxComponent } from 'ish-shared/forms/components/checkbox/checkbox.component';
+
+import { TacCheckboxComponent } from './tac-checkbox.component';
+
+describe('Tac Checkbox Component', () => {
+  let component: TacCheckboxComponent;
+  let fixture: ComponentFixture<TacCheckboxComponent>;
+  let element: HTMLElement;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [ReactiveFormsModule, TranslateModule.forRoot()],
+      declarations: [MockComponent(CheckboxComponent), MockDirective(ServerHtmlDirective), TacCheckboxComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TacCheckboxComponent);
+    component = fixture.componentInstance;
+    element = fixture.nativeElement;
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+    expect(element).toBeTruthy();
+    expect(() => fixture.detectChanges()).not.toThrow();
+  });
+});

src/app/shared/forms/components/tac-checkbox/tac-checkbox.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'ish-tac-checkbox',
+  templateUrl: './tac-checkbox.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TacCheckboxComponent {
+  @Input() form: FormGroup;
+}

src/app/shared/forms/forms.module.ts

@@ -4,6 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { DirectivesModule } from 'ish-core/directives.module';
 import { FeatureToggleModule } from 'ish-core/feature-toggle.module';
 import { IconModule } from 'ish-core/icon.module';
 
@@ -18,6 +19,7 @@ import { SelectRegionComponent } from './components/select-region/select-region.
 import { SelectTitleComponent } from './components/select-title/select-title.component';
 import { SelectYearMonthComponent } from './components/select-year-month/select-year-month.component';
 import { SelectComponent } from './components/select/select.component';
+import { TacCheckboxComponent } from './components/tac-checkbox/tac-checkbox.component';
 import { TextareaComponent } from './components/textarea/textarea.component';
 import { ShowFormFeedbackDirective } from './directives/show-form-feedback.directive';
 
@@ -34,11 +36,20 @@ const exportedComponents = [
   SelectTitleComponent,
   SelectYearMonthComponent,
   ShowFormFeedbackDirective,
+  TacCheckboxComponent,
   TextareaComponent,
 ];
 
 @NgModule({
-  imports: [CommonModule, FeatureToggleModule, IconModule, ReactiveFormsModule, RouterModule, TranslateModule],
+  imports: [
+    CommonModule,
+    DirectivesModule,
+    FeatureToggleModule,
+    IconModule,
+    ReactiveFormsModule,
+    RouterModule,
+    TranslateModule,
+  ],
   declarations: [...exportedComponents],
   exports: [...exportedComponents],
 })