From f1d2a42fe202b20fd84ca1739164f68eff8be77b Mon Sep 17 00:00:00 2001
From: Niharika Khanna <nkhanna@nkhanna-10163.local>
Date: Thu, 12 Apr 2018 09:15:03 +0100
Subject: [PATCH] Localize Settings Page

---
 locales/en-US/server.ftl          | 15 ++++++++++++++
 server/src/pages/settings/view.js | 33 +++++++++++++++++++++++--------
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/locales/en-US/server.ftl b/locales/en-US/server.ftl
index 49b9a19eb7..1d850e7907 100644
--- a/locales/en-US/server.ftl
+++ b/locales/en-US/server.ftl
@@ -213,6 +213,21 @@ annotationColorSeaGreen =
 annotationColorGrey =
     .title = Grey
 
+
+## Settings Page
+
+settingsDisconnectButton = Disconnect
+    .title = Disconnect
+settingsGuestAccountMessage = Guest Account
+settingsSignInInvite = Sign in to sync across devices
+settingsSignInButton = Sign In
+    .title = Sign in
+SettingsPageHeader = Firefox Screenshots Settings
+settingsDescription = You can sign in with Firefox Accounts to sync all your screenshots across devices and access them privately.
+settingsPageSubHeader = Sync & Accounts
+settingsClosePreferences =
+    .title = Close preferences
+
 ## Shotindex page
 
 # { $status } is a placeholder for an HTTP status code, like '500'.
diff --git a/server/src/pages/settings/view.js b/server/src/pages/settings/view.js
index ba4cc16dbb..46a313943f 100644
--- a/server/src/pages/settings/view.js
+++ b/server/src/pages/settings/view.js
@@ -3,6 +3,7 @@ const reactruntime = require("../../reactruntime");
 const sendEvent = require("../../browser-send-event.js");
 const React = require("react");
 const PropTypes = require("prop-types");
+const { Localized } = require("fluent-react/compat");
 
 class Head extends React.Component {
 
@@ -27,7 +28,9 @@ class Body extends React.Component {
       <reactruntime.BodyTemplate {...this.props}>
         <div className="full-height">
           <div id="settings-header">
-            <a className="button close-preferences" href="/shots"></a>
+            <Localized id="settingsClosePreferences">
+              <a className="button close-preferences" href="/shots" title="Close preferences"></a>
+            </Localized>
           </div>
           <div>
             { this.renderAccountInfo() }
@@ -48,7 +51,9 @@ class Body extends React.Component {
           <div className="info-container">
             <p className="username title">{this.props.accountInfo.nickname || this.props.accountInfo.email}</p>
             { this.props.accountInfo.nickname ? <p className="email info">{this.props.accountInfo.email}</p> : null }
-            <button className="account-buttons disconnect" onClick={ this.onClickDisconnect.bind(this) }>Disconnect</button>
+            <Localized id="settingsDisconnectButton">
+              <button className="account-buttons disconnect" onClick={ this.onClickDisconnect.bind(this) } title="Disconnect">Disconnect</button>
+            </Localized>
           </div>
         </div>
       );
@@ -57,20 +62,32 @@ class Body extends React.Component {
         <div className="account-info">
           <img src={ defaultAvatar } height="100" width="100" />
           <div className="info-container">
-            <p className="title">Guest Account</p>
-            <p className="info">Sign in to sync across devices</p>
-            <a className="account-buttons" href="/api/fxa-oauth/login" onClick={ this.onClickConnect.bind(this) }>Sign In</a>
+            <Localized id="settingsGuestAccountMessage">
+              <p className="title">Guest Account</p>
+            </Localized>
+            <Localized id="settingsSignInInvite">
+              <p className="info">Sign in to sync across devices</p>
+            </Localized>
+            <Localized id="settingsSignInButton">
+              <a className="account-buttons" href="/api/fxa-oauth/login" onClick={ this.onClickConnect.bind(this)} title="Sign in">Sign In</a>
+            </Localized>
           </div>
         </div>
       );
       subInfo = (
-        <p className="sub-info">You can sign in with Firefox Account to sync all your screenshots across devices and access them privately.</p>
+        <Localized id="settingsDescription">
+          <p className="sub-info">You can sign in with Firefox Accounts to sync all your screenshots across devices and access them privately.</p>
+        </Localized>
       );
     }
     return <div className="preferences">
-      <p className="header">Firefox Screenshots Settings</p>
+      <Localized id="SettingsPageHeader">
+        <p className="header">Firefox Screenshots Settings</p>
+      </Localized>
       <hr />
-      <p className="sub-header">Sync & Accounts</p>
+      <Localized id="settingsPageSubHeader">
+        <p className="sub-header">Sync & Accounts</p>
+      </Localized>
       { info }
       { subInfo}
     </div>;