Skip to content

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

Update setup components to new UI

parent 473cee7a
Hide 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">
<div class="row">
<div class="col">
<h1>Welcome to Breeze</h1>
</div>
</div>
<div class="row">
<div class="col">
<form *ngIf="hasWallet" [formGroup]="openWalletForm" (ngSubmit)="onDecryptClicked()">
<div class="form-group">
<label>Select wallet name to open</label>
<select class="form-control" formControlName="selectWallet">
<option *ngFor="let wallet of wallets" [value]="wallet">{{wallet}}</option>
</select>
</div>
<div class="form-group">
<label>Please enter your password to decrypt your wallet</label>
<input class="form-control" type="password" formControlName="password" placeholder="Enter password here">
<div *ngIf="formErrors.password" class="alert alert-danger">{{formErrors.password}}</div>
<section id="breeze">
<div class="login d-flex align-items-center text-center">
<div class="container">
<h3 class="display-5">Welcome to Breeze</h3>
<div *ngIf="hasWallet">
<p class="lead">Please choose the wallet you would like to open</p>
<div class="row d-flex justify-content-center">
<form class="col-md-8 col-xs-12 text-left" [formGroup]="openWalletForm">
<div class="form-group">
<label class="col-12 row" for="Select">Wallet</label>
<select class="form-control custom-select col-12" formControlName="selectWallet">
<option *ngFor="let wallet of wallets" [value]="wallet">{{ wallet }}</option>
</select>
</div>
<div class="form-group">
<label class="text-left" for="Password">Password</label>
<input type="password" class="form-control" id="Password" formControlName="password" placeholder="Enter your password.">
<div *ngIf="formErrors.password" class="form-control-feedback">{{ formErrors.password }}</div>
</div>
</form>
</div>
<div class="form-group">
<button type="submit" [disabled]="!openWalletForm.valid" class="btn">Decrypt</button>
<!-- /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>
</form>
</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>
<div class="row">
<div class="col">
</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>
<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>
<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>
<!-- /container-->
</div>
<div class="row">
<div class="col">
<button type="button" (click)="onCreateClicked()" class="btn">Create or restore wallet</button>
</div>
</div>
</div>
<!-- /login-->
</section>
<!-- /breeze-->
Breeze.UI/src/app/setup/create/create.component.html
View file @ d8ef3d25
<div class="container col-md-8 offset-md-2">
<div class="row">
<div class="col">
<h1>Please create a new wallet</h1>
<section id="breeze">
<div class="login d-flex align-items-center text-center">
<div class="container">
<p class="textback text-left mb-5 col-6 row"><a (click)="onBackClicked()">Back</a></p>
<h3 class="display-5">Welcome</h3>
<div class="row d-flex justify-content-center">
<form class="col-md-8 col-xs-12 text-left" [formGroup]="createWalletForm">
<!--<div class="form-group has-success">-->
<div class="form-group">
<label class="col-12 row" for="walletName">Name</label>
<input type="text" class="form-control form-control-success" formControlName="walletName" id="walletName" placeholder="Enter a wallet name.">
<div *ngIf="formErrors.walletName" class="form-control-feedback">{{ formErrors.walletName }}</div>
</div>
<div class="form-group">
<label class="text-left" for="walletPassword">Password</label>
<input type="password" class="form-control form-control-success" formControlName="walletPassword" id="walletPassword" placeholder="Enter a password.">
<div *ngIf="formErrors.walletPassword" class="form-control-feedback">{{ formErrors.walletPassword }}</div>
</div>
<div class="form-group">
<label class="text-left" for="walletNetwork">Network</label>
<select class="form-control custom-select" name="network" formControlName="selectNetwork">
<!--<option value="main">Main</option>-->
<option value="test">Testnet</option>
<!--<option value="stratistest">StratisTest</option>-->
</select>
</div>
</form>
</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>
<!-- /row-->
</div>
<!-- /container-->
</div>
<div class="row">
<div class="col">
<form [formGroup]="createWalletForm" (ngSubmit)="onCreateClicked()">
<div class="form-group">
<label>Name:</label>
<input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet.">
<div *ngIf="formErrors.walletName" class="alert alert-danger">{{formErrors.walletName}}</div>
</div>
<div class="form-group">
<label>Password:</label>
<input class="form-control" formControlName="walletPassword" type="password" placeholder="Enter a password for your wallet.">
<div *ngIf="formErrors.walletPassword" class="alert alert-danger">{{formErrors.walletPassword}}</div>
</div>
<div class="form-group">
<label>Network:</label>
<select name="network" formControlName="selectNetwork">
<!--<option value="main">Main</option>-->
<option value="test">Testnet</option>
<!--<option value="stratistest">StratisTest</option>-->
</select>
</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>
</div>
</div>
<div class="row">
<div class="col" id="mnemonic">
<label>Mnemonic:</label>
<label>{{ mnemonic }}</label>
</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">
<div class="row">
<div class="col">
<h1>Recover your wallet</h1>
<section id="breeze">
<div class="login d-flex align-items-center text-center">
<div class="container">
<p class="textback text-left mb-5 col-6 row"><a (click)="onBackClicked()">Back</a></p>
<h3 class="display-5">Welcome</h3>
<div class="row d-flex justify-content-center">
<form class="col-md-8 col-xs-12 text-left" [formGroup]="recoverWalletForm">
<div class="form-group">
<label class="col-12 row" for="creationDate">Creation Date (optional)</label>
<material-datepicker class="form-control" [(date)]="creationDate"></material-datepicker>
</div>
<div class="form-group">
<label class="col-12 row" for="walletMnemonic">12 Secret Words</label>
<input type="text" class="form-control form-control-success" formControlName="walletMnemonic" id="walletName" placeholder="Enter your 12 secret words.">
<div *ngIf="formErrors.walletMnemonic" class="form-control-feedback">{{ formErrors.walletMnemonic }}</div>
</div>
<div class="form-group">
<label class="text-left" for="walletPassword">Password</label>
<input type="password" class="form-control form-control-success" formControlName="walletPassword" id="walletPassword" placeholder="Enter a password.">
<div *ngIf="formErrors.walletPassword" class="form-control-feedback">{{ formErrors.walletPassword }}</div>
</div>
<!--<div class="form-group has-success">-->
<div class="form-group">
<label class="col-12 row" for="walletName">Name</label>
<input type="text" class="form-control form-control-success" formControlName="walletName" id="walletName" placeholder="Enter a wallet name.">
<div *ngIf="formErrors.walletName" class="form-control-feedback">{{ formErrors.walletName }}</div>
</div>
<div class="form-group">
<label class="text-left" for="walletNetwork">Network</label>
<select class="form-control custom-select" name="network" formControlName="selectNetwork">
<!--<option value="main">Main</option>-->
<option value="test">Testnet</option>
<!--<option value="stratistest">StratisTest</option>-->
</select>
</div>
</form>
</div>
<!-- /row-->
<div class="row d-flex justify-content-center">
<button type="button" class="btn btn-darkgray btn-lg" [disabled]="!recoverWalletForm.valid" (click)="onRecoverClicked()">Recover</button>
</div>
<!-- /row-->
</div>
<!-- /container-->
</div>
<div class="row">
<div class="col">
<p>Welcome, please complete the form below to recover your wallet.</p>
</div>
</div>
<div class="row">
<div class="col">
<form [formGroup]="recoverWalletForm" (ngSubmit)="onRecoverClicked()">
<div class="form-group">
<label>Mnemonic:</label>
<input class="form-control" formControlName="walletMnemonic" type="text" placeholder="Enter your saved mnemonic.">
<div *ngIf="formErrors.walletMnemonic" class="alert alert-danger">{{formErrors.walletMnemonic}}</div>
</div>
<div class="form-group">
<label>Wallet password: </label>
<input class="form-control" type="password" formControlName="walletPassword" placeholder="Enter password here.">
<div *ngIf="formErrors.walletPassword" class="alert alert-danger">{{formErrors.walletPassword}}</div>
</div>
<div class="form-group">
<label>Name:</label>
<input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet.">
<div *ngIf="formErrors.walletName" class="alert alert-danger">{{formErrors.walletName}}</div>
</div>
<div class="form-group">
<label>Network:</label>
<select name="network" formControlName="selectNetwork">
<!--<option value="main">Main</option>-->
<option value="test">Testnet</option>
<!--<option value="stratistest">StratisTest</option>-->
</select>
</div>
<div class="form-group">
<label>Creation date:</label>
<material-datepicker [(date)]="creationDate"></material-datepicker>
</div>
<div class="form-group" id="buttons">
<button type="button" class="btn btn-outline-secondary" (click)="onBackClicked()">Back</button>
<button type="submit" [disabled]="!recoverWalletForm.valid" class="btn ml-2">Recover Wallet</button>
</div>
</form>
</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">
<div class="row">
<div class="col">
<h1>Welcome to Breeze</h1>
</div>
</div>
<div class="row">
<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>
<section id="breeze">
<div class="login d-flex align-items-center text-center">
<div class="container">
<h3 class="display-5">Welcome</h3>
<p class="lead">
If you would like to create a new wallet, please click Create. <br/>
When you have used Breeze before, you can click Restore to recover your wallet.
</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>
<!-- /container-->
</div>
<div class="row">
<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>
<!-- /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