England Football

Registration Junior Flow 

<div class="registration-junior-flow registration_skip registration_hide">
    <div class="registration-select-junior registration_hide" data-junior="true">
        <div class="registration-personal-details__title">
            <div class="registration-form-title">
                Who will be joining?
            </div>
        </div>
        <div class="registration-personal-details__sub-title">
            <div class="registration-form-sub-title">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do abore et dolore magna aliqexercitation commodo consequat.
            </div>
        </div>

        <div class="registration-error registration-server-error registration_hide" role="alert">
            <span class="registration-error-message">sitecore api error</span>
        </div>

        <div class="registration-select-junior_list-container">
            <div class="registration-select-junior__selectAll-container">
                <a href="/" class="registration-select-junior__selectAll">Select all</a>
            </div>
            <div class="registration-select-junior_list">
                <label class="checkbox checkbox--primary">
                    <span class="label">Will Young</span>
                    <input type="checkbox" data-fan="67890" name="junior1" data-name="Ram" data-individual-id="RAMA">
                    <span class="checkmark-container">
                        <span class="checkmark"></span>
                    </span>
                </label>
                <label class="checkbox checkbox--primary">
                    <span class="label">Gareth Gates</span>
                    <input type="checkbox" data-fan="98765" name="junior2" data-name="Ravan" data-individual-id="RAVANA">
                    <span class="checkmark-container">
                        <span class="checkmark"></span>
                    </span>
                </label>
            </div>
        </div>

        <div class="registration-select-junior__next">
            <a href="/" class="cta cta--r-disabled ">
                <p>R Disabled</p>
            </a>

        </div>
    </div>
    <div class="registration-upload-passport registration_hide">
        <div class="title">
            <div class="registration-form-title">
                Please upload a photo of your passport photo page
            </div>
        </div>
        <div class="sub-title">
            <div class="registration-form-sub-title">
                This should be a JPEG format and no larger than 1.5MB file size. Please ensure that the scan has no reflections and that all information is clearly readable.
            </div>
        </div>
        <div class="registration-error registration-server-error registration_hide" role="alert">
            <span class="registration-error-message">sitecore api error</span>
        </div>

        <div class="registration-upload-passport__image-container">
            <img data-allowedSize="5" data-placeholderImage="/assets/example-content/passport.svg" alt="registration passport" class="img" src="/assets/example-content/passport.svg" id="registration-upload-passport__img" loading="lazy" />
        </div>

        <div class="cta">
            <div class="registration-upload-passport__upload-passport-photo">
                <a href="/" class="cta cta--r-primary ">
                    <p>UPLOAD FROM FILES</p>
                </a>

            </div>
            <div class="registration-upload-passport__take-passport-photo-click" data-take-photo="Take photo" data-take-photo-error="Your devices camera is not supported. Please upload a picture of your passport.">
                <a href="/" class="cta cta--r-secondary ">
                    <p>TAKE PHOTO</p>
                </a>

            </div>
        </div>
    </div>

    <div class="registration-passport-details registration_hide">
        <div class="title">
            <div class="registration-form-title">
                Passport uploaded successfully
            </div>
        </div>
        <div class="sub-title">
            <div class="registration-form-sub-title">
                Please enter your passport information below
            </div>
        </div>
        <div class="registration-error registration-server-error registration_hide" role="alert">
            <span class="registration-error-message">sitecore api error</span>
        </div>
        <div class="passport">
            <img src="/assets/example-content/rectangleGuideline.svg" alt="rectangleGuideline" loading="lazy">
        </div>
        <div class="form-fields">
            <div class="place-of-birth">
                <div class="registration-text-input-container">
                    <label class="registration-text-input-container__label" for=placeOfBirth>
                        Place of birth
                    </label>
                    <input class="registration-text-input-container__text-input" type="text" name="placeOfBirth" id="placeOfBirth" autocomplete="address-level1" placeholder="Place of birth (City or town)" />
                    <div class="registration-error registration_hide" role="alert">
                        <span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
                        <span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
                        <span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
                        <span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
                        <span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
                        <span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
                    </div>

                </div>
            </div>
            <div class="passport-number">
                <div class="registration-text-input-container">
                    <label class="registration-text-input-container__label" for=passportNumber>
                        Passport number
                    </label>
                    <input class="registration-text-input-container__text-input" type="text" name="passportNumber" id="passportNumber" autocomplete="off" placeholder="Passport number" />
                    <div class="registration-error registration_hide" role="alert">
                        <span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
                        <span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
                        <span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
                        <span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
                        <span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
                        <span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
                    </div>

                </div>
            </div>
            <div class="passport-expiry untouched-element">
                <div class="registration-text-input-container">
                    <label class="registration-text-input-container__label" for=passportExpiry>
                        Passport Expiry
                    </label>
                    <input class="registration-text-input-container__text-input" type="date" max='2024-12-31' name="passportExpiry" id="passportExpiry" autocomplete="bday" placeholder="Passport Expiry" />
                    <div class="registration-error registration_hide" role="alert">
                        <span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
                        <span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
                        <span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
                        <span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
                        <span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
                        <span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
                    </div>

                </div>
            </div>
            <div class="nationality untouched-element">
                <div class="registration-custom-select registration-text-input-container">
                    <label class="registration-text-input-container__label registration-custom-select__label" for="nationality">
                        Nationality
                    </label>
                    <select name=nationality id=nationality aria-label=Nationality>
                        <option disabled selected value="select">Nationality</option>
                        <option value="Pakistan">Saab</option>
                        <option value="Srilanka">Mercedes</option>
                        <option value="Nepal">Audi</option>
                    </select>
                    <div class="registration-error registration_hide" role="alert">
                        <span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
                        <span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
                        <span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
                        <span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
                        <span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
                        <span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
                    </div>

                </div>
            </div>
            <div class="cta">
                <div class="next-to-step-5">
                    <a href="/" class="cta cta--r-disabled " id="nextBtn">
                        <p>NEXT</p>
                    </a>

                </div>
                <div class="next-to-step-3">
                    <a href="/" class="cta cta--r-secondary " id="uploadNewPhoto">
                        <p>UPLOAD NEW PHOTO (OPTIONAL)</p>
                    </a>

                </div>
            </div>
        </div>
    </div>

    <div class="registration-upload-profile registration_hide">
        <div class="title">
            <div class="registration-form-title">
                Please upload a profile photo
            </div>
        </div>
        <div class="sub-title">
            <div class="registration-form-sub-title" data-instruction1="This should be a JPEG format and no larger than 1.5MB file size. Please ensure that the scan has no reflections and that all information is clearly readable." data-instruction2="Please resize and edit until you’re happy" data-instruction3="title 3">
                This should be a JPEG format and no larger than 1.5MB file size. Please ensure that the scan has no reflections and that all information is clearly readable.
            </div>
        </div>
        <div class="registration-error registration-server-error registration_hide" role="alert">
            <span class="registration-error-message">sitecore api error</span>
        </div>

        <div class="registration-upload-profile__image-container">
            <img data-allowedSize="5" data-placeholderImage="/assets/example-content/account_box.svg" alt="registration passport" class="registration-upload-profile__img" src="/assets/example-content/account_box.svg" id="rregistration-upload-profile__img" loading="lazy" />
        </div>

        <div class="cta registration-image-upload-btn-container">
            <div class="registration-upload-profile__upload-profile-photo">
                <a href="/" class="cta cta--r-primary " id="btnUploadPhoto">
                    <p>UPLOAD FROM FILES</p>
                </a>

            </div>
            <div class="registration-upload-profile__take-profile-photo-click" data-take-photo="Take photo" data-take-photo-error="Your devices camera is not supported. Please upload your profile picture.">
                <a href="/" class="cta cta--r-secondary " id="btnTakePhoto">
                    <p>TAKE PHOTO</p>
                </a>

            </div>
        </div>

        <div class="cta registration-image-crop-btn-container registration_hide">

            <div class="registration-image-crop-zoom-container">
                <span class="registration-image-crop-zoom-label">ZOOM</span>
                <div id="cropme-slider"></div>
            </div>
            <div class="registration-image-crop-rotate-container">
                <span class="registration-image-crop-rotate-label">ROTATE</span>
                <div id="cropme-rotation-slider"></div>
            </div>

            <div class="registration-upload-profile__next_btn">
                <a href="/" class="cta cta--r-primary " id="nextBtn">
                    <p>NEXT</p>
                </a>

            </div>
            <div class="registration-upload-profile__take-new-photo">
                <a href="/" class="cta cta--r-secondary " id="uploadNewPhoto">
                    <p>UPLOAD NEW PHOTO (OPTIONAL)</p>
                </a>

            </div>
        </div>
    </div>
</div>

No notes defined.

/* No context defined. */
  • Content: 
    import { hideClass } from '../../registration-error/registration-error';
import { BACKCLICKED, onComponentVisible } from '../../registrationUtility';
import registrationSelectJunior from '../registration-select-junior/registration-select-junior';

export default currentElement => {
  const selectJunior = currentElement.querySelector(
    '.registration-select-junior'
  );

  if (selectJunior) {
    registrationSelectJunior(selectJunior);
  }

  onComponentVisible(currentElement, () => {
    const isBackClicked = sessionStorage.getItem(BACKCLICKED);

    if (isBackClicked === 'true') {
      currentElement.lastElementChild.classList.remove(hideClass);
    } else {
      currentElement.firstElementChild.classList.remove(hideClass);
    }
  });
};
  • URL: /components/raw/registration-junior-flow/registration-junior-flow.js
  • Filesystem Path: src/library/modules/registration/registration-self/registration-junior-flow/registration-junior-flow.js
  • Size: 755 Bytes 
<div class="registration-junior-flow registration_skip registration_hide">
    {{render '@registration-select-junior'}}
    {{render '@registration-upload-passport'}}
    {{render '@registration-passport-details'}}
    {{render '@registration-upload-profile'}}
</div>