Updating user access token UI (#7091)

* Updating user access token UI

Updating help text

Updating tokenlistClass

Updating string for token

Updating translations

Updating translations

Updating translations

* Updating translations

* Minor UI fix

* Update manage_tokens_modal.jsx

* Update user_settings_security.jsx

* Update en.json

* Fix merge conflicts

7 files changed, 104 insertions, 96 deletions

diff --git a/i18n/en.json b/i18n/en.json
index 730017e95..3b2d2662e 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -3157,7 +3157,7 @@
   },
   {
     "id": "app.user_access_token.disabled",
-    "translation": "User access tokens are disabled on this server. Please contact your system administrator for details."
+    "translation": "Personal access tokens are disabled on this server. Please contact your system administrator for details."
   },
   {
     "id": "app.user_access_token.invalid_or_missing",
@@ -3601,11 +3601,11 @@
   },
   {
     "id": "authentication.roles.system_user_access_token.name",
-    "translation": "User Access Token"
+    "translation": "Personal Access Token"
   },
   {
     "id": "authentication.roles.system_user_access_token.description",
-    "translation": "A role with the permissions to create, read and revoke user access tokens"
+    "translation": "A role with the permissions to create, read and revoke personal access tokens"
   },
   {
     "id": "authentication.permissions.create_post_public.name",
@@ -3617,27 +3617,27 @@
   },
   {
     "id": "authentication.permissions.create_user_access_token.name",
-    "translation": "Create User Access Token"
+    "translation": "Create Personal Access Token"
   },
   {
     "id": "authentication.permissions.create_user_access_token.description",
-    "translation": "Ability to create user access tokens"
+    "translation": "Ability to create personal access tokens"
   },
   {
     "id": "authentication.permissions.read_user_access_token.name",
-    "translation": "Read User Access Tokens"
+    "translation": "Read Personal Access Tokens"
   },
   {
     "id": "authentication.permissions.read_user_access_token.description",
-    "translation": "Ability to read user access tokens' id, description and user_id fields"
+    "translation": "Ability to read personal access tokens' id, description and user_id fields"
   },
   {
     "id": "authentication.permissions.revoke_user_access_token.name",
-    "translation": "Revoke User Access Token"
+    "translation": "Revoke Personal Access Token"
   },
   {
     "id": "authentication.permissions.revoke_user_access_token.description",
-    "translation": "Ability to revoke user access tokens"
+    "translation": "Ability to revoke personal access tokens"
   },
   {
     "id": "authentication.permissions.create_group_channel.description",
@@ -6217,23 +6217,23 @@
   },
   {
     "id": "store.sql_user_access_token.get_by_user.app_error",
-    "translation": "We couldn't get the user access tokens by user"
+    "translation": "We couldn't get the personal access tokens by user"
   },
   {
     "id": "store.sql_user_access_token.get_by_token.app_error",
-    "translation": "We couldn't get the user access token by token"
+    "translation": "We couldn't get the personal access token by token"
   },
   {
     "id": "store.sql_user_access_token.get.app_error",
-    "translation": "We couldn't get the user access token"
+    "translation": "We couldn't get the personal access token"
   },
   {
     "id": "store.sql_user_access_token.delete.app_error",
-    "translation": "We couldn't delete the user access token"
+    "translation": "We couldn't delete the personal access token"
   },
   {
     "id": "store.sql_user_access_token.save.app_error",
-    "translation": "We couldn't save the user access token"
+    "translation": "We couldn't save the personal access token"
   },
   {
     "id": "store.sql_user.analytics_get_inactive_users_count.app_error",
diff --git a/webapp/components/admin_console/manage_tokens_modal/manage_tokens_modal.jsx b/webapp/components/admin_console/manage_tokens_modal/manage_tokens_modal.jsx
index c31325291..fdef870e5 100644
--- a/webapp/components/admin_console/manage_tokens_modal/manage_tokens_modal.jsx
+++ b/webapp/components/admin_console/manage_tokens_modal/manage_tokens_modal.jsx
@@ -26,7 +26,7 @@ export default class ManageTokensModal extends React.PureComponent {
         user: PropTypes.object,
 
         /**
-         * The user access tokens for a user, object with token ids as keys
+         * The personal access tokens for a user, object with token ids as keys
          */
         userAccessTokens: PropTypes.object,
 
@@ -86,7 +86,7 @@ export default class ManageTokensModal extends React.PureComponent {
                     <div className='manage-row__empty'>
                         <FormattedMessage
                             id='admin.manage_tokens.userAccessTokensNone'
-                            defaultMessage='No user access tokens.'
+                            defaultMessage='No personal access tokens.'
                         />
                     </div>
                 );
@@ -98,14 +98,14 @@ export default class ManageTokensModal extends React.PureComponent {
                             className='manage-teams__team'
                         >
                             <div className='manage-teams__team-name'>
-                                <div>
+                                <div className='whitespace--nowrap overflow--ellipsis'>
                                     <FormattedMessage
                                         id='admin.manage_tokens.userAccessTokensNameLabel'
-                                        defaultMessage='Name: '
+                                        defaultMessage='Token Description: '
                                     />
                                     {token.description}
                                 </div>
-                                <div>
+                                <div className='whitespace--nowrap overflow--ellipsis'>
                                     <FormattedMessage
                                         id='admin.manage_tokens.userAccessTokensIdLabel'
                                         defaultMessage='Token ID: '
@@ -146,7 +146,7 @@ export default class ManageTokensModal extends React.PureComponent {
                 <div className='padding-top x2'>
                     <FormattedHTMLMessage
                         id='admin.manage_tokens.userAccessTokensDescription'
-                        defaultMessage='User access tokens function similar to session tokens and can be used by integrations to <a href="https://about.mattermost.com/default-api-authentication" target="_blank">authenticate against the REST API</a>. Learn more about <a href="https://about.mattermost.com/default-user-access-tokens" target="_blank">user access tokens</a>.'
+                        defaultMessage='Personal access tokens function similar to session tokens and can be used by integrations to <a href="https://about.mattermost.com/default-api-authentication" target="_blank">interact with this Mattermost server</a>. Learn more about <a href="https://about.mattermost.com/default-user-access-tokens" target="_blank">personal access tokens</a>.'
                     />
                 </div>
                 <div className='manage-teams__teams'>
@@ -167,7 +167,7 @@ export default class ManageTokensModal extends React.PureComponent {
                     <Modal.Title>
                         <FormattedMessage
                             id='admin.manage_tokens.manageTokensTitle'
-                            defaultMessage='Manage User Access Tokens'
+                            defaultMessage='Manage Personal Access Tokens'
                         />
                     </Modal.Title>
                 </Modal.Header>
diff --git a/webapp/components/delete_channel_modal.jsx b/webapp/components/delete_channel_modal.jsx
index fd5447524..92589ce42 100644
--- a/webapp/components/delete_channel_modal.jsx
+++ b/webapp/components/delete_channel_modal.jsx
@@ -4,7 +4,7 @@
 import {Modal} from 'react-bootstrap';
 import TeamStore from 'stores/team_store.jsx';
 
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
 
 import {browserHistory} from 'react-router/es6';
 
@@ -64,9 +64,9 @@ export default class DeleteChannelModal extends React.Component {
                 </Modal.Header>
                 <Modal.Body>
                     <div className='alert alert-danger'>
-                        <FormattedMessage
+                        <FormattedHTMLMessage
                             id='delete_channel.question'
-                            defaultMessage='This will delete the channel from the team and make its contents inaccessible for all users. Are you sure you wish to delete the {display_name} channel?'
+                            defaultMessage='This will delete the channel from the team and make its contents inaccessible for all users. <br /><br />Are you sure you wish to delete the <strong>{display_name}</strong> channel?'
                             values={{
                                 display_name: this.props.channel.display_name
                             }}
diff --git a/webapp/components/user_settings/user_settings_security/user_settings_security.jsx b/webapp/components/user_settings/user_settings_security/user_settings_security.jsx
index 5c9ad67e3..ef55642e6 100644
--- a/webapp/components/user_settings/user_settings_security/user_settings_security.jsx
+++ b/webapp/components/user_settings/user_settings_security/user_settings_security.jsx
@@ -41,7 +41,7 @@ export default class SecurityTab extends React.Component {
         setEnforceFocus: PropTypes.func.isRequired,
 
         /*
-         * The user access tokens for the user
+         * The personal access tokens for the user
          */
         userAccessTokens: PropTypes.object,
 
@@ -54,22 +54,22 @@ export default class SecurityTab extends React.Component {
             getMe: PropTypes.func.isRequired,
 
             /*
-             * Function to get user access tokens for a user
+             * Function to get personal access tokens for a user
              */
             getUserAccessTokensForUser: PropTypes.func.isRequired,
 
             /*
-             * Function to create a user access token
+             * Function to create a personal access token
              */
             createUserAccessToken: PropTypes.func.isRequired,
 
             /*
-             * Function to revoke a user access token
+             * Function to revoke a personal access token
              */
             revokeUserAccessToken: PropTypes.func.isRequired,
 
             /*
-             * Function to clear user access tokens locally
+             * Function to clear personal access tokens locally
              */
             clearUserAccessTokens: PropTypes.func.isRequired
         }).isRequired
@@ -980,7 +980,7 @@ export default class SecurityTab extends React.Component {
         const description = this.refs.newtokendescription ? this.refs.newtokendescription.value : '';
 
         if (description === '') {
-            this.setState({tokenError: Utils.localizeMessage('user.settings.tokens.nameRequired', 'Please enter a name.')});
+            this.setState({tokenError: Utils.localizeMessage('user.settings.tokens.nameRequired', 'Please enter a description.')});
             return;
         }
 
@@ -1013,14 +1013,14 @@ export default class SecurityTab extends React.Component {
                 confirmTitle: (
                     <FormattedMessage
                         id='user.settings.tokens.confirmCreateTitle'
-                        defaultMessage='Create System Admin User Access Token'
+                        defaultMessage='Create System Admin Personal Access Token'
                     />
                 ),
                 confirmMessage: (
                     <div className='alert alert-danger'>
                         <FormattedHTMLMessage
                             id='user.settings.tokens.confirmCreateMessage'
-                            defaultMessage='You are generating a user access token with System Admin permissions. Are you sure want to create this token?'
+                            defaultMessage='You are generating a personal access token with System Admin permissions. Are you sure want to create this token?'
                         />
                     </div>
                 ),
@@ -1056,17 +1056,17 @@ export default class SecurityTab extends React.Component {
             confirmTitle: (
                 <FormattedMessage
                     id='user.settings.tokens.confirmDeleteTitle'
-                    defaultMessage='Delete {name} Token?'
-                    values={{
-                        name: token.description
-                    }}
+                    defaultMessage='Delete Token?'
                 />
             ),
             confirmMessage: (
                 <div className='alert alert-danger'>
                     <FormattedHTMLMessage
                         id='user.settings.tokens.confirmDeleteMessage'
-                        defaultMessage='Any integrations using this token will no longer be able to access the Mattermost API. You cannot undo this action. Are you sure want to delete this token?'
+                        defaultMessage='Any integrations using this token will no longer be able to access the Mattermost API. You cannot undo this action. <br /><br />Are you sure want to delete the {description} token?'
+                        values={{
+                            description: token.description
+                        }}
                     />
                 </div>
             ),
@@ -1093,6 +1093,7 @@ export default class SecurityTab extends React.Component {
 
     createTokensSection = () => {
         let updateSectionStatus;
+        let tokenListClass = '';
 
         if (this.props.activeSection === 'tokens') {
             const tokenList = [];
@@ -1107,7 +1108,11 @@ export default class SecurityTab extends React.Component {
                         className='setting-box__item'
                     >
                         <div className='whitespace--nowrap overflow--ellipsis'>
-                            <strong>{token.description}</strong>
+                            <FormattedMessage
+                                id='user.settings.tokens.tokenDesc'
+                                defaultMessage='Token Description: '
+                            />
+                            {token.description}
                         </div>
                         <div className='setting-box__token-id whitespace--nowrap overflow--ellipsis'>
                             <FormattedMessage
@@ -1136,23 +1141,24 @@ export default class SecurityTab extends React.Component {
                 );
             });
 
+            let noTokenText;
             if (tokenList.length === 0) {
-                tokenList.push(
+                noTokenText = (
                     <FormattedMessage
                         key='notokens'
                         id='user.settings.tokens.userAccessTokensNone'
-                        defaultMessage='No user access tokens.'
+                        defaultMessage='No personal access tokens.'
                     />
                 );
             }
-            let extraInfo;
 
+            let extraInfo;
             if (isMobile()) {
                 extraInfo = (
                     <span>
                         <FormattedHTMLMessage
                             id='user.settings.tokens.description_mobile'
-                            defaultMessage='<a href="https://about.mattermost.com/default-user-access-tokens" target="_blank">User access tokens</a> function similar to session tokens and can be used by integrations to <a href="https://about.mattermost.com/default-api-authentication" target="_blank">authenticate against the REST API</a>. Create new tokens on your desktop.'
+                            defaultMessage='<a href="https://about.mattermost.com/default-user-access-tokens" target="_blank">Personal access tokens</a> function similar to session tokens and can be used by integrations to <a href="https://about.mattermost.com/default-api-authentication" target="_blank">authenticate against the REST API</a>. Create new tokens on your desktop.'
                         />
                     </span>
                 );
@@ -1161,7 +1167,7 @@ export default class SecurityTab extends React.Component {
                     <span>
                         <FormattedHTMLMessage
                             id='user.settings.tokens.description'
-                            defaultMessage='<a href="https://about.mattermost.com/default-user-access-tokens" target="_blank">User access tokens</a> function similar to session tokens and can be used by integrations to <a href="https://about.mattermost.com/default-api-authentication" target="_blank">authenticate against the REST API</a>.'
+                            defaultMessage='<a href="https://about.mattermost.com/default-user-access-tokens" target="_blank">Personal access tokens</a> function similar to session tokens and can be used by integrations to <a href="https://about.mattermost.com/default-api-authentication" target="_blank">authenticate against the REST API</a>.'
                         />
                     </span>
                 );
@@ -1175,7 +1181,7 @@ export default class SecurityTab extends React.Component {
                             <label className='col-sm-auto control-label padding-right x2'>
                                 <FormattedMessage
                                     id='user.settings.tokens.name'
-                                    defaultMessage='Name: '
+                                    defaultMessage='Token Description: '
                                 />
                             </label>
                             <div className='col-sm-5'>
@@ -1191,8 +1197,8 @@ export default class SecurityTab extends React.Component {
                         <div>
                             <div className='padding-top x2'>
                                 <FormattedMessage
-                                    id='user.settings.tokens.nameDescription'
-                                    defaultMessage='Give a name for your token, so you remember what it’s used for. A token is generated after you hit "Save".'
+                                    id='user.settings.tokens.nameHelp'
+                                    defaultMessage='Enter a description for your token to remember what it does.'
                                 />
                             </div>
                             <div>
@@ -1225,6 +1231,10 @@ export default class SecurityTab extends React.Component {
                     </div>
                 );
             } else if (this.state.tokenCreationState === TOKEN_CREATED) {
+                if (tokenList.length === 0) {
+                    tokenListClass = ' hidden';
+                }
+
                 newTokenSection = (
                     <div
                         className='alert alert-warning'
@@ -1232,26 +1242,28 @@ export default class SecurityTab extends React.Component {
                         <i className='fa fa-warning margin-right'/>
                         <FormattedMessage
                             id='user.settings.tokens.copy'
-                            defaultMessage="Please copy the token below. You won't be able to see it again!"
+                            defaultMessage="Please copy the access token below. You won't be able to see it again!"
                         />
                         <br/>
                         <br/>
-                        <FormattedMessage
-                            id='user.settings.tokens.name'
-                            defaultMessage='Name: '
-                        />
-                        {this.state.newToken.description}
-                        <br/>
-                        <FormattedMessage
-                            id='user.settings.tokens.id'
-                            defaultMessage='ID: '
-                        />
-                        {this.state.newToken.id}
-                        <br/>
-                        <strong>
+                        <div className='whitespace--nowrap overflow--ellipsis'>
+                            <FormattedMessage
+                                id='user.settings.tokens.name'
+                                defaultMessage='Token Description: '
+                            />
+                            {this.state.newToken.description}
+                        </div>
+                        <div className='whitespace--nowrap overflow--ellipsis'>
+                            <FormattedMessage
+                                id='user.settings.tokens.id'
+                                defaultMessage='Token ID: '
+                            />
+                            {this.state.newToken.id}
+                        </div>
+                        <strong className='word-break--all'>
                             <FormattedMessage
                                 id='user.settings.tokens.token'
-                                defaultMessage='Token: '
+                                defaultMessage='Access Token: '
                             />
                             {this.state.newToken.token}
                         </strong>
@@ -1279,10 +1291,10 @@ export default class SecurityTab extends React.Component {
                     className='padding-top'
                 >
                     <div key='tokenList'>
-                        <div className='alert alert-transparent'>
+                        <div className={'alert alert-transparent' + tokenListClass}>
                             {tokenList}
+                            {noTokenText}
                         </div>
-                        <br/>
                         {newTokenSection}
                     </div>
                 </div>
@@ -1296,7 +1308,7 @@ export default class SecurityTab extends React.Component {
 
             return (
                 <SettingItemMax
-                    title={Utils.localizeMessage('user.settings.tokens.title', 'User Access Tokens')}
+                    title={Utils.localizeMessage('user.settings.tokens.title', 'Personal Access Tokens')}
                     inputs={inputs}
                     extraInfo={extraInfo}
                     infoPosition='top'
@@ -1313,7 +1325,7 @@ export default class SecurityTab extends React.Component {
             );
         }
 
-        const describe = Utils.localizeMessage('user.settings.tokens.clickToEdit', "Click 'Edit' to manage your user access tokens");
+        const describe = Utils.localizeMessage('user.settings.tokens.clickToEdit', "Click 'Edit' to manage your personal access tokens");
 
         updateSectionStatus = function updateSection() {
             this.props.updateSection('tokens');
@@ -1321,7 +1333,7 @@ export default class SecurityTab extends React.Component {
 
         return (
             <SettingItemMin
-                title={Utils.localizeMessage('user.settings.tokens.title', 'User Access Tokens')}
+                title={Utils.localizeMessage('user.settings.tokens.title', 'Personal Access Tokens')}
                 describe={describe}
                 updateSection={updateSectionStatus}
             />
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index ebbb8662f..509499c1d 100755
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -764,9 +764,9 @@
   "admin.select_team.close": "Close",
   "admin.select_team.select": "Select",
   "admin.select_team.selectTeam": "Select Team",
-  "admin.service.userAccessTokensTitle": "Enable User Access Tokens: ",
-  "admin.service.userAccessTokensDescription": "When true, users can create <a href=\"https://about.mattermost.com/default-user-access-tokens\" target=\"_blank\">user access tokens</a> for integrations in <strong>Account Settings > Security</strong>. They can be used to authenticate against the API and give full access to the account.<br/><br/>To manage who can create user access tokens, go to the <strong>System Console > Users</strong> page.",
-  "admin.service.userAccessTokensNameLabel": "Name: ",
+  "admin.service.userAccessTokensTitle": "Enable Personal Access Tokens: ",
+  "admin.service.userAccessTokensDescription": "When true, users can create <a href=\"https://about.mattermost.com/default-user-access-tokens\" target=\"_blank\">personal access tokens</a> for integrations in <strong>Account Settings > Security</strong>. They can be used to authenticate against the API and give full access to the account.<br/><br/>To manage who can create personal access tokens, go to the <strong>System Console > Users</strong> page.",
+  "admin.service.userAccessTokensDescLabel": "Name: ",
   "admin.service.userAccessTokensIdLabel": "Token ID: ",
   "admin.service.attemptDescription": "Number of login attempts allowed before a user is locked out and required to reset their password via email.",
   "admin.service.attemptExample": "E.g.: \"10\"",
@@ -979,24 +979,24 @@
   "admin.team_analytics.activeUsers": "Active Users With Posts",
   "admin.team_analytics.totalPosts": "Total Posts",
   "admin.true": "true",
-  "admin.manage_tokens.userAccessTokensNone": "No user access tokens.",
-  "admin.manage_tokens.manageTokensTitle": "Manage User Access Tokens",
-  "admin.manage_tokens.userAccessTokensDescription": "User access tokens function similar to session tokens and can be used by integrations to <a href=\"https://about.mattermost.com/default-api-authentication\" target=\"_blank\">authenticate against the REST API</a>. Learn more about <a href=\"https://about.mattermost.com/default-user-access-tokens\" target=\"_blank\">user access tokens</a>.",
+  "admin.manage_tokens.userAccessTokensNone": "No personal access tokens.",
+  "admin.manage_tokens.manageTokensTitle": "Manage Personal Access Tokens",
+  "admin.manage_tokens.userAccessTokensDescription": "Personal access tokens function similar to session tokens and can be used by integrations to <a href=\"https://about.mattermost.com/default-api-authentication\" target=\"_blank\">interact with this Mattermost server</a>. Learn more about <a href=\"https://about.mattermost.com/default-user-access-tokens\" target=\"_blank\">personal access tokens</a>.",
   "admin.manage_roles.saveError": "Unable to save roles.",
   "admin.manage_roles.additionalRoles": "Select additional permissions for the account. <a href=\"https://about.mattermost.com/default-permissions\" target=\"_blank\">Read more about roles and permissions</a>.",
   "admin.manage_roles.postAllRoleTitle": "post:all",
   "admin.manage_roles.postAllRole": "Access to post to all Mattermost channels including direct messages.",
   "admin.manage_roles.postAllPublicRoleTitle": "post:channels",
   "admin.manage_roles.postAllPublicRole": "Access to post to all Mattermost public channels.",
-  "admin.manage_roles.allowUserAccessTokens": "Allow this account to generate <a href=\"https://about.mattermost.com/default-user-access-tokens\" target=\"_blank\">user access tokens</a>.",
+  "admin.manage_roles.allowUserAccessTokens": "Allow this account to generate <a href=\"https://about.mattermost.com/default-user-access-tokens\" target=\"_blank\">personal access tokens</a>.",
   "admin.manage_roles.systemAdmin": "System Admin",
   "admin.manage_roles.systemMember": "Member",
   "admin.manage_roles.manageRolesTitle": "Manage Roles",
   "admin.manage_roles.cancel": "Cancel",
   "admin.manage_roles.save": "Save",
-  "admin.user_item.userAccessTokenPostAll": "(with post:all user access tokens)",
-  "admin.user_item.userAccessTokenPostAllPublic": "(with post:channels user access tokens)",
-  "admin.user_item.userAccessTokenYes": "(with user access tokens)",
+  "admin.user_item.userAccessTokenPostAll": "(with post:all personal access tokens)",
+  "admin.user_item.userAccessTokenPostAllPublic": "(with post:channels personal access tokens)",
+  "admin.user_item.userAccessTokenYes": "(with personal access tokens)",
   "admin.user_item.authServiceEmail": "<strong>Sign-in Method:</strong> Email",
   "admin.user_item.authServiceNotEmail": "<strong>Sign-in Method:</strong> {service}",
   "admin.user_item.confirmDemoteDescription": "If you demote yourself from the System Admin role and there is not another user with System Admin privileges, you'll need to re-assign a System Admin by accessing the Mattermost server through a terminal and running the following command.",
@@ -1352,7 +1352,7 @@
   "delete_channel.cancel": "Cancel",
   "delete_channel.confirm": "Confirm DELETE Channel",
   "delete_channel.del": "Delete",
-  "delete_channel.question": "This will delete the channel from the team and make its contents inaccessible for all users. Are you sure you wish to delete the {display_name} channel?",
+  "delete_channel.question": "This will delete the channel from the team and make its contents inaccessible for all users. <br /><br />Are you sure you wish to delete the <strong>{display_name}</strong> channel?",
   "delete_post.cancel": "Cancel",
   "delete_post.comment": "Comment",
   "delete_post.confirm": "Confirm {term} Delete",
@@ -2480,27 +2480,28 @@
   "user.settings.push_notification.send": "Send mobile push notifications",
   "user.settings.push_notification.status": "Trigger push notifications when",
   "user.settings.push_notification.status_info": "Notification alerts are only pushed to your mobile device when your online status matches the selection above.",
-  "user.settings.tokens.confirmCreateTitle": "Create System Admin User Access Token",
-  "user.settings.tokens.confirmCreateMessage": "You are generating a user access token with System Admin permissions. Are you sure want to create this token?",
+  "user.settings.tokens.confirmCreateTitle": "Create System Admin Personal Access Token",
+  "user.settings.tokens.confirmCreateMessage": "You are generating a personal access token with System Admin permissions. Are you sure want to create this token?",
   "user.settings.tokens.confirmCreateButton": "Yes, Create",
-  "user.settings.tokens.confirmDeleteTitle": "Delete {name} Token?",
-  "user.settings.tokens.confirmDeleteMessage": "Any integrations using this token will no longer be able to access the Mattermost API. You cannot undo this action. Are you sure want to delete this token?",
+  "user.settings.tokens.confirmDeleteTitle": "Delete Token?",
+  "user.settings.tokens.confirmDeleteMessage": "Any integrations using this token will no longer be able to access the Mattermost API. You cannot undo this action. <br /><br />Are you sure want to delete the <strong>{description}</strong> token?",
   "user.settings.tokens.confirmDeleteButton": "Yes, Delete",
   "user.settings.tokens.tokenId": "Token ID: ",
   "user.settings.tokens.delete": "Delete",
-  "user.settings.tokens.userAccessTokensNone": "No user access tokens.",
-  "user.settings.tokens.description": "<a href=\"https://about.mattermost.com/default-user-access-tokens\" target=\"_blank\">User access tokens</a> function similar to session tokens and can be used by integrations to <a href=\"https://about.mattermost.com/default-api-authentication\" target=\"_blank\">authenticate against the REST API</a>.",
-  "user.settings.tokens.description_mobile": "<a href=\"https://about.mattermost.com/default-user-access-tokens\" target=\"_blank\">User access tokens</a> function similar to session tokens and can be used by integrations to <a href=\"https://about.mattermost.com/default-api-authentication\" target=\"_blank\">authenticate against the REST API</a>. Create new tokens on your desktop.",
-  "user.settings.tokens.name": "Name: ",
-  "user.settings.tokens.nameDescription": "Give a name for your token, so you remember what it’s used for. A token is generated after you hit \"Save\".",
+  "user.settings.tokens.userAccessTokensNone": "No personal access tokens.",
+  "user.settings.tokens.description": "<a href=\"https://about.mattermost.com/default-user-access-tokens\" target=\"_blank\">Personal access tokens</a> function similar to session tokens and can be used by integrations to <a href=\"https://about.mattermost.com/default-api-authentication\" target=\"_blank\">authenticate against the REST API</a>.",
+  "user.settings.tokens.description_mobile": "<a href=\"https://about.mattermost.com/default-user-access-tokens\" target=\"_blank\">Personal access tokens</a> function similar to session tokens and can be used by integrations to <a href=\"https://about.mattermost.com/default-api-authentication\" target=\"_blank\">authenticate against the REST API</a>. Create new tokens on your desktop.",
+  "user.settings.tokens.name": "Token Description: ",
+  "user.settings.tokens.nameHelp": "Enter a description for your token to remember what it does.",
+  "user.settings.tokens.nameRequired": "Please enter a description.",
   "user.settings.tokens.save": "Save",
   "user.settings.tokens.cancel": "Cancel",
-  "user.settings.tokens.id": "ID: ",
-  "user.settings.tokens.token": "Token: ",
-  "user.settings.tokens.copy": "Please copy the token below. You won't be able to see it again!",
+  "user.settings.tokens.id": "Token ID: ",
+  "user.settings.tokens.token": "Access Token: ",
+  "user.settings.tokens.copy": "Please copy the access token below. You won't be able to see it again!",
   "user.settings.tokens.create": "Create New Token",
-  "user.settings.tokens.title": "User Access Tokens",
-  "user.settings.tokens.clickToEdit": "Click 'Edit' to manage your user access tokens",
+  "user.settings.tokens.title": "Personal Access Tokens",
+  "user.settings.tokens.clickToEdit": "Click 'Edit' to manage your personal access tokens",
   "user.settings.security.active": "Active",
   "user.settings.security.close": "Close",
   "user.settings.security.currentPassword": "Current Password",
diff --git a/webapp/sass/components/_alerts.scss b/webapp/sass/components/_alerts.scss
index e0444de39..cb4c9c9e1 100644
--- a/webapp/sass/components/_alerts.scss
+++ b/webapp/sass/components/_alerts.scss
@@ -11,4 +11,3 @@
     margin: 1px 0 0 10px;
     padding: 4px 10px;
 }
-
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index f92ae042e..b98ec85c9 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -103,10 +103,6 @@
             }
         }
 
-        .alert {
-            margin-bottom: 0;
-        }
-
         .custom-textarea {
             border-color: $light-gray;
             color: inherit;