Add hu berlin requirement (#4500)

* add new requirement

* update demo copyright

* update sf-font

* optimize code

* improve variables naming

frontend/src/components/common/logout.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { siteRoot, gettext } from '../../utils/constants'
+
+export default function Logout() {
+  const style = {
+    width: '32px',
+    height: '32px',
+    marginLeft: '8px',
+    color: '#bbb',
+    textDecoration: 'none'
+  };
+  const classname = "d-flex align-items-center justify-content-center"
+  return (
+    <a className={classname} style={style} href={`${siteRoot}accounts/logout/`} title={gettext('Logout')}>
+      <i className="sf3-font sf3-font-logout" style={{fontSize: '24px'}}></i>
+    </a>
+  )
+}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalBody } from 'reactstrap';
-import { gettext, lang, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle, seafileVersion } from '../../utils/constants';
+import { gettext, lang, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle, seafileVersion, extraAboutDialogLinks } from '../../utils/constants';
 
 const propTypes = {
   onCloseAboutDialog: PropTypes.func.isRequired,
@@ -13,6 +13,16 @@ class AboutDialog extends React.Component {
     this.props.onCloseAboutDialog();
   }
 
+  renderExternalAboutLinks = () => {
+    if (extraAboutDialogLinks && (typeof extraAboutDialogLinks) === 'object') {
+      let keys = Object.keys(extraAboutDialogLinks);
+      return keys.map((key, index) => {
+        return <a key={index} className="d-block" href={extraAboutDialogLinks[key]} aria-hidden="true">{key}</a>;
+      });
+    }
+    return null;
+  }
+
   render() {
     let href = lang === lang == 'zh-cn' ? 'http://seafile.com/about/' : 'http://seafile.com/en/about/';
 
@@ -23,6 +33,7 @@ class AboutDialog extends React.Component {
           <div className="about-content">
             <p><img src={mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" /></p>
             <p>{gettext('Server Version: ')}{seafileVersion}<br />© 2019 {gettext('Seafile')}</p>
+            <p>{this.renderExternalAboutLinks()}</p>
             <p><a href={href} target="_blank">{gettext('About Us')}</a></p>
           </div>
         </ModalBody>

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

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap'; 
-import { gettext, username, canGenerateShareLink, canGenerateUploadLink } from '../../utils/constants';
+import { gettext, username, canGenerateShareLink, canGenerateUploadLink, extraShareDialogNote } from '../../utils/constants';
 import ShareToUser from './share-to-user';
 import ShareToGroup from './share-to-group';
 import GenerateShareLink from './generate-share-link';
@@ -207,13 +207,28 @@ class ShareDialog extends React.Component {
     );
   }
 
+  renderExternalShareMessage = () => {
+    if (extraShareDialogNote && (typeof extraShareDialogNote) === 'object') {
+      return (
+        <div className="external-share-message mt-2">
+          <h6>{extraShareDialogNote.title}</h6>
+          <div style={{fontSize: '14px', color: '#666'}}>{extraShareDialogNote.content}</div>
+        </div>
+      );
+    }
+    return null;
+  }
+
   render() {
     const { itemType, itemName, repoEncrypted } = this.props;
     const enableShareLink = !repoEncrypted && canGenerateShareLink;
     return (
       <div>
         <Modal isOpen={true} style={{maxWidth: '720px'}} className="share-dialog" toggle={this.props.toggleDialog}>
-          <ModalHeader toggle={this.props.toggleDialog}>{gettext('Share')} <span className="op-target" title={itemName}>{itemName}</span></ModalHeader>
+          <ModalHeader toggle={this.props.toggleDialog}>
+            {gettext('Share')} <span className="op-target" title={itemName}>{itemName}</span>
+            {this.renderExternalShareMessage()}
+          </ModalHeader>
           <ModalBody className="share-dialog-content">
             {(itemType === 'library' || itemType === 'dir') && this.renderDirContent()}
             {(itemType === 'file' && enableShareLink) && this.renderFileContent()}

frontend/src/components/side-nav-footer.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { gettext, siteRoot, sideNavFooterCustomHtml } from '../utils/constants';
+import React, { Fragment } from 'react';
+import { gettext, siteRoot, sideNavFooterCustomHtml, extraAppBottomLinks } from '../utils/constants';
 import ModalPortal from './modal-portal';
 import AboutDialog from './dialog/about-dialog';
 
@@ -16,26 +16,39 @@ class SideNavFooter extends React.Component {
     this.setState({isAboutDialogShow: !this.state.isAboutDialogShow});
   }
 
+  renderExternalAppLinks = () => {
+    if (extraAppBottomLinks && (typeof extraAppBottomLinks) === 'object') {
+      let keys = Object.keys(extraAppBottomLinks);
+      return keys.map((key, index) => {
+        return <a key={index} className="item" href={extraAppBottomLinks[key]} aria-hidden="true">{key}</a>;
+      });
+    }
+    return null;
+  }
+
   render() {
-    if (sideNavFooterCustomHtml === "") {
-      return (
-        <div className="side-nav-footer">
+
+    if (sideNavFooterCustomHtml) {
+      return (<div className='side-nav-footer' dangerouslySetInnerHTML={{__html: sideNavFooterCustomHtml}}></div>);
+    }
+    return (
+      <Fragment>
+        <div className="side-nav-footer flex-wrap">
           <a href={siteRoot + 'help/'} target="_blank" rel="noopener noreferrer" className="item">{gettext('Help')}</a>
           <a className="item cursor-pointer" onClick={this.onAboutDialogToggle}>{gettext('About')}</a>
-          <a href={siteRoot + 'download_client_program/'} className="item last-item">
+          {this.renderExternalAppLinks()}
+          <a href={siteRoot + 'download_client_program/'} className={`item ${extraAppBottomLinks ? '' : 'last-item'}`}>
             <span aria-hidden="true" className="sf2-icon-monitor vam"></span>{' '}
             <span className="vam">{gettext('Clients')}</span>
           </a>
-          {this.state.isAboutDialogShow &&
-            <ModalPortal>
-              <AboutDialog onCloseAboutDialog={this.onAboutDialogToggle} />
-            </ModalPortal>
-          }
         </div>
-      );
-    } else {
-      return (<div className='side-nav-footer' dangerouslySetInnerHTML={{__html: sideNavFooterCustomHtml}}></div>);
-    }
+        {this.state.isAboutDialogShow && (
+          <ModalPortal>
+            <AboutDialog onCloseAboutDialog={this.onAboutDialogToggle} />
+          </ModalPortal>
+        )}
+      </Fragment>
+    );
   }
 }
 

frontend/src/components/toolbar/common-toolbar.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { isPro, gettext } from '../../utils/constants';
+import { isPro, gettext, showExtraLogoutIcon } from '../../utils/constants';
 import Search from '../search/search';
 import Notification from '../common/notification';
 import Account from '../common/account';
+import Logout from '../common/logout';
 
 const propTypes = {
   repoID: PropTypes.string,
@@ -25,6 +26,7 @@ class  CommonToolbar extends React.Component {
         )}
         <Notification  />
         <Account />
+        {showExtraLogoutIcon && (<Logout />)}
       </div>
     );
   }