Wallet/public/views/join.html

<div
  class="topbar-container"
  ng-include="'views/includes/topbar.html'"
  ng-init="titleSection='Join shared wallet'; goBackToState = 'add'; noColor = true">
</div>


<div class="content p20v" ng-controller="joinController as join">
  <div class="onGoingProcess" ng-show="join.loading && !join.hwWallet">
    <div class="onGoingProcess-content" ng-style="{'background-color':'#222'}">
    <div class="spinner">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
    </div>
    <span translate>Joining Wallet...</span>
    </div>
  </div>

  <div class="onGoingProcess" ng-show="join.hwWallet">
    <div class="onGoingProcess-content" ng-style="{'background-color':'#222'}">
    <div class="spinner">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
    </div>
    <span translate>Connecting to {{join.hwWallet}} Wallet...</span>
    </div>
  </div>

  <form name="joinForm" ng-submit="join.join(joinForm)" novalidate>
    <div class="row">
      <div class="large-12 columns">
        <div class="box-notification" ng-show="join.error ">
          <span class="text-warning size-14">
            {{join.error|translate}}
          </span>
        </div>

        <div>
          <label><span translate>Your nickname</span>
            <div class="input">
              <input type="text" placeholder="{{'John'|translate}}" class="form-control" name="myName" ng-model="myName" ng-required="true">
            </div>
          </label>
        </div>

        <div class="row collapse">
          <label for="secret" class="left"><span translate>Wallet Invitation</span>
            <small translate ng-show="joinForm.secret.$pristine">Required</small>
          </label>
          <span class="has-error right size-12" ng-show="joinForm.secret.$invalid
            && !joinForm.secret.$pristine">
            <span class="icon-input"><i class="fi-x"></i></span>
            <span translate>Wallet Invitation is not valid!</span>
          </span>
          <small class="icon-input right" ng-show="joinForm.secret.$valid
            && !joinForm.secret.$pristine"><i class="fi-check"></i></small>
        </div>

        <div class="input">
          <input id="secret" type="text" placeholder="{{'Paste invitation here'|translate}}" name="secret" ng-model="secret" wallet-secret required>
          <div class="qr-scanner-input">
            <qr-scanner on-scan="join.onQrCodeScanned(data)"></qr-scanner>
          </div>
        </div>

        <div class="m10t oh" ng-init="hideAdv=true">
          <a class="button outline light-gray expand tiny" ng-click="hideAdv=!hideAdv">
            <i class="fi-widget m3r"></i>
            <span translate ng-hide="!hideAdv">Show advanced options</span>
            <span translate ng-hide="hideAdv">Hide advanced options</span>
            <i ng-if="hideAdv" class="icon-arrow-down4"></i>
            <i ng-if="!hideAdv" class="icon-arrow-up4"></i>
          </a>
        </div>

        <div ng-hide="hideAdv" class="row">
          <div class="large-12 columns">
            <div>
              <label for="bws" class="oh">
                <span>Wallet Service URL</span>
                <input type="text" id="bwsurl" name="bwsurl" ng-model="bwsurl">
              </label>
            </div>

            <div>
              <label><span translate>Wallet Seed</span>
              <select class="m10t" ng-model="seedSource"
                ng-options="seed as seed.label for seed in join.seedOptions"
                ng-change="join.setSeedSource()">
              </select>
              </label>
            </div>

            <div ng-show="join.seedSourceId == 'trezor' || join.seedSourceId == 'ledger'">

              <label class="oh"><span translate>Account</span>
                <select class="m10t" ng-model="account" ng-options="externalIndex as externalIndex for externalIndex in join.accountValues">
                </select>
              </label>
              <div class="oh text-gray line-b  size-12   p10b m20b"><span translate>Multiple wallets accounts are supported on the device simultaneously. Select which account should be used for this wallet</div>
            </div>

            <div class="box-notification" ng-show="join.seedSourceId=='new' && createPassphrase">
              <span class="text-warning size-14">
                <i class="fi-alert"></i>
                <span translate>
                WARNING: Passphrase cannot be recovered. <b>Be sure to write it down</b>. The wallet can not be restored without the passphrase.
                </span>
              </span>
            </div>

            <div ng-show="join.seedSourceId=='new' ">
              <label for="createPassphrase"  ><span translate>Add a Seed Passphrase</span>  <small translate>Add an optional passphrase to secure the seed</small>
                <div class="input">
                  <input type="text" class="form-control"
                  name="createPassphrase" ng-model="createPassphrase">
                </div>
              </label>
            </div>

            <div ng-show="join.seedSourceId=='set'">
              <label for="ext-master">
                <span translate>Wallet Seed</span>
                <small translate>Enter the seed words (BIP39)</small>
                <input id="ext-master"
                type="text"
                name="privateKey" ng-model="privateKey">
              </label>
            </div>

            <div ng-show="join.seedSourceId=='set'">
              <label for="passphrase"> <span translate>Seed Passphrase</span>  <small translate>The seed could require a passphrase to be imported</small>
                <div class="input">
                  <input type="text" class="form-control" name="passphrase" ng-model="passphrase">
                </div>
              </label>
            </div>

            <div ng-show="join.seedSourceId == 'set'">
              <label class="oh"><span translate>Account</span>
                <select class="m10t" ng-model="accountForSeed" ng-options="externalIndex as externalIndex for externalIndex in join.accountValuesForSeed">
                </select>
              </label>
              <div class="oh text-gray line-b  size-12   p10b m20b"><span translate>Multiple accounts can be derived from the same seed. Specify which account to use</div>
            </div>


          </div> <!-- columns -->
        </div> <!-- advanced -->

        <button translate type="submit" class="button expand black m0 round"
          ng-disabled="joinForm.$invalid || join.loading">Join</button>
      </div> <!-- large-12 columns -->
    </div> <!-- row -->
  </form>
</div>

<div class="extra-margin-bottom"></div>