fix signup & signin

This commit is contained in:
bechi 2014-10-15 16:10:40 -03:00 committed by Matias Alejo Garcia
commit 005625c4b2
4 changed files with 163 additions and 107 deletions

View file

@ -175,18 +175,33 @@ a:hover {
} }
.home input, .home input,
.createProfile input, .box-setup input,
.open input, .open input,
.join input, .join input,
.setup input, .setup input,
.import input, .import input,
.import textarea, .import textarea,
.settings input { .settings input {
background: #2C3E50 !important; border-radius: 2px;
-moz-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.10) !important; background: #EDEDED;
box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.10) !important; -moz-box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.09), inset 1px 1px 0px 0px rgba(0,0,0,0.05);
border: 0 !important; box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.09), inset 1px 1px 0px 0px rgba(0,0,0,0.05);
color: #fff !important; color: #2C3E42 !important;
padding: 1.2rem 0.7rem;
margin-bottom: 1.5rem;
border: 0;
}
.box-setup ::-webkit-input-placeholder {
color: #B7C2CD;
}
.box-setup :-ms-input-placeholder {
color: green !important;
}
.box-setup :-moz-placeholder {
color: red !important;
} }
.home select, .home select,
@ -248,7 +263,7 @@ a:hover {
} }
.home, .createProfile, .settings { .home, .createProfile, .settings {
margin-top: 15%; margin-top: 8%;
color: #fff; color: #fff;
} }
@ -272,7 +287,7 @@ a:hover {
.logo-setup { .logo-setup {
text-align: center; text-align: center;
margin-top: 9%; margin-bottom: 2rem;
} }
.setup .logo-setup, .join .logo-setup { .setup .logo-setup, .join .logo-setup {
@ -280,8 +295,21 @@ a:hover {
} }
.box-setup { .box-setup {
padding: 20px 30px; margin: 0 auto;
background: #34495E; width: 310px;
padding: 1.3rem;
border-radius: 2px;
background: #FFFFFF;
-moz-box-shadow: 1px 1px 0px 0px #213140;
box-shadow: 1px 1px 0px 0px #213140;
}
.box-setup-footer {
overflow: hidden;
margin-top: 2rem;
padding: 1rem 0 0;
border-top: 1px solid #E5E7EA;
font-size: 12px;
} }
.box-setup label small.has-error { .box-setup label small.has-error {
@ -393,23 +421,18 @@ table.last-transactions-content {
margin-bottom: 10px; margin-bottom: 10px;
} }
.button-setup a { a.button-setup {
border-radius: 3px;
border: 1px solid #B7C2CE;
display: block; display: block;
padding: 20px 30px; padding: 0.5rem;
background: #34495E; background: transparent;
margin-bottom: 20px;
font-weight: 100;
font-size: 24px;
} }
.button-setup a:hover { .button-setup a:hover {
background: #3C4E60; background: #3C4E60;
} }
.footer-setup {
overflow: hidden;
}
.dn {display: none;} .dn {display: none;}
.pr {position: relative;} .pr {position: relative;}
.pa {position: absolute;} .pa {position: absolute;}
@ -697,6 +720,10 @@ input[type=number]::-webkit-outer-spin-button {
color: #1ABC9C; color: #1ABC9C;
} }
.bg-success {
background-color: #1ABC9C;
}
.label.success { .label.success {
background-color: #1ABC9C; background-color: #1ABC9C;
} }
@ -707,6 +734,10 @@ input[type=number]::-webkit-outer-spin-button {
font-weight: 700; font-weight: 700;
} }
.bg-alert {
background-color: #C0392A;
}
.dr-notification-text { .dr-notification-text {
font-size: 12px; font-size: 12px;
line-height: 120%; line-height: 120%;
@ -764,8 +795,8 @@ ul.pagination li.current a:hover, ul.pagination li.current a:focus {
} }
button.radius, .button.radius { button.radius, .button.radius {
-webkit-border-radius: 5px; -webkit-border-radius: 3px;
border-radius: 5px; border-radius: 3px;
} }
/* SECONDARY */ /* SECONDARY */
@ -810,7 +841,10 @@ button.primary,
.button.primary { .button.primary {
background-color: #1ABC9C; background-color: #1ABC9C;
color: #fff; color: #fff;
border-radius: 0; border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 1px 1px 0px 0px #16A085;
box-shadow: 1px 1px 0px 0px #16A085;
} }
button.primary:hover, button.primary:hover,
button.primary:focus, button.primary:focus,
@ -831,6 +865,8 @@ 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 {
-moz-box-shadow: 1px 1px 0px 0px #687D80;
box-shadow: 1px 1px 0px 0px #687D80;
background-color: #95a5a6; background-color: #95a5a6;
color: #E6E6E6; color: #E6E6E6;
} }
@ -939,6 +975,11 @@ button.gray:focus,
color: #2C3E50; color: #2C3E50;
} }
.button, button {
color: #FFFFFF;
text-transform: uppercase;
}
.side-nav {padding: 0;} .side-nav {padding: 0;}
.side-nav li { .side-nav li {
@ -1082,7 +1123,6 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
.text-white {color: #fff;} .text-white {color: #fff;}
.text-warning {color: #CA5649;} .text-warning {color: #CA5649;}
.footer-setup a.text-gray:hover {color: #fff;}
a.text-gray:hover {color: #2C3E50;} a.text-gray:hover {color: #2C3E50;}
a.text-black:hover {color: #213140;} a.text-black:hover {color: #213140;}
a.text-primary:hover {color: #50E3C2;} a.text-primary:hover {color: #50E3C2;}
@ -1120,6 +1160,18 @@ a.text-warning:hover {color: #FD7262;}
color: #fff; color: #fff;
} }
.box-setup h1 {
font-weight: 100;
font-size: 16px;
color: #2C3E50;
text-transform: uppercase;
text-align: center;
}
.box-setup form {
margin: 0;
}
.joyride-tip-guide { .joyride-tip-guide {
width: 150px; width: 150px;
background: #213140; background: #213140;

View file

@ -180,7 +180,7 @@
} }
.box-setup { .box-setup {
margin-bottom: 50px; width: 100%;
} }
.footer-setup { .footer-setup {

View file

@ -1,70 +1,74 @@
<div class="createProfile" ng-controller="CreateProfileController"> <div class="createProfile" ng-controller="CreateProfileController">
<div class="m30a" style="width:50%" ng-show="anyWallet && !anyProfile">
<div class="left">
<i class="size-36 fi-alert"></i>
</div>
<div>
Copay now needs a profile to access wallets. <br>
You can import current your wallets after creating your profile.
</div>
</div>
<div data-alert class="loading-screen" ng-show="retreiving"> <div data-alert class="loading-screen" ng-show="retreiving">
<i class="size-60 fi-bitcoin-circle icon-rotate spinner"></i> <i class="size-60 fi-bitcoin-circle icon-rotate spinner"></i>
Retreiving information from storage... Retreiving information from storage...
</div> </div>
<div class="row" ng-show="!loading && !retreiving">
<div class="large-4 columns logo-setup"> <div class="large-12 medium-6 medium-centered columns" ng-show="!loading && !retreiving">
<div class="logo-setup">
<img src="img/logo-negative-beta.svg" alt="Copay" width="146" height="59"> <img src="img/logo-negative-beta.svg" alt="Copay" width="146" height="59">
<div ng-include="'views/includes/version.html'"></div> <div ng-include="'views/includes/version.html'"></div>
</div> </div>
<div class="large-8 columns line-dashed-setup-v"> <div class="p10 box-setup bg-success m10b" ng-show="anyWallet && !anyProfile">
<div class="box-setup"> <div class="left">
<h1 class="text-white line-sidebar-b" translate >Create Profile</h1> <i class="size-36 fi-alert m10r"></i>
<form name="profileForm" ng-submit="createProfile(profileForm)" novalidate> </div>
<div class="row collapse"> <div class="size-12">
<div class="small-12 columns"> <b>Copay now needs a profile to access wallets. </b>
<input type="email" ng-model="email" class="form-control" You can import your current wallets after creating your frofile
name="email" placeholder="Email" required> </div>
<small class="icon-input" ng-show="!profileForm.email.$invalid && </div>
!profileForm.email.$pristine"><i class="fi-check"></i></small> <div class="box-setup">
<small class="icon-input" ng-show="profileForm.email.$invalid && <h1 class="m20b" translate >Create Profile</h1>
!profileForm.email.$pristine"><i class="fi-x"></i></small> <form name="profileForm" ng-submit="createProfile(profileForm)" novalidate>
</div> <div class="row collapse">
<div class="small-12 columns">
<input type="email" ng-model="email" class="form-control fi-email"
name="email" placeholder="Email" required>
<small class="icon-input" ng-show="!profileForm.email.$invalid &&
!profileForm.email.$pristine"><i class="fi-check"></i></small>
<small class="icon-input" ng-show="profileForm.email.$invalid &&
!profileForm.email.$pristine"><i class="fi-x"></i></small>
</div> </div>
<input id="password" type="password" ng-model="$parent.password" </div>
class="form-control" name="password" placeholder="{{'Choose a password'|translate}}" check-strength="passwordStrength" <input id="password" type="password" ng-model="$parent.password"
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 tooltip-placement="top"> class="form-control" name="password" placeholder="{{'Choose a password'|translate}}" 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 tooltip-placement="right">
<div class="pr"> <div class="pr">
<input type="password" ng-model="repeatpassword" <input type="password" ng-model="repeatpassword"
class="form-control" name="repeatpassword" class="form-control" name="repeatpassword"
placeholder="{{'Repeat password'|translate}}" placeholder="{{'Repeat password'|translate}}"
match="password" required > match="password" required >
<small class="icon-input" <small class="icon-input"
ng-show="profileForm.repeatpassword.$dirty &&
!profileForm.repeatpassword.$invalid"><i class="fi-check"></i></small>
<small class="icon-input"
ng-show="profileForm.repeatpassword.$dirty &&
profileForm.repeatpassword.$invalid"><i class="fi-x"></i></small>
<p class="m15b text-gray size-12"
ng-show="profileForm.repeatpassword.$dirty && ng-show="profileForm.repeatpassword.$dirty &&
profileForm.repeatpassword.$invalid"> !profileForm.repeatpassword.$invalid"><i class="fi-check"></i></small>
<i class="fi-x m5r"></i> <small class="icon-input"
{{'Passwords must match'|translate}} ng-show="profileForm.repeatpassword.$dirty &&
</p> profileForm.repeatpassword.$invalid"><i class="fi-x"></i></small>
</div> <p class="m15b text-gray size-12"
ng-show="profileForm.repeatpassword.$dirty &&
profileForm.repeatpassword.$invalid">
<div class="text-right"> <i class="fi-x m5r"></i>
<a href="#!/" class="back-button text-white m20r">&laquo; <span translate>Back</span></a> {{'Passwords must match'|translate}}
<button translate type="submit" class="button primary m0" </p>
ng-disabled="profileForm.$invalid || loading"> </div>
Create <div class="text-right">
</button> <button translate type="submit" class="button primary radius expand m0"
</div> ng-disabled="profileForm.$invalid || loading">
</form> Create
</button>
</div>
</form>
<div class="box-setup-footer">
<div class="left">
<a translate class="text-gray" href="#"><i class="m5r
size-14 fi-arrow-left"></i>Back to Copay.io</a>
</div>
<div class="right">
<a class="right size-12 text-gray" href="#!/settings"><i class="m5r
size-14 fi-wrench"></i><span translate>Settings</span></a>
</div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -4,35 +4,35 @@
<i class="size-60 fi-bitcoin-circle icon-rotate spinner"></i> <i class="size-60 fi-bitcoin-circle icon-rotate spinner"></i>
Retreiving information from storage... Retreiving information from storage...
</div> </div>
<div class="row" ng-show="!loading && !retreiving"> <div class="large-12 medium-6 medium-centered columns" ng-show="!loading && !retreiving">
<div class="large-4 columns logo-setup"> <div class="logo-setup">
<img src="img/logo-negative-beta.svg" alt="Copay" width="146" height="59"> <img src="img/logo-negative-beta.svg" alt="Copay" width="146" height="59">
<div ng-include="'views/includes/version.html'"></div> <div ng-include="'views/includes/version.html'"></div>
</div> </div>
<div class="large-8 columns line-dashed-setup-v"> <div class="box-setup">
<div class="box-setup"> <h1 translate >Sign in to <b> Copay </b></h1>
<h1 class="text-white line-sidebar-b" translate >Login </h1> <form name="loginForm" ng-submit="openProfile(loginForm)" novalidate>
<form name="loginForm" ng-submit="openProfile(loginForm)" novalidate> <input type="email" ng-model="email" class="form-control"
<input type="email" ng-model="email" class="form-control" name="email" placeholder="Email" required>
name="email" placeholder="Email" required> <input type="password" ng-model="password" class="form-control"
<input type="password" ng-model="password" class="form-control" name="password" placeholder="Password" required>
name="password" placeholder="Password" required>
<div class="text-right"> <div class="text-right">
<button translate type="submit" class="button primary m0" <button translate type="submit" class="button primary radius expand m0"
ng-disabled="loginForm.$invalid || loading"> ng-disabled="loginForm.$invalid || loading">
Login Sign in
</button> </button>
</div> </div>
</form> </form>
</div> <div class="box-setup-footer">
<div class="left">
<div class="button-setup"> <a translate class="button-setup text-gray" href="#!/createProfile"><i class="m5r
<a translate class="text-secondary" href="#!/createProfile">Create a profile</a> size-14 fi-torso"></i>Create a profile</a>
</div> </div>
<div class="footer-setup"> <div class="right m5t">
<a class="right size-12 text-gray" href="#!/settings"><i class="m10r <a class="right size-12 text-gray" href="#!/settings"><i class="m5r
size-14 fi-wrench"></i><span translate>Settings</span></a> size-14 fi-wrench"></i><span translate>Settings</span></a>
</div>
</div> </div>
</div> </div>
</div> </div>