From 12b200f3e1beb24f1f77fd42b2f0f6f9e73ad5d9 Mon Sep 17 00:00:00 2001
From: lian <imwhatiam123@gmail.com>
Date: Fri, 14 Aug 2020 14:45:44 +0800
Subject: [PATCH] enable show contact email when search user (#4641)

* enable show contact email when search user

* [user-select] added new user option with email shown

Co-authored-by: lian <lian@seafile.com>
Co-authored-by: llj <lingjun.li1@gmail.com>
---
 frontend/src/components/user-select.js | 21 ++++++++++++++++-----
 frontend/src/css/user-select.css       |  7 +++++++
 frontend/src/utils/constants.js        |  1 +
 seahub/settings.py                     |  2 ++
 seahub/templates/base_for_react.html   |  1 +
 seahub/views/__init__.py               |  1 +
 6 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/css/user-select.css

diff --git a/frontend/src/components/user-select.js b/frontend/src/components/user-select.js
index f15cd63a43..43f3a5a6fd 100644
--- a/frontend/src/components/user-select.js
+++ b/frontend/src/components/user-select.js
@@ -2,10 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import AsyncSelect from 'react-select/lib/Async';
 import { seafileAPI } from '../utils/seafile-api.js';
-import { gettext } from '../utils/constants';
+import { gettext, enableShowContactEmailWhenSearchUser } from '../utils/constants';
 import { Utils } from '../utils/utils.js';
 import toaster from './toast';
 
+import '../css/user-select.css';
+
 const propTypes = {
   placeholder: PropTypes.string.isRequired,
   onSelectChange: PropTypes.func.isRequired,
@@ -42,10 +44,19 @@ class UserSelect extends React.Component {
           obj.value = item.name;
           obj.email = item.email;
           obj.label =
-            <React.Fragment>
-              <img src={item.avatar_url} className="select-module select-module-icon avatar" alt=""/>
-              <span className='select-module select-module-name'>{item.name}</span>
-            </React.Fragment>;
+              enableShowContactEmailWhenSearchUser ? (
+                <div className="d-flex">
+                  <img src={item.avatar_url} className="avatar" width="24" alt="" />
+                  <div className="ml-2">
+                    <span className="user-option-name">{item.name}</span><br />
+                    <span className="user-option-email">{item.contact_email}</span>
+                  </div>
+                </div>
+              ) : ( 
+                <React.Fragment>
+                  <img src={item.avatar_url} className="select-module select-module-icon avatar" alt=""/>
+                  <span className='select-module select-module-name'>{item.name}</span>
+                </React.Fragment>);
           this.options.push(obj);
         }
         callback(this.options);
diff --git a/frontend/src/css/user-select.css b/frontend/src/css/user-select.css
new file mode 100644
index 0000000000..98bfde43f0
--- /dev/null
+++ b/frontend/src/css/user-select.css
@@ -0,0 +1,7 @@
+.user-option-name {
+  font-size: 14px;
+  font-weight: 500;
+}
+.user-option-email {
+  font-size: 12px;
+}
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index a3af250981..28803b77b7 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -62,6 +62,7 @@ export const canAddPublicRepo = window.app.pageOptions.canAddPublicRepo;
 export const canInvitePeople = window.app.pageOptions.canInvitePeople;
 export const canLockUnlockFile = window.app.pageOptions.canLockUnlockFile;
 export const customNavItems = window.app.pageOptions.customNavItems;
+export const enableShowContactEmailWhenSearchUser = window.app.pageOptions.enableShowContactEmailWhenSearchUser;
 export const maxUploadFileSize = window.app.pageOptions.maxUploadFileSize;
 export const maxNumberOfFilesForFileupload = window.app.pageOptions.maxNumberOfFilesForFileupload;
 
diff --git a/seahub/settings.py b/seahub/settings.py
index a6634dcb31..0c1c0913c6 100644
--- a/seahub/settings.py
+++ b/seahub/settings.py
@@ -276,6 +276,8 @@ AUTHENTICATION_BACKENDS = (
 ENABLE_OAUTH = False
 ENABLE_WATERMARK = False
 
+ENABLE_SHOW_CONTACT_EMAIL_WHEN_SEARCH_USER = False
+
 # enable work weixin
 ENABLE_WORK_WEIXIN = False
 
diff --git a/seahub/templates/base_for_react.html b/seahub/templates/base_for_react.html
index 6cc5872acf..c428fb8db8 100644
--- a/seahub/templates/base_for_react.html
+++ b/seahub/templates/base_for_react.html
@@ -94,6 +94,7 @@
             canAddPublicRepo: {% if can_add_public_repo %} true {% else %} false {% endif %},
             canInvitePeople: {% if enable_guest_invitation and user.permissions.can_invite_guest %} true {% else %} false {% endif %},
             customNavItems: {% if custom_nav_items %} JSON.parse('{{ custom_nav_items | escapejs }}') {% else %} {{'[]'}} {% endif %},
+            enableShowContactEmailWhenSearchUser: {% if enable_show_contact_email_when_search_user %} true {% else %} false {% endif %},
             {% if max_upload_file_size > 0 %}
             maxUploadFileSize: {{ max_upload_file_size }},
             {% endif %}
diff --git a/seahub/views/__init__.py b/seahub/views/__init__.py
index 657797915e..002a186d01 100644
--- a/seahub/views/__init__.py
+++ b/seahub/views/__init__.py
@@ -1166,6 +1166,7 @@ def react_fake_view(request, **kwargs):
         'folder_perm_enabled': folder_perm_enabled,
         'file_audit_enabled' : FILE_AUDIT_ENABLED,
         'custom_nav_items' : json.dumps(CUSTOM_NAV_ITEMS),
+        'enable_show_contact_email_when_search_user' : settings.ENABLE_SHOW_CONTACT_EMAIL_WHEN_SEARCH_USER,
         'additional_share_dialog_note': ADDITIONAL_SHARE_DIALOG_NOTE,
         'additional_app_bottom_links': ADDITIONAL_APP_BOTTOM_LINKS,
         'additional_about_dialog_links': ADDITIONAL_ABOUT_DIALOG_LINKS