Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-15 03:01:37 -05:00
Code Issues Activity

Integrate new auth styles into core

Browse source
This commit is contained in:
John O'Nolan 2015-05-17 13:31:54 +01:00 • committed by Hannah Wolfe
parent 208999a77f
commit 2f5a8f8e12
11 changed files with 505 additions and 499 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
core/client/app/html/install1.html
View file

@ -15,9 +15,9 @@
<body>
<div class="gh-setup">
<header class="gh-setup-head">
<nav class="gh-setup-nav">
<div class="gh-flow">
<header class="gh-flow-head">
<nav class="gh-flow-nav">
<ol>
<li class="current"><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
<li class="divider"></li>
@ -28,14 +28,14 @@
</nav>
</header>
<div class="gh-setup-content-wrap">
<section class="gh-setup-content">
<div class="gh-flow-content-wrap">
<section class="gh-flow-content">
<header>
<h1>Welcome to <strong>Ghost</strong>!</h1>
<p>So far there have been <em>542,952</em> Ghost blogs made by people all over the world. Today we’re making yours.</p>
</header>
<img class="gh-setup-screenshot" src="file:///Users/John/Sites/Ghost/core/shared/img/install-welcome.png" alt="Ghost screenshot" />
<img class="gh-flow-screenshot" src="file:///Users/John/Sites/Ghost/core/shared/img/install-welcome.png" alt="Ghost screenshot" />
<a class="btn btn-green btn-lg" href="#">Create your account <i class="icon-chevron"></i></a>
</section>

22
core/client/app/html/install2.html
View file

@ -15,10 +15,10 @@
<body>
<div class="gh-setup">
<header class="gh-setup-head">
<nav class="gh-setup-nav">
<a class="gh-setup-back" href="#"><i class="icon-chevron-left"></i> Back</a>
<div class="gh-flow">
<header class="gh-flow-head">
<nav class="gh-flow-nav">
<a class="gh-flow-back" href="#"><i class="icon-chevron-left"></i> Back</a>
<ol>
<li><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
<li class="divider"></li>
@ -29,13 +29,13 @@
</nav>
</header>
<div class="gh-setup-content-wrap">
<section class="gh-setup-content">
<div class="gh-flow-content-wrap">
<section class="gh-flow-content">
<header>
<h1>Create your account</h1>
</header>
<form class="gh-setup-create">
<form class="gh-flow-create">
<figure class="account-image">
<div id="account-image" class="img" style="background-image: url(http://www.gravatar.com/avatar/75e958a6674a7d68fe0d575fb235116c?d=404&s=250)">
<!-- fallback to: Ghost/core/shared/img/ghosticon.jpg -->
@ -46,19 +46,19 @@
<div class="form-group">
<label for="email-address">Email address</label>
<span class="input-icon icon-mail">
<input id="email-address" class="ember-view ember-text-field" type="email" placeholder="Eg. john@example.com">
<input id="email-address" class="ember-view ember-text-field gh-input" type="email" placeholder="Eg. john@example.com">
</span>
</div>
<div class="form-group">
<label for="full-name">Full name</label>
<span class="input-icon icon-user">
<input id="full-name" class="ember-view ember-text-field" type="text" placeholder="Eg. John Smith">
<input id="full-name" class="ember-view ember-text-field gh-input" type="text" placeholder="Eg. John Smith">
</span>
</div>
<div class="form-group">
<label for="password">Password</label>
<span class="input-icon icon-lock">
<input id="password" class="ember-view ember-text-field" type="password" placeholder="At least 7 characters">
<input id="password" class="ember-view ember-text-field gh-input" type="password" placeholder="At least 7 characters">
<div class="pw-strength">
<div class="pw-strength-dot"></div>
<div class="pw-strength-dot"></div>
@ -71,7 +71,7 @@
<div class="form-group">
<label for="blog-title">Blog title</label>
<span class="input-icon icon-content">
<input id="blog-title" class="ember-view ember-text-field" type="text" placeholder="Eg. The Daily Awesome">
<input id="blog-title" class="ember-view ember-text-field gh-input" type="text" placeholder="Eg. The Daily Awesome">
</span>
</div>
</form>

14
core/client/app/html/install3.html
View file

@ -15,10 +15,10 @@
<body>
<div class="gh-setup">
<header class="gh-setup-head">
<nav class="gh-setup-nav">
<a class="gh-setup-back" href="#"><i class="icon-chevron-left"></i> Back</a>
<div class="gh-flow">
<header class="gh-flow-head">
<nav class="gh-flow-nav">
<a class="gh-flow-back" href="#"><i class="icon-chevron-left"></i> Back</a>
<ol>
<li><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
<li class="divider"></li>
@ -29,13 +29,13 @@
</nav>
</header>
<div class="gh-setup-content-wrap">
<section class="gh-setup-content">
<div class="gh-flow-content-wrap">
<section class="gh-flow-content">
<header>
<h1>Create your account</h1>
</header>
<form class="gh-setup-create">
<form class="gh-flow-create">
<figure class="account-image">
<div id="account-image" class="img" style="background-image: url(http://www.gravatar.com/avatar/75e958a6674a7d68fe0d575fb235116c?d=404&s=250)">
<!-- fallback to: Ghost/core/shared/img/ghosticon.jpg -->

16
core/client/app/html/install4.html
View file

@ -15,10 +15,10 @@
<body>
<div class="gh-setup">
<header class="gh-setup-head">
<nav class="gh-setup-nav">
<a class="gh-setup-back" href="#"><i class="icon-chevron-left"></i> Back</a>
<div class="gh-flow">
<header class="gh-flow-head">
<nav class="gh-flow-nav">
<a class="gh-flow-back" href="#"><i class="icon-chevron-left"></i> Back</a>
<ol>
<li><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
<li class="divider"></li>
@ -29,16 +29,16 @@
</nav>
</header>
<div class="gh-setup-content-wrap">
<section class="gh-setup-content">
<div class="gh-flow-content-wrap">
<section class="gh-flow-content">
<header>
<h1>Invite your team</h1>
<p>Ghost works best when shared with others. Collaborate, get feedback on your posts &amp; work together on ideas.</p>
</header>
<img class="gh-setup-faces" src="file:///Users/John/Sites/Ghost/core/shared/img/users.png" alt="" />
<img class="gh-flow-faces" src="file:///Users/John/Sites/Ghost/core/shared/img/users.png" alt="" />
<form class="gh-setup-invite">
<form class="gh-flow-invite">
<label>Enter one email address per line, we’ll handle the rest! <i class="icon-mail"></i></label>
<textarea placeholder="john@example.com
sally.sanders@example.com"></textarea>

2
core/client/app/styles/app.css
View file

@ -31,7 +31,7 @@
/* Layouts: Groups of Components
/* ---------------------------------------------------------- */
@import "layouts/main.css";
@import "layouts/setup.css";
@import "layouts/flow.css";
@import "layouts/auth.css";
@import "layouts/content.css";
@import "layouts/editor.css";

304
core/client/app/styles/layouts/auth.css
View file

@ -1,294 +1,48 @@
/* Authentication /ghost/[signin/signup/forgotten/reset]
/* ---------------------------------------------------------- */
.ghost-login,
.ghost-signup,
.ghost-forgotten,
.ghost-reset {
background: var(--darkgrey);
color: var(--midgrey);
}
.ghost-login main,
.ghost-signup main,
.ghost-forgotten main,
.ghost-reset main {
padding-top: 15px;
}
.ghost-login input,
.ghost-signup input,
.ghost-forgotten input,
.ghost-reset input {
position: relative;
margin: 0;
border: none;
background: color(var(--darkgrey) lightness(+10%));
box-shadow: none;
color: #fff;
font-size: 1.1em;
line-height: 1.4em;
font-weight: 200;
transition: background ease 0.25s;
}
.ghost-login input:focus,
.ghost-signup input:focus,
.ghost-forgotten input:focus,
.ghost-reset input:focus {
border: none;
background: color(var(--darkgrey) lightness(+15%));
}
.ghost-login input:-webkit-autofill,
.ghost-signup input:-webkit-autofill,
.ghost-forgotten input:-webkit-autofill,
.ghost-reset input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--lightgrey) inset !important;
}
.login-box,
.signup-box,
.forgotten-box,
.reset-box {
display: table;
margin: 0 auto;
padding: 0;
max-width: 530px;
height: 90%;
}
@media (max-width: 630px) {
.login-box,
.signup-box,
.forgotten-box,
.reset-box {
max-width: 264px;
text-align: center;
}
}
/* Sign in
/* ---------------------------------------------------------- */
.login-form {
display: table-cell;
max-width: 530px;
color: color(var(--midgrey) lightness(+15%));
vertical-align: middle;
}
@media (max-width: 630px) {
.login-form {
max-width: 264px;
}
}
.login-form .email-wrap,
.login-form .password-wrap {
.gh-signin {
position: relative;
float: left;
margin: 0 0 5px 0;
margin: 30px auto;
padding: 40px;
max-width: 400px;
border: #dae1e3 1px solid;
background: #f8fbfd;
border-radius: 5px;
text-align: left;
}
@media (max-width: 630px) {
.login-form .email-wrap,
.login-form .password-wrap {
margin-bottom: 1em;
}
.gh-signin .form-group {
margin-bottom: 1.5rem;
}
.login-form .email-wrap {
margin-right: 3px;
}
@media (max-width: 630px) {
.login-form .email-wrap {
margin-right: 0;
}
}
.login-form .email,
.login-form .password {
display: inline-block;
clear: both;
padding: 8px 0 8px 8px;
width: 216px;
}
@media (max-width: 630px) {
.login-form .email,
.login-form .password {
width: 264px;
border-radius: 2px;
}
}
@media (min-width: 631px) {
.login-form .email {
border-radius: 2px 0 0 2px;
}
.login-form .password {
border-radius: 0 2px 2px 0;
}
}
.login-form button {
margin-left: 10px;
width: 85px;
height: 37px;
}
@media (max-width: 630px) {
.login-form button {
margin: 0;
margin-bottom: 1em;
width: 100%;
}
}
.login-form .meta {
clear: both;
color: var(--midgrey);
}
.login-form .forgotten-link {
display: inline-block;
.gh-signin .btn {
margin: 0;
padding: 0;
width: auto;
height: auto;
color: color(var(--midgrey) lightness(-10%));
padding: 12px;
}
.forgotten-wrap {
position: relative;
}
.forgotten-wrap .forgotten-link {
position: absolute;
top: 10px;
right: 0;
bottom: 10px;
padding: 0 12px;
border-left: #dae1e3 1px solid;
border-radius: 0;
text-transform: none;
letter-spacing: 0;
font-size: 1.25rem;
}
.login-form a {
color: color(var(--midgrey) lightness(-10%));
font-size: 0.9em;
}
.login-form a:hover {
color: color(var(--midgrey) lightness(+5%));
.forgotten-link:hover {
border-left: #dae1e3 1px solid;
color: color(var(--blue) lightness(-20%));
text-decoration: none;
}
/* Signup / Reset Password
/* ---------------------------------------------------------- */
.signup-form,
.reset-form {
display: table-cell;
max-width: 280px;
color: color(var(--midgrey) lightness(+15%));
vertical-align: middle;
}
@media (max-width: 630px) {
.signup-form,
.reset-form {
width: 264px;
}
}
.signup-form .password-wrap,
.reset-form .password-wrap {
position: relative;
display: table;
float: left;
margin: 0 0 1em 0;
background: color(var(--darkgrey) lightness(+10%));
}
.signup-form input,
.reset-form input {
padding: 8px 10px;
width: 280px;
}
@media (max-width: 630px) {
.signup-form input,
.reset-form input {
width: 264px;
}
}
.signup-form .name-wrap,
.reset-form .name-wrap {
position: relative;
border-radius: 2px;
}
.signup-form .name,
.reset-form .name {
border-radius: 2px;
}
.signup-form .email-wrap,
.reset-form .email-wrap {
position: relative;
border-radius: 2px;
}
.signup-form .email,
.reset-form .email {
border-radius: 2px;
}
.signup-form .password-wrap,
.reset-form .password-wrap {
position: relative;
border-radius: 2px;
}
.signup-form .password,
.reset-form .password {
border-radius: 2px;
}
.signup-form button,
.reset-form button {
margin: 0 0 1em 0;
padding: 0.5em 1.37em;
min-width: 80px;
min-height: 30px;
width: 100%;
height: 36px;
box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0 inset;
}
/* Forgotten password
/* ---------------------------------------------------------- */
.forgotten-form {
display: table-cell;
max-width: 280px;
color: color(var(--midgrey) lightness(+15%));
vertical-align: middle;
}
.forgotten-form .email-wrap {
position: relative;
float: left;
margin: 0 0 1em 0;
width: 100%;
border-radius: 2px;
}
.forgotten-form .email {
padding: 8px 10px;
border-radius: 2px;
}
.forgotten-form button {
width: 100%;
height: 37px;
}
.private-login h1 {
margin-bottom: 2rem;
text-indent: 0;

374
core/client/app/styles/layouts/flow.css Normal file
View file

@ -0,0 +1,374 @@
/* Full screen workflow
/* ---------------------------------------------------------- */
.gh-flow {
flex-grow: 1;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.gh-flow-head {
display: flex;
justify-content: space-between;
padding-top: 4vh;
padding-bottom: 20px;
}
.gh-flow-content-wrap {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
margin: 0 5%;
padding-bottom: 8vh;
}
.gh-flow-back {
position: absolute;
top: 0;
left: 0;
margin: 0 0 0 3%;
padding: 2px 9px 2px 5px;
border: transparent 1px solid;
border-radius: 4px;
color: #7d878a;
font-weight: 100;
transition: all 0.3s ease;
}
.gh-flow-back:hover {
border: #dae1e3 1px solid;
}
.gh-flow-nav {
position: relative;
flex: 1;
}
.gh-flow-nav ol {
display: flex;
justify-content: space-between;
margin: 0 auto;
padding: 0;
width: 160px;
list-style: none;
}
.gh-flow-nav li {
margin: 0;
}
.gh-flow-nav .divider {
align-self: center;
width: 22px;
height: 2px;
background-image: linear-gradient(to right, var(--green) 33%, rgba(255, 255, 255, 0) 0%);
background-position: bottom;
background-size: 6px 2px;
background-repeat: repeat-x;
}
.gh-flow-nav .current ~ .divider {
background-image: linear-gradient(to right, #e3e3e3 33%, rgba(255, 255, 255, 0) 0%);
}
.gh-flow-nav .step {
display: table-cell;
width: 30px;
height: 30px;
border: transparent 2px solid;
background: var(--green);
border-radius: 100%;
color: #fff;
vertical-align: middle;
text-align: center;
text-align: center;
font-size: 1.3rem;
}
.gh-flow-nav .step .num {
display: none;
}
.gh-flow-nav .current ~ li:not(divider) .step {
border: #e3e3e3 2px solid;
background: transparent;
color: #cdcdcd;
}
.gh-flow-nav .current ~ li:not(divider) .step .num {
display: block;
}
.gh-flow-nav .current ~ li:not(divider) .step i {
display: none;
}
.gh-flow-nav .current .step {
border: var(--green) 2px solid;
background: transparent;
color: var(--green);
font-weight: bold;
cursor: default;
}
.gh-flow-nav .current .step .num {
display: block;
}
.gh-flow-nav .current .step i {
display: none;
}
.gh-flow-nav .done {
border: none;
background: var(--green);
color: #fff;
}
.gh-flow-content {
max-width: 700px;
width: 100%;
color: var(--midgrey);
text-align: center;
font-size: 1.9rem;
line-height: 1.5em;
font-weight: 100;
}
@media (max-width: 500px) {
.gh-flow-content {
font-size: 4vw;
}
}
.gh-flow-content header {
margin: 0 auto;
max-width: 520px;
}
.gh-flow-content h1 {
letter-spacing: -1px;
font-size: 4.2rem;
font-weight: 100;
}
@media (max-width: 600px) {
.gh-flow-content h1 {
font-size: 7vw;
}
}
.gh-flow-content strong {
font-weight: 400;
}
.gh-flow-content em {
color: var(--blue);
font-weight: 400;
font-style: normal;
}
.gh-flow-content img {
max-width: 100%;
}
.gh-flow-content .gh-flow-screenshot {
position: relative;
left: -38px;
}
@media (max-width: 860px) {
.gh-flow-content .gh-flow-screenshot {
left: 0;
}
}
.gh-flow-content .btn {
display: block;
margin: 20px auto 0;
max-width: 400px;
}
.gh-flow-content .gh-flow-create {
position: relative;
margin: 70px auto 30px;
padding: 50px 40px 25px;
max-width: 400px;
border: #dae1e3 1px solid;
background: #f8fbfd;
border-radius: 5px;
text-align: left;
}
.gh-flow-content .account-image {
position: absolute;
top: -50px;
left: 50%;
overflow: hidden;
margin: 0;
margin-left: -50px;
padding: 4px;
width: 100px;
height: 100px;
border: #d1d9db 1px solid;
background: #fff;
border-radius: 100%;
text-align: center;
}
.gh-flow-content .account-image:hover .edit-account-image {
opacity: 1;
}
.gh-flow-content .edit-account-image {
position: absolute;
top: 4px;
right: 4px;
bottom: 4px;
left: 4px;
width: calc(100% - 8px);
background: rgba(87, 163, 232, 0.7);
border-radius: 100%;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 3rem;
line-height: 90px;
opacity: 0;
transition: opacity 0.3s ease;
}
.gh-flow-content .img {
display: block;
width: 90px;
height: 90px;
background-color: #f8fbfd;
background-position: center center;
background-size: cover;
border-radius: 100%;
animation: fade-in 1s;
}
.gh-flow-content .form-group {
margin-bottom: 2.5rem;
}
.gh-flow-content .form-group label {
margin: 0;
font-size: 1.4rem;
font-weight: 400;
}
.gh-flow-content .form-group a {
text-decoration: underline;
}
.gh-flow-content input {
padding: 10px;
border: #dae1e3 1px solid;
font-size: 1.6rem;
line-height: 1.4em;
font-weight: 100;
}
.gh-flow-content .pw-strength {
position: absolute;
top: 50%;
right: 1px;
margin-top: -11px;
padding: 0 10px;
height: 24px;
background: rgba(255, 255, 255, 0.9);
}
.gh-flow-content .pw-strength-dot {
display: block;
margin-top: 2px;
width: 3px;
height: 3px;
background-color: #d9e0e3;
border-radius: 100%;
}
.gh-flow-content .pw-strength-dot:first-child {
margin-top: 0;
}
.gh-flow-content .pw-strength-activedot {
background-color: var(--red);
}
.gh-flow-content .input-icon[class*="icon-"]:before {
transform: translateY(-49%);
}
.gh-flow-content .gh-flow-invite {
margin: 0 auto;
max-width: 400px;
width: 100%;
text-align: left;
}
@media (max-width: 460px) {
.gh-flow-content .gh-flow-invite label i {
display: none;
}
}
.gh-flow-content .gh-flow-faces {
margin-bottom: 3vw;
}
.gh-flow-content textarea {
margin-bottom: 40px;
width: 100%;
height: 160px;
font-size: 1.6rem;
font-weight: 100;
}
@media (max-width: 1200px) {
.gh-flow-content textarea {
margin-bottom: 3vw;
}
}
.gh-flow-content .response {
position: absolute;
right: 0;
bottom: -25px;
margin: 0;
color: #a6b0b3;
text-align: right;
font-size: 1.2rem;
}
.gh-flow-content .success .input-icon:before {
color: var(--green);
}
.error,
.error-content,
.main-error {
user-select: text;
}
.gh-flow-content .error input {
border-color: var(--red);
}
.gh-flow-content .error .input-icon:before {
color: var(--red);
}
.gh-flow-content .error .response {
color: var(--red);
}
.gh-flow-content .main-error {
margin-top: 5px;
color: var(--red);
font-size: 1.3rem;
}

143
core/client/app/styles/layouts/setup.css
View file

@ -1,143 +0,0 @@
/* Setup New Blog /ghost/setup/
/* ---------------------------------------------------------- */
.ghost-setup {
background: var(--darkgrey);
color: var(--midgrey);
}
@media (max-width: 550px) {
.ghost-setup {
background: color(var(--darkgrey) lightness(-5%));
}
}
.ghost-setup main {
overflow: auto;
-webkit-overflow-scrolling: touch;
padding-top: 15px;
}
@media (max-width: 550px) {
.ghost-setup main {
top: 0;
}
}
.setup-box {
display: table;
margin: 0 auto;
padding: 0;
max-width: 500px;
height: 90%;
}
.setup-form {
padding: 40px;
max-width: 530px;
border-radius: 2px;
color: color(var(--midgrey) lightness(+15%));
}
@media (max-width: 400px) {
.setup-form {
padding: 15px;
}
}
@media (min-width: 551px) {
.setup-form {
background: color(var(--darkgrey) lightness(-5%));
}
}
.setup-form header {
margin-bottom: 30px;
}
.setup-form label {
color: var(--lightgrey);
font-weight: 300;
}
@media (max-width: 550px) {
.setup-form label {
width: 100%;
}
}
.setup-form .form-group input {
padding: 7px;
border: none;
background: color(var(--darkgrey) lightness(+10%));
color: #fff;
transition: background 0.25s ease;
}
.setup-form .form-group input:focus {
border: none;
background: color(var(--darkgrey) lightness(+15%));
}
.setup-form input:-webkit-autofill {
/* Chrome auto-fill style */
-webkit-box-shadow: 0 0 0 1000px var(--lightgrey) inset !important;
}
.setup-form h1 {
margin: 0;
color: var(--lightgrey);
letter-spacing: 0;
font-size: 26px;
font-weight: 200;
}
@media (max-width: 400px) {
.setup-form h1 {
font-size: 18px;
}
}
@media (max-width: 550px) {
.setup-form h1 {
font-size: 20px;
}
}
.setup-form h2 {
margin: 6px 0 0 0;
padding: 0;
border: none;
color: var(--midgrey);
letter-spacing: 0;
font-size: 16px;
font-weight: 200;
}
@media (max-width: 400px) {
.setup-form h2 {
font-size: 12px;
}
}
@media (max-width: 550px) {
.setup-form h2 {
font-size: 14px;
}
}
.setup-form p {
color: var(--midgrey);
font-size: 12px;
line-height: 1.4em;
}
.setup-form footer {
margin: 30px 0 5px 0;
}
.setup-form .btn-green {
padding: 0.9em 1.8em;
width: 100%;
font-size: 13px;
}

2
core/client/app/styles/patterns/global.css
View file

@ -55,7 +55,6 @@ body {
height: 100%;
color: lighten(var(--darkgrey), 10%);
font-size: 1.4rem;
font-feature-settings: "kern" 1;
}
::selection {
@ -76,7 +75,6 @@ h6 {
color: var(--darkgrey);
line-height: 1.15em;
text-rendering: optimizeLegibility;
font-feature-settings: "dlig" 1, "liga" 1, "lnum" 1, "kern" 1;
}
h1 {

38
core/client/app/templates/signin.hbs
View file

@ -1,18 +1,22 @@
<section class="login-box js-login-box fade-in">
<form id="login" class="login-form" method="post" novalidate="novalidate" {{action 'validateAndAuthenticate' on='submit'}}>
<div class="email-wrap">
<span class="input-icon icon-mail">
{{gh-trim-focus-input class="gh-input email" type="email" placeholder="Email Address" name="identification" autocapitalize="off" autocorrect="off" value=model.identification}}
</span>
</div>
<div class="password-wrap">
<span class="input-icon icon-lock">
{{input class="gh-input password" type="password" placeholder="Password" name="password" value=model.password}}
</span>
</div>
<button class="btn btn-blue" type="submit" {{action "validateAndAuthenticate"}} disabled={{submitting}}>Log in</button>
<section class="meta">
<button {{action 'forgotten'}} class="forgotten-link btn btn-link">Forgotten password?</button>
<div class="gh-flow">
<div class="gh-flow-content-wrap">
<section class="gh-flow-content">
<form id="login" class="gh-signin" method="post" novalidate="novalidate" {{action 'validateAndAuthenticate' on='submit'}}>
<div class="form-group">
<span class="input-icon icon-mail">
{{gh-trim-focus-input class="gh-input email" type="email" placeholder="Email Address" name="identification" autocapitalize="off" autocorrect="off" tabindex="1" value=model.identification}}
</span>
</div>
<div class="form-group">
<span class="input-icon icon-lock forgotten-wrap">
{{input class="gh-input password" type="password" placeholder="Password" name="password" tabindex="2" value=model.password}}
<button {{action 'forgotten'}} class="forgotten-link btn btn-link" tabindex="4">Forgot?</button>
</span>
</div>
<button id="login-button" class="login btn btn-blue btn-block" type="submit" tabindex="3" {{action "validateAndAuthenticate"}} disabled={{submitting}}>Sign in</button>
</form>
<p class="main-error">The password fairy does not approve</p>
</section>
</form>
</section>
</div>
</div>

77
core/client/app/templates/signup.hbs
View file

@ -1,33 +1,52 @@
<section class="setup-box js-signup-box fade-in">
<div class="vertical">
<form id="signup" class="setup-form" method="post" novalidate="novalidate">
{{!-- Horrible hack to prevent Chrome from incorrectly auto-filling inputs --}}
<input style="display:none;" type="text" name="fakeusernameremembered"/>
<input style="display:none;" type="password" name="fakepasswordremembered"/>
<div class="gh-flow">
<div class="gh-flow-content-wrap">
<section class="gh-flow-content">
<header>
<h1>Welcome to Ghost</h1>
<h2>Create your account to start publishing</h2>
<h1>Create your account</h1>
</header>
<div class="form-group">
<label for="email">Email Address</label>
{{input class="gh-input" type="email" name="email" autocorrect="off" value=model.email }}
<p>Used for important notifications</p>
</div>
<div class="form-group">
<label for="name">Full Name</label>
{{gh-trim-focus-input class="gh-input" type="text" name="name" autofocus="autofocus" autocorrect="off" value=model.name }}
<p>The name that you will sign your posts with</p>
</div>
<div class="form-group">
<label for="password">Password</label>
{{input class="gh-input" type="password" name="password" autofocus="autofocus" autocorrect="off" value=model.password }}
<p>Must be at least 8 characters</p>
</div>
<footer>
<button type="submit" class="btn btn-green btn-lg" {{action "signup"}} disabled={{submitting}}>Create Account</button>
</footer>
</form>
<form id="signup" class="gh-flow-create" method="post" novalidate="novalidate">
{{!-- Hack to stop Chrome's broken auto-fills --}}
<input style="display:none;" type="text" name="fakeusernameremembered"/>
<input style="display:none;" type="password" name="fakepasswordremembered"/>
<figure class="account-image">
<div id="account-image" class="img" style="background-image: url(http://www.gravatar.com/avatar/75e958a6674a7d68fe0d575fb235116c?d=404&s=250)">
<!-- fallback to: Ghost/core/shared/img/ghosticon.jpg -->
<span class="sr-only">User imge</span>
</div>
<a class="edit-account-image" href="#"><i class="icon-image "><span class="sr-only">Upload an image</span></i></a>
</figure>
<div class="form-group">
<label for="email-address">Email address</label>
<span class="input-icon icon-mail">
{{input class="gh-input" type="email" name="email" autocorrect="off" value=model.email }}
</span>
</div>
<div class="form-group">
<label for="full-name">Full name</label>
<span class="input-icon icon-user">
{{gh-trim-focus-input class="gh-input" type="text" name="name" autofocus="autofocus" autocorrect="off" value=model.name }}
</span>
</div>
<div class="form-group">
<label for="password">Password</label>
<span class="input-icon icon-lock">
{{input class="gh-input" type="password" name="password" autofocus="autofocus" autocorrect="off" value=model.password }}
<div class="pw-strength">
<div class="pw-strength-dot"></div>
<div class="pw-strength-dot"></div>
<div class="pw-strength-dot"></div>
<div class="pw-strength-dot"></div>
<div class="pw-strength-dot <!--pw-strength-activedot-->"></div>
</div>
</span>
</div>
</form>
<button type="submit" class="btn btn-green btn-lg btn-block" {{action "signup"}} disabled={{submitting}}>Create Account</button>
</section>
</div>
</section>
</div>