Add scan Wechat qrcode to join group (#7098)

* 01 frontend support wechat entry

* 02 change backend settings

* 03 update icon

* 04 change wechat icon

frontend/src/components/wechat/wechat-dialog.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { mediaUrl } from '../../utils/constants';
+import { isWorkWeixin } from './weixin-utils';
+import '../../css/wechat-dialog.css';
+
+const propTypes = {
+  toggleWechatDialog: PropTypes.func.isRequired
+};
+
+class WechatDialog extends React.PureComponent {
+
+  toggle = () => {
+    this.props.toggleWechatDialog();
+  };
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.toggle} zIndex='1060'>
+        <ModalHeader toggle={this.toggle}>
+          加入咨询群
+        </ModalHeader>
+        <ModalBody>
+          <div className="wechat-dialog-body">
+            <img src={`${mediaUrl}img/wechat-QR-code.png`} width="150" alt="" />
+            <div className="wechat-dialog-message">
+              <p>扫描二维码</p>
+              <p>{`加入 Seafile ${isWorkWeixin(window.navigator.userAgent.toLowerCase()) ? '企业' : ''}微信咨询群`}</p>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+WechatDialog.propTypes = propTypes;
+
+export default WechatDialog;

frontend/src/components/wechat/weixin-utils.js

@@ -0,0 +1,6 @@
+export const isWorkWeixin = (ua) => {
+  if (ua.includes('micromessenger') && ua.includes('wxwork')) {
+    return true;
+  }
+  return false;
+};