diff --git a/lib/static/views.js b/lib/static/views.js
index 0d96e7e0894f2c91965087748cd28c6569e64a20..2f4660c60ca3cdd7d691b763227ef6559421a478 100644
--- a/lib/static/views.js
+++ b/lib/static/views.js
@@ -17,6 +17,9 @@ secrets = require('../secrets');
require("jwcrypto/lib/algs/rs");
+// the underbar decorator to allow getext to extract strings
+function _(str) { return str; }
+
// all templated content, redirects, and renames are handled here.
// anything that is not an api, and not static
const
@@ -90,7 +93,7 @@ exports.setup = function(app) {
app.get('/sign_in', function(req, res, next ) {
metrics.userEntry(req);
renderCachableView(req, res, 'dialog.ejs', {
- title: 'A Better Way to Sign In',
+ title: _('A Better Way to Sign In'),
layout: 'dialog_layout.ejs',
useJavascript: true,
production: config.get('use_minified_resources')
@@ -106,11 +109,19 @@ exports.setup = function(app) {
});
app.get("/unsupported_dialog", function(req,res) {
- renderCachableView(req, res, 'unsupported_dialog.ejs', {layout: 'dialog_layout.ejs', useJavascript: false});
+ renderCachableView(req, res, 'unsupported_dialog.ejs', {
+ title: _('Unsupported Browser'),
+ layout: 'dialog_layout.ejs',
+ useJavascript: false
+ });
});
app.get("/cookies_disabled", function(req,res) {
- renderCachableView(req, res, 'cookies_disabled.ejs', {layout: 'dialog_layout.ejs', useJavascript: false});
+ renderCachableView(req, res, 'cookies_disabled.ejs', {
+ title: _('Cookies Are Disabled'),
+ layout: 'dialog_layout.ejs',
+ useJavascript: false
+ });
});
// Used for a relay page for communication.
@@ -126,16 +137,16 @@ exports.setup = function(app) {
});
app.get('/', function(req,res) {
- renderCachableView(req, res, 'index.ejs', {title: 'A Better Way to Sign In', fullpage: true});
+ renderCachableView(req, res, 'index.ejs', {title: _('A Better Way to Sign In'), fullpage: true});
});
app.get("/signup", function(req, res) {
- renderCachableView(req, res, 'signup.ejs', {title: 'Sign Up', fullpage: false});
+ renderCachableView(req, res, 'signup.ejs', {title: _('Sign Up'), fullpage: false});
});
app.get("/idp_auth_complete", function(req, res) {
renderCachableView(req, res, 'idp_auth_complete.ejs', {
- title: 'Sign In Complete',
+ title: _('Sign In Complete'),
fullpage: false
});
});
@@ -143,32 +154,32 @@ exports.setup = function(app) {
app.get("/forgot", function(req, res) {
res.local('util', util);
renderCachableView(req, res, 'forgot.ejs', {
- title: 'Forgot Password',
+ title: _('Forgot Password'),
fullpage: false,
enable_development_menu: config.get('enable_development_menu')
});
});
app.get("/signin", function(req, res) {
- renderCachableView(req, res, 'signin.ejs', {title: 'Sign In', fullpage: false});
+ renderCachableView(req, res, 'signin.ejs', {title: _('Sign In'), fullpage: false});
});
app.get("/about", function(req, res) {
- renderCachableView(req, res, 'about.ejs', {title: 'About', fullpage: false});
+ renderCachableView(req, res, 'about.ejs', {title: _('About'), fullpage: false});
});
app.get("/tos", function(req, res) {
- renderCachableView(req, res, 'tos.ejs', {title: 'Terms of Service', fullpage: false});
+ renderCachableView(req, res, 'tos.ejs', {title: _('Terms of Service'), fullpage: false});
});
app.get("/privacy", function(req, res) {
- renderCachableView(req, res, 'privacy.ejs', {title: 'Privacy Policy', fullpage: false});
+ renderCachableView(req, res, 'privacy.ejs', {title: _('Privacy Policy'), fullpage: false});
});
app.get("/verify_email_address", function(req, res) {
res.local('util', util);
renderCachableView(req, res, 'verify_email_address.ejs', {
- title: 'Complete Registration',
+ title: _('Complete Registration'),
fullpage: true,
enable_development_menu: config.get('enable_development_menu')
});
@@ -177,16 +188,16 @@ exports.setup = function(app) {
// This page can be removed a couple weeks after this code ships into production,
// we're leaving it here to not break outstanding emails
app.get("/add_email_address", function(req,res) {
- renderCachableView(req, res, 'confirm.ejs', {title: 'Verify Email Address', fullpage: false});
+ renderCachableView(req, res, 'confirm.ejs', {title: _('Verify Email Address'), fullpage: false});
});
app.get("/reset_password", function(req,res) {
- renderCachableView(req, res, 'confirm.ejs', {title: 'Reset Password'});
+ renderCachableView(req, res, 'confirm.ejs', {title: _('Reset Password')});
});
app.get("/confirm", function(req,res) {
- renderCachableView(req, res, 'confirm.ejs', {title: 'Confirm Email'});
+ renderCachableView(req, res, 'confirm.ejs', {title: _('Confirm Email')});
});
diff --git a/resources/static/common/js/lib/ejs.js b/resources/static/common/js/lib/ejs.js
index 31a9df53fb1b958f4059a2d33c1fa300d61e4cab..d2396e0bd9beb2a29ff3a773f1c8ebd2ffb2b6f1 100644
--- a/resources/static/common/js/lib/ejs.js
+++ b/resources/static/common/js/lib/ejs.js
@@ -152,9 +152,16 @@ EJS.Scanner = function(source, left, right) {
double_left: left+'%%',
double_right: '%%'+right,
left_equal: left+'%=',
+ // set - Persona addition. The backend understands <%-, which acts
+ // identical to the frontend's <%=. <%= on the backend escapes
+ // characters to their HTML code equivalents. For unit testing, we
+ // write backend templates on the front end, so we have to be able to
+ // process <%-. Creating an alias here. Using it wherever
+ // left_equal is found.
+ left_dash: left+'%-',
left_comment: left+'%#'})
- this.SplitRegexp = left=='[' ? /(\[%%)|(%%\])|(\[%=)|(\[%#)|(\[%)|(%\]\n)|(%\])|(\n)/ : new RegExp('('+this.double_left+')|(%%'+this.double_right+')|('+this.left_equal+')|('+this.left_comment+')|('+this.left_delimiter+')|('+this.right_delimiter+'\n)|('+this.right_delimiter+')|(\n)') ;
+ this.SplitRegexp = left=='[' ? /(\[%%)|(%%\])|(\[%=)|(\[%#)|(\[%)|(%\]\n)|(%\])|(\n)/ : new RegExp('('+this.double_left+')|(%%'+this.double_right+')|('+this.left_equal+')|('+this.left_dash+')|('+this.left_comment+')|('+this.left_delimiter+')|('+this.right_delimiter+'\n)|('+this.right_delimiter+')|(\n)') ;
this.source = source;
this.stag = null;
@@ -297,6 +304,7 @@ EJS.Compiler.prototype = {
break;
case scanner.left_delimiter:
case scanner.left_equal:
+ case scanner.left_dash:
case scanner.left_comment:
scanner.stag = token;
if (content.length > 0)
@@ -328,6 +336,7 @@ EJS.Compiler.prototype = {
buff.push(content);
}
break;
+ case scanner.left_dash:
case scanner.left_equal:
buff.push(insert_cmd + "(EJS.Scanner.to_text(" + content + ")))");
break;
diff --git a/resources/static/pages/js/manage_account.js b/resources/static/pages/js/manage_account.js
index 5862120c74dffa36a2266c6e00f3304a8187634f..2e650f6a16e9297d2b7fa08a9a681eb45487ac92 100644
--- a/resources/static/pages/js/manage_account.js
+++ b/resources/static/pages/js/manage_account.js
@@ -49,7 +49,8 @@ BrowserID.manageAccount = (function() {
displayStoredEmails(oncomplete);
}
else if (_.size(emails) > 1) {
- if (confirmAction("Remove " + email + " from your BrowserID?")) {
+ if (confirmAction(format(gettext("Remove %(email) from your BrowserID?"),
+ { email: email }))) {
user.removeEmail(email, function() {
displayStoredEmails(oncomplete);
}, pageHelpers.getFailure(errors.removeEmail, oncomplete));
@@ -59,7 +60,7 @@ BrowserID.manageAccount = (function() {
}
}
else {
- if (confirmAction("Removing the last address will cancel your BrowserID account.\nAre you sure you want to continue?")) {
+ if (confirmAction(gettext("Removing the last address will cancel your BrowserID account.\nAre you sure you want to continue?"))) {
user.cancelUser(function() {
doc.location="/";
complete();
@@ -92,7 +93,7 @@ BrowserID.manageAccount = (function() {
}
function cancelAccount(oncomplete) {
- if (confirmAction("Are you sure you want to cancel your BrowserID account?")) {
+ if (confirmAction(gettext("Are you sure you want to cancel your BrowserID account?"))) {
user.cancelUser(function() {
doc.location="/";
oncomplete && oncomplete();
diff --git a/resources/static/test/cases/pages/js/verify_secondary_address.js b/resources/static/test/cases/pages/js/verify_secondary_address.js
index 8afe1e7f1030a16f0a3db3e181b2e3713e32038e..c9227af84e2ef6c0c9315349c4178142ebc26aee 100644
--- a/resources/static/test/cases/pages/js/verify_secondary_address.js
+++ b/resources/static/test/cases/pages/js/verify_secondary_address.js
@@ -84,7 +84,7 @@
createController(config, function() {
testVisible("#congrats");
testHasClass("body", "complete");
- equal($(".website").text(), returnTo, "website is updated");
+ equal($(".website").eq(0).text(), returnTo, "website is updated");
equal(doc.location.href, returnTo, "redirection occurred to correct URL");
equal(storage.getLoggedIn("https://test.domain"), "testuser@testuser.com", "logged in status set");
start();
diff --git a/resources/views/about.ejs b/resources/views/about.ejs
index 3c41de497f35575cacf7ae8c847da2991dde5b22..43da5ce79b07edc8eae6cfcfa747172642429571 100644
--- a/resources/views/about.ejs
+++ b/resources/views/about.ejs
@@ -5,44 +5,44 @@
<div id="content" class="display_always">
<div class="about">
<section class="simple-signon">
- <h2 class="title">Simplified sign-on.</h2>
+ <h2 class="title"><%- gettext('Simplified sign-on.') %></h2>
<article class="blurb">
<div class="info first">
- <h1>Persona replaces multiple passwords</h1>
- <p>Sites such as <a href="http://crossword.thetimes.co.uk/" target="_blank">The Times Crossword</a>, <a href="http://current.openphoto.me/" target="_blank">OpenPhoto</a> and <a href="https://www.voo.st/" target="_blank">Voost</a> use Persona instead of usernames to sign you in.</p><p>This means you only need one password to sign in to many sites.</p>
+ <h1><%- gettext('Persona replaces multiple passwords') %></h1>
+ <p><%- gettext('Sites such as <a href="http://crossword.thetimes.co.uk/" target="_blank">The Times Crossword</a>, <a href="http://current.openphoto.me/" target="_blank">OpenPhoto</a> and <a href="https://www.voo.st/" target="_blank">Voost</a> use Persona instead of usernames to sign you in.') %></p><p><%- gettext('This means you only need one password to sign in to many sites.') %></p>
</div>
<div class="graphic">
- <img src="<%- cachify('/pages/i/one-password-graphic.png') %>" alt="One password to rule them all.">
+ <img src="<%- cachify('/pages/i/one-password-graphic.png') %>" alt="<%- gettext('One password to rule them all.') %>">
</div>
</article>
<article class="blurb flexible">
<div class="graphic first">
- <img src="<%- cachify('/pages/i/flexible-graphic.png') %>" alt="Use multiple email addresses">
+ <img src="<%- cachify('/pages/i/flexible-graphic.png') %>" alt="<%- gettext('Use multiple email addresses') %>">
</div>
<div class="info">
- <h1>Persona is flexible</h1>
- <p>Within Persona, your identity is your email address. You can use as many email addresses as you want, but you still only need one password.</p>
+ <h1><%- gettext('Persona is flexible') %></h1>
+ <p><%- gettext('Within Persona, your identity is your email address. You can use as many email addresses as you want, but you still only need one password.') %></p>
</div>
</article>
</section>
<section class="privacy">
- <h2 class="title">Real privacy.</h2>
+ <h2 class="title"><%- gettext('Real privacy.') %></h2>
<article class="blurb half first" style="min-height: 195px; ">
- <h1>Persona is proudly non-profit for you</h1>
- <p>Persona is developed by Mozilla, a not-for-profit company trusted throughout the Web community. Our goal is to create technologies that balance an open Web platform with people’s privacy.</p>
+ <h1><%- gettext('Persona is proudly non-profit for you') %></h1>
+ <p><%- gettext('Persona is developed by Mozilla, a not-for-profit company trusted throughout the Web community. Our goal is to create technologies that balance an open Web platform with people\'s privacy.') %></p>
</article>
<article class="blurb half">
- <h1>Persona preserves your privacy</h1>
- <p>Persona does not track your activity around the Web. It creates a wall between signing you in and what you do once you’re there. The history of what sites you visit is stored only on your own computer.</p>
+ <h1><%- gettext('Persona preserves your privacy') %></h1>
+ <p><%- gettext('Persona does not track your activity around the Web. It creates a wall between signing you in and what you do once you\'re there. The history of what sites you visit is stored only on your own computer.') %></p>
</article>
</section>
- <a href="https://developer.mozilla.org/en/BrowserID/Quick_Setup" class="developers" target="_blank"><img src="<%- cachify('/pages/i/developers-link.png') %>" alt="Persona for developers"><span>Implement Persona on your site </span>Developer guides and API documentation</a>
+ <a href="https://developer.mozilla.org/en/BrowserID/Quick_Setup" class="developers" target="_blank"><img src="<%- cachify('/pages/i/developers-link.png') %>" alt="<%- gettext('Persona for developers') %>"><span><%- gettext('Implement Persona on your site') %> </span><%- gettext('Developer guides and API documentation') %></a>
</div><!-- #dashboard -->
</div>
diff --git a/resources/views/authenticate_with_primary.ejs b/resources/views/authenticate_with_primary.ejs
index 45f8dab1d09c80d294440ce144536cd12cac2259..69d5be5ec11a6bd8e80a78ee6baff71182945361 100644
--- a/resources/views/authenticate_with_primary.ejs
+++ b/resources/views/authenticate_with_primary.ejs
@@ -5,7 +5,7 @@
<html>
<head>
<meta charset="utf-8">
- <title>Browser ID</title>
+ <title>Persona</title>
<%- cachify_js('/production/authenticate_with_primary.js') %>
</head>
</html>
diff --git a/resources/views/dialog_layout.ejs b/resources/views/dialog_layout.ejs
index 6e567ccba473db1379e4d8c96d75c99a5292d420..f4bd34390ded7a5ced7151099cfe01344c264a3f 100644
--- a/resources/views/dialog_layout.ejs
+++ b/resources/views/dialog_layout.ejs
@@ -16,7 +16,10 @@
<!--[if lt IE 9]>
<%- cachify_css('/production/ie8_dialog.css') %>
<![endif]-->
- <title><%= gettext('Mozilla Persona') %></title>
+ <% /* the title comes from the server when the page is loaded.
+ It still needs translated, so wrap it in its own gettext
+ */ %>
+ <title><%= format(gettext("Mozilla Persona: %s"), [gettext(title)]) %></title>
</head>
<body class="waiting">
<header id="header">
diff --git a/resources/views/forgot.ejs b/resources/views/forgot.ejs
index 705d14ead5e6cb0f4c5c666d1db39106c74d08f8..59a0c5d591a27cfb5768b6e1ac5ccb0ed1d1ec93 100644
--- a/resources/views/forgot.ejs
+++ b/resources/views/forgot.ejs
@@ -6,70 +6,70 @@
<div id="vAlign">
<!-- XXX this form submits to nowhere -->
<form id="signUpForm" class="cf authform" novalidate>
- <h1>Forgot Password</h1>
+ <h1><%- gettext('Forgot Password') %></h1>
<div class="notifications">
<div class="notification emailsent">
- <h2>Confirm your email address</h2>
+ <h2><%- gettext('Confirm your email address') %></h2>
<p>
- Check your email at <strong id="sentToEmail"></strong>.
+ <%- gettext('Check your email at <strong id="sentToEmail"></strong>.') %>
</p>
<p>
- Click the link in the confirmation email. Your password will then be reset.
+ <%- gettext('Click the link in the confirmation email. Your password will then be reset.') %>
</p>
</div>
</div>
<ul class="inputs forminputs">
<li>
- <label for="email">Email Address</label>
- <input id="email" autofocus required placeholder="Your Email" type="email" autocapitalize="off" autocorrect="off" maxlength="254" />
+ <label for="email"><%- gettext('Email Address') %></label>
+ <input id="email" autofocus required placeholder="<%- gettext('Your Email') %>" type="email" autocapitalize="off" autocorrect="off" maxlength="254" />
<div id="email_format" class="tooltip" for="email">
- This field must be an email address.
+ <%- gettext('This field must be an email address.') %>
</div>
<div id="email_required" class="tooltip" for="email">
- The email field is required.
+ <%- gettext('The email field is required.') %>
</div>
<div id="could_not_add" class="tooltip" for="email">
- We just sent an email to that address! If you really want to send another, wait a minute or two and try again.
+ <%- gettext('We just sent an email to that address! If you really want to send another, wait a minute or two and try again.') %>
</div>
<div id="not_registered" class="tooltip" for="email">
- Non existent user!
+ <%- gettext('Non existent user!') %>
</div>
</li>
<li>
- <label for="password">Password</label>
- <input id="password" placeholder="Password" type="password" maxlength="80">
+ <label for="password"><%- gettext('Password') %></label>
+ <input id="password" placeholder="<%- gettext('Password') %>" type="password" maxlength="80">
<div id="password_required" class="tooltip" for="password">
- Password is required.
+ <%- gettext('Password is required.') %>
</div>
<div class="tooltip" id="password_length" for="password">
- Password must be between 8 and 80 characters long.
+ <%- gettext('Password must be between 8 and 80 characters long.') %>
</div>
<div id="could_not_add" class="tooltip" for="password">
- We just sent an email to that address! If you really want to send another, wait a minute or two and try again.
+ <%- gettext('We just sent an email to that address! If you really want to send another, wait a minute or two and try again.') %>
</div>
</li>
<li>
- <label for="vpassword">Verify Password</label>
- <input id="vpassword" placeholder="Verify Password" type="password" maxlength="80">
+ <label for="vpassword"><%- gettext('Verify Password') %></label>
+ <input id="vpassword" placeholder="<%- gettext('Verify Password') %>" type="password" maxlength="80">
<div id="password_required" class="tooltip" for="vpassword">
- Verification password is required.
+ <%- gettext('Verification password is required.') %>
</div>
<div class="tooltip" id="passwords_no_match" for="vpassword">
- These passwords don't match!
+ <%- gettext('These passwords don\'t match!') %>
</div>
</li>
@@ -77,9 +77,9 @@
</ul>
<div class="submit cf forminputs">
- <button>Reset Password</button>
+ <button><%- gettext('Reset Password') %></button>
<div class="remember cf">
- <a class="action" href="/signin">Know your password? Sign in.</a>
+ <a class="action" href="/signin"><%- gettext('Know your password? Sign in.') %></a>
</div>
</div>
</form>
diff --git a/resources/views/idp_auth_complete.ejs b/resources/views/idp_auth_complete.ejs
index f7e5686359c037c2f3e54c7969aaa447e21bef66..538a99157639073bb3adfe23342645bd2be3d72d 100644
--- a/resources/views/idp_auth_complete.ejs
+++ b/resources/views/idp_auth_complete.ejs
@@ -3,7 +3,7 @@
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<div id="vAlign" class="disply_always">
- This window will now close and account creation will continue.
+ <%- gettext('This window will now close and account creation will continue.') %>
</div>
<script type="text/javascript">
diff --git a/resources/views/index.ejs b/resources/views/index.ejs
index 7eb8e2c35b8f6c9e22322a1062e428ce90671ffc..98c47d935442bea0271471800a9297be03b1ab45 100644
--- a/resources/views/index.ejs
+++ b/resources/views/index.ejs
@@ -7,11 +7,13 @@
<div id="signUp">
<div id="card"><img src="<%- cachify('/pages/i/slit.png') %>"></div>
- <h1 class="white headline-main">Connect with Mozilla Persona, the safest & easiest way to sign in.</h1>
+ <h1 class="white headline-main"><%- gettext('Connect with Mozilla Persona, the safest & easiest way to sign in.') %></h1>
<p class="tour white">
- <a href="/about">Take the tour</a>
- or
- <a href="/signup" class="button create">Sign up →</a>
+ <%- format(gettext('<a %(aboutLink)>Take the tour</a> or <a %(signupButton)>Sign Up →</a>'),
+ {
+ aboutLink: 'href="/about"',
+ signupButton: 'href="/signup" class="button create"',
+ }) %>
</p>
</div>
</div>
@@ -20,25 +22,25 @@
<script type="text/html" id="templateUser">
<li class="identity cf" id="{{ email.replace('@', '_').replace('.', '_') }}">
<div class="email">{{ email }}</div>
- <button class="delete">remove</button>
+ <button class="delete"><%- gettext('remove') %></button>
</li>
</script>
<script type="text/html" id="templateManage">
<div id="content">
<div class="newsbanner" id="newuser">
- New to Mozilla Persona? <a href="/about">Learn more</a>
+ <%- gettext('New to Mozilla Persona? <a href="/about">Learn more</a>') %>
</div>
<div id="manage">
- <h1>Account Manager</h1>
+ <h1><%- gettext('Account Manager') %></h1>
<section>
<header class="buttonrow cf">
- <h2>Your Email Addresses</h2>
+ <h2><%- gettext('Your Email Addresses') %></h2>
- <button class="edit">edit</button>
- <button class="done">done</button>
+ <button class="edit"><%- gettext('edit') %></button>
+ <button class="done"><%- gettext('done') %></button>
</header>
<ul id="emailList">
@@ -47,32 +49,32 @@
<section id="edit_password">
<header class="buttonrow cf">
- <h2>Password</h2>
+ <h2><%- gettext('Password') %></h2>
- <button class="edit">edit</button>
- <button class="done">cancel</button>
+ <button class="edit"><%- gettext('edit') %></button>
+ <button class="done"><%- gettext('cancel') %></button>
</header>
<div class="showedit">
- <label for="old_password">Old Password</label>
- <label for="new_password">New Password</label>
+ <label for="old_password"><%- gettext('Old Password') %></label>
+ <label for="new_password"><%- gettext('New Password') %></label>
</div>
<form id="edit_password_form" class="showedit">
<input type="password" id="old_password" name="old_password" maxlength="80"/>
<input type="password" id="new_password" name="new_password" maxlength="80"/>
- <button id="changePassword">done</button>
+ <button id="changePassword"><%- gettext('done') %></button>
- <div class="tooltip" for="old_password" id="tooltipOldRequired">Old password is required.</div>
- <div class="tooltip" for="old_password" id="tooltipInvalidPassword">Incorrect old password, password not updated.</div>
- <div class="tooltip" for="new_password" id="tooltipNewRequired">New password is required.</div>
- <div class="tooltip" for="new_password" id="tooltipPasswordsSame">Old and new passwords are the same.</div>
- <div class="tooltip" for="new_password" id="tooltipPasswordLength">Password must be between 8 and 80 characters long.</div>
+ <div class="tooltip" for="old_password" id="tooltipOldRequired"><%- gettext('Old password is required.') %></div>
+ <div class="tooltip" for="old_password" id="tooltipInvalidPassword"><%- gettext('Incorrect old password, password not updated.') %></div>
+ <div class="tooltip" for="new_password" id="tooltipNewRequired"><%- gettext('New password is required.') %></div>
+ <div class="tooltip" for="new_password" id="tooltipPasswordsSame"><%- gettext('Old and new passwords are the same.') %></div>
+ <div class="tooltip" for="new_password" id="tooltipPasswordLength"><%- gettext('Password must be between 8 and 80 characters long.') %></div>
</form>
</section>
- <p id="disclaimer">You may, at any time, <a href="#" id="cancelAccount" class="action">cancel your account</a></p>
+ <p id="disclaimer"><%- gettext('You may, at any time, <a href="#" id="cancelAccount" class="action">cancel your account</a>') %></p>
</div>
</div>
diff --git a/resources/views/layout.ejs b/resources/views/layout.ejs
index cbc7cc078e9ea6f1f6e0dbb0f6b13347196e1094..cc63c5fd503f5d1628b7c0d1def32d46b3c593a3 100644
--- a/resources/views/layout.ejs
+++ b/resources/views/layout.ejs
@@ -2,7 +2,7 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<html>
+<html LANG="<%= lang %>" dir="<%= lang_dir %>">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width" />
@@ -15,7 +15,10 @@
<%- cachify_css('/production/ie8_main.css') %>
<![endif]-->
<%- cachify_js(util.format('/production/%s/browserid.js', locale)) %>
- <title><%= format(gettext("Mozilla Persona: %s"), [title]) %></title>
+ <% /* the title comes from the server when the page is loaded.
+ It still needs translated, so wrap it in its own gettext
+ */ %>
+ <title><%= format(gettext("Mozilla Persona: %s"), [gettext(title)]) %></title>
</head>
<body class="loading">
<% if (enable_development_menu) { %>
diff --git a/resources/views/relay.ejs b/resources/views/relay.ejs
index 4ee25e8a7607c8c11afac7ebb0859c46da746d2f..6487480da84d1463b3c34665daed4804325d6680 100644
--- a/resources/views/relay.ejs
+++ b/resources/views/relay.ejs
@@ -5,7 +5,7 @@
<html>
<head>
<meta charset="utf-8">
- <title>Browser ID</title>
+ <title>Persona</title>
<%- cachify_js('/production/relay.js') %>
</head>
</html>
diff --git a/resources/views/signin.ejs b/resources/views/signin.ejs
index d09e2a56e3ad317ced53ac1e9547dcf606433900..683af56d65753361e8a228c85fec202bd3111e51 100644
--- a/resources/views/signin.ejs
+++ b/resources/views/signin.ejs
@@ -6,64 +6,62 @@
<div id="vAlign">
<!-- XXX this form submits to nowhere -->
<form id="signUpForm" class="cf authform" novalidate>
- <h1>Sign In</h1>
+ <h1><%- gettext('Sign In') %></h1>
<ul class="notifications">
<li class="notification" id="unknown_secondary">
- <strong id="unknown_email">Email</strong> is not registered.
- Would you like to <a class="action" href="/signup">sign up</a> instead?
+ <%- gettext('<strong id="unknown_email">Email</strong> is not registered. Would you like to <a class="action" href="/signup">sign up</a> instead?') %>
</li>
</ul>
<ul class="inputs">
<li>
- <label for="email">Email Address</label>
- <input id="email" autofocus placeholder="Your Email" type="email" autocapitalize="off" autocorrect="off" tabindex="1" maxlength="254" />
+ <label for="email"><%- gettext('Email Address') %></label>
+ <input id="email" autofocus placeholder="<%- gettext('Your Email') %>" type="email" autocapitalize="off" autocorrect="off" tabindex="1" maxlength="254" />
<div id="email_format" class="tooltip" for="email">
- This field must be an email address.
+ <%- gettext('This field must be an email address.') %>
</div>
<div id="email_required" class="tooltip" for="email">
- The email field is required.
+ <%- gettext('The email field is required.') %>
</div>
</li>
</ul>
<ul class="inputs password_entry">
<li class="password_section">
- <a class="forgot right" href="/forgot" tabindex="4">forgot your password?</a>
- <label for="password">Password</label>
- <input id="password" placeholder="Your Password" type="password" tabindex="2" maxlength="80">
+ <a class="forgot right" href="/forgot" tabindex="4"><%- gettext('forgot your password?') %></a>
+ <label for="password"><%- gettext('Password') %></label>
+ <input id="password" placeholder="<%- gettext('Your Password') %>" type="password" tabindex="2" maxlength="80">
<div id="password_required" class="tooltip" for="password">
- The password field is required.
+ <%- gettext('The password field is required.') %>
</div>
<div id="cannot_authenticate" class="tooltip" for="password">
- This email address and password do not match.
+ <%- gettext('This email address and password do not match.') %>
</div>
</li>
</ul>
<div class="submit cf forminputs">
- <button tabindex="5">Sign In</button>
+ <button tabindex="5"><%- gettext('Sign In') %></button>
<div class="remember cf">
- <a class="action" href="/signup">New to Persona? Sign up today.</a>
+ <a class="action" href="/signup"><%- gettext('New to Persona? Sign up today.') %></a>
</div>
</div>
<ul class="notifications">
<li class="notification" id="verify_primary">
<p>
- To verify that you own <strong id="primary_email">address</strong>, you must
- sign in with your provider. A new window will be opened.
+ <%- gettext('To verify that you own <strong id="primary_email">address</strong>, you must sign in with your provider. A new window will be opened.') %>
</p>
<p>
- <button id="authWithPrimary">Verify</button>
+ <button id="authWithPrimary"><%- gettext('Verify') %></button>
</p>
</li>
</ul>
@@ -72,6 +70,6 @@
</div>
<noscript>
- We're sorry, Persona requires that Javascript is enabled.
+ <%- gettext('We\'re sorry, Persona requires that Javascript is enabled.') %>
</noscript>
diff --git a/resources/views/signup.ejs b/resources/views/signup.ejs
index 8440816f1aa7113fd49c490e01818ccdd7c69d54..14e823d4f5c38012dd5a14151699bbefc597962f 100644
--- a/resources/views/signup.ejs
+++ b/resources/views/signup.ejs
@@ -6,23 +6,22 @@
<div id="vAlign">
<!-- XXX this form submits to nowhere -->
<form id="signUpForm" class="cf authform" novalidate>
- <h1>Create Account</h1>
+ <h1><%- gettext('Create Account') %></h1>
<ul class="notifications">
<li class="notification alreadyRegistered">
- <strong id="registeredEmail"></strong> is already registered.
- Would you like to <a class="action" href="/signin">sign in</a> instead?
+ <%- gettext('<strong id="registeredEmail"></strong> is already registered. Would you like to <a class="action" href="/signin">sign in</a> instead?') %>
</li>
<li class="notification emailsent">
- <h2>Confirm your email address</h2>
+ <h2><%- gettext('Confirm your email address') %></h2>
<p>
- Check your email at <strong id="sentToEmail"></strong>.
+ <%- gettext('Check your email at <strong id="sentToEmail"></strong>.') %>
</p>
<p>
- Click the link in the confirmation email. You'll then immediately be signed into Persona.
+ <%- gettext('Click the link in the confirmation email. You\'ll then immediately be signed into Persona.') %>
</p>
</li>
@@ -30,49 +29,45 @@
<ul class="inputs forminputs">
<li>
- <label for="email">Email Address</label>
- <input id="email" autofocus placeholder="Your Email" type="email" autocapitalize="off" autocorrect="off" maxlength="254" />
+ <label for="email"><%- gettext('Email Address') %></label>
+ <input id="email" autofocus placeholder="<%- gettext('Your Email') %>" type="email" autocapitalize="off" autocorrect="off" maxlength="254" />
<div id="email_format" class="tooltip" for="email">
- This field must be an email address.
+ <%- gettext('This field must be an email address.') %>
</div>
<div id="email_required" class="tooltip" for="email">
- The email field is required.
+ <%- gettext('The email field is required.') %>
</div>
<div id="could_not_add" class="tooltip" for="email">
- We just sent an email to that address! If you really want to send another, wait a minute or two and try again.
+ <%- gettext('We just sent an email to that address! If you really want to send another, wait a minute or two and try again.') %>
</div>
</li>
<li class="password_entry">
- <label for="password">Password</label>
- <input id="password" placeholder="Password" type="password" maxlength="80">
+ <label for="password"><%- gettext('Password') %></label>
+ <input id="password" placeholder="<%- gettext('Password') %>" type="password" maxlength="80">
<div id="password_required" class="tooltip" for="password">
- Password is required.
+ <%- gettext('Password is required.') %>
</div>
<div class="tooltip" id="password_length" for="password">
- Password must be between 8 and 80 characters long.
- </div>
-
- <div id="could_not_add" class="tooltip" for="password">
- We just sent an email to that address! If you really want to send another, wait a minute or two and try again.
+ <%- gettext('Password must be between 8 and 80 characters long.') %>
</div>
</li>
<li class="password_entry">
- <label for="vpassword">Verify Password</label>
- <input id="vpassword" placeholder="Verify Password" type="password" maxlength="80">
+ <label for="vpassword"><%- gettext('Verify Password') %></label>
+ <input id="vpassword" placeholder="<%- gettext('Verify Password') %>" type="password" maxlength="80">
<div id="password_required" class="tooltip" for="vpassword">
- Verification password is required.
+ <%- gettext('Verification password is required.') %>
</div>
<div class="tooltip" id="passwords_no_match" for="vpassword">
- These passwords don't match!
+ <%- gettext('These passwords don\'t match!') %>
</div>
</li>
@@ -80,17 +75,17 @@
<div class="submit cf forminputs">
<p class="cf">
- <button>Verify Email</button>
- <a class="action remember" href="/signin" tabindex="2">Existing account? Sign in.</a>
+ <button><%- gettext('Verify Email') %></button>
+ <a class="action remember" href="/signin" tabindex="2"><%- gettext('Existing account? Sign in.') %></a>
</p>
<p class="tospp">
<%- format(
- gettext('By proceeding, you agree to %s\'s <a %s>Terms</a> and <a %s>Privacy Policy</a>.'),
- [ "Persona",
- ' href="https://login.persona.org/tos" target="_new"',
- ' href="https://login.persona.org/privacy" target="_new"',
- ]) %>
+ gettext('By proceeding, you agree to %(persona)\'s <a %(termsLink)>Terms</a> and <a %(privacyLink)>Privacy Policy</a>.'),
+ { persona: "Persona",
+ termsLink: 'href="https://login.persona.org/tos" target="_new"',
+ privacyLink: 'href="https://login.persona.org/privacy" target="_new"',
+ }) %>
</p>
</div>
@@ -99,12 +94,11 @@
<!-- This has to go down here because of the button. Firefox clicks the first button in the form whenever the user hits enter in the form, whether the button is shown or not, and even if there is an input[type=submit]. Ghetto. -->
<li class="notification" id="primary_verify">
<p>
- To verify that you own <strong id="primary_email">address</strong>, you must
- sign in with your provider. A new window will be opened.
+ <%- gettext('To verify that you own <strong id="primary_email">address</strong>, you must sign in with your provider. A new window will be opened.') %>
</p>
<p class="submit">
- <button id="authWithPrimary" tabindex="1">Verify</button>
+ <button id="authWithPrimary" tabindex="1"><%- gettext('Verify') %></button>
</p>
</li>
</ul>
@@ -113,7 +107,7 @@
</form>
<div class="notification" id="congrats">
- <p>Thank you for signing up with <strong>Persona</strong>. You can now use your Persona account to <em>Sign In</em> or <em>Sign Up</em> to websites all across the web!
+ <p><%- gettext('Thank you for signing up with <strong>Persona</strong>. You can now use your Persona account to <em>Sign In</em> or <em>Sign Up</em> to websites all across the web!') %>
</p>
</div>
@@ -121,7 +115,7 @@
</div>
<noscript>
- We're sorry, but to sign up for Persona, you must have Javascript enabled.
+ <%- gettext('We\'re sorry, Persona requires that Javascript is enabled.') %>
</noscript>
diff --git a/resources/views/unsupported_dialog.ejs b/resources/views/unsupported_dialog.ejs
index 13d893660fd06aaf4519ef5b0fa39e80a142a5b5..01340c242be8f592d8a1f76fa488d1e877d69eb9 100644
--- a/resources/views/unsupported_dialog.ejs
+++ b/resources/views/unsupported_dialog.ejs
@@ -4,21 +4,20 @@
<section id="error" style="display: block" class="unsupported">
<h2>
- We are sorry, but currently your browser is not supported.
+ <%- gettext('We are sorry, but currently your browser is not supported.') %>
</h2>
<a href="http://getfirefox.com" target="_blank">
- <img src="<%- cachify('/dialog/i/firefox_logo.png') %>" width="250" height="88" alt="Firefox logo" />
+ <img src="<%- cachify('/dialog/i/firefox_logo.png') %>" width="250" height="88" alt="<%- gettext('Firefox logo') %>" />
</a>
<p>
- Persona works with <a href="http://getfirefox.com" target="_blank" title="Get Firefox">Firefox</a>
+ <%- gettext('Persona works with <a href="http://getfirefox.com" target="_blank" title="Get Firefox">Firefox</a>') %>
</p>
<p class="lighter">
- and other <a href="http://whatbrowser.org" target="_blank">modern browsers.</a>
+ <%- gettext('and other <a href="http://whatbrowser.org" target="_blank">modern browsers.</a>') %>
</p>
-
</section>