anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

signup + signin

Browse source
This commit is contained in:
bechi 2014-07-21 18:07:42 -03:00
commit 199ba9d47b
3 changed files with 218 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

129
css/main.css
View file

@ -89,6 +89,28 @@ body, html{
width:100%; width:100%;
} }
a {
color: #3498DB;
}
a:hover {
color: #2980b9;
}
input {
background: #2C3E50 !important;
-moz-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.10) !important;
box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.10) !important;
border: 0 !important;
color: #7A8C9E !important;
}
select {
background: #2C3E50 !important;
border: 0 !important;
color: #7A8C9E !important;
}
.page, .main { .page, .main {
height:100%; height:100%;
overflow-y: auto; overflow-y: auto;
@ -151,16 +173,19 @@ body, html{
} }
.signin, .setup { .signin, .setup {
margin-top: 10%; margin-top: 15%;
} }
.logo-setup { .logo-setup {
height: 100%; position: absolute;
top: 45%;
left: 8%;
} }
.content-setup { .box-setup {
height: 100%; padding: 20px 30px;
border-left: 1px dashed #ccc; background: #34495E;
margin-bottom: 20px;
} }
.last-transactions { .last-transactions {
@ -224,15 +249,19 @@ body, html{
.button-setup a { .button-setup a {
display: block; display: block;
padding: 30px 20px; padding: 20px 30px;
background: #384D6B; background: #34495E;
color: #eee; color: #fff;
margin-bottom: 20px; margin-bottom: 20px;
-webkit-border-radius: 20px; font-weight: 100;
-moz-border-radius: 20px; }
-ms-border-radius: 20px;
border-radius: 20px;
.button-setup a:hover {
background: #fff;
}
.button-setup a:hover h1 {
color: #34495E;
} }
.footer-setup { .footer-setup {
@ -265,6 +294,7 @@ body, html{
.m10r {margin-right: 10px;} .m10r {margin-right: 10px;}
.m15l {margin-left: 15px;} .m15l {margin-left: 15px;}
.m20r {margin-right: 20px;} .m20r {margin-right: 20px;}
.m20t {margin-top: 20px;}
.m10 {margin: 10px;} .m10 {margin: 10px;}
.m15 {margin: 15px;} .m15 {margin: 15px;}
.p10t {padding-top: 10px;} .p10t {padding-top: 10px;}
@ -274,6 +304,7 @@ body, html{
.p5h {padding: 0 5px;} .p5h {padding: 0 5px;}
.p20h {padding: 0 20px;} .p20h {padding: 0 20px;}
.p20 {padding:20px;} .p20 {padding:20px;}
.p10 {padding:10px;}
.m30v {margin: 30px 0;} .m30v {margin: 30px 0;}
.m10h {margin:0 10px;} .m10h {margin:0 10px;}
.m10v {margin:10px 0;} .m10v {margin:10px 0;}
@ -284,8 +315,14 @@ body, html{
.oh {overflow:hidden;} .oh {overflow:hidden;}
.lh {line-height: 0;} .lh {line-height: 0;}
.line-dashed-setup-v {
border-left: 1px dashed #415970;
padding-left: 3rem;
}
.line-dashed-v { .line-dashed-v {
border-right: 2px dashed #E3E3E3; border-right: 1px dashed #E3E3E3;
} }
.line-dashed-h { .line-dashed-h {
@ -302,6 +339,11 @@ body, html{
margin: 1.4rem 0; margin: 1.4rem 0;
} }
.line-sidebar-b {
border-bottom: 1px solid #3C5269;
padding-bottom: 0.5rem;
}
.line-dashed { .line-dashed {
border-top: 1px dashed #ccc; border-top: 1px dashed #ccc;
margin: 1rem 0; margin: 1rem 0;
@ -565,15 +607,15 @@ button.radius, .button.radius {
/* SECONDARY */ /* SECONDARY */
button.secondary, button.secondary,
.button.secondary { .button.secondary {
background-color: #1ABC9C; background-color: #4A90E2;
color: #fff; color: #fff;
} }
button.secondary:hover, button.secondary:hover,
button.secondary:focus, button.secondary:focus,
.button.secondary:hover, .button.secondary:hover,
.button.secondary:focus { .button.secondary:focus {
background-color: #16A085; background-color: #2980B9;
color: #e6e6e6; color: #fff;
} }
button.disabled.secondary, button.disabled.secondary,
button[disabled].secondary, button[disabled].secondary,
@ -587,22 +629,22 @@ button[disabled].secondary:focus,
.button.disabled.secondary:focus, .button.disabled.secondary:focus,
.button[disabled].secondary:hover, .button[disabled].secondary:hover,
.button[disabled].secondary:focus { .button[disabled].secondary:focus {
background-color: #1ABC9C; background-color: #95a5a6;
color: #E6E6E6; color: #E6E6E6;
} }
/* PRIMARY */ /* PRIMARY */
button.primary, button.primary,
.button.primary { .button.primary {
background-color: #E67E22; background-color: #1ABC9C;
color: #fff; color: #fff;
} }
button.primary:hover, button.primary:hover,
button.primary:focus, button.primary:focus,
.button.primary:hover, .button.primary:hover,
.button.primary:focus { .button.primary:focus {
background-color: #D86601; background-color: #16A085;
color: #e6e6e6; color: #fff;
} }
button.disabled.primary, button.disabled.primary,
button[disabled].primary, button[disabled].primary,
@ -616,7 +658,7 @@ button[disabled].primary:focus,
.button.disabled.primary:focus, .button.disabled.primary:focus,
.button[disabled].primary:hover, .button[disabled].primary:hover,
.button[disabled].primary:focus { .button[disabled].primary:focus {
background-color: #E67E22; background-color: #95a5a6;
color: #E6E6E6; color: #E6E6E6;
} }
@ -646,7 +688,37 @@ button[disabled].warning:focus,
.button.disabled.warning:focus, .button.disabled.warning:focus,
.button[disabled].warning:hover, .button[disabled].warning:hover,
.button[disabled].warning:focus { .button[disabled].warning:focus {
background-color: #C0392A; background-color: #95a5a6;
color: #E6E6E6;
}
/* WHITE */
button.white,
.button.white {
background-color: #fff;
color: #2C3E50;
}
button.white:hover,
button.white:focus,
.button.white:hover,
.button.white:focus {
background-color: #E0E0E0;
color: #2C3E50;
}
button.disabled.white,
button[disabled].white,
.button.disabled.white,
.button[disabled].white,
button.disabled.white:hover,
button.disabled.white:focus,
button[disabled].white:hover,
button[disabled].white:focus,
.button.disabled.white:hover,
.button.disabled.white:focus,
.button[disabled].white:hover,
.button[disabled].white:focus {
background-color: #95a5a6;
color: #E6E6E6; color: #E6E6E6;
} }
@ -724,8 +796,9 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
border-color: red; border-color: red;
} }
.copayers h3 { .copayers h3,h4 {
color: #fff; color: #fff;
font-weight: 100;
} }
.copayers { .copayers {
@ -739,5 +812,15 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
overflow-y: hidden; overflow-y: hidden;
} }
.text-gray {color: #8597A7;}
.text-primary {color: #1ABC9C;}
.text-secondary {color: #3498DB;}
.text-white {color: #fff;}
.box-setup-copayers {
background: #2C3E50;
-moz-box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.09), inset 0px 0px 2px 0px rgba(0,0,0,0.20);
box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.09), inset 0px 0px 2px 0px rgba(0,0,0,0.20);
}
/*-----------------------------------------------------------------*/ /*-----------------------------------------------------------------*/

134
views/setup.html
View file

@ -6,79 +6,77 @@
<div class="setup" ng-show="!loading"> <div class="setup" ng-show="!loading">
<form name="setupForm" ng-submit="create(setupForm)" novalidate> <form name="setupForm" ng-submit="create(setupForm)" novalidate>
<div class="row"> <div class="row">
<div class="large-4 columns logo-setup"> <div class="large-4 columns logo-setup text-center">
<img src="../img/logo-negative-beta.svg" alt="Copay"> <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>
<div class="large-8 columns content-setup"> <div class="large-8 columns line-dashed-setup-v">
<h3>Create new wallet</h3> <div class="box-setup oh">
<label ng-show="!isSetupWalletPage">Wallet name <small>Optional</small> <h1 class="text-secondary line-sidebar-b">Create new wallet</h1>
<input type="text" placeholder="Family vacation funds" class="form-control" ng-model="walletName"> <h4 ng-show="!isSetupWalletPage">Wallet name
</label> <input type="text" placeholder="Family vacation funds" class="form-control" ng-model="walletName">
<div class="row" ng-show="isSetupWalletPage"> </h4>
<div class="small-12 medium-6 large-6 columns"> <div class="row" ng-show="isSetupWalletPage">
<label>Your name <small>Optional</small> <div>
<input type="text" placeholder="Name" class="form-control" ng-model="myNickname"> <h4>Your name
</label> <input type="text" placeholder="Name" class="form-control" ng-model="myNickname">
</div> </h4>
<div class="small-12 medium-6 large-6 columns">
<label>Your Wallet Password <small data-options="disable_for_touch:true" class="has-tip" tooltip="doesn't need to be shared">Required</small>
<input type="password" placeholder="Choose your password" class="form-control"
ng-model="$parent.walletPassword"
name="walletPassword"
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="walletPasswordConfirm"
ng-model="walletPasswordConfirm"
match="walletPassword"
required>
</label>
</div>
</div>
<div class="box-setup" ng-show="!isSetupWalletPage">
<fieldset>
<div class="row">
<div class="large-6 medium-6 columns line-dashed-v">
<label>Select total number of copayers
<select ng-model="totalCopayers" ng-options="totalCopayers as totalCopayers for totalCopayers in TCValues">
</select>
</label>
</div>
<div class="large-6 medium-6 columns">
<label>Select required signatures
<select ng-model="requiredCopayers" ng-options="requiredCopayers as requiredCopayers for requiredCopayers in RCValues">
</select>
</label>
</div>
</div> </div>
</fieldset> <div>
</div> <h4>Your Wallet Password <small data-options="disable_for_touch:true" class="has-tip text-gray" tooltip="doesn't need to be shared">Required</small>
<div class="box-setup-copayers" ng-show="!isSetupWalletPage"> <input type="password" placeholder="Choose your password" class="form-control"
<div class="box-setup-copayers-fix"> ng-model="$parent.walletPassword"
<img class="box-setup-copay" ng-repeat="i in getNumber(totalCopayers) track by $index" name="walletPassword"
src="./img/satoshi.gif" check-strength="passwordStrength"
title="Copayer {{$index+1}}-{{totalCopayers}}" tooltip-html-unsafe="Password strength:
ng-class="{'box-setup-copay-required': ($index+1) <= requiredCopayers}"> <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="walletPasswordConfirm"
ng-model="walletPasswordConfirm"
match="walletPassword"
required>
</h4>
</div>
</div>
<div class="row" ng-show="!isSetupWalletPage">
<div class="large-6 medium-6 columns">
<h4>Select total number of copayers
<select ng-model="totalCopayers" ng-options="totalCopayers as totalCopayers for totalCopayers in TCValues">
</select>
</h4>
</div>
<div class="large-6 medium-6 columns">
<h4>Select required signatures
<select ng-model="requiredCopayers" ng-options="requiredCopayers as requiredCopayers for requiredCopayers in RCValues">
</select>
</h4>
</div>
</div>
<div class="box-setup-copayers" ng-show="!isSetupWalletPage">
<div class="box-setup-copayers p10">
<img class="br100 oh box-setup-copay m10" ng-repeat="i in getNumber(totalCopayers) track by $index"
src="./img/satoshi.gif"
title="Copayer {{$index+1}}-{{totalCopayers}}"
ng-class="{'box-setup-copay-required': ($index+1) <= requiredCopayers}"
width="50px">
</div>
</div>
<div class="m20t text-right">
<a ng-show="!isSetupWalletPage" class="back-button m20r" href="/signin">&laquo; Back</a>
<a ng-show="isSetupWalletPage" class="back-button m20r"
ng-click="setupWallet()">&laquo; Back</a>
<button ng-show="isSetupWalletPage" type="submit" class="button secondary radius right m0" ng-disabled="setupForm.$invalid || loading">
Create {{requiredCopayers}}-of-{{totalCopayers}} wallet
</button>
<a class="button secondary radius right m0" ng-show="!isSetupWalletPage"
ng-click="setupWallet()">Next</a>
</div> </div>
</div> </div>
<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>
<button ng-show="isSetupWalletPage" type="submit" class="button primary radius right" ng-disabled="setupForm.$invalid || loading">
Create {{requiredCopayers}}-of-{{totalCopayers}} wallet
</button>
<a class="button primary radius right" ng-show="!isSetupWalletPage"
ng-click="setupWallet()">Next</a>
</div> </div>
</div> </div>
</form> </form>

84
views/signin.html
View file

@ -4,70 +4,84 @@
Authenticating and looking for peers... Authenticating and looking for peers...
</div> </div>
<div class="row signin" ng-show="!loading"> <div class="row signin" ng-show="!loading">
<div class="large-4 columns logo-setup"> <div class="large-4 columns logo-setup text-center">
<img src="../img/logo-negative-beta.svg" alt="Copay"> <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>
<div class="large-8 columns content-setup"> <div class="large-8 columns line-dashed-setup-v">
<div ng-show="!isHome && isOpen"> <div class="box-setup" ng-show="!isHome && isOpen">
<h3>Open Wallet</h3> <h1 class="text-white line-sidebar-b">Open Wallet</h1>
<form name="openForm" ng-submit="open(openForm)" novalidate> <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 class="form-control" ng-model="selectedWalletId" ng-options="w.id as w.show for w in wallets" required>
</select> </select>
<input type="password" class="form-control" placeholder="Your password" name="openPassword" ng-model="openPassword" required> <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> <div class="text-right">
<button type="submit" class="button secondary radius" ng-disabled="openForm.$invalid || loading" loading="Opening">Open</button> <a class="back-button text-white m20r" ng-click="backWallet()">&laquo; Back</a>
<button type="submit" class="button white m0" ng-disabled="openForm.$invalid || loading" loading="Opening">Open</button>
</div>
</form> </form>
</div> </div>
<div ng-show="isHome && wallets.length"> <div ng-show="isHome && wallets.length">
<div class="button-setup"> <div class="button-setup">
<a ng-click="openWallet()">Open a wallet</a> <a ng-click="openWallet()">
<h1 class="text-white">Open a wallet</h1>
<p class="text-gray m0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, non.</p>
</a>
</div> </div>
</div> </div>
<div ng-show="isHome && !wallets.length"> <div ng-show="isHome && !wallets.length">
<div class="button-setup"> <div class="button-setup">
<a href="/setup">Create a new wallet</a> <a href="/setup">
<h1 class="text-secondary">Create a new wallet</h1>
<p class="text-gray m0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, non.</p>
</a>
</div> </div>
</div> </div>
<div ng-show="!isHome && isJoin"> <div ng-show="!isHome && isJoin">
<h3>Join a Wallet in Creation</h3> <div class="box-setup">
<form name="joinForm" ng-submit="join(joinForm)" novalidate> <h1 class="text-primary line-sidebar-b">Join a Wallet in Creation</h1>
<input type="text" class="form-control" placeholder="Paste wallet secret here" name="connectionId" ng-model="connectionId" wallet-secret required> <form name="joinForm" ng-submit="join(joinForm)" novalidate>
<input type="text" class="form-control" placeholder="Your name (optional)" name="nickname" ng-model="nickname"> <h4>Wallet Setting</h4>
<input type="password" class="form-control" <input type="text" class="form-control" placeholder="Paste wallet secret here" name="connectionId" ng-model="connectionId" wallet-secret required>
placeholder="Choose your password" name="joinPassword" <h4>User info</h4>
ng-model="$parent.joinPassword" <input type="text" class="form-control" placeholder="Your name (optional)" name="nickname" ng-model="nickname">
check-strength="passwordStrength" <input type="password" class="form-control"
tooltip-html-unsafe="Password strength: placeholder="Choose your password" name="joinPassword"
<i>{{passwordStrength}}</i><br/><span class='size-12'>Tip: Use lower and uppercase, ng-model="$parent.joinPassword"
numbers and symbols</span>" tooltip-trigger="focus" required> 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" <input type="password"
placeholder="Repeat password" placeholder="Repeat password"
name="joinPasswordConfirm" name="joinPasswordConfirm"
ng-model="joinPasswordConfirm" ng-model="joinPasswordConfirm"
match="joinPassword" required> match="joinPassword" required>
<div class="text-right">
<a class="back-button" ng-click="backWallet()">&laquo; Back</a> <a class="back-button text-primary m20r" ng-click="backWallet()">&laquo; Back</a>
<button type="submit" class="button primary radius" ng-disabled="joinForm.$invalid || loading" loading="Joining">Join</button> <button type="submit" class="button primary radius m0" ng-disabled="joinForm.$invalid || loading" loading="Joining">Join</button>
</form> </div>
</form>
</div>
</div> </div>
<div ng-show="isHome && !isJoin"> <div ng-show="isHome && !isJoin">
<div class="button-setup"> <div class="button-setup">
<a ng-click="joinWallet()">Join a Wallet in Creation</a> <a ng-click="joinWallet()">
<h1 class="text-primary">Join a Wallet in Creation</h1>
<p class="text-gray m0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, non.</p>
</a>
</div> </div>
</div> </div>
<div ng-show="isHome && wallets.length"> <div ng-show="isHome && wallets.length">
<div class="button-setup"> <div class="button-setup">
<a href="/setup">Create a wallet</a> <a href="/setup"><h1 class="text-secondary">Create a wallet</h1></a>
</div> </div>
</div> </div>
<div class="footer-setup" ng-show="isHome"> <div class="footer-setup" ng-show="isHome">
<a class="right size-12" href="/settings">Settings</a> <a class="right size-12 text-gray" href="/settings"><i class="m10r size-14 fi-wrench"></i>Settings</a>
<a class="size-12" href="/import">Import a backup</a> <a class="left size-12 text-gray" href="/import"><i class="m10r size-14 fi-upload"></i>Import a backup</a>
</div> </div>
</div> </div>
</div> <!-- End !loading --> </div> <!-- End !loading -->