Merge pull request #656 from JohnONolan/signup-screen

Signup screen
This commit is contained in:
Hannah Wolfe 2013-09-09 01:59:32 -07:00
commit 9e06f7fa21
4 changed files with 175 additions and 14 deletions

View File

@ -3,14 +3,18 @@
*
* Table of Contents:
*
* 0. General
* 1. Login
* 2. Signup
*
*/
/* =============================================================================
Login
0. General
============================================================================= */
.ghost-login {
.ghost-login,
.ghost-forgotten {
color: $midgrey;
background: $darkgrey;
@ -37,6 +41,11 @@
}
}
/* =============================================================================
1. Login
============================================================================= */
#login {
@include box-sizing(border-box);
max-width: 530px;
@ -160,3 +169,156 @@
}
/* =============================================================================
2. Signup
============================================================================= */
#signup {
@include box-sizing(border-box);
max-width: 280px;
color: lighten($midgrey, 15%);
display: table-cell;
vertical-align: middle;
@include breakpoint(630px) {
max-width: 264px;
}
div { // Yes. Really.
position:relative;
margin:0 0 1em 0;
background: lighten($darkgrey, 10%);
float: left;
display: table;
}
input {
margin:0;
padding: 8px 10px;
position: relative;
border: none;
color: #fff;
font-size: 1.1em;
font-weight: 200;
background: transparent;
box-shadow: none;
@include transition(background ease 0.25s);
@include breakpoint(630px) {
@include transition(none);
max-width: 244px;
}
&:focus {
background: lighten($darkgrey, 15%);
}
}
.name-wrap {
position:relative;
border-radius: 2px;
.name {
border-radius: 2px;
}
}
.email-wrap {
position:relative;
border-radius: 2px;
.email {
border-radius: 2px;
}
}
.password-wrap {
position:relative;
border-radius: 2px;
.password {
border-radius: 2px;
}
}
button {
@include box-sizing(border-box);
width: 100%;
height: 36px;
margin: 0 0 1em 0;
padding: 0.5em 1.37em;
min-height: 30px;
min-width: 80px;
box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
}
}
/* =============================================================================
3. Forgotten
============================================================================= */
#forgotten {
@include box-sizing(border-box);
max-width: 280px;
color: lighten($midgrey, 15%);
display: table-cell;
vertical-align: middle;
@include breakpoint(630px) {
max-width: 264px;
}
div { // Yes. Really.
position:relative;
margin:0 0 1em 0;
background: lighten($darkgrey, 10%);
float: left;
}
input {
margin:0;
padding: 8px 10px;
position: relative;
border: none;
color: #fff;
font-size: 1.1em;
font-weight: 200;
background: transparent;
box-shadow: none;
@include transition(background ease 0.25s);
@include breakpoint(630px) {
@include transition(none);
max-width: 244px;
}
&:focus {
background: lighten($darkgrey, 15%);
}
}
.email-wrap {
position:relative;
border-radius: 2px;
.email {
border-radius: 2px;
}
}
button {
@include box-sizing(border-box);
width: 100%;
height: 36px;
margin: 0 0 1em 0;
padding: 0.5em 1.37em;
min-height: 30px;
min-width: 80px;
box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
}
}

View File

@ -3,7 +3,4 @@
<input class="email" type="email" placeholder="Email Address" name="email" autocapitalize="off" autocorrect="off">
</div>
<button class="button-save" type="submit">Send new password</button>
<section class="meta">
<a href="/ghost/login/">Log in</a>
</section>
</form>

View File

@ -1,12 +1,12 @@
<form id="register" method="post" novalidate="novalidate">
<form id="signup" method="post" novalidate="novalidate">
<div class="name-wrap">
<input class="name" type="text" placeholder="Full Name" name="name" autocorrect="off" />
</div>
<div class="email-wrap">
<input class="email" type="email" placeholder="Email Address" name="email" autocapitalize="off" autocorrect="off">
<input class="email" type="email" placeholder="Email Address" name="email" autocapitalize="off" autocorrect="off" />
</div>
<div class="password-wrap">
<input class="password" type="password" placeholder="Password" name="password">
<input class="password" type="password" placeholder="Password" name="password" />
</div>
<button class="button-save" type="submit">Register</button>
<section class="meta">
<a href="/ghost/login/">Log in</a>
</section>
<button class="button-save" type="submit">Sign Up</button>
</form>

View File

@ -53,18 +53,20 @@
templateName: "signup",
events: {
'submit #register': 'submitHandler'
'submit #signup': 'submitHandler'
},
submitHandler: function (event) {
event.preventDefault();
var email = this.$el.find('.email').val(),
var name = this.$el.find('.name').val(),
email = this.$el.find('.email').val(),
password = this.$el.find('.password').val();
$.ajax({
url: '/ghost/signup/',
type: 'POST',
data: {
name: name,
email: email,
password: password
},