Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-27 22:49:56 -05:00
Code Issues Activity

Merge pull request #5556 from cobbspur/newflow2

Browse source 
Update onboarding navigation
This commit is contained in:
Hannah Wolfe 2015-07-22 11:56:06 +01:00
commit 89f5e55850
8 changed files with 59 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
core/client/app/controllers/setup.js
View file

@ -1,54 +1,15 @@
import Ember from 'ember'; import Ember from 'ember';
import {request as ajax} from 'ic-ajax';
import ValidationEngine from 'ghost/mixins/validation-engine';
export default Ember.Controller.extend(ValidationEngine, {
blogTitle: null,
name: null,
email: null,
password: null,
submitting: false,
// ValidationEngine settings
validationType: 'setup',
export default Ember.Controller.extend({
appController: Ember.inject.controller('application'),
ghostPaths: Ember.inject.service('ghost-paths'), ghostPaths: Ember.inject.service('ghost-paths'),
notifications: Ember.inject.service(),
actions: { showBackLink: Ember.computed.match('appController.currentRouteName', /^setup\.(two|three)$/),
setup: function () {
var self = this,
data = self.getProperties('blogTitle', 'name', 'email', 'password'),
notifications = this.get('notifications');
notifications.closePassive(); backRoute: Ember.computed('appController.currentRouteName', function () {
var appController = this.get('appController'),
currentRoute = Ember.get(appController, 'currentRouteName');
this.toggleProperty('submitting'); return currentRoute === 'setup.two' ? 'setup.one' : 'setup.two';
this.validate({format: false}).then(function () { })
ajax({
url: self.get('ghostPaths.url').api('authentication', 'setup'),
type: 'POST',
data: {
setup: [{
name: data.name,
email: data.email,
password: data.password,
blogTitle: data.blogTitle
}]
}
}).then(function () {
self.get('session').authenticate('simple-auth-authenticator:oauth2-password-grant', {
identification: self.get('email'),
password: self.get('password')
});
}).catch(function (resp) {
self.toggleProperty('submitting');
notifications.showAPIError(resp);
});
}).catch(function (errors) {
self.toggleProperty('submitting');
notifications.showErrors(errors);
});
}
}
}); });

3
core/client/app/controllers/setup/three.js
View file

@ -1,6 +1,6 @@
import Ember from 'ember'; import Ember from 'ember';
var SetupThreeController = Ember.Controller.extend({ export default Ember.Controller.extend({
notifications: Ember.inject.service(), notifications: Ember.inject.service(),
users: '', users: '',
usersArray: Ember.computed('users', function () { usersArray: Ember.computed('users', function () {
@ -133,4 +133,3 @@ var SetupThreeController = Ember.Controller.extend({
} }
}); });
export default SetupThreeController;

8
core/client/app/controllers/setup/two.js
View file

@ -9,7 +9,6 @@ export default Ember.Controller.extend(ValidationEngine, {
email: '', email: '',
password: null, password: null,
image: null, image: null,
submitting: false,
blogCreated: false, blogCreated: false,
ghostPaths: Ember.inject.service('ghost-paths'), ghostPaths: Ember.inject.service('ghost-paths'),
@ -52,9 +51,8 @@ export default Ember.Controller.extend(ValidationEngine, {
data = self.getProperties('blogTitle', 'name', 'email', 'password', 'image'), data = self.getProperties('blogTitle', 'name', 'email', 'password', 'image'),
notifications = this.get('notifications'), notifications = this.get('notifications'),
config = this.get('config'), config = this.get('config'),
method = (this.get('blogCreated')) ? 'PUT' : 'POST'; method = this.get('blogCreated') ? 'PUT' : 'POST';
this.toggleProperty('submitting');
this.validate().then(function () { this.validate().then(function () {
self.set('showError', false); self.set('showError', false);
ajax({ ajax({
@ -72,14 +70,12 @@ export default Ember.Controller.extend(ValidationEngine, {
config.set('blogTitle', data.blogTitle); config.set('blogTitle', data.blogTitle);
// Don't call the success handler, otherwise we will be redirected to admin // Don't call the success handler, otherwise we will be redirected to admin
self.get('application').set('skipAuthSuccessHandler', true); self.get('application').set('skipAuthSuccessHandler', true);
self.get('session').authenticate('simple-auth-authenticator:oauth2-password-grant', { self.get('session').authenticate('simple-auth-authenticator:oauth2-password-grant', {
identification: self.get('email'), identification: self.get('email'),
password: self.get('password') password: self.get('password')
}).then(function () { }).then(function () {
self.set('password', ''); self.set('password', '');
self.set('blogCreated', true); self.set('blogCreated', true);
if (data.image) { if (data.image) {
self.sendImage(result.users[0]) self.sendImage(result.users[0])
.then(function () { .then(function () {
@ -92,11 +88,9 @@ export default Ember.Controller.extend(ValidationEngine, {
} }
}); });
}).catch(function (resp) { }).catch(function (resp) {
self.toggleProperty('submitting');
notifications.showAPIError(resp); notifications.showAPIError(resp);
}); });
}).catch(function () { }).catch(function () {
self.toggleProperty('submitting');
self.set('showError', true); self.set('showError', true);
}); });
}, },

9
core/client/app/routes/setup/three.js Normal file
View file

@ -0,0 +1,9 @@
import Ember from 'ember';
export default Ember.Route.extend({
beforeModel: function () {
if (!this.controllerFor('setup.two').get('blogCreated')) {
this.transitionTo('setup.two');
}
}
});

10
core/client/app/templates/setup.hbs
View file

@ -1,8 +1,9 @@
<div class="gh-flow"> <div class="gh-flow">
<header class="gh-flow-head"> <header class="gh-flow-head">
<nav class="gh-flow-nav"> <nav class="gh-flow-nav">
{{!-- TODO: this should only appear on screens 2 & 3 --}} {{#if showBackLink}}
<a class="gh-flow-back" href="#"><i class="icon-arrow-left"></i> Back</a> {{#link-to backRoute classNames="gh-flow-back"}}<i class="icon-arrow-left"></i> Back{{/link-to}}
{{/if}}
<ol> <ol>
{{#gh-activating-list-item route="setup.one" linkClasses="step"}} {{#gh-activating-list-item route="setup.one" linkClasses="step"}}
<i class="icon-check"></i><span class="num">1</span> <i class="icon-check"></i><span class="num">1</span>
@ -18,8 +19,9 @@
</ol> </ol>
</nav> </nav>
</header> </header>
<div class="gh-flow-content-wrap"> <div class="gh-flow-content-wrap">
{{outlet}} <section class="gh-flow-content">
{{outlet}}
</section>
</div> </div>
</div> </div>

22
core/client/app/templates/setup/one.hbs
View file

@ -1,14 +1,12 @@
<section class="gh-flow-content"> <header>
<header> <h1>Welcome to <strong>Ghost</strong>!</h1>
<h1>Welcome to <strong>Ghost</strong>!</h1> <p>So far there have been <em>{{model.count}}</em> Ghost blogs made by people all over the world. Today we’re making yours.</p>
<p>So far there have been <em>{{model.count}}</em> Ghost blogs made by people all over the world. Today we’re making yours.</p> </header>
</header>
<figure class="gh-flow-screenshot"> <figure class="gh-flow-screenshot">
<img src="{{gh-path 'admin' 'img/install-welcome.png'}}" alt="Ghost screenshot" /> <img src="{{gh-path 'admin' 'img/install-welcome.png'}}" alt="Ghost screenshot" />
</figure> </figure>
{{#link-to "setup.two" classNames="btn btn-green btn-lg"}} {{#link-to "setup.two" classNames="btn btn-green btn-lg"}}
Create your account <i class="icon-chevron"></i> Create your account <i class="icon-chevron"></i>
{{/link-to}} {{/link-to}}
</section>

32
core/client/app/templates/setup/three.hbs
View file

@ -1,20 +1,18 @@
<section class="gh-flow-content"> <header>
<header> <h1>Invite your team</h1>
<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>
<p>Ghost works best when shared with others. Collaborate, get feedback on your posts &amp; work together on ideas.</p> </header>
</header>
<img class="gh-flow-faces" src="{{gh-path 'admin' 'img/users.png'}}" alt="" /> <img class="gh-flow-faces" src="{{gh-path 'admin' 'img/users.png'}}" alt="" />
<form class="gh-flow-invite"> <form class="gh-flow-invite">
<label>Enter one email address per line, we’ll handle the rest! <i class="icon-mail"></i></label> <label>Enter one email address per line, we’ll handle the rest! <i class="icon-mail"></i></label>
{{textarea class="gh-input" name="users" value=users required="required"}} {{textarea class="gh-input" name="users" value=users required="required"}}
</form> </form>
<button {{action 'invite'}} class="btn btn-default btn-lg btn-block {{buttonClass}}"> <button {{action 'invite'}} class="btn btn-default btn-lg btn-block {{buttonClass}}">
{{buttonText}} {{buttonText}}
</button> </button>
{{#link-to "posts" class="gh-flow-skip"}} {{#link-to "posts" class="gh-flow-skip"}}
I'll do this later, take me to my blog! I'll do this later, take me to my blog!
{{/link-to}} {{/link-to}}
</section>

22
core/client/app/templates/setup/two.hbs
View file

@ -1,12 +1,11 @@
<section class="gh-flow-content"> <header>
<header> <h1>Create your account</h1>
<h1>Create your account</h1> </header>
</header>
<form id="setup" class="gh-flow-create"> <form id="setup" class="gh-flow-create">
{{!-- Horrible hack to prevent Chrome from incorrectly auto-filling inputs --}} {{!-- Horrible hack to prevent Chrome from incorrectly auto-filling inputs --}}
<input style="display:none;" type="text" name="fakeusernameremembered"/> <input style="display:none;" type="text" name="fakeusernameremembered"/>
<input style="display:none;" type="password" name="fakepasswordremembered"/> <input style="display:none;" type="password" name="fakepasswordremembered"/>
{{gh-profile-image fileStorage=config.fileStorage email=email setImage="setImage"}} {{gh-profile-image fileStorage=config.fileStorage email=email setImage="setImage"}}
{{#gh-form-group errors=errors property="email"}} {{#gh-form-group errors=errors property="email"}}
@ -46,8 +45,5 @@
{{/gh-form-group}} {{/gh-form-group}}
</form> </form>
<button type="submit" class="btn btn-green btn-lg btn-block" {{action "setup"}} {{submitting}}>Last step: Invite your team <i class="icon-chevron"></i></button> <button type="submit" class="btn btn-green btn-lg btn-block" {{action "setup"}}>Last step: Invite your team <i class="icon-chevron"></i></button>
{{#if showError}} <p class="main-error">{{#if showError}}{{invalidMessage}}{{/if}}</p>
<p class="main-error">{{invalidMessage}}</p>
{{/if}}
</section>