Skip to content

B
Breeze
Commit d8ef3d25 authored by dev0tion's avatar dev0tion
Browse files
Options

Update setup components to new UI

parent 473cee7a
Show whitespace changes
Inline Side-by-side
Showing with 135 additions and 158 deletions
Breeze.UI/src/app/login/login.component.html
View file @ d8ef3d25
<div class="container col-md-8 offset-md-2"> <section id="breeze">
<div class="row"> <div class="login d-flex align-items-center text-center">
<div class="col"> <div class="container">
<h1>Welcome to Breeze</h1> <h3 class="display-5">Welcome to Breeze</h3>
</div> <div *ngIf="hasWallet">
</div> <p class="lead">Please choose the wallet you would like to open</p>
<div class="row"> <div class="row d-flex justify-content-center">
<div class="col"> <form class="col-md-8 col-xs-12 text-left" [formGroup]="openWalletForm">
<form *ngIf="hasWallet" [formGroup]="openWalletForm" (ngSubmit)="onDecryptClicked()">
<div class="form-group"> <div class="form-group">
<label>Select wallet name to open</label> <label class="col-12 row" for="Select">Wallet</label>
<select class="form-control" formControlName="selectWallet"> <select class="form-control custom-select col-12" formControlName="selectWallet">
<option *ngFor="let wallet of wallets" [value]="wallet">{{wallet}}</option> <option *ngFor="let wallet of wallets" [value]="wallet">{{ wallet }}</option>
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Please enter your password to decrypt your wallet</label> <label class="text-left" for="Password">Password</label>
<input class="form-control" type="password" formControlName="password" placeholder="Enter password here"> <input type="password" class="form-control" id="Password" formControlName="password" placeholder="Enter your password.">
<div *ngIf="formErrors.password" class="alert alert-danger">{{formErrors.password}}</div> <div *ngIf="formErrors.password" class="form-control-feedback">{{ formErrors.password }}</div>
</div>
<div class="form-group">
<button type="submit" [disabled]="!openWalletForm.valid" class="btn">Decrypt</button>
</div> </div>
</form> </form>
</div> </div>
<!-- /row-->
<div class="row d-flex justify-content-center">
<button type="submit" class="btn btn-darkgray btn-lg" [disabled]="!openWalletForm.valid" (click)="onDecryptClicked()">Decrypt</button>
</div> </div>
<div class="row">
<div class="col" *ngIf="hasWallet;else no_wallet">
If you like to create or restore a wallet please click the button below.
</div> </div>
<!-- /row-->
<div class="row d-flex justify-content-center" *ngIf="hasWallet;else no_wallet">
<p class="lead">If you would like to create or restore a wallet please click the button below.</p>
</div> </div>
<div class="row">
<div class="col">
<ng-template #no_wallet> <ng-template #no_wallet>
<p> Looks like you're new here. Please create or restore a wallet.</p> <p class="lead">Looks like you're new here. <br />Please create or restore a wallet.</p>
</ng-template> </ng-template>
<div class="row d-flex justify-content-center">
<button type="button" class="btn btn-darkgray btn-lg" (click)="onCreateClicked()">Create or restore a wallet</button>
</div> </div>
</div> </div>
<div class="row"> <!-- /container-->
<div class="col">
<button type="button" (click)="onCreateClicked()" class="btn">Create or restore wallet</button>
</div> </div>
</div> <!-- /login-->
</div> </section>
<!-- /breeze-->
Breeze.UI/src/app/setup/create/create.component.html
View file @ d8ef3d25
<div class="container col-md-8 offset-md-2"> <section id="breeze">
<div class="row"> <div class="login d-flex align-items-center text-center">
<div class="col"> <div class="container">
<h1>Please create a new wallet</h1> <p class="textback text-left mb-5 col-6 row"><a (click)="onBackClicked()">Back</a></p>
</div> <h3 class="display-5">Welcome</h3>
</div> <div class="row d-flex justify-content-center">
<div class="row"> <form class="col-md-8 col-xs-12 text-left" [formGroup]="createWalletForm">
<div class="col"> <!--<div class="form-group has-success">-->
<form [formGroup]="createWalletForm" (ngSubmit)="onCreateClicked()">
<div class="form-group"> <div class="form-group">
<label>Name:</label> <label class="col-12 row" for="walletName">Name</label>
<input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet."> <input type="text" class="form-control form-control-success" formControlName="walletName" id="walletName" placeholder="Enter a wallet name.">
<div *ngIf="formErrors.walletName" class="alert alert-danger">{{formErrors.walletName}}</div> <div *ngIf="formErrors.walletName" class="form-control-feedback">{{ formErrors.walletName }}</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Password:</label> <label class="text-left" for="walletPassword">Password</label>
<input class="form-control" formControlName="walletPassword" type="password" placeholder="Enter a password for your wallet."> <input type="password" class="form-control form-control-success" formControlName="walletPassword" id="walletPassword" placeholder="Enter a password.">
<div *ngIf="formErrors.walletPassword" class="alert alert-danger">{{formErrors.walletPassword}}</div> <div *ngIf="formErrors.walletPassword" class="form-control-feedback">{{ formErrors.walletPassword }}</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Network:</label> <label class="text-left" for="walletNetwork">Network</label>
<select name="network" formControlName="selectNetwork"> <select class="form-control custom-select" name="network" formControlName="selectNetwork">
<!--<option value="main">Main</option>--> <!--<option value="main">Main</option>-->
<option value="test">Testnet</option> <option value="test">Testnet</option>
<!--<option value="stratistest">StratisTest</option>--> <!--<option value="stratistest">StratisTest</option>-->
</select> </select>
</div> </div>
<div class="form-group">
<button type="button" class="btn btn-outline-secondary" (click)="onBackClicked()">Back</button>
<button type="submit" [disabled]="!createWalletForm.valid" class="btn">Create Wallet</button>
</div>
</form> </form>
</div> </div>
<!-- /row-->
<div class="row d-flex justify-content-center">
<button type="button" class="btn btn-darkgray btn-lg" [disabled]="!createWalletForm.valid" (click)="onCreateClicked()">Create</button>
</div> </div>
<div class="row"> <!-- /row-->
<div class="col" id="mnemonic">
<label>Mnemonic:</label>
<label>{{ mnemonic }}</label>
</div> </div>
<!-- /container-->
</div> </div>
</div> <!-- /login-->
</section>
<!-- /breeze-->
Breeze.UI/src/app/setup/recover/recover.component.html
View file @ d8ef3d25
<div class="container col-md-8 offset-md-2"> <section id="breeze">
<div class="row"> <div class="login d-flex align-items-center text-center">
<div class="col"> <div class="container">
<h1>Recover your wallet</h1> <p class="textback text-left mb-5 col-6 row"><a (click)="onBackClicked()">Back</a></p>
</div> <h3 class="display-5">Welcome</h3>
</div> <div class="row d-flex justify-content-center">
<div class="row"> <form class="col-md-8 col-xs-12 text-left" [formGroup]="recoverWalletForm">
<div class="col"> <div class="form-group">
<p>Welcome, please complete the form below to recover your wallet.</p> <label class="col-12 row" for="creationDate">Creation Date (optional)</label>
</div> <material-datepicker class="form-control" [(date)]="creationDate"></material-datepicker>
</div> </div>
<div class="row">
<div class="col">
<form [formGroup]="recoverWalletForm" (ngSubmit)="onRecoverClicked()">
<div class="form-group"> <div class="form-group">
<label>Mnemonic:</label> <label class="col-12 row" for="walletMnemonic">12 Secret Words</label>
<input class="form-control" formControlName="walletMnemonic" type="text" placeholder="Enter your saved mnemonic."> <input type="text" class="form-control form-control-success" formControlName="walletMnemonic" id="walletName" placeholder="Enter your 12 secret words.">
<div *ngIf="formErrors.walletMnemonic" class="alert alert-danger">{{formErrors.walletMnemonic}}</div> <div *ngIf="formErrors.walletMnemonic" class="form-control-feedback">{{ formErrors.walletMnemonic }}</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Wallet password: </label> <label class="text-left" for="walletPassword">Password</label>
<input class="form-control" type="password" formControlName="walletPassword" placeholder="Enter password here."> <input type="password" class="form-control form-control-success" formControlName="walletPassword" id="walletPassword" placeholder="Enter a password.">
<div *ngIf="formErrors.walletPassword" class="alert alert-danger">{{formErrors.walletPassword}}</div> <div *ngIf="formErrors.walletPassword" class="form-control-feedback">{{ formErrors.walletPassword }}</div>
</div> </div>
<!--<div class="form-group has-success">-->
<div class="form-group"> <div class="form-group">
<label>Name:</label> <label class="col-12 row" for="walletName">Name</label>
<input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet."> <input type="text" class="form-control form-control-success" formControlName="walletName" id="walletName" placeholder="Enter a wallet name.">
<div *ngIf="formErrors.walletName" class="alert alert-danger">{{formErrors.walletName}}</div> <div *ngIf="formErrors.walletName" class="form-control-feedback">{{ formErrors.walletName }}</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Network:</label> <label class="text-left" for="walletNetwork">Network</label>
<select name="network" formControlName="selectNetwork"> <select class="form-control custom-select" name="network" formControlName="selectNetwork">
<!--<option value="main">Main</option>--> <!--<option value="main">Main</option>-->
<option value="test">Testnet</option> <option value="test">Testnet</option>
<!--<option value="stratistest">StratisTest</option>--> <!--<option value="stratistest">StratisTest</option>-->
</select> </select>
</div> </div>
<div class="form-group"> </form>
<label>Creation date:</label>
<material-datepicker [(date)]="creationDate"></material-datepicker>
</div> </div>
<div class="form-group" id="buttons"> <!-- /row-->
<button type="button" class="btn btn-outline-secondary" (click)="onBackClicked()">Back</button> <div class="row d-flex justify-content-center">
<button type="submit" [disabled]="!recoverWalletForm.valid" class="btn ml-2">Recover Wallet</button> <button type="button" class="btn btn-darkgray btn-lg" [disabled]="!recoverWalletForm.valid" (click)="onRecoverClicked()">Recover</button>
</div> </div>
</form> <!-- /row-->
</div> </div>
<!-- /container-->
</div> </div>
</div> <!-- /login-->
</section>
<!-- /breeze-->
Breeze.UI/src/app/setup/setup.component.html
View file @ d8ef3d25
<div class="container col-md-8 offset-md-2"> <section id="breeze">
<div class="row"> <div class="login d-flex align-items-center text-center">
<div class="col"> <div class="container">
<h1>Welcome to Breeze</h1> <h3 class="display-5">Welcome</h3>
</div> <p class="lead">
</div> If you would like to create a new wallet, please click Create. <br/>
<div class="row"> When you have used Breeze before, you can click Restore to recover your wallet.
<div vlass="col">
<p>
If you haven't used Breeze before, please create a new wallet.
<br>
<button (click)="onCreateClicked()" class="btn">Create</button>
</p>
<p style="margin-top: 30px;">
Users who have previously used Breeze, can choose to recover their wallet.
<br>
<button (click)="onRecoverClicked()" class="btn">Recover</button>
</p> </p>
<div class="row d-flex justify-content-center">
<button type="button" class="btn btn-darkgray btn-lg" (click)="onBackClicked()">Back</button>
<button type="button" class="btn btn-darkgray btn-lg" (click)="onCreateClicked()">Create</button>
<button type="button" class="btn btn-darkgray btn-lg" (click)="onRecoverClicked()">Restore</button>
</div> </div>
</div> </div>
<div class="row"> <!-- /container-->
<div class="col">
<button (click)="onBackClicked()" class="btn btn-outline-secondary" id="backButton">Back</button>
</div>
<!--<div class="col">
<button (click)="onCreateClicked()" class="btn">Create</button>
</div>
<div class="col">
<button (click)="onRecoverClicked()" class="btn">Recover</button>
</div>-->
</div> </div>
</div> <!-- /login-->
</section>
<!-- /breeze-->
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment