vartheme_bs5-2.0.x-dev/src/components/pages/pageUserPassword/pageUserPassword.config.yml

title: "Pages/PageUserPassword"
description:
  component: "Page User Password component description."
## Canvas height
height: 500
## Demo data.
data:
  page_content: |
    <div data-drupal-messages-fallback="" class="hidden"></div>
    <h2 class="block-title"><span> Login with </span></h2>
    <section id="block-vartheme-bs5-socialauthlogin" class="settings-tray-editable block block-social-auth block-social-auth-login clearfix" data-drupal-settingstray="editable">
        <div class="social-auth">
          <div class="social-network social_auth_google">
              <a class="auth-link" href="/user/login/google">
              <img class="auth-icon" src="static/media/src/assets/images/social_auth/social_auth_google/img/google_logo.svg" alt="Authenticate through Google">
              <span class="auth-name">Google</span>
              </a>
          </div>
          <div class="social-network social_auth_facebook">
              <a class="auth-link" href="/user/login/facebook">
              <img class="auth-icon" src="static/media/src/assets/images/social_auth/social_auth_facebook/img/facebook_logo.svg" alt="Authenticate through Facebook">
              <span class="auth-name">Facebook</span>
              </a>
          </div>
          <div class="social-network social_auth_twitter">
              <a class="auth-link" href="/user/login/twitter">
              <img class="auth-icon" src="static/media/src/assets/images/social_auth/social_auth_twitter/img/twitter_logo.svg" alt="Authenticate through Twitter">
              <span class="auth-name">Twitter</span>
              </a>
          </div>
          <div class="social-network social_auth_linkedin">
              <a class="auth-link" href="/user/login/linkedin">
              <img class="auth-icon" src="static/media/src/assets/images/social_auth/social_auth_linkedin/img/linkedin_logo.svg" alt="Authenticate through LinkedIn">
              <span class="auth-name">LinkedIn</span>
              </a>
          </div>
        </div>
    </section>
    <h2 class="block-title"><span> or </span></h2>
    <form class="user-login-form antibot form" data-drupal-selector="user-login-form" autocomplete="off" data-action="/user/login" action="/user/login" method="post" id="user-login-form" accept-charset="UTF-8">
        <noscript>
          <div class="antibot-no-js antibot-message antibot-message-warning">You must have JavaScript enabled to use this form.</div>
        </noscript>
        <div class="js-form-item form-item js-form-type-textfield form-item-name js-form-item-name form-group">
          <label class="form-label js-form-required form-required" for="edit-name">Email or username</label>
          <input autocorrect="none" autocapitalize="none" spellcheck="false" autofocus="autofocus" data-drupal-selector="edit-name" aria-describedby="edit-name--description" type="text" id="edit-name" name="name" value="" size="60" maxlength="254" class="form-textfield required form-control" required="required" aria-required="true" autocomplete="off" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAZdJREFUOBGVVD2LwkAQfTEHfhTXqIXggY0KNoKtEBBsDv0Zh0JI5w9Qf4bXWPkHBPHqWKq1CFaeWImIwS8w5Hai2UskxLiw2Zk3b97uziwR2u32p2EYHTY/4GMIgvDLaLVWq/VD9MAryZRw3+ibbBok4GvnG/32tecE7IFndiQSQSaTcdBeEkilUiiXy+4CoVCIB4LBIFixuG+PcfBuvNFarVZRKBTQ6/Ww3W4hyzLW6zW63a4j9phM/ktXcBMQms2mQQE65vl8Njl0hcvl4sbnGLviijl1fgIrmRjPkonDWplkS8esAQFeI51OQ5IkxGIxLJdLDAYD7Pd7U4SfwEugWCwiGo1iNBohm80il8txeuD+tjngZsxmM4TDYeTzeRyPRywWC04jgfozkd1uB13XEY/HzTafTicu8P9aOHQzrO6Q12g0sNls0O/3oSgKJpMJhsOhSfRVg8PhgEQigUqlAlEUQb41RMt4XEul0hfD3gmfz+e4Xq/mnE6nGI/H1AF67iuvNlJt6EeT1DQNqqo69qBkBtT/ANzCmpZx1xTXAAAAAElFTkSuQmCC&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;">
          <small id="edit-name--description" class="description form-text text-muted">
          Enter your email address or username.
          </small>
        </div>
        <div class="js-form-item form-item js-form-type-password form-item-pass js-form-item-pass form-group">
          <label class="form-label js-form-required form-required" for="edit-pass">Password</label>
          <input autocomplete="off" data-drupal-selector="edit-pass" aria-describedby="edit-pass--description" type="password" id="edit-pass" name="pass" size="60" maxlength="128" class="form-text required form-control" required="required" aria-required="true" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAZdJREFUOBGVVD2LwkAQfTEHfhTXqIXggY0KNoKtEBBsDv0Zh0JI5w9Qf4bXWPkHBPHqWKq1CFaeWImIwS8w5Hai2UskxLiw2Zk3b97uziwR2u32p2EYHTY/4GMIgvDLaLVWq/VD9MAryZRw3+ibbBok4GvnG/32tecE7IFndiQSQSaTcdBeEkilUiiXy+4CoVCIB4LBIFixuG+PcfBuvNFarVZRKBTQ6/Ww3W4hyzLW6zW63a4j9phM/ktXcBMQms2mQQE65vl8Njl0hcvl4sbnGLviijl1fgIrmRjPkonDWplkS8esAQFeI51OQ5IkxGIxLJdLDAYD7Pd7U4SfwEugWCwiGo1iNBohm80il8txeuD+tjngZsxmM4TDYeTzeRyPRywWC04jgfozkd1uB13XEY/HzTafTicu8P9aOHQzrO6Q12g0sNls0O/3oSgKJpMJhsOhSfRVg8PhgEQigUqlAlEUQb41RMt4XEul0hfD3gmfz+e4Xq/mnE6nGI/H1AF67iuvNlJt6EeT1DQNqqo69qBkBtT/ANzCmpZx1xTXAAAAAElFTkSuQmCC&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;">
          <small id="edit-pass--description" class="description form-text text-muted">
          Enter the password that accompanies your email address.
          </small>
        </div>
        <input autocomplete="off" data-drupal-selector="form-kvzffjn3lqqvgewbuwx8aum6xfnkjjj5saxqlsjkltk" type="hidden" name="form_build_id" value="form-KvZFfJn3lQqVgEwBuwX8AuM6XfNKjJJ5saXqlSJKLTk" class="form-control">
        <input data-drupal-selector="edit-user-login-form" type="hidden" name="form_id" value="user_login_form" class="form-control">
        <input data-drupal-selector="edit-antibot-key" type="hidden" name="antibot_key" value="-TZZ5EK6fmJeBcWmppzM0naz_bhiOus0laSP0B_8bag" class="form-control">
        <input data-drupal-selector="edit-honeypot-time" type="hidden" name="honeypot_time" value="GFfrtFeE4GAIWSnaJnSoUUJZvkjlrE18U70ni77sqaE" class="form-control">
        <div class="js-form-item form-item js-form-type-checkbox form-item-persistent-login js-form-item-persistent-login form-check">
          <input data-drupal-selector="edit-persistent-login" type="checkbox" id="edit-persistent-login" name="persistent_login" value="1" class="form-checkbox form-check-input">
          <label class="form-check-label option" for="edit-persistent-login">Remember me</label>
        </div>
        <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions">
          <input data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Log in" class="js-form-submit form-submit btn btn-primary">
        </div>
        <div class="url-textfield js-form-wrapper form-wrapper" style="display: none !important;">
          <div class="js-form-item form-item js-form-type-textfield form-item-url js-form-item-url form-group">
              <label class="form-label" for="edit-url">Leave this field blank</label>
              <input autocomplete="off" data-drupal-selector="edit-url" type="text" id="edit-url" name="url" value="" size="20" maxlength="128" class="form-textfield form-control" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAZdJREFUOBGVVD2LwkAQfTEHfhTXqIXggY0KNoKtEBBsDv0Zh0JI5w9Qf4bXWPkHBPHqWKq1CFaeWImIwS8w5Hai2UskxLiw2Zk3b97uziwR2u32p2EYHTY/4GMIgvDLaLVWq/VD9MAryZRw3+ibbBok4GvnG/32tecE7IFndiQSQSaTcdBeEkilUiiXy+4CoVCIB4LBIFixuG+PcfBuvNFarVZRKBTQ6/Ww3W4hyzLW6zW63a4j9phM/ktXcBMQms2mQQE65vl8Njl0hcvl4sbnGLviijl1fgIrmRjPkonDWplkS8esAQFeI51OQ5IkxGIxLJdLDAYD7Pd7U4SfwEugWCwiGo1iNBohm80il8txeuD+tjngZsxmM4TDYeTzeRyPRywWC04jgfozkd1uB13XEY/HzTafTicu8P9aOHQzrO6Q12g0sNls0O/3oSgKJpMJhsOhSfRVg8PhgEQigUqlAlEUQb41RMt4XEul0hfD3gmfz+e4Xq/mnE6nGI/H1AF67iuvNlJt6EeT1DQNqqo69qBkBtT/ANzCmpZx1xTXAAAAAElFTkSuQmCC&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;">
          </div>
        </div>
    </form>
  footer_content: |
    <div class="footer-top d-flex justify-content-md-between align-items-md-center">
      <div>Powered by <a href="https://www.vardot.com/?utm_source=varbase&amp;utm_campaign=varbase%20default%20links">Vardot</a>. Enjoy the free software, or <a href="https://www.vardot.com/form/get-support-varbase?utm_source=varbase&amp;utm_campaign=varbase%20default%20links">get a quote</a> for enterprise support and fully functional websites.</div>
      <ul class="nav">
          <li class="nav-item  ">
            <a href="https://www.drupal.org/project/issues/varbase" class="nav-link" target="_blank" rel="noopener">Community Support</a>
          </li>
          <li class="nav-item  ">
            <a href="https://docs.varbase.vardot.com/?utm_source=varbase&amp;utm_campaign=varbase%20default%20links" class="nav-link">Documentation</a>
          </li>
          <li class="nav-item  ">
            <a href="https://www.vardot.com/form/get-support-varbase?utm_source=varbase&amp;utm_campaign=varbase%20default%20links" class="nav-link">Get Professional Support</a>
          </li>
      </ul>
    </div>