Add nickname_username option in account settings

The option of using nickname || username has been added everywhere
except in the account settings, and that seemed to be overriding the
global setting.

Also add a few translations.
Signed-off-by: Maxime “pep” Buquet <pep@collabora.com>

components/user_settings/display/user_settings_display.jsx

@@ -172,6 +172,7 @@ export default class UserSettingsDisplay extends React.Component {
             firstOption,
             secondOption,
             thirdOption,
+            fourthOption,
             description,
         } = props;
 
@@ -225,6 +226,16 @@ export default class UserSettingsDisplay extends React.Component {
             );
         }
 
+        let fourthMessage;
+        if (fourthOption) {
+            fourthMessage = (
+                <FormattedMessage
+                    id={fourthOption.radionButtonText.id}
+                    defaultMessage={fourthOption.radionButtonText.message}
+                />
+            );
+        }
+
         const messageTitle = (
             <FormattedMessage
                 id={title.id}
@@ -240,13 +251,15 @@ export default class UserSettingsDisplay extends React.Component {
         );
 
         if (this.props.activeSection === section) {
-            const format = [false, false, false];
+            const format = [false, false, false, false];
             if (value === firstOption.value) {
                 format[0] = true;
             } else if (value === secondOption.value) {
                 format[1] = true;
-            } else {
+            } else if (thirdOption && value === thirdOption.value) {
                 format[2] = true;
+            } else {
+                format[3] = true;
             }
 
             const name = section + 'Format';
@@ -263,6 +276,11 @@ export default class UserSettingsDisplay extends React.Component {
                 thirdDisplay[display] = thirdOption.value;
             }
 
+            const fourthDisplay = {};
+            if (fourthOption) {
+                fourthDisplay[display] = fourthOption.value;
+            }
+
             let thirdSection;
             if (thirdMessage) {
                 thirdSection = (
@@ -282,6 +300,25 @@ export default class UserSettingsDisplay extends React.Component {
                 );
             }
 
+            let fourthSection;
+            if (fourthMessage) {
+                fourthSection = (
+                    <div className='radio'>
+                        <label>
+                            <input
+                                id={name + 'D'}
+                                type='radio'
+                                name={name}
+                                checked={format[3]}
+                                onChange={() => this.handleOnChange(fourthDisplay)}
+                            />
+                            {fourthMessage}
+                        </label>
+                        <br/>
+                    </div>
+                );
+            }
+
             const inputs = [
                 <div key={key}>
                     <div className='radio'>
@@ -315,6 +352,7 @@ export default class UserSettingsDisplay extends React.Component {
                         <br/>
                     </div>
                     {thirdSection}
+                    {fourthSection}
                     <div>
                         <br/>
                         {messageDesc}
@@ -485,6 +523,13 @@ export default class UserSettingsDisplay extends React.Component {
                     message: 'Show first and last name',
                 },
             },
+            fourthOption: {
+                value: Constants.TEAMMATE_NAME_DISPLAY.SHOW_NICKNAME_USERNAME,
+                radionButtonText: {
+                    id: 'user.settings.display.teammateNameDisplayNicknameUsername',
+                    message: 'Show nickname if one exists, otherwise show username',
+                },
+            },
             description: {
                 id: 'user.settings.display.teammateNameDisplayDescription',
                 message: 'Set how to display other user\'s names in posts and the Direct Messages list.',

i18n/en.json

@@ -3086,6 +3086,7 @@
   "user.settings.display.teammateNameDisplayDescription": "Set how to display other user's names in posts and the Direct Messages list.",
   "user.settings.display.teammateNameDisplayFullname": "Show first and last name",
   "user.settings.display.teammateNameDisplayNicknameFullname": "Show nickname if one exists, otherwise show first and last name",
+  "user.settings.display.teammateNameDisplayNicknameUsername": "Show nickname if one exists, otherwise show username",
   "user.settings.display.teammateNameDisplayTitle": "Teammate Name Display",
   "user.settings.display.teammateNameDisplayUsername": "Show username",
   "user.settings.display.theme.applyToAllTeams": "Apply new theme to all my teams",

i18n/fr.json

@@ -3085,6 +3085,7 @@
   "user.settings.display.teammateNameDisplayDescription": "Choisissez comment afficher les noms des autres utilisateurs dans les messages et la liste de messages personnels.",
   "user.settings.display.teammateNameDisplayFullname": "Afficher le prénom d'abord puis le nom",
   "user.settings.display.teammateNameDisplayNicknameFullname": "Afficher le pseudo s'il existe, sinon afficher le prénom d'abord puis le nom",
+  "user.settings.display.teammateNameDisplayNicknameUsername": "Afficher le pseudo s'il exists, sinon afficher le nom d'utilisateur",
   "user.settings.display.teammateNameDisplayTitle": "Affichage des noms des membres de l'équipe",
   "user.settings.display.teammateNameDisplayUsername": "Afficher le nom d'utilisateur",
   "user.settings.display.theme.applyToAllTeams": "Appliquer le nouveau thème à toutes mes équipes",

i18n/ja.json

@@ -3085,6 +3085,7 @@
   "user.settings.display.teammateNameDisplayDescription": "投稿やダイレクトメッセージ中の他のユーザーの名前の表示方法を設定します。",
   "user.settings.display.teammateNameDisplayFullname": "氏名を表示する",
   "user.settings.display.teammateNameDisplayNicknameFullname": "ニックネームがあればそれを表示する。無ければ氏名を表示する。",
+  "user.settings.display.teammateNameDisplayNicknameFullname": "ニックネームがあればそれを表示する。無ければユーザー名を表示する",
   "user.settings.display.teammateNameDisplayTitle": "チームメイトの名前の表示",
   "user.settings.display.teammateNameDisplayUsername": "ユーザー名を表示する",
   "user.settings.display.theme.applyToAllTeams": "全ての自分のチームに新しいテーマを適用する",