Update introduction message at top of channel/private groups (#4508)

* Update introduction message at top of channel/private groups

* fix grammar

webapp/i18n/en.json

@@ -1411,7 +1411,8 @@
   "intro_messages.anyMember": " Any member can join and read this channel.",
   "intro_messages.beginning": "Beginning of {name}",
   "intro_messages.channel": "channel",
-  "intro_messages.creator": "This is the start of the <strong>{name}</strong> {type}, created by <strong>{creator}</strong> on <strong>{date}</strong>",
+  "intro_messages.creator": "This is the start of the {name} {type}, created by {creator} on {date}.",
+  "intro_messages.purpose": " This {type}'s purpose is: {purpose}.",
   "intro_messages.default": "<h4 class='channel-intro__title'>Beginning of {display_name}</h4><p class='channel-intro__content'><strong>Welcome to {display_name}!</strong><br/><br/>This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.</p>",
   "intro_messages.group": "private group",
   "intro_messages.invite": "Invite others to this {type}",

webapp/utils/channel_intro_messages.jsx

@@ -147,10 +147,10 @@ export function createDefaultIntroMessage(channel, centeredIntro) {
 
 export function createStandardIntroMessage(channel, centeredIntro) {
     var uiName = channel.display_name;
-    var creatorName = '';
+    var creatorName = Utils.displayUsername(channel.creator_id);
-
     var uiType;
     var memberMessage;
+
     if (channel.type === 'P') {
         uiType = (
             <FormattedMessage
@@ -204,14 +204,30 @@ export function createStandardIntroMessage(channel, centeredIntro) {
     } else {
         createMessage = (
             <span>
-                <FormattedHTMLMessage
+                <FormattedMessage
                     id='intro_messages.creator'
-                    defaultMessage='This is the start of the <strong>{name}</strong> {type}, created by <strong>{creator}</strong> on <strong>{date}</strong>'
+                    defaultMessage='This is the start of the {name} {type}, created by {creator} on {date}.'
                     values={{
                         name: (uiName),
                         type: (uiType),
-                        date,
+                        creator: (creatorName),
-                        creator: creatorName
+                        date
+                    }}
+                />
+            </span>
+        );
+    }
+
+    var purposeMessage = '';
+    if (channel.purpose && channel.purpose !== '') {
+        purposeMessage = (
+            <span>
+                <FormattedMessage
+                    id='intro_messages.purpose'
+                    defaultMessage=" This {type}'s purpose is: {purpose}"
+                    values={{
+                        purpose: channel.purpose,
+                        type: (uiType)
                     }}
                 />
             </span>
@@ -232,6 +248,7 @@ export function createStandardIntroMessage(channel, centeredIntro) {
             <p className='channel-intro__content'>
                 {createMessage}
                 {memberMessage}
+                {purposeMessage}
                 <br/>
             </p>
             {createInviteChannelMemberButton(channel, uiType)}