solo-webupdate/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Solo Webupdate</title>
    <link rel="stylesheet" href="css/styles.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>

<body onload="prepare()">
  <div id="app" v-cloak>
    <section class="section">
      <div class="container">
        <h1 class="title">
          Solo Webupdate
        </h1>
        <p class="content">
          <!-- https://stackoverflow.com/a/47033801/4768845 -->
          <span v-if="platform_description" v-text="platform_description"></span>
          <br>

          <span v-if="webauthn_support" v-text="webauthn_support"></span>
          <br>

          <!-- Solo firmware version:
          <span v-if="solo_version" v-text="solo_version"></span>
          <span v-else>unknown</span>
          <br> -->

          Latest Solo firmware version:
          <span v-if="stable_version" v-text="stable_version"></span>
          <span v-else>unknown</span>
        </p>
        <template v-if="is_linux">
          <div class="message is-warning">
            <div class="message-header">
              <p>Linux needs udev rules</p>
            </div>
            <div class="message-body">
              <p>On Linux, you likely need "udev rules" installed to use your key.</p>
              <p>See <a href="https://docs.solokeys.io/solo/udev/">https://docs.solokeys.io/solo/udev/</a> for more information.</p>
            </div>
          </div>
        </template>

        <button onclick="update_firmware()" class="button is-primary">Update</button>

        <!-- <template v-if="ask_for_attestation">
          <article class="message is-warning">
            <div class="message-header">
              <p>INSPECTING KEY</p>
            </div>
            <div class="message-body">
              Please press the button on your key!
              <br>
              If nothing happens, replug and press again.
            </div>
          </article>
        </template> -->

        <!-- <template v-if="cannot_inspect">
          <article class="message is-danger">
            <div class="message-header">
              <p>DEVICE IS IN BOOTLOADER MODE</p>
            </div>
            <div class="message-body">
              <ul>
                <li class="list-item"> To inspect your key, unplug, replug, and try to inspect again </li>
                <li class="list-item"> If your key remains in bootloader mode, try "advanced mode" below, and flash the appropriate firmware (secure/hacker).</li>
              </ul>
            </div>
          </article>
        </template> -->
      </div>
    </section>




    <section class="section">

      <template v-if="correct_firmware">
        <div class="container" v-if="needs_update">
          <p>
            Since the firmware is out of date, it needs an update.
            <br>
            Please unplug your key, and plug it back in while holding the button pressed until the LED blinks yellow.
            <br>
            You may let go of the button once the LED blinks yellow.
          </p>
          <button onclick="update()" class="button is-primary" >Update Solo</button>
          <p>
            <span v-if="update_status" v-text="update_status"></span>
            <br>
            <span v-if="update_progress" v-text="update_progress"></span>
          </p>
        </div>
        <div class="container" v-else-if="is_solo_secure || is_solo_hacker">

          <template v-if="cannot_flash">
            <article class="message is-danger">
              <div class="message-header">
                <p>DEVICE IS NOT IN BOOTLOADER MODE</p>
              </div>
              <div class="message-body">
                <p>Please unplug your key, and plug in while keeping pressed until the LED blinks yellow.</p>
                <p>Then try to flash again</p>
              </div>
            </article>
          </template>

          <template>
            <article class="message is-warning">
              <div class="message-header">
                <p>DO NOT TAB OUT</p>
              </div>
              <div class="message-body">
                During the firmware update, you will see flashing popups - this is normal.
                <br>
                Do NOT TAB OUT during the update, or it will abort.
              </div>
            </article>
          </template>

          <button onclick="update()" class="button is-primary" >Retry update</button>
          <p>
            <span v-if="update_status" v-text="update_status"></span>
            <br>
            <span v-if="update_progress" v-text="update_progress"></span>
            <progress class="progress is-success is-large" v-bind:value="p_progress" max="100" v-if="p_progress">{{ p_progress }}%</progress>
          </p>

          <template v-if="update_success">
            <article class="message is-success">
              <div class="message-header">
                <p>UPDATE SUCCESSFUL!</p>
              </div>
              <div class="message-body">
                Your key is now updated.
              </div>
            </article>
          </template>

        </div>
      </template>

      <template v-else>
        <article class="message is-danger">
          <div class="message-header">
            <p>SITE FIRMWARE OUT OF DATE!</p>
          </div>
          <div class="message-body">
            <p>Please inform SoloKeys!</p>
            <p>Firmware flashing deactivated.</p>
          </div>
        </article>
      </template>

    </section>

    <section class="section">
              <div class="container">
            <article class="message is-warning">
              <div class="message-header">
                <h3>This updater is deprecated.  But you can still try to use it.</h3>
              </div>
              <div class="message-body">
                <p>
                  Due to FIDO stacks on various browsers and operating systems not being
                  able to provide a good UX for this process (or being possible at all),
                  this updater is deprecated.  Be on lookout for 
                  <a href="https://github.com/solokeys/solo-desktop">Solo Desktop</a>, coming
                  very soon.
                </p>
                <br>
                <p>
                  You can also update using our <a href="https://github.com/solokeys/solo-python">command line tool, which is provided as a python package</a>.
                </p>
                <br>
                <p>
                  It was fun while it lasted.
                </p>
              </div>
            </article>
              </div>
    </section>

    <section class="section">
      <div class="container">
        <a href="https://github.com/solokeys/solo-webupdate"><img src="images/github.png" height=32 width=32>github.com/solokeys/solo-webupdate</a>
      </div>
    </section>
    <section class="section">
      <div class="container">
        <template v-if="advanced_mode">
          <br>
          <br>
          <br>
        </template>
      </div>
    </section>
  </div>
</body

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- production version, optimized for size and speed -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->

<!-- external; permissive licenses -->
<script src="js/vendor/cbor.js"></script>
<script src="js/vendor/platform.js"></script>
<script src="js/vendor/sha256.js"></script>
<script src="js/vendor/intel-hex.js"></script>
<script src="js/vendor/u2f-api.js"></script>

<!-- our stuff -->
<script src="js/constants.js"></script>
<script src="js/helpers.js"></script>
<script src="js/ctaphid.js"></script>
<script src="js/main.js"></script>
</html>