copay/views/createProfile.html

<div class="createProfile" ng-controller="CreateProfileController" ng-init="init()">

  <div data-alert class="loading-screen" ng-show="loading">
    <div class="spinner">
      <div class="contener_general">
        <div class="contener_mixte">
          <div class="ballcolor ball_1">&nbsp;</div>
        </div>
        <div class="contener_mixte">
          <div class="ballcolor ball_2">&nbsp;</div>
        </div>
        <div class="contener_mixte">
          <div class="ballcolor ball_3">&nbsp;</div>
        </div>
        <div class="contener_mixte">
          <div class="ballcolor ball_4">&nbsp;</div>
        </div>
      </div>
      <span class="text-gray size-12" translate>Creating profile...</span>
    </div>
  </div>

  <div class="large-4 large-centered medium-6 medium-centered columns" ng-show="!loading  && !askForPin">
    <div class="logo-setup">
      <img src="img/logo-negative-beta.svg" alt="Copay" width="146" height="59">
      <div ng-include="'views/includes/version.html'"></div>
    </div>
    <div class="box-setup">
      <div class="box-notification" ng-show="error">
        <div class="box-icon error">
          <i class="fi-x size-24"></i>
        </div>
        <span class="text-warning size-14">
          {{error|translate}}
        </span>
      </div>


      <form ng-show="createStep == 'storage' " novalidate>
        <tabset>
          <tab heading="In the cloud" style="width: 50%;" ng-click="useLocalstorage=false">
            <div ng-if="!useLocalstorage">
              <div class="line-b">
                <div class="bg-circle"><i class="icon-wallet"></i>
                </div>
                <span class="text-gray">Access your wallets anywhere</span>
              </div>
              <div class="line-b">
                <div class="bg-circle"><i class="icon-download"></i>
                </div>
                <span class="text-gray">Backups managed by the server</span>
              </div>
              <div class="">
                <div class="bg-circle"><i class="icon-email"></i>
                </div>
                <span class="text-gray">Email address confirmation needed</span>
              </div>
            </div>
            <button translate class="button primary radius expand m0" ng-click="setStorage(useLocalstorage)">
              Create in the cloud
            </button>
          </tab>
          <tab heading="In your device" style="width: 50%;" ng-click="useLocalstorage=true">
            <div ng-if="useLocalstorage">
              <div class="line-b">
                <div class="bg-circle"><i class="icon-wallet"></i>
                </div>
                <span class="text-gray">Todo1</span>
              </div>
              <div class="line-b">
                <div class="bg-circle"><i class="icon-download"></i>
                </div>
                <span class="text-gray">Todo2</span>
              </div>
              <div class="">
                <div class="bg-circle"><i class="icon-email"></i>
                </div>
                <span class="text-gray">Todo3</span>
              </div>
            </div>
            <button translate class="button primary radius expand m0" ng-click="setStorage(useLocalstorage)">
              Create in this device
            </button>
          </tab>
        </tabset>

        <div class="box-setup-footer">
          <div class="left">
            <a class="text-gray" href="#!/">
              <i class="icon-arrow-left4"></i> 
              <span translate>Back</span>
            </a>
          </div>
        </div>
      </form>

      <form ng-show="createStep == 'email'" name="emailForm" ng-submit="setEmailOrUsername(emailForm)" novalidate>
        <div class="box-setup">


            <div ng-if="useLocalstorage"> [x] Creating in this device </div>
            <div ng-if="!useLocalstorage"> [x] Creating in the cloud </div>

          <div class="m5b text-right" ng-if="useEmail">
            <span translate class="has-error size-12" ng-show="emailForm.email.$invalid &&
            !emailForm.email.$pristine">
              <span class="icon-input"><i class="fi-x"></i></span>
              Not valid
            </span>
            <span class="icon-input" ng-show="!emailForm.email.$invalid &&
            !emailForm.email.$pristine"><i class="fi-check"></i></span>
          </div>

          <div class="input" ng-if="useEmail">
            <input type="email" ng-model="email" class="form-control fi-email" name="email" placeholder="Email" required auto-focus="!isMobile">
            <i class="icon-email"></i>
          </div>
          <div class="input" ng-if="!useEmail">
            <input type="text" ng-model="username" class="form-control fi-user" name="username" placeholder="Username" required auto-focus>
            <i class="icon-user"></i>
          </div>
        </div>

        <button translate type="submit" class="button primary radius expand m0" ng-disabled="(useEmail && emailForm.email.$invalid) || (!useEmail && emailForm.username.$invalid)">
          Next
        </button

>
        <div class="box-setup-footer">
          <div class="left">
            <a class="text-gray" ng-click="createStep='storage'">
              <i class="icon-arrow-left4"></i> 
              <span translate>Back</span>
            </a>
          </div>
        </div>
 
      </form>

      <form ng-show="createStep == 'pass'" name="passForm" ng-submit="createProfile(passForm)" novalidate>

            <div ng-if="useLocalstorage"> [x] Creating in this device </div>
            <div ng-if="!useLocalstorage"> [x] Creating in the cloud </div>
            <div > -&gt; {{userOrEmail}} </div>


        <div class="input">
          <input id="password" type="password" ng-model="$parent.password" class="form-control" name="password" placeholder="{{'Choose a password'|translate}}" check-strength="passwordStrength" tooltip-html-unsafe="Password strength: <b>{{passwordStrength}}</b><br/><span class='size-12'>Tip: Use lower and uppercase, numbers and symbols</span>" tooltip-trigger="focus" required tooltip-placement="top">
          <i class="icon-locked"></i>
        </div>

        <div class="m5b text-right">
          <span translate class="has-error size-12" ng-show="passForm.repeatpassword.$dirty &&
            passForm.repeatpassword.$invalid">
            <span class="icon-input"><i class="fi-x"></i></span>
          {{'Passwords must match'|translate}}
          </span>
          <span class="icon-input" ng-show="passForm.repeatpassword.$dirty &&
            !passForm.repeatpassword.$invalid"><i class="fi-check"></i></span> 
        </div>

        <div class="input">
          <input type="password" ng-model="repeatpassword" class="input form-control" name="repeatpassword" placeholder="{{'Repeat password'|translate}}" match="password" required>
          <i class="icon-locked"></i>
        </div>

        <button translate type="submit" class="button primary radius expand m0" ng-disabled="passForm.$invalid || loading">
          Create Profile
        </button>

        <div class="box-setup-footer">
          <div class="left">
            <a class="text-gray" ng-click="createStep='email'">
              <i class="icon-arrow-left4"></i> 
              <span translate>Back</span>
            </a>
          </div>
        </div>
      </form>

    </div>
  </div>

  <div class="large-4 large-centered medium-6 medium-centered columns" ng-show="!loading && askForPin">
    <div class="box-setup">
      <h1><span translate>Set up a </span> <b> PIN </b>?</h1>
      <p class="size-14">Enter a 4-digit number for easier access from this device</p>

      <div class="box-notification" ng-show="error">
        <div class="box-icon error">
          <i class="fi-x size-24"></i>
        </div>
        <span class="text-warning size-14">
          {{error|translate}}
        </span>
      </div>

      <form name="setPinForm" ng-submit="createPin(setPinForm)" novalidate>
        <div class="input" ng-show="askForPin == 1">
          <input id="newpin" type="tel" ng-model="newpin" class="form-control" ng-maxlength="4" ng-minlength="4" maxlength="4" ng-pattern="/^[0-9]{1,4}$/" placeholder="PIN" name="newpin" required show-focus="askForPin == 1">
          <i class="icon-locked"></i>
        </div>
        <div class="input" ng-show="askForPin == 2">
          <input id="repeatpin" type="tel" ng-model="repeatpin" class="form-control" ng-maxlength="4" ng-minlength="4" maxlength="4" ng-pattern="/^[0-9]{1,4}$/" placeholder="Confirm your PIN" name="repeatpin" required show-focus="askForPin == 2">
          <i class="icon-locked"></i>
        </div>

        <div class="box-setup-footer row collapse">
          <div class="large-6 medium-6 small-6 columns">
            <a class="button secondary radius m0" ng-click="createDefaultWallet()">
              <span translate>Skip</span> 
            </a>
          </div>
          <div class="large-6 medium-6 small-6 columns text-right">
            <button translate type="submit" class="button primary radius expand m0" ng-disabled="setPinForm.$invalid || error">
              OK
            </button>
          </div>
        </div>


      </form>
    </div>
  </div>
</div>