configure-wallet.component.html

<h2>Configure Wallet</h2>
<p>Use the options below to import an existing wallet or create a new one.</p>

<div *ngIf="wallet.seed && (activePanel != 3 && activePanel != 4 && activePanel != 5)" class="uk-alert uk-alert-danger">
  <b>You already have a wallet configured</b><br>
  Before going any further, be 100% certain you have backed up the seed to your current wallet!<br>
  Without it, <b>any funds you have will become completely unrecoverable!</b>
</div>

<div uk-grid *ngIf="activePanel == 0 || activePanel == 1">
  <div class="uk-width-1-1">
    <div class="uk-button-group uk-width-1-1">
      <button (click)="setPanel(0)" class="uk-button uk-width-1-2" [ngClass]="{ 'uk-button-primary': activePanel == 0, 'uk-button-secondary': activePanel != 0 }">Create New Wallet</button>
      <button (click)="setPanel(1)" class="uk-button uk-width-1-2" [ngClass]="{ 'uk-button-primary': activePanel == 1, 'uk-button-secondary': activePanel != 1 }">Import Existing Wallet</button>
    </div>
  </div>
</div>

<div class="uk-card uk-card-default" *ngIf="activePanel == 0">
  <div class="uk-card-body">
    <p>
      When you create a new wallet, a new Banano seed will be generated which can be used to create brand new accounts
      on the Banano network.  Your Banano seed is the master key to all of your accounts and any money inside of them!
    </p>
    <div class="uk-alert-primary" uk-alert>
      <p>Make sure you back up your seed, write it down, and keep it incredibly safe!  There is NO way to recover it after
        creation, and all funds inside WILL be lost without it!  You have been warned!</p>
    </div>
  </div>
  <div class="uk-card-footer uk-text-right">
    <button class="uk-button uk-button-primary" (click)="createNewWallet()">Create Wallet</button>
  </div>
</div>

<div class="uk-card uk-card-default" *ngIf="activePanel == 1">
  <div class="uk-card-body">
    <p>
      If you already have a Banano wallet, you can import it below.  When you import a wallet, none of your existing
      wallets or accounts are affected, and your seed is not stored anywhere besides in your local client.  Use the drop
      down below to select which type of import you want to use.
    </p>
    <div uk-grid>
      <div class="uk-width-1-1">
        <div class="uk-form-horizontal">
          <div class="uk-margin">
            <label class="uk-form-label" for="form-horizontal-select">Select Import Type</label>
            <div class="uk-form-controls">
              <select class="uk-select" [(ngModel)]="selectedImportOption" id="form-horizontal-select">
                <option *ngFor="let option of importOptions" [value]="option.value">{{ option.name }}</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>

    <hr class="uk-divider-icon" style="margin-top: 10px;">

    <div uk-grid *ngIf="selectedImportOption === 'file'">
      <div class="uk-width-1-1">
        <p>
          If you have saved your wallet to a file using BananoVault before, use the button below to import it.
        </p>
      </div>
    </div>
    <div uk-grid *ngIf="selectedImportOption === 'seed'" class="uk-margin-top">
      <div class="uk-width-1-1">
        <p>
          Enter your 64 character seed from any Banano wallet to import it below.
        </p>
        <input type="text" class="uk-input" (keyup.enter)="importExistingWallet()" [(ngModel)]="importSeedModel" placeholder="Your Banano Backup Seed">
      </div>
    </div>
  </div>
  <div class="uk-card-footer uk-text-right">
    <div *ngIf="selectedImportOption === 'file'" class="js-upload" uk-form-custom style="display: inline-block;">
      <input type="file" id="import-from-file" (change)="importFromFile($event.target.files)" multiple>
      <button class="uk-button uk-button-primary" type="button" tabindex="-1">Import From File</button>
    </div>
    <button *ngIf="selectedImportOption === 'seed'" class="uk-button uk-button-primary" (click)="importExistingWallet()">Import From Seed</button>
  </div>
</div>



<div class="uk-card uk-card-default" *ngIf="activePanel == 3">
  <div class="uk-card-header">
    <h3 class="uk-card-title">Wallet Created!</h3>
  </div>
  <div class="uk-card-body">
    <p>
      Your new Banano wallet has been created!  Below is the seed for your wallet.
    </p>
    <div class="uk-alert uk-alert-primary">
      Make sure to write down your seed or save it somewhere safe, and <strong>never share it with anyone!</strong><br>
      It is the master key to all of your accounts, and the only way to recover your funds in an emergency.
    </div>
    <div uk-grid>
      <div class="uk-width-1-4">Wallet Seed</div>
      <div class="uk-width-3-4 uk-text-truncate">
        {{ newWalletSeed }}<br>
        <a title="Copy Seed To Clipboard" ngxClipboard [cbContent]="newWalletSeed" (cbOnSuccess)="copied()" uk-tooltip>Copy seed to clipboard</a>
      </div>
    </div>
  </div>
  <div class="uk-card-footer">
    <button class="uk-button uk-button-danger" (click)="confirmNewSeed()">I've Saved My Seed</button>
  </div>
</div>

<div class="uk-card uk-card-default" *ngIf="activePanel == 4">
  <div class="uk-card-header">
    <h3 class="uk-card-title">Set Wallet Password</h3>
  </div>
  <div class="uk-card-body">
    <p>
      The last step is to set a new password for your wallet.  Your password is used to encrypt the sensitive parts of
      your wallet when it is locked, which disables sending, receiving, creating accounts, and other operations.
    </p>

    <p>
      Set your wallet password below:
    </p>
    <div uk-grid>
      <div class="uk-width-1-2@m">
        <input type="password" class="uk-input" [(ngModel)]="walletPasswordModel" placeholder="New Wallet Password">
      </div>
      <div class="uk-width-1-2@m">
        <input type="password" class="uk-input" (keyup.enter)="saveWalletPassword()" [(ngModel)]="walletPasswordConfirmModel" placeholder="Confirm Wallet Password">
      </div>
    </div>
  </div>
  <div class="uk-card-footer uk-text-right">
    <button class="uk-button uk-button-primary" (click)="saveWalletPassword()">Set Wallet Password</button>
  </div>
</div>

<div class="uk-card uk-card-default" *ngIf="activePanel == 5">
  <div class="uk-card-header">
    <h3 class="uk-card-title">Wallet Configured!</h3>
  </div>
  <div class="uk-card-body">
    <p>
      Your wallet has been configured and you are ready to send and receive Banano!
    </p>
  </div>
  <div class="uk-card-footer uk-text-right">
    <button routerLink="/accounts" class="uk-button uk-button-primary">View Accounts</button>
  </div>
</div>

<div *ngIf="activePanel == 4 || activePanel == 5" class="uk-alert-primary" uk-alert>
  <p><b>ProTip:</b> If you lose your password, you can always restore your wallet using your seed.</p>
</div>