// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`User settings index creates snapshot 1`] = `
<DocumentFragment>
  <main
    class="p-0"
    role="main"
  >
    <div
      class="mb-5"
    >
      <div
        class="h3 mb-4 pb-2 border-bottom border-1 title"
      >
        Profile information
      </div>
      <div
        class="mt-4 mt-md-5 formWrapper"
      >
        <form
          autocomplete="on"
          class="w-100 needs-validation"
          data-testid="updateProfileForm"
          novalidate=""
        >
          <div
            class=" mb-4 undefined"
          >
            <div
              class="d-flex flex-column"
            >
              <label
                class="form-label label"
                for="image"
              >
                <span
                  class="fw-bold"
                >
                  Profile image
                </span>
                <small
                  class="ms-1 fst-italic"
                >
                  (Click on the image to update)
                </small>
              </label>
              <div
                class="position-relative"
              >
                <button
                  aria-label="Add image"
                  class="btn p-0 overflow-hidden position-relative lh-1 fs-2 btn rounded-circle border border-2 bg-white circularBtn"
                  type="button"
                >
                  <svg
                    data-testid="defaultIcon"
                    fill="currentColor"
                    height="1em"
                    stroke="currentColor"
                    stroke-width="0"
                    viewBox="0 0 24 24"
                    width="1em"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M0 0h24v24H0z"
                      fill="none"
                    />
                    <path
                      d="M3 4V1h2v3h3v2H5v3H3V6H0V4h3zm3 6V7h3V4h7l1.83 2H21c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V10h3zm7 9c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-3.2-5c0 1.77 1.43 3.2 3.2 3.2s3.2-1.43 3.2-3.2-1.43-3.2-3.2-3.2-3.2 1.43-3.2 3.2z"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <input
              class="d-none"
              id="image"
              name="image"
              type="file"
            />
          </div>
          <div
            class="mb-4 position-relative undefined"
          >
            <label
              class="form-label fw-bold label"
              for="email"
            >
              <span
                class="fw-bold"
              >
                Email
              </span>
            </label>
            <input
              class="form-control"
              data-testid="emailInput"
              id="email"
              name="email"
              readonly=""
              spellcheck="false"
              type="email"
              value="jsmith@email.com"
            />
            <div
              class="invalid-feedback mt-0 inputFeedback"
            />
          </div>
          <div
            class="mb-4 position-relative undefined"
          >
            <label
              class="form-label fw-bold label"
              for="alias"
            >
              <span
                class="fw-bold"
              >
                Username
              </span>
              <small
                class="ms-1 fst-italic"
              >
                (Required)
              </small>
            </label>
            <input
              autocomplete="username"
              class="form-control"
              data-testid="aliasInput"
              id="alias"
              name="alias"
              required=""
              spellcheck="false"
              type="text"
              value="userAlias"
            />
            <div
              class="invalid-feedback mt-0 inputFeedback"
            >
              This field is required
            </div>
          </div>
          <div
            class="mb-4 position-relative undefined"
          >
            <label
              class="form-label fw-bold label"
              for="firstName"
            >
              <span
                class="fw-bold"
              >
                First Name
              </span>
            </label>
            <input
              autocomplete="given-name"
              class="form-control"
              data-testid="firstNameInput"
              id="firstName"
              name="firstName"
              spellcheck="false"
              type="text"
              value=""
            />
            <div
              class="invalid-feedback mt-0 inputFeedback"
            />
          </div>
          <div
            class="mb-4 position-relative undefined"
          >
            <label
              class="form-label fw-bold label"
              for="lastName"
            >
              <span
                class="fw-bold"
              >
                Last Name
              </span>
            </label>
            <input
              autocomplete="family-name"
              class="form-control"
              data-testid="lastNameInput"
              id="lastName"
              name="lastName"
              spellcheck="false"
              type="text"
              value=""
            />
            <div
              class="invalid-feedback mt-0 inputFeedback"
            />
          </div>
          <div
            class="mt-4"
          >
            <button
              aria-label="Update profile"
              class="btn btn-sm btn-outline-secondary"
              type="button"
            >
              <div
                class="d-flex flex-row align-items-center text-uppercase"
              >
                <svg
                  class="me-2"
                  fill="currentColor"
                  height="1em"
                  stroke="currentColor"
                  stroke-width="0"
                  viewBox="0 0 512 512"
                  width="1em"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  />
                </svg>
                <div>
                  Update
                </div>
              </div>
            </button>
          </div>
        </form>
      </div>
    </div>
    <div
      class="mb-5"
    >
      <div
        class="h3 mb-4 pb-2 border-bottom border-1 title"
      >
        Change password
      </div>
      <div
        class="mt-4 mt-md-5 formWrapper"
      >
        <form
          autocomplete="on"
          class="w-100 needs-validation"
          data-testid="updatePasswordForm"
          novalidate=""
        >
          <div
            class="mb-4 position-relative undefined"
          >
            <label
              class="form-label fw-bold label"
              for="oldPassword"
            >
              <span
                class="fw-bold"
              >
                Old password
              </span>
            </label>
            <input
              autocomplete="password"
              class="form-control"
              data-testid="oldPasswordInput"
              id="oldPassword"
              name="oldPassword"
              required=""
              spellcheck="false"
              type="password"
              value=""
            />
            <div
              class="invalid-feedback mt-0 inputFeedback"
            >
              This field is required
            </div>
          </div>
          <div
            class="mb-4 position-relative undefined"
          >
            <label
              class="form-label fw-bold label"
              for="password"
            >
              <span
                class="fw-bold"
              >
                New password
              </span>
            </label>
            <input
              autocomplete="new-password"
              class="form-control"
              data-testid="passwordInput"
              id="password"
              minlength="6"
              name="password"
              required=""
              spellcheck="false"
              type="password"
              value=""
            />
            <div
              class="invalid-feedback mt-0 inputFeedback"
            >
              This field is required
            </div>
          </div>
          <div
            class="mb-4 position-relative undefined"
          >
            <label
              class="form-label fw-bold label"
              for="confirmPassword"
            >
              <span
                class="fw-bold"
              >
                Confirm new password
              </span>
              <small
                class="ms-1 fst-italic"
              >
                (Required)
              </small>
            </label>
            <input
              autocomplete="new-password"
              class="form-control"
              data-testid="confirmPasswordInput"
              id="confirmPassword"
              name="confirmPassword"
              pattern=""
              required=""
              spellcheck="false"
              type="password"
              value=""
            />
            <div
              class="invalid-feedback mt-0 inputFeedback"
            >
              This field is required
            </div>
          </div>
          <div
            class="mt-4 mb-2"
          >
            <button
              aria-label="Update password"
              class="btn btn-sm btn-outline-secondary"
              type="button"
            >
              <div
                class="d-flex flex-row align-items-center text-uppercase"
              >
                <svg
                  class="me-2"
                  fill="currentColor"
                  height="1em"
                  stroke="currentColor"
                  stroke-width="0"
                  viewBox="0 0 512 512"
                  width="1em"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  />
                </svg>
                <div>
                  Change
                </div>
              </div>
            </button>
          </div>
        </form>
      </div>
    </div>
    <div
      class="mb-5"
    >
      <div
        class="h3 mb-4 pb-2 border-bottom border-1 title"
      >
        Two-factor authentication
      </div>
      <div
        class="mt-4 mt-md-5"
      >
        <div
          class="mb-4"
        >
          Two-factor authentication is an extra layer of security that protects your account.
        </div>
        <div
          class="mb-4"
        >
          <small
            class="text-uppercase text-muted"
          >
            Status:
          </small>
           
          <span
            class="fw-bold"
          >
            Disabled
          </span>
        </div>
        <button
          aria-label="Open modal"
          class="btn btn-success btn-sm"
        >
          <div
            class="d-flex flex-row align-items-center"
          >
            <svg
              class="me-2"
              fill="currentColor"
              height="1em"
              stroke="currentColor"
              stroke-width="0"
              viewBox="0 0 448 512"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"
              />
            </svg>
            <span>
              Enable two-factor authentication
            </span>
          </div>
        </button>
        <div>
          <div
            aria-modal="false"
            class="modal modal"
            role="dialog"
          >
            <div
              class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
            >
              <div
                class="modal-content border border-3 mx-auto content modal"
              >
                <div
                  class="modal-header d-flex flex-row align-items-center header undefined"
                >
                  <div
                    class="h3 m-2 flex-grow-1 text-truncate title"
                  >
                    Setup 2FA
                  </div>
                  <button
                    aria-label="Close"
                    class="btn-close"
                    type="button"
                  />
                </div>
                <div
                  class="modal-body p-4 h-100 d-flex flex-column"
                >
                  <div>
                    <div
                      class="overflow-hidden alertWrapper"
                      data-testid="alertWrapper"
                    />
                  </div>
                </div>
                <div
                  class="modal-footer p-3 undefined"
                >
                  <button
                    aria-label="Cancel"
                    class="btn btn-sm btn-outline-secondary text-uppercase"
                  >
                    <div
                      class="d-flex flex-row align-items-center"
                    >
                      <svg
                        class="me-2"
                        fill="currentColor"
                        height="1em"
                        stroke="currentColor"
                        stroke-width="0"
                        viewBox="0 0 512 512"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M256 48C140.559 48 48 140.559 48 256c0 115.436 92.559 208 208 208 115.435 0 208-92.564 208-208 0-115.441-92.564-208-208-208zm104.002 282.881l-29.12 29.117L256 285.117l-74.881 74.881-29.121-29.117L226.881 256l-74.883-74.881 29.121-29.116L256 226.881l74.881-74.878 29.12 29.116L285.119 256l74.883 74.881z"
                        />
                      </svg>
                      <span>
                        Cancel
                      </span>
                    </div>
                  </button>
                  <button
                    aria-label="Open next step"
                    class="btn btn-sm btn-outline-secondary ms-3"
                  >
                    <div
                      class="d-flex flex-row align-items-center text-uppercase"
                    >
                      <svg
                        class="me-2"
                        fill="currentColor"
                        height="1em"
                        stroke="currentColor"
                        stroke-width="0"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                        <path
                          d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                      <span>
                        Next
                      </span>
                    </div>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="h3 mb-4 pb-2 border-bottom border-1 title"
    >
      Delete account
    </div>
    <div
      class="mt-4 mt-md-5"
    >
      <p
        class="mb-4"
      >
        Deleting your account will also delete all the content that belongs to it (repositories, subscriptions, webhooks, etc), as well as all organizations where you are the only member.
      </p>
      <button
        aria-label="Open deletion account modal"
        class="btn btn-sm btn-danger"
      >
        <div
          class="d-flex flex-row align-items-center text-uppercase"
        >
          <svg
            class="me-2"
            fill="currentColor"
            height="1em"
            stroke="currentColor"
            stroke-width="0"
            viewBox="0 0 448 512"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
            />
          </svg>
          <div>
            Delete account
          </div>
        </div>
      </button>
    </div>
    <div
      class="d-inline-block"
    >
      <div
        aria-modal="false"
        class="modal modal"
        role="dialog"
      >
        <div
          class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
        >
          <div
            class="modal-content border border-3 mx-auto content modal"
          >
            <div
              class="modal-header d-flex flex-row align-items-center header undefined"
            >
              <div
                class="h3 m-2 flex-grow-1 title"
              >
                Delete account
              </div>
              <button
                aria-label="Close"
                class="btn-close"
                type="button"
              />
            </div>
            <div
              class="modal-body p-4 h-100 d-flex flex-column"
            >
              <div>
                <div
                  class="overflow-hidden alertWrapper"
                  data-testid="alertWrapper"
                />
              </div>
            </div>
            <div
              class="modal-footer p-3 undefined"
            >
              <button
                aria-label="Close"
                class="btn btn-sm btn-outline-secondary text-uppercase"
              >
                <div
                  class="d-flex flex-row align-items-center"
                >
                  <svg
                    class="me-2"
                    fill="currentColor"
                    height="1em"
                    stroke="currentColor"
                    stroke-width="0"
                    viewBox="0 0 512 512"
                    width="1em"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M256 48C140.559 48 48 140.559 48 256c0 115.436 92.559 208 208 208 115.435 0 208-92.564 208-208 0-115.441-92.564-208-208-208zm104.002 282.881l-29.12 29.117L256 285.117l-74.881 74.881-29.121-29.117L226.881 256l-74.883-74.881 29.121-29.116L256 226.881l74.881-74.878 29.12 29.116L285.119 256l74.883 74.881z"
                    />
                  </svg>
                  <span>
                    Cancel
                  </span>
                </div>
              </button>
              <button
                aria-label="Delete account"
                class="btn btn-sm btn-danger ms-3"
                disabled=""
              >
                <div
                  class="d-flex flex-row align-items-center text-uppercase"
                >
                  <svg
                    class="me-2"
                    fill="currentColor"
                    height="1em"
                    stroke="currentColor"
                    stroke-width="0"
                    viewBox="0 0 448 512"
                    width="1em"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
                    />
                  </svg>
                  <span>
                    Delete account
                  </span>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</DocumentFragment>
`;
