Improve Third-party Logins UI.

web/src/UserEditPage.js

@@ -316,9 +316,18 @@ class UserEditPage extends React.Component {
             }} />
           </Col>
         </Row>
-        {
-          this.state.providers.map((provider, index) => this.renderIdp(provider))
-        }
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={2}>
+            {i18next.t("user:Third-party Logins")}:
+          </Col>
+          <Col span={22} >
+            <div style={{marginBottom: 20}}>
+              {
+                this.state.providers.map((provider, index) => this.renderIdp(provider))
+              }
+            </div>
+          </Col>
+        </Row>
         {
           !Setting.isAdminUser(this.props.account) ? null : (
             <React.Fragment>

web/src/locales/en.json

@@ -53,6 +53,7 @@
     "Edit User": "Edit User",
     "Affiliation": "Affiliation",
     "Tag": "Tag",
+    "Third-party Logins": "Third-party Logins",
     "Is Admin": "Is Admin",
     "Is Global Admin": "Is Global Admin"
   },

web/src/locales/zh.json

@@ -55,6 +55,7 @@
     "Edit User": "修改用户",
     "Affiliation": "联盟",
     "Tag": "标签",
+    "Third-party Logins": "第三方登录",
     "Is Admin": "是管理员",
     "Is Global Admin": "是全局管理员"
   },