England Football

Registration Privacy Policy 

<div class="registration-privacy-policy registration_hide">
    <div class="registration-privacy-policy__title">
        <h1 class="registration-form-title">
            Hi Luke! First of all, please confirm that you have read and agreed to our privacy policy
        </h1>
    </div>
    <div class="registration-privacy-policy__checkbox">
        <label class="checkbox checkbox--secondary">
            <input type="checkbox" name="faPolicy1">

            <span class="label">I have read and agree to The FA’s Privacy Policy, I have read and agree to The FA’s Privacy PolicyI have read and agree to The FA’s Privacy PolicyI have read and agree to The FA’s Privacy Policy</span>

            <span class="checkmark-container">
                <span class="checkmark"></span>
            </span>
        </label>
    </div>

    <div class="registration-privacy-policy__next">
        <a role="button" href="/" class="cta cta--r-disabled " disabled="true" aria-disabled="true">
            <p>
                NEXT</p>
        </a>

    </div>
</div>

No notes defined.

{
  "title": {
    "copy": "Hi Luke! First of all, please confirm that you have read and agreed to our privacy policy"
  },
  "privacy-policy": {
    "copy": "I have read and agree to The FA’s Privacy Policy, I have read and agree to The FA’s Privacy PolicyI have read and agree to The FA’s Privacy PolicyI have read and agree to The FA’s Privacy Policy",
    "name": "faPolicy1"
  },
  "next": {
    "copy": "NEXT",
    "inactive": "true"
  }
}
  • Content: 
    /* eslint-disable compat/compat */
import {
  currentPage,
  focusCloseBtn,
  hideBackBtn,
  nevigateToNext,
  onComponentVisible,
  showStep,
} from '../../registrationUtility';
import Validator from '../../validation';

export default currentElement => {
  const nextBtnClickHandler = (event, btn) => {
    event.preventDefault();
    if (btn.classList.contains('cta--r-primary')) {
      currentPage.adultMemberShip = true;
      nevigateToNext(currentElement);
    }
  };

  const checkboxChangeHandler = (event, btn) => {
    const { checked } = event.target;

    Validator.swaapBtn(btn, checked);
  };

  let controller = new AbortController();

  onComponentVisible(currentElement, () => {
    controller.abort('Removing previous event listeners');
    controller = new AbortController();

    showStep('01');
    hideBackBtn();
    focusCloseBtn();
    currentPage.page = currentElement;

    const [checkbox, btn] = currentElement.querySelectorAll(
      '.registration-privacy-policy__checkbox input[type=checkbox], .registration-privacy-policy__next a'
    );

    Validator.swaapBtn(btn, checkbox.checked);

    checkbox.addEventListener(
      'change',
      event => checkboxChangeHandler(event, btn),
      { signal: controller.signal }
    );

    btn.addEventListener(
      'click',
      async event => nextBtnClickHandler(event, btn),
      { signal: controller.signal }
    );
  });
};
  • URL: /components/raw/registration-privacy-policy/registration-privacy-policy.js
  • Filesystem Path: src/library/modules/registration/registration-self/registration-privacy-policy/registration-privacy-policy.js
  • Size: 1.4 KB
  • Content: 
    .registration-privacy-policy {
  $cta-gap: 16px;
  $body-mt: 24px;
  $cta-container-mt: 40px;

  .registration-privacy-policy__checkbox {
    margin-top: $body-mt;
  }

  &__next {
    margin-top: $cta-container-mt;
  }
}
  • URL: /components/raw/registration-privacy-policy/registration-privacy-policy.scss
  • Filesystem Path: src/library/modules/registration/registration-self/registration-privacy-policy/registration-privacy-policy.scss
  • Size: 222 Bytes 
<div class="registration-privacy-policy registration_hide">
    <div class="registration-privacy-policy__title">
        {{render '@registration-form-title' title}}
    </div>
    <div class="registration-privacy-policy__checkbox">
        {{render '@checkbox--secondary' privacy-policy merge="true"}}
    </div>

    <div class="registration-privacy-policy__next">
        {{render '@cta--r-disabled' next merge="true"}}
    </div>
</div>