TACC UI Pattern Library

Form: Login

No notes defined.

<form action="" class=" ">
  <h3 >
    <img
      src="https://www.tacc.utexas.edu/static/site_cms/img/org_logos/tacc-formal.svg"
      alt="TACC Logo"
    />
    <span>Log In</span>
  </h3>
  <p >to continue to the TACC User Portal</p>

    <ul  style="display:none;">
      <li>
        Sample <strong>form</strong>
        error. <a href="https://example.com" target="_blank">Link.</a>
      </li>
    </ul>

  <div class=" ">
    <label for="username">
      User Name
      <span class="">Required</span>
    </label>
    <input
      name="username"
      type="text"
      autocomplete="username"
      id="username"
      required
    >
  </div>
  <div class=" ">
    <label for="password">
      Password
      <span >Required</span>
    </label>
    <input
      name="password"
      type="password"
      autocomplete="current-password"
      id="password"
      required
    >
  </div>
  <footer >
    <a
      href="https://accounts.tacc.utexas.edu/register"
      rel="noreferrer"
      target="_blank"
    >
      Create Account
    </a>
    <button  type="submit">
      Log In
    </button>
  </footer>
  <nav >
    <p>Having trouble logging in?</p>
    <a
      href="https://example.com"
      rel="noreferrer"
      target="_blank"
    >
      Reset Password
    </a>
    <a
      href="https://example.com"
      rel="noreferrer"
      target="_blank"
    >
      Account Help
    </a>
  </nav>
</form>
<script type="module">
  import toggleFieldErrors from '../raw/c-form/toggle-field-errors.js';

  const form = document.querySelector('form');
  const selector = '';

  form.addEventListener('submit', event => {
    event.preventDefault();
    console.log({ form, selector });
    toggleFieldErrors( form, selector );
  });
</script>
 
{
  "shouldSkipPattern": true,
  "bootstrap4Styles": [
    {
      "isInternal": true,
      "layer": "foundation",
      "path": "/assets/core-styles.bootstrap4.css"
    }
  ],
  "bootstrap5Styles": [
    {
      "isInternal": true,
      "layer": "foundation",
      "path": "/assets/core-styles.bootstrap5.css"
    }
  ],
  "globalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.demo.css"
    },
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.base.css"
    }
  ],
  "cmsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.cms.css"
    }
  ],
  "docsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.docs.css"
    }
  ],
  "portalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.portal.css"
    }
  ]
}