Wallet/views/createProfile.html

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

  <div ng-if="!$root.starting && askForPin">
    <div ng-include="'views/includes/pin-number.html'"></div>
  </div>

  <div ng-show="$root.starting">
    <div ng-include="'views/includes/loading.html'" ng-init="title = 'Creating profile'"></div>
  </div>

  <div class="row m20b" ng-show="!$root.starting && !askForPin">
  <div class="large-4 large-centered medium-7 medium-centered columns">
    <div class="logo-setup hide-for-small-only" ng-hide="hideForWP">
      <img src="img/logo-negative-beta.svg" alt="Copay" width="100">
    </div>
    <div>

      <div class="clipo" ng-show="createStep == 'storage' && !hideForWP ">
        <img src="img/clipo-signup1.png" alt="clipo" width="311">
      </div>

      <div ng-show="createStep == 'email'">
        <div class="clipo" ng-if="useLocalstorage  && !hideForWP" >
          <img src="img/clipo-signup2-1.png" alt="clipo" width="373">
        </div>
        <div class="clipo" ng-if="!useLocalstorage  && !hideForWP">
          <img src="img/clipo-signup2.png" alt="clipo" width="373">
        </div>
        <h2 ng-if="!useLocalstorage" ng-hide="hideForWP"> Creating in the cloud </h2>
          <h2 ng-if="useLocalstorage" ng-hide="hideForWP"> Creating on this device </h2>
      </div>

      <div ng-show="createStep == 'pass'">
        <div class="clipo" ng-hide="hideForWP">
          <img src="img/clipo-signup3.png" alt="clipo" width="380">
        </div>

          <h2 ng-if="useLocalstorage" ng-hide="hideForWP"> Creating on this device </h2>
          <h2 ng-if="!useLocalstorage" ng-hide="hideForWP"> Creating in the cloud </h2>
          <div class="text-gray text-center m20b" ng-hide="hideForWP">{{userOrEmail}}</div>
      </div>

      <div class="box-notification" ng-show="error  && !passwordStrength">
        <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 style="width: 50%;" select="selectStorage('remote')">
            <tab-heading>
              <span>In the Cloud </span>
              <br>
              <span class="size-10 text-gray">( Recommended )</span>
            </tab-heading>
            <div class="content-item">
              <div class="bg-circle"><i class="icon-wallet"></i>
              </div>
              <span class="text-gray">Access your wallets anywhere</span>
            </div>
            <div class="content-item">
              <div class="bg-circle"><i class="icon-download"></i>
              </div>
              <span class="text-gray">Backups managed by the server</span>
            </div>
            <div class="content-item line-none">
              <div class="bg-circle"><i class="icon-email"></i>
              </div>
              <span class="text-gray">Email address confirmation needed</span>
            </div>
          </tab>
          <tab style="width: 50%;" select="selectStorage('local')">
            <tab-heading>
              <div class="m5t">On this Device</div>
            </tab-heading>
            <div class="content-item">
              <div class="bg-circle"><i class="icon-locked"></i>
              </div>
              <span class="text-gray">Your private keys never leave this device</span>
            </div>
            <div class="content-item">
              <div class="bg-circle"><i class="icon-person"></i>
              </div>
              <span class="text-gray">No email required</span>
            </div>
            <div class="content-item line-none">
              <div class="bg-circle"><i class="icon-download"></i>
              </div>
              <span class="text-gray">Need to be careful with backups</span>
            </div>
          </tab>
        </tabset>

        <button translate class="button primary radius expand m0" ng-click="goToEmail()">
          <span ng-if="!useLocalstorage"> Create in the cloud</span>
          <span ng-if="useLocalstorage"> Create on this device</span>
        </button>

        <div class="box-setup-footer">
          <div class="left">
            <a class="button-setup text-gray" href="#!/">
              <i class="icon-arrow-left4"></i> 
              <span translate>Back</span>
            </a>
          </div>
          <div class="right">
            <a class="button-setup text-gray" 
              ng-click="$root.openExternalLink('https://copay.io/profile-storage.html')"> 
              Learn more about this option
            </a>
          </div>
        </div>
      </form>

      <form ng-show="createStep == 'email'" name="emailForm" ng-submit="setEmailOrUsername(emailForm)" novalidate>
        <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"  ng-focus="formFocus()">
          <i class="icon-email"></i>
          <div class="icon-input" ng-if="useEmail">
            <span translate class="has-error size-12" ng-show="emailForm.email.$invalid &&
            !emailForm.email.$pristine">
              <i class="fi-x"></i>
              Not valid
            </span>
            <span ng-show="!emailForm.email.$invalid &&
            !emailForm.email.$pristine"><i class="fi-check"></i>
            </span>
          </div>
        </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="!isMobile" ng-focus="formFocus()">
          <i class="icon-person"></i>
        </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="button-setup text-gray" ng-click="setStep('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 class="box-notification" ng-show="passwordStrength">
          <!-- if you change this, check it on WP...-->
          <div class="box-icon" ng-if="passwordStrength.strength< minPasswordStrength" style="background-color:#dd514c">
              <i class="fi-x size-24"></i>
          </div>
          <div class="box-icon" ng-if="passwordStrength.strength >= minPasswordStrength" style="background-color:#16A085">
                  <i class="fi-check size-24"></i>
          </div>
        <span class="size-14" >
          Password Strength: {{passwordStrength.message}}
        </span>
      </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"  ng-focus="formFocus()" >
          <i class="icon-locked"></i>
        </div>


        <div class="input">
          <input type="password" ng-model="repeatpassword" class="input form-control" name="repeatpassword" placeholder="{{'Repeat password'|translate}}" match="password" required  ng-focus="formFocus()">
          <i class="icon-locked"></i>
          <div class="icon-input">
            <span translate class="has-error size-12" ng-show="passForm.repeatpassword.$dirty &&
            passForm.repeatpassword.$invalid">
              <i class="fi-x"></i>
              {{'Passwords must match'|translate}}
            </span>
            <span ng-show="passForm.repeatpassword.$dirty &&
            !passForm.repeatpassword.$invalid"><i class="fi-check"></i>
            </span>
          </div>
        </div>

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

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

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

  <div class="row m20b" ng-show="!$root.starting && askForPin">
  <div class="large-4 large-centered medium-6 medium-centered columns">
    <div class="clipo">
      <img src="img/clipo-pin.png" alt="clipo" width="380">
    </div>

    <div class="text-white text-center" ng-show="askForPin == 2">Repeat PIN</div>
    <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>
    <div ng-include="'views/includes/pin.html'"></div>
  </div>
  </div>
</div>

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