Form

<form class="dashboard-form ">
    <h2 class="dashboard-form__title margin-bottom-sm">
        Account Information
    </h2>

    <fieldset class="
            fieldset
            margin-bottom-sm
        ">
        <div class="input margin-bottom-sm">
            <label class="
            label
            input__label
            
        " for="firstName">
                Firist name
            </label>
            <input class="input__field " id="firstName" name="firstName" type="" placeholder="Firist name">
        </div>

        <div class="input margin-bottom-sm">
            <label class="
            label
            input__label
            
        " for="secondName">
                Second name
            </label>
            <input class="input__field " id="secondName" name="secondName" type="" placeholder="Second name">
        </div>

        <div class="checkbox ">
            <input type="checkbox" id="changeEmail" name="changeEmail" class="checkbox__field ">
            <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
                <use href="/images/icons-sprite.svg#checked"></use>
            </svg>
            <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
                <use href="/images/icons-sprite.svg#unchecked"></use>
            </svg>
            <label for="changeEmail" class="checkbox__label ">
                <span class="checkbox__text">
                    Change Email
                </span>
            </label>
        </div>

        <div class="checkbox margin-bottom-sm">
            <input type="checkbox" id="changePassword" name="changePassword" class="checkbox__field ">
            <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
                <use href="/images/icons-sprite.svg#checked"></use>
            </svg>
            <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
                <use href="/images/icons-sprite.svg#unchecked"></use>
            </svg>
            <label for="changePassword" class="checkbox__label ">
                <span class="checkbox__text">
                    Change Password
                </span>
            </label>
        </div>

        <div class="
                dashboard-form__fields
                dashboard-form--hidden
                margin-bottom-sm
             ">
            <h2 class="
                    heading
                    dashboard-form__title-form
                    margin-bottom-sm
                ">
                Change
            </h2>

            <div class="input margin-bottom-sm dashboard-form--hidden email">
                <label class="
            label
            input__label
            
        " for="email">
                    Email
                </label>
                <input class="input__field " id="email" name="email" type="" placeholder="">
            </div>

            <div class="input input--password margin-bottom-sm dashboard-form--hidden password">
                <label class="
           label
           input__label
           
       " for="password">
                    Current Password
                </label>
                <input class="input__field " id="password" name="password" type="password" placeholder="Current Password">
                <button type="button" class="
            button
            button--icon
            input__button-pass
        " aria-label="Show/hide password">
                    <svg class="icon icon--secondary input__button-pass-icon-view" role="presentation" focusable="false">
                        <title>view password icon</title>
                        <use href="/images/icons-sprite.svg#visibility-off"></use>
                    </svg>

                    <svg class="icon icon--secondary input__button-pass-icon-hide" role="presentation" focusable="false">
                        <title>hide password icon</title>
                        <use href="/images/icons-sprite.svg#visibility"></use>
                    </svg>

                </button>
            </div>
            <script src="/components/raw/input/input-password.js"></script>

            <div class="input input--password margin-bottom-sm dashboard-form--hidden newPassword">
                <label class="
           label
           input__label
           
       " for="newPassword">
                    New Password
                </label>
                <input class="input__field " id="newPassword" name="newPassword" type="password" placeholder="New Password">
                <button type="button" class="
            button
            button--icon
            input__button-pass
        " aria-label="Show/hide password">
                    <svg class="icon icon--secondary input__button-pass-icon-view" role="presentation" focusable="false">
                        <title>view password icon</title>
                        <use href="/images/icons-sprite.svg#visibility-off"></use>
                    </svg>

                    <svg class="icon icon--secondary input__button-pass-icon-hide" role="presentation" focusable="false">
                        <title>hide password icon</title>
                        <use href="/images/icons-sprite.svg#visibility"></use>
                    </svg>

                </button>
            </div>
            <script src="/components/raw/input/input-password.js"></script>

            <div class="input input--password margin-bottom-sm dashboard-form--hidden confirmPassword">
                <label class="
           label
           input__label
           
       " for="confirmPassword">
                    Confirm New Password
                </label>
                <input class="input__field " id="confirmPassword" name="confirmPassword" type="password" placeholder="Confirm New Password">
                <button type="button" class="
            button
            button--icon
            input__button-pass
        " aria-label="Show/hide password">
                    <svg class="icon icon--secondary input__button-pass-icon-view" role="presentation" focusable="false">
                        <title>view password icon</title>
                        <use href="/images/icons-sprite.svg#visibility-off"></use>
                    </svg>

                    <svg class="icon icon--secondary input__button-pass-icon-hide" role="presentation" focusable="false">
                        <title>hide password icon</title>
                        <use href="/images/icons-sprite.svg#visibility"></use>
                    </svg>

                </button>
            </div>
            <script src="/components/raw/input/input-password.js"></script>

        </div>
    </fieldset>

</form>
<script src="/components/raw/dashboard-form/../dashboard-form/form.js"></script>
<form class="dashboard-form {{ class }}">
    {{ render '@heading' title }}

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

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

        {{#each selects }}
            {{ render '@select' select merge=true }}
        {{/each}}

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

        <div
            class="
                dashboard-form__fields
                dashboard-form--hidden
                {{ fieldsClass }}
             "
        >
            <h2
                class="
                    heading
                    dashboard-form__title-form
                    {{ formTitleClass }}
                "
            >
                {{ formTitle }}
            </h2>

            {{#each hiddenFields}}
                {{#if hiddenField.password }}
                    {{ render '@input--password' hiddenField merge=true }}
                {{else}}
                    {{ render '@input' hiddenField }}
                {{/if}}
            {{/each}}
        </div>
    </fieldset>

    {{#if formButton}}
        {{ render '@actions-group' formButton }}
    {{/if}}

</form>
{{#if script}}
    <script src="{{ static '../dashboard-form/form.js' }}"></script>
{{/if}}
{
  "script": true,
  "title": {
    "tag": "h2",
    "class": "dashboard-form__title margin-bottom-sm",
    "text": "Account Information"
  },
  "contentClass": "margin-bottom-sm",
  "fieldsClass": "margin-bottom-sm",
  "fields": [
    {
      "input": {
        "class": "margin-bottom-sm",
        "field": {
          "id": "firstName",
          "name": "firstName",
          "placeholder": "Firist name"
        },
        "label": {
          "attributes": "",
          "text": "Firist name"
        }
      }
    },
    {
      "input": {
        "class": "margin-bottom-sm",
        "field": {
          "id": "secondName",
          "name": "secondName",
          "placeholder": "Second name"
        },
        "label": {
          "attributes": "",
          "text": "Second name"
        }
      }
    }
  ],
  "formTitle": "Change",
  "formTitleClass": "margin-bottom-sm",
  "checkboxes": [
    {
      "checkbox": {
        "id": "changeEmail",
        "name": "changeEmail",
        "label": {
          "text": "Change Email"
        }
      }
    },
    {
      "checkbox": {
        "class": "margin-bottom-sm",
        "id": "changePassword",
        "name": "changePassword",
        "label": {
          "text": "Change Password"
        }
      }
    }
  ],
  "hiddenFields": [
    {
      "hiddenField": {
        "class": "margin-bottom-sm dashboard-form--hidden email",
        "label": {
          "text": "Email"
        },
        "field": {
          "id": "email",
          "name": "email"
        }
      }
    },
    {
      "hiddenField": {
        "password": true,
        "class": "margin-bottom-sm dashboard-form--hidden password",
        "label": {
          "text": "Current Password"
        },
        "field": {
          "id": "password",
          "name": "password",
          "placeholder": "Current Password"
        }
      }
    },
    {
      "hiddenField": {
        "password": true,
        "class": "margin-bottom-sm dashboard-form--hidden newPassword",
        "label": {
          "text": "New Password"
        },
        "field": {
          "id": "newPassword",
          "name": "newPassword",
          "placeholder": "New Password"
        }
      }
    },
    {
      "hiddenField": {
        "password": true,
        "class": "margin-bottom-sm dashboard-form--hidden confirmPassword",
        "label": {
          "text": "Confirm New Password"
        },
        "field": {
          "id": "confirmPassword",
          "name": "confirmPassword",
          "placeholder": "Confirm New Password"
        }
      }
    }
  ]
}
  • Content:
    $dashborad-form__title-font-family  : $font-family-base !default;
    $dashborad-form__title-font-size    : $font-size-large !default;
    $dashborad-form__title-font-weight  : $font-weight-bold !default;
    $dashborad-form__title-padding      : $spacer--medium !default;
    $dashborad-form__title-background   : $bg-color-secondary !default;
    $dashborad-form__title-border       : $border-secondary !default;
    $dashborad-form__title-border-width : 0 0 $border-width-secondary !default;
    
    $dashboard-form__label-font-size    : $font-size-medium !default;
    
    .dashboard-form {
        &__title {
            padding: $dashborad-form__title-padding;
            background: $dashborad-form__title-background;
            font-family: $dashborad-form__title-font-family;
            font-size: $dashborad-form__title-font-size;
            font-weight: $dashborad-form__title-font-weight;
            border: $dashborad-form__title-border;
            border-width: $dashborad-form__title-border-width;
        }
    
        &--hidden {
            display: none;
        }
    
        .label,
        .input__label,
        .input__field,
        select {
            font-size: $dashboard-form__label-font-size;
        }
    }
    
  • URL: /components/raw/dashboard-form/_form.scss
  • Filesystem Path: build/components/Organisms/dashboard/form/_form.scss
  • Size: 1.1 KB
  • Content:
    // this script is only for for components, it mirrors the dashboard form change password behavior,
    // we don't use it in Theme implementation
    'use strict';
    
    class DashboardForm {
      constructor(checkboxPassword) {
        this.checkboxPassword = checkboxPassword;
        this.checkboxEmail = document.querySelector('input#changeEmail'),
        this.confirmPassword = document.querySelector('.confirmPassword'),
        this.email = document.querySelector('.email'),
        this.fields = document.querySelector('.dashboard-form__fields'),
        this.newPassword = document.querySelector('.newPassword'),
        this.password = document.querySelector('.password'),
        this.title = document.querySelector('.dashboard-form__title-form'),
        this.toggledClass = 'dashboard-form--hidden';
    
        if (this.checkboxEmail) {
          this.checkboxEmail.addEventListener('change', () => {
            if (this.checkboxPassword.checked && this.checkboxEmail.checked) {
              this.title.innerHTML = 'Change Email and Password';
    
              this.toggleElements(4);
            }
            else if (this.checkboxPassword.checked && !this.checkboxEmail.checked) {
              this.title.innerHTML = 'Change Password';
    
              this.toggleElements(1);
            }
            else {
              this.fields.classList.toggle(this.toggledClass);
              this.title.innerHTML = 'Change Email';
    
              this.toggleElements(2);
            }
          });
        }
        if (this.checkboxPassword) {
          this.checkboxPassword.addEventListener('change', () => {
            if (this.checkboxEmail.checked && this.checkboxPassword.checked) {
              this.title.innerHTML = 'Change Email and Password';
    
              this.toggleElements(4);
            }
            else if (this.checkboxEmail.checked && !this.checkboxPassword.checked) {
              this.title.innerHTML = 'Change Email';
    
              this.toggleElements(2);
            }
            else {
              this.fields.classList.toggle(this.toggledClass);
              this.title.innerHTML = 'Change Password';
    
              this.toggleElements(1);
            }
          });
        }
      }
    
      toggleElements(elements) {
        if (elements === 4) {
          this.email.classList.remove(this.toggledClass);
          this.password.classList.remove(this.toggledClass);
          this.newPassword.classList.remove(this.toggledClass);
          this.confirmPassword.classList.remove(this.toggledClass);
        }
        else if (elements === 2) {
          this.email.classList.remove(this.toggledClass);
          this.password.classList.remove(this.toggledClass);
          this.newPassword.classList.add(this.toggledClass);
          this.confirmPassword.classList.add(this.toggledClass);
        }
        else if (elements === 1) {
          this.email.classList.add(this.toggledClass);
          this.password.classList.remove(this.toggledClass);
          this.newPassword.classList.remove(this.toggledClass);
          this.confirmPassword.classList.remove(this.toggledClass);
        }
      }
    }
    new DashboardForm(document.querySelector('input#changePassword'));
    
  • URL: /components/raw/dashboard-form/form.js
  • Filesystem Path: build/components/Organisms/dashboard/form/form.js
  • Size: 2.9 KB

No notes defined.