Skip to content

Commit

Permalink
new wizard on new wallet
Browse files Browse the repository at this point in the history
  • Loading branch information
@tilthz
tilthz committed Apr 30, 2014
1 parent a82d7f0 commit e54d6b5
Show file tree
Hide file tree
Showing 7 changed files with 374 additions and 32 deletions.
16 changes: 15 additions & 1 deletion css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4612,6 +4612,10 @@ div.container {
padding-top: 45px;
height: 100%; }

div.cardflipper {
margin-top: 4em;
-webkit-perspective: 800px; }

div.tab-scroller {
padding-top: 1em; }

Expand Down Expand Up @@ -4875,7 +4879,9 @@ span.meter {
padding: 5px 0 0 5px; }

.seed {
font-size: 120%; }
font-size: 120%;
overflow: visible;
text-align: center; }

.transaction-icon.green {
color: #27ae60; }
Expand Down Expand Up @@ -4989,6 +4995,14 @@ div.chat-text {
background: url(../images/virtual.svg) top/cover no-repeat;
-webkit-box-shadow: inset -0 0px 130px black; }

div.wizard {
background: #222;
border-radius: 3px;
padding: 2em; }

form.send {
background: url(../images/send.svg) center/contain no-repeat; }

.setback > * {
opacity: 0.8; }

Expand Down
84 changes: 55 additions & 29 deletions html/partials/new_wallet.html
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,89 @@
<div class="row">
<div class="small-12 columns">
<h3>Create a new wallet</h3>
<form ng-show="activeForm=='password'" ng-submit="passwordSubmit()">
<div class="row cardflipper">
<div class="medium-8 medium-centered columns wizard text-center">
<img src="../images/logo.svg" width="60%" height="60%" />
<div class="row">
<h6>Thanks for testing Dark Wallet! Keep in mind this is alpha software!</h6>
<div class="small-6 columns">
<a class="button radius expand nomarginbottom">Use real Bitcoins!</a>
</div>
<div class="small-6 columns">
<a class="button radius expand nomarginbottom">Use Testnet</a>
</div>
</div>
</div>
</div>
<form ng-show="activeForm=='password'" ng-submit="passwordSubmit()">
<div class="row">
<div class="large-6 columns">

<h5>Register an identity</h5>
<div><input type="text" ng-model="name" placeholder="Identity Name" autofocus ng-required="true" /></div>
<div><input type="password" ng-model="passwd" placeholder="Password" ng-required="true" /></div>
<div><input type="password" ng-model="passwd2" placeholder="Repeat password" ng-required="true" /></div>

<div class="row cardflipper">
<div class="medium-8 medium-centered columns wizard text-center">
<img src="../images/wallet.svg" width="50%" height="50%" />
<div class="row topmargin">
<div class="small-6 columns">
<a class="button radius expand nomarginbottom">Restore from a seed</a>
</div>
<div class="small-6 columns">
<a class="button glow radius expand nomarginbottom">Create a new wallet!</a>
</div>
</div>
</div>
</div>

<div class="row cardflipper">
<div class="medium-8 medium-centered columns wizard text-center">
<input type="text" ng-model="name" placeholder="Name for this wallet" autofocus ng-required="true" />
<div class="row">
<div class="small-6 columns"><input type="password" ng-model="passwd" placeholder="Password" ng-required="true" /></div>
<div class="small-6 columns"><input type="password" ng-model="passwd2" placeholder="Repeat password" ng-required="true" /></div>
</div>
<div class="text-right">
<input type="submit" value="Continue" class="button small radius nomarginbottom" />
</div>
</div>
<div class="large-6 columns">
</div>

<div class="row">
<div class="large-12 columns">
<h5>Do you want a new wallet or want to restore a previous one from a seed?</h5>
<div class="panel">
<input type="radio" name="create_or_restore" ng-model="create_or_restore" id="create" value="create" /><label for="create">Create</label>
<input type="radio" name="create_or_restore" ng-model="create_or_restore" id="restore" value="restore" /><label for="restore">Restore</label>
</div>

<h5>Select production or testing network</h5>
<h5>This is alpha software! Use real Bitcoins or testnet?</h5>
<div class="panel">
<input type="radio" name="network" ng-model="network" id="network-bitcoin" value="bitcoin" /><label for="bitcoin">Bitcoin</label>
<input type="radio" name="network" ng-model="network" id="network-testnet" value="testnet" /><label for="network-testnet">Testnet</label>
</div>

<div class="text-right">
<input type="submit" value="Continue" class="button" />
<input type="submit" value="Continue" class="button small radius" />
</div>

</div>
</div>
</form>

<form ng-show="activeForm=='mnemonic'" ng-submit="mnemonicSubmit()">
<div class="row">
<div class="large-6 columns">
<div class="panel">
This is your seed. It will help you recover your wallet in case of computer failure, theft or loss. You need to write it down in a piece of paper. These 12 words will unlock complete access to your bitcoins even if you can't access your computer anymore. NEVER TYPE YOUR SEED IN A COMPUTER unless you are recovering your wallet or you will risk losing your bitcoins.
</div>
</div>
<div class="large-6 columns">
<textarea type="text" readonly ng-model="mnemonicWords" class="seed"></textarea>
<div class="text-right">
<input type="submit" value="I've written my seed in a piece of paper, continue!" class="button">
<div class="row">
<div class="medium-8 medium-centered columns wizard">
This is your seed. It will help you recover your wallet in case of computer failure, theft or loss. You need to write it down in a piece of paper. These 12 words will unlock complete access to your bitcoins even if you can't access your computer anymore. NEVER TYPE YOUR SEED IN A COMPUTER unless you are recovering your wallet or you will risk losing your bitcoins.
<textarea type="text" readonly ng-model="mnemonicWords" class="seed"></textarea>
<div class="text-right">
<input type="submit" value="I'm ready, continue!" class="button small radius glow nomarginbottom">
</div>
</div>
</div>
</div>
</form>

<form ng-show="activeForm=='mnemonic2'" ng-submit="mnemonic2Submit()">
<div class="row">
<div class="small-12 columns">
<h4>To confirm you've written down your seed correctly, please type it here:</h4>
<textarea type="text" class="seed" placeholder="price bleed trail suspend..." ng-model="mnemonic2Words"></textarea>
<h5>To confirm you've written down your seed correctly, please type it here:</h5>
<textarea type="text" class="seed" placeholder="Write the 12 words here..." ng-model="mnemonic2Words"></textarea>
<p>{{message2}}</p>
<h5>After typing your seed, please store the piece of paper in the safest place you can think of!</h5>
<h6>After typing your seed, please store the piece of paper in the safest place you can think of!</h6>
<div class="text-right">
<input type="submit" value="Finish" class="button">
<input type="submit" value="Finish" class="button small radius glow">
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion html/partials/send.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<form ng-submit="sendBitcoins()" novalidate>
<form class="send" ng-submit="sendBitcoins()" novalidate>
<div class="row">
<div class="small-12 columns">
<h3>Send</h3>
Expand Down
129 changes: 129 additions & 0 deletions images/faces/wallet.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e54d6b5

Please sign in to comment.