initial pass at internationalization

index-dev.html

@@ -1,6 +1,6 @@
 <!--
   DEVELOPMENT version of the web app.
-  It links to online babel transformer and non-babelified app script
+  It links to online babel transformer and the original JSX app script.
 -->
 
 <!DOCTYPE html>
@@ -35,6 +35,10 @@
     <!-- Localization support -->
     <script crossorigin src="https://unpkg.com/prop-types@15/prop-types.js"></script>
     <script crossorigin src="https://unpkg.com/react-intl@2/dist/react-intl.js"></script>
+    <script>
+    // Extract react-intl objects
+    var {IntlProvider, FormattedMessage} = ReactIntl;
+    </script>
     <!-- Firebase push notifications. -->
     <script crossorigin src="https://unpkg.com/firebase@5.5.5/firebase-app.js"></script>
     <script crossorigin src="https://unpkg.com/firebase@5.5.5/firebase-messaging.js"></script>
@@ -50,9 +54,10 @@
     <script type="text/babel" src="src/webapp.jsx"></script>
     <script type="text/babel">
       ReactDOM.render(
-        <ReactIntl.IntlProvider locale={navigator.language}>
+        <IntlProvider
+          locale={navigator.language}>
           <TinodeWeb />
-        </ReactIntl.IntlProvider>,
+        </IntlProvider>,
         document.getElementById('mountPoint')
       );
     </script>

src/webapp.jsx

@@ -1371,28 +1371,43 @@ class LoginView extends React.Component {
     if (this.props.disabled) {
       submitClasses += ' disabled';
     }
+
     return (
       <form id="login-form" onSubmit={this.handleSubmit}>
-        <input type="text" id="inputLogin"
+        <FormattedMessage id="login.login_prompt" defaultMessage="Login">
-          placeholder="Login"
+        {
-          autoComplete="username"
+          (login_prompt) => <input type="text" id="inputLogin"
-          value={this.state.login}
+            placeholder={login_prompt}
-          onChange={this.handleLoginChange}
+            autoComplete="username"
-          required autoFocus />
+            value={this.state.login}
-        <VisiblePassword type="password" id="inputPassword"
+            onChange={this.handleLoginChange}
-          placeholder="Password"
+            required autoFocus />
-          autoComplete="current-password"
+        }
-          value={this.state.password}
+        </FormattedMessage>
-          onChange={this.handlePasswordChange}
+        <FormattedMessage id="login.password_prompt" defaultMessage="Password">
-          required={true} />
+        {
+          (password_prompt) => <VisiblePassword type="password" id="inputPassword"
+            placeholder={password_prompt}
+            autoComplete="current-password"
+            value={this.state.password}
+            onChange={this.handlePasswordChange}
+            required={true} />
+        }
+        </FormattedMessage>
         <div className="panel-form-row">
           <CheckBox id="save-token" name="save-token" checked={this.state.saveToken}
             onChange={this.handleToggleSaveToken} />
-          <label htmlFor="save-token">&nbsp;Stay logged in</label>
+          <label htmlFor="save-token">&nbsp;
-          <a href="#reset">Forgot password?</a>
+            <FormattedMessage id="login.stay_logged_in" defaultMessage="Stay logged in" />
+          </label>
+          <a href="#reset">
+            <FormattedMessage id="login.forgot_password_link" defaultMessage="Forgot password?" />
+          </a>
         </div>
         <div className="dialog-buttons">
-          <button className={submitClasses} type="submit">Sign in</button>
+          <button className={submitClasses} type="submit">
+            <FormattedMessage id="login.sign_in_button" defaultMessage="Sign in" />
+          </button>
         </div>
       </form>
     );
@@ -4522,7 +4537,7 @@ class ImagePreview extends React.PureComponent {
 };
 /* END Conversation panel */
 
-/* The top-level class to hold all fuinctionality together */
+/* The top-level class to hold all functionality together */
 class TinodeWeb extends React.Component {
   constructor(props) {
     super(props);