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

exports[`User settings index creates snapshot 1`] = `
<DocumentFragment>
  <main
    class="container p-0"
    role="main"
  >
    <div
      class="mb-5"
    >
      <div
        class="h3 mb-4 pb-2 border-bottom 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="form-group mb-4 undefined"
          >
            <div
              class="d-flex flex-column"
            >
              <label
                class="label"
                for="image"
              >
                <span
                  class="font-weight-bold"
                >
                  Profile image
                </span>
                <small
                  class="ml-1 font-italic"
                >
                  (Click on the image to update)
                </small>
              </label>
              <div
                class="position-relative"
              >
                <button
                  class="btn p-0 overflow-hidden btn"
                  data-testid="inputFileBtn"
                  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="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"
              data-testid="inputFile"
              id="image"
              name="image"
              type="file"
            />
          </div>
          <div
            class="form-group mb-4 position-relative undefined"
          >
            <label
              class="font-weight-bold label"
              for="email"
            >
              <span
                class="font-weight-bold"
              >
                Email
              </span>
            </label>
            <input
              class="form-control"
              data-testid="emailInput"
              name="email"
              readonly=""
              spellcheck="false"
              type="email"
              value="jsmith@email.com"
            />
            <div
              class="invalid-feedback mt-0 inputFeedback"
            />
          </div>
          <div
            class="form-group mb-4 position-relative undefined"
          >
            <label
              class="font-weight-bold label"
              for="alias"
            >
              <span
                class="font-weight-bold"
              >
                Username
              </span>
              <small
                class="ml-1 font-italic"
              >
                (Required)
              </small>
            </label>
            <input
              autocomplete="username"
              class="form-control"
              data-testid="aliasInput"
              name="alias"
              required=""
              spellcheck="false"
              type="text"
              value="userAlias"
            />
            <div
              class="invalid-feedback mt-0 inputFeedback"
            >
              This field is required
            </div>
          </div>
          <div
            class="form-group mb-4 position-relative undefined"
          >
            <label
              class="font-weight-bold label"
              for="firstName"
            >
              <span
                class="font-weight-bold"
              >
                First Name
              </span>
            </label>
            <input
              autocomplete="given-name"
              class="form-control"
              data-testid="firstNameInput"
              name="firstName"
              spellcheck="false"
              type="text"
              value=""
            />
            <div
              class="invalid-feedback mt-0 inputFeedback"
            />
          </div>
          <div
            class="form-group mb-4 position-relative undefined"
          >
            <label
              class="font-weight-bold label"
              for="lastName"
            >
              <span
                class="font-weight-bold"
              >
                Last Name
              </span>
            </label>
            <input
              autocomplete="family-name"
              class="form-control"
              data-testid="lastNameInput"
              name="lastName"
              spellcheck="false"
              type="text"
              value=""
            />
            <div
              class="invalid-feedback mt-0 inputFeedback"
            />
          </div>
          <div
            class="mt-4"
          >
            <button
              class="btn btn-secondary"
              data-testid="updateProfileBtn"
              type="button"
            >
              Update
            </button>
          </div>
        </form>
      </div>
    </div>
    <div>
      <div
        class="h3 mb-4 pb-2 border-bottom 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="form-group mb-4 position-relative undefined"
          >
            <label
              class="font-weight-bold label"
              for="oldPassword"
            >
              <span
                class="font-weight-bold"
              >
                Old password
              </span>
            </label>
            <input
              autocomplete="password"
              class="form-control"
              data-testid="oldPasswordInput"
              name="oldPassword"
              required=""
              spellcheck="false"
              type="password"
              value=""
            />
            <div
              class="invalid-feedback mt-0 inputFeedback"
            >
              This field is required
            </div>
          </div>
          <div
            class="form-group mb-4 position-relative undefined"
          >
            <label
              class="font-weight-bold label"
              for="password"
            >
              <span
                class="font-weight-bold"
              >
                New password
              </span>
              <small
                class="ml-1 font-italic"
              >
                (6 characters min.)
              </small>
            </label>
            <input
              autocomplete="new-password"
              class="form-control"
              data-testid="passwordInput"
              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="form-group mb-4 position-relative undefined"
          >
            <label
              class="font-weight-bold label"
              for="confirmPassword"
            >
              <span
                class="font-weight-bold"
              >
                Confirm new password
              </span>
              <small
                class="ml-1 font-italic"
              >
                (Required)
              </small>
            </label>
            <input
              autocomplete="new-password"
              class="form-control"
              data-testid="confirmPasswordInput"
              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
              class="btn btn-secondary"
              data-testid="updatePasswordBtn"
              type="button"
            >
              Change
            </button>
          </div>
        </form>
      </div>
    </div>
  </main>
</DocumentFragment>
`;
