Vechtsport Online Components for Magento 2

Form 

<form class="dashboard-form ">
    <h3 class="dashboard-form__title heading--red">
        Account Gegevens
    </h3>

    <fieldset class="fieldset dashboard-form__divider ">
        <div class="input dashboard-form__divider">
            <span class="form-check" aria-label="form-check-firstName">
                <svg class="icon " role="img">
                    <title>Angle down icon</title>
                    <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                </svg>

            </span>
            <label class="
                        label
                        
                    " for="firstName">

            </label>
            <input class="input__field " id="firstName" name="firstName" type="" placeholder="Voornaam">
        </div>
        <div class="input dashboard-form__divider">
            <span class="form-check" aria-label="form-check-secondName">
                <svg class="icon " role="img">
                    <title>Angle down icon</title>
                    <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                </svg>

            </span>
            <label class="
                        label
                        
                    " for="secondName">

            </label>
            <input class="input__field " id="secondName" name="secondName" type="" placeholder="Achternaam">
        </div>

        <div class="checkbox ">
            <input type="checkbox" id="changeEmail" name="" class="checkbox__field ">
            <svg class="checkbox__icon ">
                <use xlink:href="/images/icons-sprite.svg#checked"></use>
            </svg>
            <label for="changeEmail" class="checkbox__label ">
                Wijzig Emailadres
            </label>
        </div>
        <div class="checkbox dashboard-form__divider">
            <input type="checkbox" id="changePassword" name="" class="checkbox__field ">
            <svg class="checkbox__icon ">
                <use xlink:href="/images/icons-sprite.svg#checked"></use>
            </svg>
            <label for="changePassword" class="checkbox__label ">
                Wijzig Wachtwoord
            </label>
        </div>

        <div class="
                dashboard-form__divider
                dashboard-form__fields
                dashboard-form--hidden
             ">
            <h5 class="
                    heading
                    heading--red
                    heading--sixth-level
                    dashboard-form__title-form
                    dashboard-form__divider
                ">
                Change
            </h5>

            <div class="input dashboard-form__divider dashboard-form--hidden email">
                <span class="form-check" aria-label="form-check-email">
                    <svg class="icon " role="img">
                        <title>Angle down icon</title>
                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                    </svg>

                </span>
                <label class="
                            label
                            
                        " for="email">
                    Email
                </label>
                <input class="input__field " id="email" name="email" type="" placeholder="">
            </div>
            <div class="input dashboard-form__divider dashboard-form--hidden password">
                <span class="form-check" aria-label="form-check-password">
                    <svg class="icon " role="img">
                        <title>Angle down icon</title>
                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                    </svg>

                </span>
                <label class="
                            label
                            
                        " for="password">
                    Huidig Wachtwoord
                </label>
                <input class="input__field " id="password" name="password" type="" placeholder="">
            </div>
            <div class="input dashboard-form__divider dashboard-form--hidden newPassword">
                <span class="form-check" aria-label="form-check-newPassword">
                    <svg class="icon " role="img">
                        <title>Angle down icon</title>
                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                    </svg>

                </span>
                <label class="
                            label
                            
                        " for="newPassword">
                    Nieuw Wachtwoord
                </label>
                <input class="input__field " id="newPassword" name="newPassword" type="" placeholder="">
            </div>
            <div class="input dashboard-form__divider dashboard-form--hidden confirmPassword">
                <span class="form-check" aria-label="form-check-confirmPassword">
                    <svg class="icon " role="img">
                        <title>Angle down icon</title>
                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                    </svg>

                </span>
                <label class="
                            label
                            
                        " for="confirmPassword">
                    Bevestig Nieuw Wachtwoord
                </label>
                <input class="input__field " id="confirmPassword" name="confirmPassword" type="" placeholder="">
            </div>
        </div>
    </fieldset>
</form>

<script src="/components/raw/input/../dashboard-form/form.js"></script>
 
<form class="dashboard-form {{ class }}">
    <h3 class="dashboard-form__title heading--red">
        {{ title }}
    </h3>

    <fieldset class="fieldset dashboard-form__divider {{ contentClass }}">
        {{#each fields }}
            {{> '@input' input }}
        {{/each}}

        {{#each textareas }}
            {{> '@input--textarea' textarea }}
        {{/each}}

        {{#each selects }}
            {{> '@select' select }}
        {{/each}}

        {{#each checkboxes }}
            {{> '@checkbox' checkbox }}
        {{/each}}

        <div class="
                dashboard-form__divider
                dashboard-form__fields
                dashboard-form--hidden
             "
        >
            <h5 class="
                    heading
                    heading--red
                    heading--sixth-level
                    dashboard-form__title-form
                    dashboard-form__divider
                "
            >
                {{ formTitle }}
            </h5>

            {{#each hiddenFields}}
                {{> '@input' hiddenField }}
            {{/each}}
        </div>
    </fieldset>
</form>

<script src="{{ static '../dashboard-form/form.js' }}"></script>
 
{
  "title": "Account Gegevens",
  "fields": [
    {
      "input": {
        "class": "dashboard-form__divider",
        "field": {
          "id": "firstName",
          "name": "firstName",
          "placeholder": "Voornaam"
        }
      }
    },
    {
      "input": {
        "class": "dashboard-form__divider",
        "field": {
          "id": "secondName",
          "name": "secondName",
          "placeholder": "Achternaam"
        }
      }
    }
  ],
  "formTitle": "Change",
  "checkboxes": [
    {
      "checkbox": {
        "id": "changeEmail",
        "label": {
          "text": "Wijzig Emailadres"
        }
      }
    },
    {
      "checkbox": {
        "class": "dashboard-form__divider",
        "id": "changePassword",
        "label": {
          "text": "Wijzig Wachtwoord"
        }
      }
    }
  ],
  "hiddenFields": [
    {
      "hiddenField": {
        "class": "dashboard-form__divider dashboard-form--hidden email",
        "label": {
          "text": "Email"
        },
        "field": {
          "id": "email",
          "name": "email"
        }
      }
    },
    {
      "hiddenField": {
        "class": "dashboard-form__divider dashboard-form--hidden password",
        "label": {
          "text": "Huidig Wachtwoord"
        },
        "field": {
          "id": "password",
          "name": "password"
        }
      }
    },
    {
      "hiddenField": {
        "class": "dashboard-form__divider dashboard-form--hidden newPassword",
        "label": {
          "text": "Nieuw Wachtwoord"
        },
        "field": {
          "id": "newPassword",
          "name": "newPassword"
        }
      }
    },
    {
      "hiddenField": {
        "class": "dashboard-form__divider dashboard-form--hidden confirmPassword",
        "label": {
          "text": "Bevestig Nieuw Wachtwoord"
        },
        "field": {
          "id": "confirmPassword",
          "name": "confirmPassword"
        }
      }
    }
  ]
}
  • Content: 
    $dashboard-form-margin: 15px !default;

.dashboard-form {
    &__title {
        margin-bottom: $dashboard-form-margin;
        padding-bottom: 10px;
        border-bottom: 1px solid $gray;
    }

    &__title-form {
        margin-top: $dashboard-form-margin;
    }

    // &__divider,
    // &__select {
    //     margin-bottom: $dashboard-form-margin;
    // }

    &--hidden {
        display: none;
    }
}
  • URL: /components/raw/dashboard-form/_form.scss
  • Filesystem Path: build/components/03-modules/dashboard/form/_form.scss
  • Size: 413 Bytes
  • Content: 
    'use strict'

const checkboxPassword = document.querySelector('input#changePassword'),
      checkboxEmail    = document.querySelector('input#changeEmail'),
      confirmPassword  = document.querySelector('.confirmPassword'),
      email            = document.querySelector('.email'),
      fields           = document.querySelector('.dashboard-form__fields'),
      newPassword      = document.querySelector('.newPassword'),
      password         = document.querySelector('.password'),
      title            = document.querySelector('.dashboard-form__title-form'),
      toggledClass     = 'dashboard-form--hidden';

if (checkboxEmail) {
  checkboxEmail.addEventListener('change', () => {
    if (checkboxPassword.checked && checkboxEmail.checked) {
      title.innerHTML = 'Change Email and Password';

      toggleElements(4);
    }
    else if (checkboxPassword.checked && !checkboxEmail.checked) {
      title.innerHTML = 'Change Password';

      toggleElements(1);
    }
    else {
      fields.classList.toggle(toggledClass);
      title.innerHTML = 'Change Email';

      toggleElements(2);
    }
  });
}

if (checkboxPassword) {
  checkboxPassword.addEventListener('change', () => {
    if (checkboxEmail.checked && checkboxPassword.checked) {
      title.innerHTML = 'Change Email and Password';

      toggleElements(4);
    }
    else if (checkboxEmail.checked && !checkboxPassword.checked) {
      title.innerHTML = 'Change Email';

      toggleElements(2);
    }
    else {
      fields.classList.toggle(toggledClass);
      title.innerHTML = 'Change Password';

      toggleElements(1);
    }
  });
}

function toggleElements(elements) {
  if (elements === 4) {
    email.classList.remove(toggledClass);
    password.classList.remove(toggledClass);
    newPassword.classList.remove(toggledClass);
    confirmPassword.classList.remove(toggledClass);
  }
  else if (elements === 2) {
    email.classList.remove(toggledClass);
    password.classList.remove(toggledClass);
    newPassword.classList.add(toggledClass);
    confirmPassword.classList.add(toggledClass);
  }
  else if (elements === 1) {
    email.classList.add(toggledClass);
    password.classList.remove(toggledClass);
    newPassword.classList.remove(toggledClass);
    confirmPassword.classList.remove(toggledClass);
  }
}
  • URL: /components/raw/dashboard-form/form.js
  • Filesystem Path: build/components/03-modules/dashboard/form/form.js
  • Size: 2.3 KB

There are no notes for this item.