EditAccountView translated

src/i18n/en.json

@@ -3,6 +3,16 @@
   "full_name_prompt": "Full name, e.g. John Doe",
   "email_prompt": "Email, e.g. jdoe@example.com",
   "button_sign_up": "Sign up",
+  "label_your_name": "Your name",
+  "label_password": "Password",
+  "password_unchanged_prompt": "Unchanged",
+  "label_user_id": "Address:",
+  "label_default_access_mode": "Default access mode:",
+  "label_message_sound": "Message sound:",
+  "label_push_notifications": "Notification alerts:",
+  "label_push_notifications_disabled": "Notification alerts (requires HTTPS):",
+  "title_tag_manager": "Tags (user discovery)",
+  "button_logout": "Logout",
   "login_prompt": "Login",
   "password_prompt": "Password",
   "stay_logged_in": "Stay logged in",
@@ -29,5 +39,6 @@
   "sidepanel_title_cred": "Confirm Credentials",
   "sidepanel_title_reset": "Reset Password",
   "tags_not_found": "No tags defined. Add some.",
-  "tags_editor_no_tags": "Add some tags"
+  "tags_editor_no_tags": "Add some tags",
+  "title_manage_tags": "Manage tags"
 }

src/i18n/ru.json

@@ -3,6 +3,16 @@
   "full_name_prompt": "Полное имя, напр. Иван Петров",
   "email_prompt": "Email, напр. ivan@example.com",
   "button_sign_up": "Создать счет",
+  "label_your_name": "Ваше имя",
+  "label_password": "Пароль",
+  "password_unchanged_prompt": "Не изменен",
+  "label_user_id": "Адрес:",
+  "label_default_access_mode": "Доступ по умолчанию:",
+  "label_message_sound": "Звук нового сообщения:",
+  "label_push_notifications": "Уведомления:",
+  "label_push_notifications_disabled": "Уведомления (требуют HTTPS):",
+  "title_tag_manager": "Таги для поиска",
+  "button_logout": "Выйти",
   "login_prompt": "Логин",
   "password_prompt": "Пароль",
   "stay_logged_in": "Запомнить",
@@ -27,5 +37,8 @@
   "sidepanel_title_edit_account": "Редактировать счет",
   "sidepanel_title_newtpk": "Новый чат",
   "sidepanel_title_cred": "Подтвердить",
-  "sidepanel_title_reset": "Сменить пароль"
+  "sidepanel_title_reset": "Сменить пароль",
+  "tags_not_found": "Тагов нет. Добавьте",
+  "tags_editor_no_tags": "Добавьте таги",
+  "title_manage_tags": "Редактор тагов"
 }

src/views/edit-account-view.jsx

@@ -1,11 +1,14 @@
+// Edit account parameters.
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import AvatarUpload from '../widgets/avatar-upload.jsx';
 import CheckBox from '../widgets/checkbox.jsx';
+import InPlaceEdit from '../widgets/in-place-edit.jsx';
 import PermissionsEditor from '../widgets/permissions-editor.jsx';
 import TagManager from '../widgets/tag-manager.jsx';
 
-/* Edit account parameters */
+import { makeImageUrl } from '../lib/blob-helpers.js';
 
 export default class EditAccountView extends React.Component {
   constructor(props) {
@@ -112,7 +115,7 @@ export default class EditAccountView extends React.Component {
       tags.push(<span className="badge" key={tags.length}>{tag}</span>);
     });
     if (tags.length == 0) {
-      tags = <i>No tags defined. Add some.</i>;
+      tags = <i><FormattedMessage id="tags_not_found" /></i>;
     }
     return (
       <React.Fragment>{this.state.showPermissionEditorFor ?
@@ -125,16 +128,29 @@ export default class EditAccountView extends React.Component {
         <div id="edit-account" className="scrollable-panel">
           <div className="panel-form-row">
             <div className="panel-form-column">
-              <div><label className="small">Your name</label></div>
+              <div><label className="small">
-              <div><InPlaceEdit
+                <FormattedMessage id="label_your_name" defaultMessage="Your name"
-                  placeholder="Full name, e.g. John Doe"
+                  description="Label for full name editing" />
+              </label></div>
+              <div><FormattedMessage id="full_name_prompt">{
+                (full_name_placeholder) => <InPlaceEdit
+                  placeholder={full_name_placeholder}
                   value={this.state.fullName}
-                  onFinished={this.handleFullNameUpdate} /></div>
+                  onFinished={this.handleFullNameUpdate} />
-              <div><label className="small">Password</label></div>
+              }</FormattedMessage></div>
-              <div><InPlaceEdit
+              <div><label className="small">
-                  placeholder="Unchanged"
+                <FormattedMessage id="label_password" defaultMessage="Password"
+                  description="Label for password editing" />
+              </label></div>
+              <div>
+                <FormattedMessage id="password_unchanged_prompt" defaultMessage="Unchanged"
+                  description="Message in editor while password is unchanged">{
+                  (password_unchanged) => <InPlaceEdit
+                    placeholder={password_unchanged}
                     type="password"
-                  onFinished={this.handlePasswordUpdate} /></div>
+                    onFinished={this.handlePasswordUpdate} />
+                }</FormattedMessage>
+              </div>
             </div>
             <AvatarUpload
               avatar={this.state.avatar}
@@ -146,11 +162,15 @@ export default class EditAccountView extends React.Component {
           <div className="hr" />
           <div className="panel-form-column">
             <div className="panel-form-row">
-              <label>Address:</label>
+              <label><FormattedMessage id="label_user_id" defaultMessage="Address:"
+                description="Label for user address (ID)" /></label>
               <tt>{this.props.myUserId}</tt>
             </div>
             <div>
-              <label className="small">Default access mode:</label>
+              <label className="small">
+                <FormattedMessage id="label_default_access_mode" defaultMessage="Default access mode:"
+                description="Label for default access mode" />
+              </label>
             </div>
             <div className="quoted">
               <div>Auth: <tt className="clickable"
@@ -161,28 +181,43 @@ export default class EditAccountView extends React.Component {
           </div>
           <div className="hr" />
           <div className="panel-form-row">
-            <label htmlFor="message-sound">Message sound:</label>
+            <label htmlFor="message-sound">
+              <FormattedMessage id="label_message_sound" defaultMessage="Message sound:"
+                description="Label for message sounds toggle" />
+            </label>
             <CheckBox name="sound" id="message-sound"
               checked={this.props.messageSounds}
               onChange={this.handleCheckboxClick} />
           </div>
           <div className="panel-form-row">
-            <label htmlFor="desktop-alerts">Notification
+            <label htmlFor="desktop-alerts">
-              alerts{!this.props.desktopAlertsEnabled ? ' (requires HTTPS)' : null}:</label>
+            {this.props.desktopAlertsEnabled ?
+              <FormattedMessage id="label_push_notifications" defaultMessage="Notification alerts"
+                description="Label for push notifications switch" />
+              :
+              <FormattedMessage id="label_push_notifications_disabled"
+                defaultMessage="Notification alerts (requires HTTPS)"
+                description="Label for push notifications switch (disabled)" />
+            }
+            </label>
             <CheckBox name="alert" id="desktop-alerts"
               checked={this.props.desktopAlerts}
               onChange={this.props.desktopAlertsEnabled ? this.handleCheckboxClick : null} />
           </div>
           <div className="hr" />
-          <TagManager
+          <FormattedMessage id="title_tag_manager" defaultMessage="Tags (user discovery)"
-            title="Tags (user discovery)"
+            description="Section title for TagManager">{
+            (title_tag_manager) => <TagManager
+              title={title_tag_manager}
               activated={false}
               tags={this.state.tags}
               onSubmit={this.handleTagsUpdated} />
+          }</FormattedMessage>
           <div className="hr" />
           <div className="panel-form-column">
             <a href="javascript:;" className="red flat-button" onClick={this.props.onLogout}>
-              <i className="material-icons">exit_to_app</i> Logout
+              <i className="material-icons">exit_to_app</i> <FormattedMessage id="button_logout"
+                defaultMessage="Logout" description="Button [Logout]" />
             </a>
           </div>
         </div>

src/widgets/in-place-edit.jsx

@@ -1,7 +1,6 @@
-/* In-place text editor. Shows text with an icon
+// In-place text editor. Shows text with an icon which toggles it into an input field.
- * which toggles it into an input field */
-
 import React from 'react';
+import ReactDom from 'react-dom';
 
 import VisiblePassword from './visible-password.jsx';
 

src/widgets/tag-manager.jsx

@@ -139,8 +139,8 @@ export default class TagManager extends React.Component {
         :
         <div>
           <a href="javascript:;" className="flat-button" onClick={this.handleShowTagManager}>
-            <i className="material-icons">edit</i> <FormattedMessage id="title_manage_tags" defautMessage="Manage tags"
+            <i className="material-icons">edit</i> <FormattedMessage id="title_manage_tags" defaultMessage="Manage tags"
-              description="Section title in TagManager" />
+              description="Section title for the list of tags" />
           </a>
           <span>{tags}</span>
         </div>