// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

exports[`<LoginWithQRFlow /> login.reciprocate errors renders authorization_expired 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        The sign in was not completed in time
      </h1>
      <p
        data-testid="cancellation-message"
      >
        Sign in expired. Please try again.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Try again
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate errors renders check_code_mismatch 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Something went wrong!
      </h1>
      <p
        data-testid="cancellation-message"
      >
        An unexpected error occurred. The request to connect your other device has been cancelled.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Try again
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate errors renders device_already_exists 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Something went wrong!
      </h1>
      <p
        data-testid="cancellation-message"
      >
        An unexpected error occurred. The request to connect your other device has been cancelled.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Try again
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate errors renders device_not_found 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Something went wrong!
      </h1>
      <p
        data-testid="cancellation-message"
      >
        An unexpected error occurred. The request to connect your other device has been cancelled.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Try again
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate errors renders etag_missing 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Something went wrong!
      </h1>
      <p
        data-testid="cancellation-message"
      >
        An unexpected error occurred. This may be due to a browser extension, proxy server, or server misconfiguration.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Try again
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate errors renders expired 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        The sign in was not completed in time
      </h1>
      <p
        data-testid="cancellation-message"
      >
        Sign in expired. Please try again.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Try again
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate errors renders homeserver_lacks_support 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_heading"
    >
      <div
        aria-label="Back"
        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
        data-testid="back-button"
        role="button"
        tabindex="0"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="m13.3 17.3-4.6-4.6a.9.9 0 0 1-.213-.325A1.1 1.1 0 0 1 8.425 12q0-.2.062-.375A.9.9 0 0 1 8.7 11.3l4.6-4.6a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7L10.8 12l3.9 3.9a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
          />
        </svg>
      </div>
      <div
        class="mx_LoginWithQR_breadcrumbs"
      >
        Sessions
         / 
        Link new device
      </div>
    </div>
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            clip-rule="evenodd"
            d="M3 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm2 5V5h4v4zm-2 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm2 5v-4h4v4zm9-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm1 2v4h4V5z"
            fill-rule="evenodd"
          />
          <path
            d="M15 16v-3h-2v3z"
          />
          <path
            d="M17 16h-2v2h-2v3h2v-3h2v2h4v-2h-2v-5h-2z"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        QR code not supported
      </h1>
      <p
        data-testid="cancellation-message"
      >
        Your account provider doesn't support signing into a new device with a QR code.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Try again
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate errors renders insecure_channel_detected 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Connection not secure
      </h1>
      A secure connection could not be made to the new device. Your existing devices are still safe and you don't need to worry about them.
      <h2
        class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"
        data-testid="cancellation-message"
      >
        Now what?
      </h2>
      <ol>
        <li>
          Try signing in to the other device again with a QR code in case this was a network problem
        </li>
        <li>
          If you encounter the same problem, try a different wifi network or use your mobile data instead of wifi
        </li>
        <li>
          If that doesn't work, sign in manually
        </li>
      </ol>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Try again
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate errors renders invalid_code 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Something went wrong!
      </h1>
      <p
        data-testid="cancellation-message"
      >
        An unexpected error occurred. The request to connect your other device has been cancelled.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Try again
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate errors renders other_device_already_signed_in 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="success"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="m10.6 13.8-2.15-2.15a.95.95 0 0 0-.7-.275.95.95 0 0 0-.7.275.95.95 0 0 0-.275.7q0 .425.275.7L9.9 15.9q.3.3.7.3t.7-.3l5.65-5.65a.95.95 0 0 0 .275-.7.95.95 0 0 0-.275-.7.95.95 0 0 0-.7-.275.95.95 0 0 0-.7.275zM12 22a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Your other device is already signed in
      </h1>
      <p
        data-testid="cancellation-message"
      >
        You don’t need to do anything else.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Try again
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate errors renders other_device_not_signed_in 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Something went wrong!
      </h1>
      <p
        data-testid="cancellation-message"
      >
        An unexpected error occurred. The request to connect your other device has been cancelled.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Try again
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate errors renders rate_limited 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Something went wrong!
      </h1>
      <p
        data-testid="cancellation-message"
      >
        Too many attempts in a short time. Wait some time before trying again.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Try again
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate errors renders unexpected_message_received 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Something went wrong!
      </h1>
      <p
        data-testid="cancellation-message"
      >
        An unexpected error occurred. The request to connect your other device has been cancelled.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Try again
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate errors renders unknown 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Something went wrong!
      </h1>
      <p
        data-testid="cancellation-message"
      >
        An unexpected error occurred. The request to connect your other device has been cancelled.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Try again
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate errors renders unsupported_protocol 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Other device not compatible
      </h1>
      <p
        data-testid="cancellation-message"
      >
        This device does not support signing in to the other device with a QR code.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Try again
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate errors renders user_cancelled 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Sign in request cancelled
      </h1>
      <p
        data-testid="cancellation-message"
      >
        The sign in was cancelled on the other device.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Try again
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate errors renders user_declined 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Sign in declined
      </h1>
      <p
        data-testid="cancellation-message"
      >
        You or the account provider declined the sign in request.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Try again
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate renders QR code 1`] = `
<div>
  <div
    class="mx_LoginWithQR"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_heading"
    >
      <div
        aria-label="Back"
        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
        data-testid="back-button"
        role="button"
        tabindex="0"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="m13.3 17.3-4.6-4.6a.9.9 0 0 1-.213-.325A1.1 1.1 0 0 1 8.425 12q0-.2.062-.375A.9.9 0 0 1 8.7 11.3l4.6-4.6a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7L10.8 12l3.9 3.9a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
          />
        </svg>
      </div>
      <div
        class="mx_LoginWithQR_breadcrumbs"
      >
        Sessions
         / 
        Link new device
      </div>
    </div>
    <div
      class="mx_LoginWithQR_main"
    >
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Scan the QR code with another device
      </h1>
      <div
        class="mx_LoginWithQR_qrWrapper"
      >
        <div
          class="mx_QRCode"
        >
          <img
            alt="QR Code"
            class="mx_VerificationQRCode"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAklEQVR4AewaftIAAAPWSURBVO3BQY5jBxYDweSD7n9lTu+8aQJu+Y+gsjMi/QVJv3VImg5J0yFpOiRNh6TpkDQdkqZD0nRImg5J0yFpOiRNh6TpkDQdkqZD0nRImg5J0yFpOiRNh6TpkDQdkqZD0nRImg5J0yFpevFhSfjJ2vKOJCxtWZLwjrYsSfjJ2vIph6TpkDQdkqZD0nRImg5J04sv0pZvkIRPSsI72vK0tnyDJHyDQ9J0SJoOSdMhaTokTYek6cUPkYSnteVJSXhHW5YkLElY2vKkJDytLd/ukDQdkqZD0nRImg5J0yFpeqHHtGVJwtPaov+vQ9J0SJoOSdMhaTokTYek6YU+oi1LEpa2LElY2qJ/7pA0HZKmQ9J0SJoOSdMhaXrxQ7Tl36ot364t/0WHpOmQNB2SpkPSdEiaXnyRJPxkSVjasiRhacsnJUF/OSRNh6TpkDQdkqZD0nRIml58WFv+i5KwtGVJwtPaor/nkDQdkqZD0nRImg5J0yFpevFhSXhaW5YkfLskvKMtSxLe0ZYnJWFpy7c7JE2HpOmQNB2SpkPSdEia0l/4EklY2rIkYWmL/r4k/Km2LEl4Wls+5ZA0HZKmQ9J0SJoOSdMhaUp/4YOS8C3a8jtJ+KS2vCMJS1uWJHxKW5YkvKMtn3JImg5J0yFpOiRNh6TpkDS9+CJtWZKwtGVJwp9qyzuS8ElteUdb/lQSlra8oy3f7pA0HZKmQ9J0SJoOSdMhaUp/4YOS8Elt+VNJWNrytCQsbVmSsLTlHUn4nbY8LQlLW77BIWk6JE2HpOmQNB2SpkPSlP6CHpGEpS3vSMLSlqcl4UltWZLwjrZ8yiFpOiRNh6TpkDQdkqZD0vTiw5Lwk7XlaUl4WhL0zx2SpkPSdEiaDknTIWk6JE0vvkhbvkESnpaEpS1LEpYkvKMtfyoJS1ve0ZZvd0iaDknTIWk6JE2HpOnFD5GEp7XlGyThHW15RxKWtugvh6TpkDQdkqZD0nRImg5J0ws9pi3vSMLSlk9Kwp9KwtPa8g0OSdMhaTokTYek6ZA0HZKmF3pMEpa2LG15RxKWtixtWZLwpLa8IwlLWz7lkDQdkqZD0nRImg5J0yFpevFDtOXfKglLW5a2vCMJS1v+VBLekYSlLd/gkDQdkqZD0nRImg5J0yFpevFFkvBvlYSnJWFpyzuS8DttWdrytCQsbfmUQ9J0SJoOSdMhaTokTYekKf0FSb91SJoOSdMhaTokTYek6ZA0HZKmQ9J0SJoOSdMhaTokTYek6ZA0HZKmQ9J0SJoOSdMhaTokTYek6ZA0HZKmQ9J0SJoOSdP/AHKVDJXnVp/qAAAAAElFTkSuQmCC"
          />
        </div>
      </div>
      <ol>
        <li>
          Open Element on your other device
        </li>
        <li>
          <span>
            Select "
            <strong>
              Sign in with QR code
            </strong>
            "
          </span>
        </li>
        <li>
          Scan the QR code shown here
        </li>
        <li>
          Follow the remaining instructions
        </li>
      </ol>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    />
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate renders check code confirmation 1`] = `
<div>
  <div
    class="mx_LoginWithQR"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Enter the number shown on your other device
      </h1>
      <p
        class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
      >
        This will verify that the connection to your other device is secure.
      </p>
      <label
        for="mx_LoginWithQR_checkCode"
      >
        2-digit code
      </label>
      <div
        class="_container_17qhw_10 mx_LoginWithQR_checkCode_input mx_no_textinput"
      >
        <input
          autocomplete="one-time-code"
          class="_control_17qhw_25"
          id="mx_LoginWithQR_checkCode"
          inputmode="numeric"
          maxlength="2"
          minlength="0"
          pattern="\\d{2}"
          type="text"
        />
        <div
          aria-hidden="true"
          class="_digit_17qhw_49"
        />
        <div
          aria-hidden="true"
          class="_digit_17qhw_49"
        />
      </div>
      <div
        class="mx_ErrorMessage"
      />
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        data-testid="approve-login-button"
        role="button"
        tabindex="0"
      >
        Continue
      </button>
      <button
        class="_button_1nw83_8"
        data-kind="tertiary"
        data-size="lg"
        data-testid="decline-login-button"
        role="button"
        tabindex="0"
      >
        Cancel
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate renders spinner while loading 1`] = `
<div>
  <div
    class="mx_LoginWithQR"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_heading"
    >
      <div
        aria-label="Back"
        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
        data-testid="back-button"
        role="button"
        tabindex="0"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="m13.3 17.3-4.6-4.6a.9.9 0 0 1-.213-.325A1.1 1.1 0 0 1 8.425 12q0-.2.062-.375A.9.9 0 0 1 8.7 11.3l4.6-4.6a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7L10.8 12l3.9 3.9a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
          />
        </svg>
      </div>
      <div
        class="mx_LoginWithQR_breadcrumbs"
      >
        Sessions
         / 
        Link new device
      </div>
    </div>
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="mx_LoginWithQR_spinner"
      >
        <div>
          <div
            class="mx_Spinner"
          >
            <svg
              aria-label="Loading…"
              class="_icon_1855a_18"
              data-testid="spinner"
              fill="currentColor"
              height="1em"
              role="progressbar"
              style="width: 32px; height: 32px;"
              viewBox="0 0 24 24"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
                fill-rule="evenodd"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    />
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate renders spinner while signing in 1`] = `
<div>
  <div
    class="mx_LoginWithQR"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_heading"
    >
      <div
        aria-label="Back"
        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
        data-testid="back-button"
        role="button"
        tabindex="0"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="m13.3 17.3-4.6-4.6a.9.9 0 0 1-.213-.325A1.1 1.1 0 0 1 8.425 12q0-.2.062-.375A.9.9 0 0 1 8.7 11.3l4.6-4.6a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7L10.8 12l3.9 3.9a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
          />
        </svg>
      </div>
      <div
        class="mx_LoginWithQR_breadcrumbs"
      >
        Sessions
         / 
        Link new device
      </div>
    </div>
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="mx_LoginWithQR_spinner"
      >
        <div>
          <div
            class="mx_Spinner"
          >
            <svg
              aria-label="Loading…"
              class="_icon_1855a_18"
              data-testid="spinner"
              fill="currentColor"
              height="1em"
              role="progressbar"
              style="width: 32px; height: 32px;"
              viewBox="0 0 24 24"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
                fill-rule="evenodd"
              />
            </svg>
          </div>
          <p>
            Waiting for your other device
          </p>
        </div>
      </div>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        data-testid="cancel-button"
        role="button"
        tabindex="0"
      >
        Cancel
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate renders spinner while verifying 1`] = `
<div>
  <div
    class="mx_LoginWithQR"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_heading"
    >
      <div
        aria-label="Back"
        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
        data-testid="back-button"
        role="button"
        tabindex="0"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="m13.3 17.3-4.6-4.6a.9.9 0 0 1-.213-.325A1.1 1.1 0 0 1 8.425 12q0-.2.062-.375A.9.9 0 0 1 8.7 11.3l4.6-4.6a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7L10.8 12l3.9 3.9a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
          />
        </svg>
      </div>
      <div
        class="mx_LoginWithQR_breadcrumbs"
      >
        Sessions
         / 
        Link new device
      </div>
    </div>
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="mx_LoginWithQR_spinner"
      >
        <div>
          <div
            class="mx_Spinner"
          >
            <svg
              aria-label="Loading…"
              class="_icon_1855a_18"
              data-testid="spinner"
              fill="currentColor"
              height="1em"
              role="progressbar"
              style="width: 32px; height: 32px;"
              viewBox="0 0 24 24"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
                fill-rule="evenodd"
              />
            </svg>
          </div>
          <p>
            Completing set up of your new device
          </p>
        </div>
      </div>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    />
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.reciprocate renders spinner whilst QR generating 1`] = `
<div>
  <div
    class="mx_LoginWithQR"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_heading"
    >
      <div
        aria-label="Back"
        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
        data-testid="back-button"
        role="button"
        tabindex="0"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="m13.3 17.3-4.6-4.6a.9.9 0 0 1-.213-.325A1.1 1.1 0 0 1 8.425 12q0-.2.062-.375A.9.9 0 0 1 8.7 11.3l4.6-4.6a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7L10.8 12l3.9 3.9a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
          />
        </svg>
      </div>
      <div
        class="mx_LoginWithQR_breadcrumbs"
      >
        Sessions
         / 
        Link new device
      </div>
    </div>
    <div
      class="mx_LoginWithQR_main"
    >
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Scan the QR code with another device
      </h1>
      <div
        class="mx_LoginWithQR_qrWrapper"
      >
        <div
          class="mx_Spinner"
        >
          <svg
            aria-label="Loading…"
            class="_icon_1855a_18"
            data-testid="spinner"
            fill="currentColor"
            height="1em"
            role="progressbar"
            style="width: 32px; height: 32px;"
            viewBox="0 0 24 24"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              clip-rule="evenodd"
              d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
              fill-rule="evenodd"
            />
          </svg>
        </div>
      </div>
      <ol>
        <li>
          Open Element on your other device
        </li>
        <li>
          <span>
            Select "
            <strong>
              Sign in with QR code
            </strong>
            "
          </span>
        </li>
        <li>
          Scan the QR code shown here
        </li>
        <li>
          Follow the remaining instructions
        </li>
      </ol>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    />
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start errors renders authorization_expired 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        The sign in was not completed in time
      </h1>
      <p
        data-testid="cancellation-message"
      >
        Sign in expired. Please try again.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Start over
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start errors renders check_code_mismatch 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Something went wrong!
      </h1>
      <p
        data-testid="cancellation-message"
      >
        An unexpected error occurred. The request to connect your other device has been cancelled.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Start over
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start errors renders device_already_exists 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Something went wrong!
      </h1>
      <p
        data-testid="cancellation-message"
      >
        An unexpected error occurred. The request to connect your other device has been cancelled.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Start over
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start errors renders device_not_found 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Something went wrong!
      </h1>
      <p
        data-testid="cancellation-message"
      >
        An unexpected error occurred. The request to connect your other device has been cancelled.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Start over
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start errors renders etag_missing 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Something went wrong!
      </h1>
      <p
        data-testid="cancellation-message"
      >
        An unexpected error occurred. This may be due to a browser extension, proxy server, or server misconfiguration.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Start over
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start errors renders expired 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        The sign in was not completed in time
      </h1>
      <p
        data-testid="cancellation-message"
      >
        Sign in expired. Please try again.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Start over
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start errors renders homeserver_lacks_support 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            clip-rule="evenodd"
            d="M3 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm2 5V5h4v4zm-2 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm2 5v-4h4v4zm9-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm1 2v4h4V5z"
            fill-rule="evenodd"
          />
          <path
            d="M15 16v-3h-2v3z"
          />
          <path
            d="M17 16h-2v2h-2v3h2v-3h2v2h4v-2h-2v-5h-2z"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        QR code not supported
      </h1>
      <p
        data-testid="cancellation-message"
      >
        Your account provider doesn't support signing into a new device with a QR code.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        data-testid="cancel-button"
        role="button"
        tabindex="0"
      >
        Cancel
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start errors renders insecure_channel_detected 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Connection not secure
      </h1>
      A secure connection could not be made to the new device. Your existing devices are still safe and you don't need to worry about them.
      <h2
        class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"
        data-testid="cancellation-message"
      >
        Now what?
      </h2>
      <ol>
        <li>
          Try signing in to the other device again with a QR code in case this was a network problem
        </li>
        <li>
          If you encounter the same problem, try a different wifi network or use your mobile data instead of wifi
        </li>
        <li>
          If that doesn't work, sign in manually
        </li>
      </ol>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Start over
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start errors renders invalid_code 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Something went wrong!
      </h1>
      <p
        data-testid="cancellation-message"
      >
        An unexpected error occurred. The request to connect your other device has been cancelled.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Start over
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start errors renders other_device_already_signed_in 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="success"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="m10.6 13.8-2.15-2.15a.95.95 0 0 0-.7-.275.95.95 0 0 0-.7.275.95.95 0 0 0-.275.7q0 .425.275.7L9.9 15.9q.3.3.7.3t.7-.3l5.65-5.65a.95.95 0 0 0 .275-.7.95.95 0 0 0-.275-.7.95.95 0 0 0-.7-.275.95.95 0 0 0-.7.275zM12 22a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Your other device is already signed in
      </h1>
      <p
        data-testid="cancellation-message"
      >
        You don’t need to do anything else.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Start over
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start errors renders other_device_not_signed_in 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Something went wrong!
      </h1>
      <p
        data-testid="cancellation-message"
      >
        An unexpected error occurred. The request to connect your other device has been cancelled.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Start over
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start errors renders rate_limited 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Something went wrong!
      </h1>
      <p
        data-testid="cancellation-message"
      >
        Too many attempts in a short time. Wait some time before trying again.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Start over
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start errors renders unexpected_message_received 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Something went wrong!
      </h1>
      <p
        data-testid="cancellation-message"
      >
        An unexpected error occurred. The request to connect your other device has been cancelled.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Start over
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start errors renders unknown 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Something went wrong!
      </h1>
      <p
        data-testid="cancellation-message"
      >
        An unexpected error occurred. The request to connect your other device has been cancelled.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Start over
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start errors renders unsupported_protocol 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Other device not compatible
      </h1>
      <p
        data-testid="cancellation-message"
      >
        This device does not support signing in to the other device with a QR code.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        role="button"
        tabindex="0"
      >
        Start over
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start errors renders user_cancelled 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Sign in request cancelled
      </h1>
      <p
        data-testid="cancellation-message"
      >
        The sign in was cancelled on the other device.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        data-testid="cancel-button"
        role="button"
        tabindex="0"
      >
        Cancel
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start errors renders user_declined 1`] = `
<div>
  <div
    class="mx_LoginWithQR mx_LoginWithQR_error"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="critical"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Sign in declined
      </h1>
      <p
        data-testid="cancellation-message"
      >
        You or the account provider declined the sign in request.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        data-testid="cancel-button"
        role="button"
        tabindex="0"
      >
        Cancel
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start renders QR code 1`] = `
<div>
  <div
    class="mx_LoginWithQR"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Scan the QR code
      </h1>
      <div
        class="mx_LoginWithQR_qrWrapper"
      >
        <div
          class="mx_QRCode"
        >
          <img
            alt="QR Code"
            class="mx_VerificationQRCode"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAklEQVR4AewaftIAAAPWSURBVO3BQY5jBxYDweSD7n9lTu+8aQJu+Y+gsjMi/QVJv3VImg5J0yFpOiRNh6TpkDQdkqZD0nRImg5J0yFpOiRNh6TpkDQdkqZD0nRImg5J0yFpOiRNh6TpkDQdkqZD0nRImg5J0yFpevFhSfjJ2vKOJCxtWZLwjrYsSfjJ2vIph6TpkDQdkqZD0nRImg5J04sv0pZvkIRPSsI72vK0tnyDJHyDQ9J0SJoOSdMhaTokTYek6cUPkYSnteVJSXhHW5YkLElY2vKkJDytLd/ukDQdkqZD0nRImg5J0yFpeqHHtGVJwtPaov+vQ9J0SJoOSdMhaTokTYek6YU+oi1LEpa2LElY2qJ/7pA0HZKmQ9J0SJoOSdMhaXrxQ7Tl36ot364t/0WHpOmQNB2SpkPSdEiaXnyRJPxkSVjasiRhacsnJUF/OSRNh6TpkDQdkqZD0nRIml58WFv+i5KwtGVJwtPaor/nkDQdkqZD0nRImg5J0yFpevFhSXhaW5YkfLskvKMtSxLe0ZYnJWFpy7c7JE2HpOmQNB2SpkPSdEia0l/4EklY2rIkYWmL/r4k/Km2LEl4Wls+5ZA0HZKmQ9J0SJoOSdMhaUp/4YOS8C3a8jtJ+KS2vCMJS1uWJHxKW5YkvKMtn3JImg5J0yFpOiRNh6TpkDS9+CJtWZKwtGVJwp9qyzuS8ElteUdb/lQSlra8oy3f7pA0HZKmQ9J0SJoOSdMhaUp/4YOS8Elt+VNJWNrytCQsbVmSsLTlHUn4nbY8LQlLW77BIWk6JE2HpOmQNB2SpkPSlP6CHpGEpS3vSMLSlqcl4UltWZLwjrZ8yiFpOiRNh6TpkDQdkqZD0vTiw5Lwk7XlaUl4WhL0zx2SpkPSdEiaDknTIWk6JE0vvkhbvkESnpaEpS1LEpYkvKMtfyoJS1ve0ZZvd0iaDknTIWk6JE2HpOnFD5GEp7XlGyThHW15RxKWtugvh6TpkDQdkqZD0nRImg5J0ws9pi3vSMLSlk9Kwp9KwtPa8g0OSdMhaTokTYek6ZA0HZKmF3pMEpa2LG15RxKWtixtWZLwpLa8IwlLWz7lkDQdkqZD0nRImg5J0yFpevFDtOXfKglLW5a2vCMJS1v+VBLekYSlLd/gkDQdkqZD0nRImg5J0yFpevFFkvBvlYSnJWFpyzuS8DttWdrytCQsbfmUQ9J0SJoOSdMhaTokTYekKf0FSb91SJoOSdMhaTokTYek6ZA0HZKmQ9J0SJoOSdMhaTokTYek6ZA0HZKmQ9J0SJoOSdMhaTokTYek6ZA0HZKmQ9J0SJoOSdP/AHKVDJXnVp/qAAAAAElFTkSuQmCC"
          />
        </div>
      </div>
      <ol>
        <li>
          Open Element on your mobile device
        </li>
        <li>
          <span>
            Tap your avatar and select "
            <strong>
              Link new device
            </strong>
            "
          </span>
        </li>
        <li>
          <span>
            Choose "
            <strong>
              Desktop computer
            </strong>
            "
          </span>
        </li>
        <li>
          <span>
            Select "
            <strong>
              Ready to scan
            </strong>
            " and scan the QR code shown here
          </span>
        </li>
        <li>
          Follow the remaining instructions
        </li>
      </ol>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    />
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start renders check code confirmation 1`] = `
<div>
  <div
    class="mx_LoginWithQR"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="primary"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M7 23q-.824 0-1.412-.587A1.93 1.93 0 0 1 5 21V3q0-.824.588-1.412A1.93 1.93 0 0 1 7 1h10q.824 0 1.413.587Q19 2.176 19 3v18q0 .824-.587 1.413A1.93 1.93 0 0 1 17 23zm0-5h10V6H7z"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Enter the number shown on your other device
      </h1>
      <p
        class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
      >
        This will verify that the connection to your other device is secure.
      </p>
      <label
        for="mx_LoginWithQR_checkCode"
      >
        2-digit code
      </label>
      <div
        class="_container_17qhw_10 mx_LoginWithQR_checkCode_input mx_no_textinput"
      >
        <input
          autocomplete="one-time-code"
          class="_control_17qhw_25"
          id="mx_LoginWithQR_checkCode"
          inputmode="numeric"
          maxlength="2"
          minlength="0"
          pattern="\\d{2}"
          type="text"
        />
        <div
          aria-hidden="true"
          class="_digit_17qhw_49"
        />
        <div
          aria-hidden="true"
          class="_digit_17qhw_49"
        />
      </div>
      <div
        class="mx_ErrorMessage"
      />
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        data-testid="approve-login-button"
        role="button"
        tabindex="0"
      >
        Continue
      </button>
      <button
        class="_button_1nw83_8"
        data-kind="tertiary"
        data-size="lg"
        data-testid="decline-login-button"
        role="button"
        tabindex="0"
      >
        Cancel
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start renders spinner while loading 1`] = `
<div>
  <div
    class="mx_LoginWithQR"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="mx_LoginWithQR_spinner"
      >
        <div>
          <div
            class="mx_Spinner"
          >
            <svg
              aria-label="Loading…"
              class="_icon_1855a_18"
              data-testid="spinner"
              fill="currentColor"
              height="1em"
              role="progressbar"
              style="width: 32px; height: 32px;"
              viewBox="0 0 24 24"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
                fill-rule="evenodd"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    />
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start renders spinner while signing in 1`] = `
<div>
  <div
    class="mx_LoginWithQR"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="_big-icon_1ssbv_8"
        data-kind="primary"
        data-size="lg"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
          />
        </svg>
      </div>
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Your verification code
      </h1>
      <p
        class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
      >
        Your account provider may ask for the following code to verify the sign in.
      </p>
      <div
        class="_container_17qhw_10 mx_LoginWithQR_checkCode_input mx_no_textinput"
      >
        <input
          autocomplete="one-time-code"
          class="_control_17qhw_25"
          disabled=""
          inputmode="numeric"
          maxlength="6"
          minlength="0"
          pattern="\\d{6}"
          type="text"
        />
        <div
          aria-hidden="true"
          class="_digit_17qhw_49"
        />
        <div
          aria-hidden="true"
          class="_digit_17qhw_49"
        />
        <div
          aria-hidden="true"
          class="_digit_17qhw_49"
        />
        <div
          aria-hidden="true"
          class="_digit_17qhw_49"
        />
        <div
          aria-hidden="true"
          class="_digit_17qhw_49"
        />
        <div
          aria-hidden="true"
          class="_digit_17qhw_49"
        />
      </div>
      <div
        class="mx_LoginWithQR_spinner"
      >
        <div>
          <div
            class="mx_Spinner"
          >
            <svg
              aria-label="Loading…"
              class="_icon_1855a_18"
              data-testid="spinner"
              fill="currentColor"
              height="1em"
              role="progressbar"
              style="width: 32px; height: 32px;"
              viewBox="0 0 24 24"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
                fill-rule="evenodd"
              />
            </svg>
          </div>
          <p>
            Waiting for your other device
          </p>
        </div>
      </div>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <button
        class="_button_1nw83_8"
        data-kind="primary"
        data-size="lg"
        data-testid="cancel-button"
        role="button"
        tabindex="0"
      >
        Cancel
      </button>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start renders spinner while verifying 1`] = `
<div>
  <div
    class="mx_LoginWithQR"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="mx_LoginWithQR_spinner"
      >
        <div>
          <div
            class="mx_Spinner"
          >
            <svg
              aria-label="Loading…"
              class="_icon_1855a_18"
              data-testid="spinner"
              fill="currentColor"
              height="1em"
              role="progressbar"
              style="width: 32px; height: 32px;"
              viewBox="0 0 24 24"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
                fill-rule="evenodd"
              />
            </svg>
          </div>
          <p>
            Completing set up of your new device
          </p>
        </div>
      </div>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    />
  </div>
</div>
`;

exports[`<LoginWithQRFlow /> login.start renders spinner whilst QR generating 1`] = `
<div>
  <div
    class="mx_LoginWithQR"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_main"
    >
      <h1
        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
      >
        Scan the QR code
      </h1>
      <div
        class="mx_LoginWithQR_qrWrapper"
      >
        <div
          class="mx_Spinner"
        >
          <svg
            aria-label="Loading…"
            class="_icon_1855a_18"
            data-testid="spinner"
            fill="currentColor"
            height="1em"
            role="progressbar"
            style="width: 32px; height: 32px;"
            viewBox="0 0 24 24"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              clip-rule="evenodd"
              d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
              fill-rule="evenodd"
            />
          </svg>
        </div>
      </div>
      <ol>
        <li>
          Open Element on your mobile device
        </li>
        <li>
          <span>
            Tap your avatar and select "
            <strong>
              Link new device
            </strong>
            "
          </span>
        </li>
        <li>
          <span>
            Choose "
            <strong>
              Desktop computer
            </strong>
            "
          </span>
        </li>
        <li>
          <span>
            Select "
            <strong>
              Ready to scan
            </strong>
            " and scan the QR code shown here
          </span>
        </li>
        <li>
          Follow the remaining instructions
        </li>
      </ol>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    />
  </div>
</div>
`;
