firmatjs requires exlicit declarations everywhere now

src/views/acc-general-view.jsx

@@ -135,8 +135,10 @@ export default class AccGeneralView extends React.Component {
       <div className="scrollable-panel">
         <div className="panel-form-row">
           <div className="panel-form-column">
-            <label className="small"><FormattedMessage id="label_your_name" /></label>
+            <label className="small"><FormattedMessage id="label_your_name" defaultMessage="Your name"
-            <div><FormattedMessage id="full_name_prompt">{
+              description="Label for full name editing" /></label>
+            <div><FormattedMessage id="full_name_prompt" defaultMessage="Full name, e.g. John Doe"
+              description="Input placeholder for person's full name">{
               (full_name_placeholder) => <InPlaceEdit
                 placeholder={full_name_placeholder}
                 value={this.state.fullName}

src/views/acc-support-view.jsx

@@ -27,7 +27,8 @@ export default class AccSupportView extends React.PureComponent {
         <div className="hr" />
         <div className="panel-form-column">
           <div className="panel-form-row">
-            <label className="small"><FormattedMessage id="label_client" /></label>
+            <label className="small"><FormattedMessage id="label_client" defaultMessage="Client:"
+              description="Label for a client version" /></label>
             {APP_NAME}
           </div>
           <div className="panel-form-row">
@@ -35,7 +36,8 @@ export default class AccSupportView extends React.PureComponent {
             {Tinode.getLibrary()}
           </div>
           <div className="panel-form-row">
-            <label className="small"><FormattedMessage id="label_server" /></label>
+            <label className="small"><FormattedMessage id="label_server" defaultMessage="Server:"
+              description="Label for a server version" /></label>
             {this.props.serverVersion}
           </div>
           <div className="panel-form-row">

src/views/create-account-view.jsx

@@ -79,11 +79,13 @@ export default class CreateAccountView extends React.PureComponent {
       <form className="panel-form-column" onSubmit={this.handleSubmit}>
         <div className="panel-form-row">
           <div className="panel-form-column">
-            <FormattedMessage id="login_prompt">{
+            <FormattedMessage id="login_prompt" defaultMessage="Login"
+              description="Placeholer for username/login">{
               (login_prompt) => <input type="text" placeholder={login_prompt} autoComplete="user-name"
                 value={this.state.login} onChange={this.handleLoginChange} required autoFocus />
             }</FormattedMessage>
-            <FormattedMessage id="password_prompt">{
+            <FormattedMessage id="password_prompt" defaultMessage="Password"
+              description="Placeholder/prompt for entering password">{
               (password_prompt) => <VisiblePassword placeholder={password_prompt} autoComplete="new-password"
                 value={this.state.password} onFinished={this.handlePasswordChange}
                 required={true} />
@@ -110,7 +112,8 @@ export default class CreateAccountView extends React.PureComponent {
         <div className="panel-form-row">
           <CheckBox id="save-token" name="save-token" checked={this.state.saveToken}
             onChange={this.handleToggleSaveToken} />
-          <FormattedMessage id="stay_logged_in">{
+          <FormattedMessage id="stay_logged_in" defaultMessage="Stay logged in"
+            description="Label for a checkbox">{
             (stay_logged_in) => <label htmlFor="save-token">&nbsp;{stay_logged_in}</label>
           }</FormattedMessage>
         </div>

src/views/edit-account-view.jsx

@@ -48,13 +48,16 @@ export default class EditAccountView extends React.Component {
         <div className="hr" />
         <div className="panel-form-column">
           <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onBasicNavigate('notif');}}>
-            <i className="material-icons">notifications</i>&nbsp;<FormattedMessage id="sidepanel_title_acc_notifications" />
+            <i className="material-icons">notifications</i>&nbsp;<FormattedMessage id="sidepanel_title_acc_notifications"
+              defaultMessage="Notifications" description="Sidepanel title for AccNotificationsView." />
           </a>
           <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onBasicNavigate('security');}}>
-            <i className="material-icons">security</i>&nbsp;<FormattedMessage id="sidepanel_title_acc_security" />
+            <i className="material-icons">security</i>&nbsp;<FormattedMessage id="sidepanel_title_acc_security"
+              defaultMessage="Security" description="Sidepanel title for AccSecurityView." />
           </a>
           <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onBasicNavigate('support');}}>
-            <i className="material-icons">contact_support</i>&nbsp;<FormattedMessage id="sidepanel_title_acc_support" />
+            <i className="material-icons">contact_support</i>&nbsp;<FormattedMessage id="sidepanel_title_acc_support"
+              defaultMessage="Support" description="Sidepanel title for AccSupportView." />
           </a>
         </div>
       </div>

src/views/info-view.jsx

@@ -615,7 +615,8 @@ class InfoView extends React.Component {
               {this.state.moreInfoExpanded ?
                 <div className="panel-form-column">
                   <div className="panel-form-row">
-                    <label><FormattedMessage id="label_user_id" /></label>
+                    <label><FormattedMessage id="label_user_id" defaultMessage="ID:"
+                      description="Label for user address (ID)" /></label>
                     <tt>{this.state.address}</tt>
                   </div>
                   {this.state.groupTopic ?
@@ -692,7 +693,8 @@ class InfoView extends React.Component {
             <div className="hr" />
             {this.state.owner ?
               <>
-                <FormattedMessage id="title_tag_manager">{
+                <FormattedMessage id="title_tag_manager" defaultMessage="Tags (user discovery)"
+                  description="Section title for TagManager">{
                   (tags) => <TagManager
                     title={tags}
                     tags={this.state.tags}

src/views/login-view.jsx

@@ -50,7 +50,7 @@ export default class LoginView extends React.Component {
     return (
       <form id="login-form" onSubmit={this.handleSubmit}>
         <FormattedMessage id="login_prompt" defaultMessage="Login"
-          description="Login placeholder in LoginView">
+          description="Placeholer for username/login">
         {
           (login_prompt) => <input type="text" id="inputLogin"
             placeholder={login_prompt}
@@ -63,7 +63,7 @@ export default class LoginView extends React.Component {
         }
         </FormattedMessage>
         <FormattedMessage id="password_prompt" defaultMessage="Password"
-          description="Password placeholder in LoginView">
+          description="Placeholder/prompt for entering password">
         {
           (password_prompt) => <VisiblePassword type="password" id="inputPassword"
             placeholder={password_prompt}

src/views/logo-view.jsx

@@ -16,8 +16,10 @@ export default class LogoView extends React.PureComponent {
             <img id="logo" alt="logo" src="img/logo.svg" />
             <h2>Tinode Web</h2>
           </a>
-          <p><FormattedMessage id="label_client" defaultMessage="Client:" /> {version}</p>
+          <p><FormattedMessage id="label_client" defaultMessage="Client:" 
-          <p><FormattedMessage id="label_server" defaultMessage="Server:" /> {this.props.serverVersion} ({this.props.serverAddress})</p>
+            description="Label for a client version" /> {version}</p>
+          <p><FormattedMessage id="label_server" defaultMessage="Server:"
+            description="Label for a server version" /> {this.props.serverVersion} ({this.props.serverAddress})</p>
         </div>
       </div>
     );

src/views/messages-view.jsx

@@ -45,6 +45,11 @@ const messages = defineMessages({
     id: 'channel',
     defaultMessage: 'channel',
     description: 'Subtitle shown for channels in MessagesView instead of last seen'
+  },
+  'file_attachment_too_large': {
+    id: 'file_attachment_too_large',
+    defaultMessage: 'The file size {size} exceeds the {limit} limit.',
+    description: 'Error message when attachment is too large'
   }
 });
 
@@ -669,8 +674,8 @@ class MessagesView extends React.Component {
 
     if (file.size > maxExternAttachmentSize) {
       // Too large.
-      this.props.onError(this.props.intl.formatMessage({id: 'file_attachment_too_large'},
+      this.props.onError(this.props.intl.formatMessage(messages.file_attachment_too_large,
-          {size: bytesToHumanSize(file.size), limit: bytesToHumanSize(maxExternAttachmentSize)}), 'err');
+        {size: bytesToHumanSize(file.size), limit: bytesToHumanSize(maxExternAttachmentSize)}), 'err');
     } else {
       this.setState({ docPreview: {
         file: file,

src/views/tinode-web.jsx

@@ -57,6 +57,11 @@ const messages = defineMessages({
     id: 'code_doesnot_match',
     defaultMessage: 'Code does not match',
     description: 'Error message when the credential validation code is incorrect.'
+  },
+  menu_item_info: {
+    id: 'menu_item_info',
+    defaultMessage: 'Info',
+    description: 'Show extended topic information'
   }
 });
 
@@ -1262,7 +1267,7 @@ class TinodeWeb extends React.Component {
 
     return [
       subscribed ? {
-        title: this.props.intl.formatMessage({id: 'menu_item_info'}),
+        title: this.props.intl.formatMessage(messages.menu_item_info),
         handler: this.handleShowInfoView
       } : null,
       subscribed ? 'messages_clear' : null,

src/views/validation-view.jsx

@@ -82,7 +82,7 @@ class ValidationView extends React.PureComponent {
             <FormattedMessage id="button_confirm" defaultMessage="Confirm" description="Button [Confirm]" />
           </button>
           <button className="white" onClick={this.handleCancel}>
-            <FormattedMessage id="button_cancel" />
+            <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
           </button>
         </div>
       </div>

src/widgets/alert.jsx

@@ -11,13 +11,13 @@ export default class Alert extends React.PureComponent {
           <div className="dialog-buttons">
             {this.props.onReject ?
               <button className="outline" onClick={this.props.onReject}>
-                {this.props.reject || <FormattedMessage id="button_cancel" />}
+                {this.props.reject || <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />}
               </button>
               :
               null
             }
             <button className="blue" onClick={this.props.onConfirm}>
-              {this.props.confirm || <FormattedMessage id="button_ok" />}
+              {this.props.confirm || <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]"  />}
             </button>
           </div>
         </div>

src/widgets/contact.jsx

@@ -32,7 +32,8 @@ export default class Contact extends React.Component {
   render() {
     let title = this.props.title;
     if (!title) {
-      title = <i><FormattedMessage id="unnamed_topic" /></i>;
+      title = <i><FormattedMessage id="unnamed_topic" defaultMessage="Unnamed"
+        description="Title shown when the topic has no name" /></i>;
     } else if (title.length > 30) {
       // FIXME: this is probably wrong for RTL languages.
       title = title.substring(0, 28) + '...';

src/widgets/context-menu.jsx

@@ -57,6 +57,11 @@ const messages = defineMessages({
     defaultMessage: 'Are you sure you want to delete this conversation?',
     description: 'Alert warning when deleting entire topic'
   },
+  delete_messages_warning: {
+    id: 'delete_messages_warning',
+    defaultMessage: 'Are you sure you want to delete all messages for everyone? It cannot be undone.',
+    description: 'Alert dialog warning when hard-deleting all messages.'
+  },
   unblock: {
     id: 'menu_item_unblock',
     defaultMessage: 'Unblock',
@@ -82,7 +87,17 @@ const messages = defineMessages({
     id: 'menu_item_archive_topic',
     defaultMessage: 'Archive',
     description: 'Move topic from the list of active chats to archive'
-  }
+  },
+  edit_permissions: {
+    id: 'menu_item_edit_permissions',
+    defaultMessage: 'Edit permissions',
+    description: 'Menu item [Edit permissions]'
+  },
+  clear_messages_warning: {
+    id: 'clear_messages_warning',
+    defaultMessage: 'Are you sure you want to clear all messages? It cannot be undone.',
+    description: 'Alert dialog warning when deleting all messages.'
+  },
 });
 
 class ContextMenu extends React.Component {
@@ -108,7 +123,7 @@ class ContextMenu extends React.Component {
         handler: (params, errorHandler) => {
           return props.onShowAlert(
             formatMessage(messages.menu_item_clear_messages), // title
-            formatMessage({id: 'clear_messages_warning'}), // content
+            formatMessage(messages.clear_messages_warning), // content
             (() => { this.deleteMessages(true, false, params, errorHandler); }), // onConfirm
             null, // "OK"
             true, // Show Reject button
@@ -122,7 +137,7 @@ class ContextMenu extends React.Component {
         handler: (params, errorHandler) => {
           return props.onShowAlert(
             formatMessage(messages.menu_item_clear_messages_for_all), // title
-            formatMessage({id: 'delete_messages_warning'}), // content
+            formatMessage(message.delete_messages_warning), // content
             (() => { return this.deleteMessages(true, true, params, errorHandler); }),
             null, // "OK"
             true, // Show Reject button
@@ -229,7 +244,7 @@ class ContextMenu extends React.Component {
       // menu_item_edit_permissions is defined elsewhere.
       'permissions': {
         id: 'permissions',
-        title: formatMessage({id: 'menu_item_edit_permissions'}),
+        title: formatMessage(messages.menu_item_edit_permissions),
         handler: null
       },
       'member_delete': {

src/widgets/doc-preview.jsx

@@ -37,8 +37,10 @@ export default class DocPreview extends React.PureComponent {
         <div id="image-preview-container">
           <div className="flex-column narrow">
             <i className="material-icons gray">{iconFromMime(this.props.content.type)}</i>
-            <div><b><FormattedMessage id="label_content_type" /></b> {this.props.content.type || 'application/octet-stream'}</div>
+            <div><b><FormattedMessage id="label_content_type" defaultMessage="Content type:"
-            <div><b><FormattedMessage id="label_size" /></b> {bytesToHumanSize(this.props.content.size)}</div>
+              description="Label for file content type (mime)" /></b> {this.props.content.type || 'application/octet-stream'}</div>
+            <div><b><FormattedMessage id="label_size" defaultMessage="Size:"
+              description="Label for file size" /></b> {bytesToHumanSize(this.props.content.size)}</div>
           </div>
         </div>
         <SendMessage

src/widgets/new-topic-group.jsx

@@ -67,7 +67,8 @@ export default class NewTopicGroup extends React.PureComponent {
         <div className="panel-form-row">
           <div className="panel-form-column">
             <label className="small" htmlFor="new-topic-fn">
-              <FormattedMessage id="label_topic_name" />
+              <FormattedMessage id="label_topic_name" defaultMessage="Name"
+                description="Label for editing topic name" />
             </label>
             <FormattedMessage id="topic_name_editing_placeholder" defaultMessage="Freeform name of the group"
               description="Prompt for entering topic name">{
@@ -76,9 +77,11 @@ export default class NewTopicGroup extends React.PureComponent {
             }</FormattedMessage>
             <br />
             <label className="small" htmlFor="new-topic-priv">
-              <FormattedMessage id="label_private" />
+              <FormattedMessage id="label_private" defaultMessage="Private comment"
+                description="Label for editing 'private'" />
             </label>
-            <FormattedMessage id="private_editing_placeholder">{
+            <FormattedMessage id="private_editing_placeholder" defaultMessage="Visible to you only"
+              description="Placeholder for editing 'private'">{
               (placeholder) => <input type="text" id="new-topic-priv" placeholder={placeholder}
                 value={this.state.private} onChange={this.handlePrivateChange} />
             }</FormattedMessage>
@@ -93,7 +96,8 @@ export default class NewTopicGroup extends React.PureComponent {
             defaultMessage="This is a channel"
             description="Checkbox label when creating a channel" /></label>
         </div>
-        <FormattedMessage id="title_tag_manager">{
+        <FormattedMessage id="title_tag_manager" defaultMessage="Tags (user discovery)"
+          description="Section title for TagManager">{
           (title) => <TagManager
             tags={this.state.tags}
             activated={true}

src/widgets/permissions-editor.jsx

@@ -151,10 +151,10 @@ class PermissionsEditor extends React.Component {
         <br />
         <div className="dialog-buttons">
           <button className="outline" onClick={this.handleCancel}>
-            <FormattedMessage id="button_cancel" />
+            <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
           </button>
           <button className="blue" onClick={this.handleSubmit}>
-            <FormattedMessage id="button_ok" />
+            <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />
           </button>
         </div>
       </div>

src/widgets/tag-manager.jsx

@@ -128,10 +128,10 @@ export default class TagManager extends React.Component {
           {this.props.onSubmit || this.props.onCancel ?
             <div id="tag-manager-buttons" className="dialog-buttons panel-form-row">
               <button className="outline" onClick={this.handleCancel}>
-                <FormattedMessage id="button_cancel" defautMessage="Cancel" description="Rejection button [Cancel]" />
+                <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
               </button>
               <button className="blue" onClick={this.handleSubmit}>
-                <FormattedMessage id="button_ok" defautMessage="OK" description="Confirmation button [OK]" />
+                <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />
               </button>
             </div>
           : null}