PLT-5281 error messages contain a link to documentation about reserved words (#5530)

* PLT-5281 error messages contain a link to documentation about reserved words

* Updated comments per PM review

* Proposed fix to review comments

webapp/components/create_team/components/team_url.jsx

@@ -81,9 +81,9 @@ export default class TeamUrl extends React.Component {
         for (let index = 0; index < Constants.RESERVED_TEAM_NAMES.length; index++) {
             if (cleanedName.indexOf(Constants.RESERVED_TEAM_NAMES[index]) === 0) {
                 this.setState({nameError: (
-                    <FormattedMessage
+                    <FormattedHTMLMessage
                         id='create_team.team_url.taken'
-                        defaultMessage='URL is taken or contains a reserved word'
+                        defaultMessage='This URL <a href="https://docs.mattermost.com/help/getting-started/creating-teams.html#team-url" target="_blank">starts with a reserved word</a> or is unavailable. Please try another.'
                     />)
                 });
                 return;
@@ -101,7 +101,7 @@ export default class TeamUrl extends React.Component {
                     this.setState({nameError: (
                         <FormattedMessage
                             id='create_team.team_url.unavailable'
-                            defaultMessage='This URL is unavailable. Please try another.'
+                            defaultMessage='This URL is taken or unavailable. Please try another.'
                         />)
                     });
                     this.setState({isLoading: false});

webapp/i18n/en.json

@@ -1220,9 +1220,9 @@
   "create_team.team_url.hint": "<li>Short and memorable is best</li><li>Use lowercase letters, numbers and dashes</li><li>Must start with a letter and can't end in a dash</li>",
   "create_team.team_url.regex": "Use only lower case letters, numbers and dashes. Must start with a letter and can't end in a dash.",
   "create_team.team_url.required": "This field is required",
-  "create_team.team_url.taken": "URL is taken or contains a reserved word",
+  "create_team.team_url.taken": "This URL <a href=\"https://docs.mattermost.com/help/getting-started/creating-teams.html#team-url\" target=\"_blank\">starts with a reserved word</a> or is unavailable. Please try another.",
   "create_team.team_url.teamUrl": "Team URL",
-  "create_team.team_url.unavailable": "This URL is unavailable. Please try another.",
+  "create_team.team_url.unavailable": "This URL is taken or unavailable. Please try another.",
   "create_team.team_url.webAddress": "Choose the web address of your new team:",
   "custom_emoji.empty": "No custom emoji found",
   "custom_emoji.header": "Custom Emoji",

webapp/sass/responsive/_mobile.scss

@@ -1727,10 +1727,16 @@
     }
 }
 
-// on iOS, allow clicks within an input's label to actually propagate through to the input itself
+// on iOS, allow clicks within an input's label to actually propagate through to the input itself,
+// but still allow clicks to a elements to go trough
 // http://stackoverflow.com/a/34810294/6325807
-label span {
+label {
+  span {
     pointer-events: none;
+  }
+  span a {
+    pointer-events: all;
+  }
 }
 
 @media screen and (-webkit-min-device-pixel-ratio: 0) {