Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

People: Ensures form header strings are translated properly #369

Merged
merged 3 commits into from
Nov 24, 2015
Merged

People: Ensures form header strings are translated properly #369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a3f77f3
Invites: Ensures form header strings are translated properly
ebinnion Nov 21, 2015
0e86e75
Invites: Simplify site links in translated strings
ebinnion Nov 23, 2015
a71ac9f
Invites: Remove redundant "on your own" from invite explanation
ebinnion Nov 23, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
247 changes: 243 additions & 4 deletions client/accept-invite/invite-form-header/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,259 @@
/**
* External dependencies
*/
import React from 'react'
import React from 'react';
import { get } from 'lodash';

/**
* Internal dependencies
*/
import userModule from 'lib/user';

/**
* Module variables
*/
const user = userModule();

export default React.createClass( {
displayName: 'InviteFormHeader',

getRole() {
return get( this.props, 'invite.meta.role' );
},

getSiteName() {
return get( this.props, 'blog_details.title' );
},

getSiteDomain() {
return get( this.props, 'blog_details.domain' );
},

getSiteLink() {
const siteName = this.getSiteName();
const siteDomain = this.getSiteDomain();

if ( ! siteName || ! siteDomain ) {
return null;
}

return (
<a href={ siteDomain } className="invite-header__site-link">
{ siteName }
</a>
);
},

getLoggedOutTitleForInvite() {
let title = '';

switch ( this.getRole() ) {
case 'administrator':
title = this.translate(
'Sign up to become an administrator of {{siteLink/}}.', {
components: {
siteLink: this.getSiteLink()
}
}
);
break;
case 'editor':
title = this.translate(
'Sign up to become an editor of {{siteLink/}}.', {
components: {
siteLink: this.getSiteLink()
}
}
);
break;
case 'author':
title = this.translate(
'Sign up to become an author of {{siteLink/}}.', {
components: {
siteLink: this.getSiteLink()
}
}
);
break;
case 'contributor':
title = this.translate(
'Sign up to become a contributor to {{siteLink/}}.', {
components: {
siteLink: this.getSiteLink()
}
}
);
break;
case 'subscriber':
title = this.translate(
'Sign up to become a subscriber of {{siteLink/}}.', {
components: {
siteLink: this.getSiteLink()
}
}
);
break;
case 'follower':
title = this.translate(
'Sign up to become a follower of {{siteLink/}}.', {
components: {
siteLink: this.getSiteLink()
}
}
);
break;
default:
title = this.translate(
'Sign up to join {{siteLink/}} with a role of: {{strong}}%(siteRole)s{{/strong}}.', {
args: {
siteRole: this.getRole()
},
components: {
siteLink: this.getSiteLink(),
strong: <strong />
}
}
);
}

return title;
},

getLoggedInTitleForInvite() {
let title = '';

switch ( this.getRole() ) {
case 'administrator':
title = this.translate(
'Would you like to become an administrator of {{siteLink/}}?', {
components: {
siteLink: this.getSiteLink()
}
}
);
break;
case 'editor':
title = this.translate(
'Would you like to become an editor of {{siteLink/}}?', {
components: {
siteLink: this.getSiteLink()
}
}
);
break;
case 'author':
title = this.translate(
'Would you like to become an author of {{siteLink/}}?', {
components: {
siteLink: this.getSiteLink()
}
}
);
break;
case 'contributor':
title = this.translate(
'Would you like to become a contributor to {{siteLink/}}?', {
components: {
siteLink: this.getSiteLink()
}
}
);
break;
case 'subscriber':
title = this.translate(
'Would you like to become a subscriber of {{siteLink/}}?', {
components: {
siteLink: this.getSiteLink()
}
}
);
break;
case 'follower':
title = this.translate(
'Would you like to become a follower of {{siteLink/}}?', {
components: {
siteLink: this.getSiteLink()
}
}
);
break;
default:
title = this.translate(
'Would you like to join {{siteLink/}} with a role of: {{strong}}%(siteRole)s{{/strong}}?', {
args: {
siteRole: this.getRole()
},
components: {
siteLink: this.getSiteLink(),
strong: <strong />
}
}
);
}

return title;
},

getExplanationForInvite() {
let explanation = '';
switch ( this.getRole() ) {
case 'administrator':
explanation = this.translate(
'As an administrator, you will be able to manage all aspects of %(siteName)s.', {
args: {
siteName: this.getSiteName()
}
}
);
break;
case 'editor':
explanation = this.translate(
'As an editor, you will be able to publish and manage your own posts and the posts of others, as well as upload media.'
);
break;
case 'author':
explanation = this.translate(
'As an author, you will be able to publish and edit your own posts as well as upload media.'
);
break;
case 'contributor':
explanation = this.translate(
'As a contributor, you will be able to write and manage your own posts, but you will not be able to publish.'
);
break;
case 'subscriber':
explanation = this.translate(
'As a subscriber, you will be able to manage your profile on %(siteName)s', {
args: {
siteName: this.getSiteName()
}
}
);
break;
case 'follower':
explanation = this.translate(
'As a follower, you will receive updates every time there is a new post on %(siteName)s', {
args: {
siteName: this.getSiteName()
}
}
);
break
}

return explanation;
},

render() {
let roleExplanation = this.getExplanationForInvite();
return (
<div className="invite-form-header">
<h3 className="invite-form-header__title">
{ this.props.title }
{ user.get() ? this.getLoggedInTitleForInvite() : this.getLoggedOutTitleForInvite() }
</h3>
{ this.props.explanation &&
{ roleExplanation &&
<p className="invite-form-header__explanation">
{ this.props.explanation }
{ roleExplanation }
</p>
}
</div>
Expand Down
28 changes: 1 addition & 27 deletions client/accept-invite/logged-in-accept/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
*/
import React from 'react';
import classNames from 'classnames';
import { get } from 'lodash';

/**
* Internal dependencies
Expand All @@ -21,39 +20,14 @@ export default React.createClass( {

displayName: 'LoggedInAccept',

getInviteRole() {
return get( this.props, 'invite.meta.role', '' );
},

render() {
let userObject = user.get(),
signInLink = config( 'login_url' ) + '?redirect_to=' + encodeURIComponent( window.location.href );

return (
<div className={ classNames( 'logged-in-accept', this.props.className ) } >
<Card>
<InviteFormHeader
title={
this.translate( 'Would you like to become an %(siteRole)s on {{siteNameLink}}%(siteName)s{{/siteNameLink}}?', {
args: {
siteName: get( this.props, 'blog_details.title', '' ),
siteRole: this.getInviteRole()
},
components: {
siteNameLink: <a href={ get( this.props, 'blog_details.domain', null ) } className="logged-in-accept__site-name" />
}
} )
}
explanation={
this.translate(
'As an %(siteRole)s you will be able to publish and edit your own posts as well as upload media.', {
args: {
siteRole: this.getInviteRole()
}
}
)
}
/>
<InviteFormHeader { ...this.props } />
<div className="logged-in-accept__join-as">
<Gravatar user={ userObject } size={ 72 } />
{
Expand Down
23 changes: 1 addition & 22 deletions client/accept-invite/logged-out-invite/signup-form.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,28 +45,7 @@ export default React.createClass( {

getFormHeader() {
return (
<InviteFormHeader
title={
this.translate( 'Sign up to become an %(siteRole)s on {{siteNameLink}}%(siteName)s{{/siteNameLink}}?', {
args: {
siteName: this.props.blog_details.title,
siteRole: get( this.props, 'invite.meta.role' )
},
components: {
siteNameLink: <a href={ this.props.blog_details.domain } className="logged-in-accept__site-name" />
}
} )
}
explanation={
this.translate(
'As an %(siteRole)s you will be able to publish and edit your own posts as well as upload media.', {
args: {
siteRole: get( this.props, 'invite.meta.role' )
}
}
)
}
/>
<InviteFormHeader { ...this.props } />
);
},

Expand Down