Signin, join and create layouts.

This commit is contained in:
Gustavo Maximiliano Cortez 2014-07-21 13:01:51 -03:00
commit 72ec131287
3 changed files with 113 additions and 73 deletions

View file

@ -77,6 +77,7 @@ h2 {
h3 {
font-weight: 300;
font-size: 16px;
color: #fff;
}
h4 {
@ -86,10 +87,17 @@ h4 {
body, html{
height:100%;
width:100%;
background: #F8F8FB;
}
.page, .main, .sidebar {
.page, .main {
height:100%;
overflow-y: auto;
overflow-x: none;
background-color: #2C3E50;
color: #fff;
}
.sidebar {
height:100%;
overflow-y: auto;
overflow-x: none;
@ -139,7 +147,38 @@ body, html{
.main {
margin-left: 250px;
padding: 1.5rem
padding: 1.5rem;
background-color: #F8F8FB;
}
.signin, .setup {
margin-top: 10%;
}
.logo-setup {
height: 100%;
}
.content-setup {
height: 100%;
border-left: 1px dashed #ccc;
}
.button-setup a {
display: block;
padding: 30px 20px;
background: #384D6B;
color: #eee;
margin-bottom: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
border-radius: 20px;
}
.footer-setup {
overflow: hidden;
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
@ -214,7 +253,6 @@ body, html{
.name-wallet {
font-size: 16px;
color: #D4D4D4;
line-height: 16px;
}
@ -548,8 +586,6 @@ button[disabled].warning:focus,
color: #E6E6E6;
}
.text-gray { color: #999 !important;}
.side-nav li {
font-size: 16px;
line-height: 40px;
@ -612,10 +648,6 @@ button[disabled].warning:focus,
padding: 1.5rem;
}
.row {
margin-left: -0.9375rem;
}
.has-error {
color: #C0392A;
}

View file

@ -3,10 +3,16 @@
<i class="size-21 fi-bitcoin-circle icon-rotate spinner"></i>
Creating wallet...
</div>
<div ng-show="!loading">
<div class="setup" ng-show="!loading">
<form name="setupForm" ng-submit="create(setupForm)" novalidate>
<div class="row">
<div class="large-8 medium-12 columns large-centered medium-centered">
<div class="large-4 columns logo-setup">
<img src="../img/logo-negative-beta.svg" alt="Copay">
<p class="size-12 m10t">
Copay is a free, open-source, multisignature bitcoin wallet. A single-owner bitcoin wallet's security depends on carefully securing the private keys. With copay you can have multiple people controlling the funds, using bitcoin's multisignature functionality, requiring no trust in any third party.
</p>
</div>
<div class="large-8 columns content-setup">
<h3>Create new wallet</h3>
<label ng-show="!isSetupWalletPage">Wallet name <small>Optional</small>
<input type="text" placeholder="Family vacation funds" class="form-control" ng-model="walletName">
@ -65,11 +71,6 @@
ng-class="{'box-setup-copay-required': ($index+1) <= requiredCopayers}">
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-8 medium-12 columns large-centered medium-centered">
<div class="line-dashed">
<a ng-show="!isSetupWalletPage" class="back-button" href="/signin">&laquo; Back</a>
<a ng-show="isSetupWalletPage" class="back-button"
ng-click="setupWallet()">&laquo; Back</a>
@ -78,7 +79,6 @@
</button>
<a class="button primary radius right" ng-show="!isSetupWalletPage"
ng-click="setupWallet()">Next</a>
</div>
</div>
</div>
</form>

View file

@ -1,66 +1,74 @@
<div class="signin" ng-controller="SigninController">
<div ng-controller="SigninController">
<div data-alert class="alert-box info" ng-show="loading && !failure">
<i class="size-21 fi-bitcoin-circle icon-rotate spinner"></i>
Authenticating and looking for peers...
</div>
<div ng-show="!loading">
<div ng-show="!isHome && isOpen">
<h3>Open Wallet</h3>
<form name="openForm" ng-submit="open(openForm)" novalidate>
<select class="form-control" ng-model="selectedWalletId" ng-options="w.id as w.show for w in wallets" required>
</select>
<input type="password" class="form-control" placeholder="Your password" name="openPassword" ng-model="openPassword" required>
<a class="back-button" ng-click="backWallet()">&laquo; Back</a>
<button type="submit" class="button secondary radius" ng-disabled="openForm.$invalid || loading" loading="Opening">Open</button>
</form>
</div>
<div ng-show="isHome && wallets.length">
<h3>Open a wallet</h3>
<a ng-click="openWallet()" class="button secondary radius">Open</a>
</div>
<div ng-show="isHome && !wallets.length">
<h3>Create a new wallet</h3>
<a href="/setup" class="button secondary radius">Create</a>
</div>
<div ng-show="!isHome && isJoin">
<h3>Join a Wallet in Creation</h3>
<form name="joinForm" ng-submit="join(joinForm)" novalidate>
<input type="text" class="form-control" placeholder="Paste wallet secret here" name="connectionId" ng-model="connectionId" wallet-secret required>
<input type="text" class="form-control" placeholder="Your name (optional)" name="nickname" ng-model="nickname">
<input type="password" class="form-control"
placeholder="Choose your password" name="joinPassword"
ng-model="$parent.joinPassword"
check-strength="passwordStrength"
tooltip-html-unsafe="Password strength:
<i>{{passwordStrength}}</i><br/><span class='size-12'>Tip: Use lower and uppercase,
numbers and symbols</span>" tooltip-trigger="focus" required>
<input type="password"
placeholder="Repeat password"
name="joinPasswordConfirm"
ng-model="joinPasswordConfirm"
match="joinPassword" required>
<a class="back-button" ng-click="backWallet()">&laquo; Back</a>
<button type="submit" class="button primary radius" ng-disabled="joinForm.$invalid || loading" loading="Joining">Join</button>
</form>
</div>
<div ng-show="isHome && !isJoin">
<h3>Join a Wallet in Creation</h3>
<a ng-click="joinWallet()" class="button secondary
radius">Join</a>
</div>
<div ng-show="isHome && wallets.length">
<h5>Create a wallet</h5>
<a href="/setup" class="button secondar radius">Create</a>
</div>
<div ng-show="isHome">
<p class="text-gray">
<div class="row signin" ng-show="!loading">
<div class="large-4 columns logo-setup">
<img src="../img/logo-negative-beta.svg" alt="Copay">
<p class="size-12 m10t">
Copay is a free, open-source, multisignature bitcoin wallet. A single-owner bitcoin wallet's security depends on carefully securing the private keys. With copay you can have multiple people controlling the funds, using bitcoin's multisignature functionality, requiring no trust in any third party.
</p>
<a href="/settings">Settings</a> &middot;
<a href="/import">Import a backup</a>
</div>
<div class="large-8 columns content-setup">
<div ng-show="!isHome && isOpen">
<h3>Open Wallet</h3>
<form name="openForm" ng-submit="open(openForm)" novalidate>
<select class="form-control" ng-model="selectedWalletId" ng-options="w.id as w.show for w in wallets" required>
</select>
<input type="password" class="form-control" placeholder="Your password" name="openPassword" ng-model="openPassword" required>
<a class="back-button" ng-click="backWallet()">&laquo; Back</a>
<button type="submit" class="button secondary radius" ng-disabled="openForm.$invalid || loading" loading="Opening">Open</button>
</form>
</div>
<div ng-show="isHome && wallets.length">
<div class="button-setup">
<a ng-click="openWallet()">Open a wallet</a>
</div>
</div>
<div ng-show="isHome && !wallets.length">
<div class="button-setup">
<a href="/setup">Create a new wallet</a>
</div>
</div>
<div ng-show="!isHome && isJoin">
<h3>Join a Wallet in Creation</h3>
<form name="joinForm" ng-submit="join(joinForm)" novalidate>
<input type="text" class="form-control" placeholder="Paste wallet secret here" name="connectionId" ng-model="connectionId" wallet-secret required>
<input type="text" class="form-control" placeholder="Your name (optional)" name="nickname" ng-model="nickname">
<input type="password" class="form-control"
placeholder="Choose your password" name="joinPassword"
ng-model="$parent.joinPassword"
check-strength="passwordStrength"
tooltip-html-unsafe="Password strength:
<i>{{passwordStrength}}</i><br/><span class='size-12'>Tip: Use lower and uppercase,
numbers and symbols</span>" tooltip-trigger="focus" required>
<input type="password"
placeholder="Repeat password"
name="joinPasswordConfirm"
ng-model="joinPasswordConfirm"
match="joinPassword" required>
<a class="back-button" ng-click="backWallet()">&laquo; Back</a>
<button type="submit" class="button primary radius" ng-disabled="joinForm.$invalid || loading" loading="Joining">Join</button>
</form>
</div>
<div ng-show="isHome && !isJoin">
<div class="button-setup">
<a ng-click="joinWallet()">Join a Wallet in Creation</a>
</div>
</div>
<div ng-show="isHome && wallets.length">
<div class="button-setup">
<a href="/setup">Create a wallet</a>
</div>
</div>
<div class="footer-setup" ng-show="isHome">
<a class="right size-12" href="/settings">Settings</a>
<a class="size-12" href="/import">Import a backup</a>
</div>
</div>
</div> <!-- End !loading -->
</div>