mail/src/tpl/login-privatekey-download.html

<section class="page">
  <div class="page__canvas">
    <header class="page__header">
      <img src="img/whiteout_logo.svg" alt="whiteout.io">
    </header>
    <main class="page__main">

      <div ng-show="step === 1">
        <h2 class="typo-title">Key sync</h2>
        <p class="typo-paragraph">We have sent you an email containing a recovery token. Please copy and paste the token below to download your key.</p>
        <form class="form" name="tokenForm">
          <p class="form__error-message" ng-show="errMsg">{{errMsg}}</p>

          <div class="form__row">
            <input type="text" class="input-text input-text--big" ng-class="{'input-text--error':incorrect}"
              size="6" maxlength="6" ng-model="recoveryToken" placeholder="Token" wo-focus-me="step === 1" pattern="([a-zA-Z0-9]*)" required>
          </div>
          <div class="spinner-block" ng-show="busy">
            <span class="spinner spinner--big"></span>
          </div>
          <div class="form__row">
            <button class="btn btn--big" type="submit" ng-click="checkToken()">Confirm token</button>
          </div>
        </form>

        <form class="form">
          <fieldset class="form-fieldset">
            <legend>Got USB?</legend>
            <p class="typo-paragraph">
              You can also import the key file manually if you're on a device with USB access and your key is on a flash drive.
            </p>
          </fieldset>
          <div class="form__row">
            <a class="btn btn--secondary" href="#login-new-device">Import key file</a>
          </div>
        </form>
      </div>

      <div ng-show="step === 2">
        <h2 class="typo-title">Key sync</h2>
        <p class="typo-paragraph">Please enter the keychain code you wrote down during sync setup.</p>
        <form class="form" name="codeForm">
          <p class="form__error-message" ng-show="errMsg">{{errMsg}}</p>

          <div class="form__row">
            <div class="input-code">
              <input type="text" class="input-text" size="4" maxlength="4" ng-model="code0" wo-focus-me="step === 2" focus-next required ng-paste="handlePaste($event)"> -
              <input type="text" class="input-text" size="4" maxlength="4" ng-model="code1" focus-next required> -
              <input type="text" class="input-text" size="4" maxlength="4" ng-model="code2" focus-next required> -
              <input type="text" class="input-text" size="4" maxlength="4" ng-model="code3" focus-next required> -
              <input type="text" class="input-text" size="4" maxlength="4" ng-model="code4" focus-next required> -
              <input type="text" class="input-text" size="4" maxlength="4" ng-model="code5" required>
            </div>
          </div>
          <div class="spinner-block" ng-show="busy">
            <span class="spinner spinner--big"></span>
          </div>
          <div class="form__row">
            <button class="btn" type="submit" ng-click="checkCode()">Complete sync</button>
          </div>
        </form>
        <p class="typo-paragraph">
          <a href="https://whiteout.io/revocation.html" title="Click here to reset your account." target="_blank">Lost your keychain code?</a>
        </p>
      </div>

    </main>
    <div ng-include="'tpl/page-footer.html'"></div>
  </div>
</section>