repair security-hole (#2415)

* repair security-hole

* optimized code

frontend/src/components/common/notification.js

@@ -1,62 +1,62 @@
-import React from 'react';
-import { seafileAPI } from '../../utils/seafile-api';
-const gettext = window.gettext;
-
-class Notification extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showNotice: false,
-      notice_html: ''
-    }
-  }
-
-  onClick = () => {
-    this.setState({
-      showNotice: !this.state.showNotice
-    })
-
-    if (!this.state.showNotice) {
-      this.loadNotices()
-    }
-
-    if (this.state.showNotice) {
-      seafileAPI.updateNotifications()
-    }
-  }
-
-  loadNotices = () => {
-    seafileAPI.listPopupNotices().then(res => {
-      this.setState({
-        notice_html: res.data.notice_html
-      })
-    })
-  }
-
-  render() {
-    const { notice_html } = this.state;
-
-    return (
-      <div id="notifications">
-        <a href="#" onClick={this.onClick} className="no-deco" id="notice-icon" title="Notifications" aria-label="Notifications">
-          <span className="sf2-icon-bell"></span>
-          <span className="num hide">0</span>
-        </a>
-        <div id="notice-popover" className={`sf-popover ${this.state.showNotice ? '': 'hide'}`}>
-          <div className="outer-caret up-outer-caret"><div className="inner-caret"></div></div>
-          <div className="sf-popover-hd ovhd">
-            <h3 className="sf-popover-title title">{gettext('Notifications')}</h3>
-            <a href="#" onClick={this.onClick} title={gettext('Close')} aria-label={gettext('Close')} className="sf-popover-close js-close sf2-icon-x1 op-icon float-right"></a>
-          </div>
-          <div className="sf-popover-con">
-              <ul className="notice-list" dangerouslySetInnerHTML={{__html: notice_html}}>
-              </ul>
-            <a href="/notification/list/" className="view-all">{gettext('See All Notifications')}</a>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default Notification;
+import React from 'react';
+import { seafileAPI } from '../../utils/seafile-api';
+const gettext = window.gettext;
+
+class Notification extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showNotice: false,
+      notice_html: ''
+    }
+  }
+
+  onClick = () => {
+    this.setState({
+      showNotice: !this.state.showNotice
+    })
+
+    if (!this.state.showNotice) {
+      this.loadNotices()
+    }
+
+    if (this.state.showNotice) {
+      seafileAPI.updateNotifications()
+    }
+  }
+
+  loadNotices = () => {
+    seafileAPI.listPopupNotices().then(res => {
+      this.setState({
+        notice_html: res.data.notice_html
+      })
+    })
+  }
+
+  render() {
+    const { notice_html } = this.state;
+
+    return (
+      <div id="notifications">
+        <a href="#" onClick={this.onClick} className="no-deco" id="notice-icon" title="Notifications" aria-label="Notifications">
+          <span className="sf2-icon-bell"></span>
+          <span className="num hide">0</span>
+        </a>
+        <div id="notice-popover" className={`sf-popover ${this.state.showNotice ? '': 'hide'}`}>
+          <div className="outer-caret up-outer-caret"><div className="inner-caret"></div></div>
+          <div className="sf-popover-hd ovhd">
+            <h3 className="sf-popover-title title">{gettext('Notifications')}</h3>
+            <a href="#" onClick={this.onClick} title={gettext('Close')} aria-label={gettext('Close')} className="sf-popover-close js-close sf2-icon-x1 op-icon float-right"></a>
+          </div>
+          <div className="sf-popover-con">
+              <ul className="notice-list" dangerouslySetInnerHTML={{__html: notice_html}}>
+              </ul>
+            <a href="/notification/list/" className="view-all">{gettext('See All Notifications')}</a>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Notification;

frontend/src/components/constants.js

@@ -1,27 +1,27 @@
-export const dirPath = '/';
-export const gettext = window.gettext;
-
-export const siteRoot = window.app.config.siteRoot;
-export const avatarInfo = window.app.config.avatarInfo;
-export const logoPath =  window.app.config.logoPath;
-export const mediaUrl = window.app.config.mediaUrl;
-export const siteTitle = window.app.config.siteTitle;
-export const logoWidth = window.app.config.logoWidth;
-export const logoHeight = window.app.config.logoHeight;
-export const isPro = window.app.config.isPro === "True";
-export const lang = window.app.config.lang;
-export const fileServerRoot = window.app.config.fileServerRoot;
-
-// wiki
-export const slug = window.wiki ? window.wiki.config.slug : '';
-export const repoID = window.wiki ? window.wiki.config.repoId : '';
-export const serviceUrl = window.wiki ? window.wiki.config.serviceUrl : '';
-export const initialFilePath = window.wiki ? window.wiki.config.initial_file_path : '';
-export const permission = window.wiki ? window.wiki.config.permission === 'True' : '';
-
-// file history
-export const PER_PAGE = 25;
-export const historyRepoID = window.fileHistory ? window.fileHistory.pageOptions.repoID : '';
-export const repoName = window.fileHistory ? window.fileHistory.pageOptions.repoName : '';
-export const filePath = window.fileHistory ? window.fileHistory.pageOptions.filePath : '';
-export const fileName = window.fileHistory ? window.fileHistory.pageOptions.fileName : '';
+export const dirPath = '/';
+export const gettext = window.gettext;
+
+export const siteRoot = window.app.config.siteRoot;
+export const avatarInfo = window.app.config.avatarInfo;
+export const logoPath =  window.app.config.logoPath;
+export const mediaUrl = window.app.config.mediaUrl;
+export const siteTitle = window.app.config.siteTitle;
+export const logoWidth = window.app.config.logoWidth;
+export const logoHeight = window.app.config.logoHeight;
+export const isPro = window.app.config.isPro === "True";
+export const lang = window.app.config.lang;
+export const fileServerRoot = window.app.config.fileServerRoot;
+
+// wiki
+export const slug = window.wiki ? window.wiki.config.slug : '';
+export const repoID = window.wiki ? window.wiki.config.repoId : '';
+export const serviceUrl = window.wiki ? window.wiki.config.serviceUrl : '';
+export const initialFilePath = window.wiki ? window.wiki.config.initial_file_path : '';
+export const permission = window.wiki ? window.wiki.config.permission === 'True' : '';
+
+// file history
+export const PER_PAGE = 25;
+export const historyRepoID = window.fileHistory ? window.fileHistory.pageOptions.repoID : '';
+export const repoName = window.fileHistory ? window.fileHistory.pageOptions.repoName : '';
+export const filePath = window.fileHistory ? window.fileHistory.pageOptions.filePath : '';
+export const fileName = window.fileHistory ? window.fileHistory.pageOptions.fileName : '';

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

@@ -1,188 +1,188 @@
-import React from 'react';
-import { Link } from '@reach/router';
-import { gettext, siteRoot } from './constants';
-import { seafileAPI } from '../utils/seafile-api';
-
-class  MainSideNav extends React.Component {
-  constructor(props) {
-    super(props);
-    let currentTab = this.props.currentTab || '';
-    this.state = {
-      groupsExtended: false,
-      sharedExtended: false,
-      closeSideBar:false,
-      groupItems: [],
-      currentTab: currentTab,
-    };
-
-    this.listHeight = 24; //for caculate tabheight
-    this.groupsHeight = 0;
-    this.adminHeight = 0;
-  }
-
-  grpsExtend = () => {
-    this.setState({
-      groupsExtended: !this.state.groupsExtended,
-    })
-    this.loadGroups();
-  }
-
-  shExtend = () => {
-    this.setState({
-      sharedExtended: !this.state.sharedExtended,
-    })
-  }
-
-  loadGroups = () => {
-    let _this = this;
-    seafileAPI.listGroups().then(res =>{
-      let data   = res.data.groups;
-      this.groupsHeight = (data.length + 1) * _this.listHeight;
-      _this.setState({
-        groupItems: data
-      })
-    })
-  }
-
-  tabItemClick = (param) => {
-    this.setState({
-      currentTab: param
-    })
-  }
-
-  renderSharedGroups() {
-    let style = {height: 0};
-    if (this.state.groupsExtended) {
-      style = {height: this.groupsHeight};
-    }
-    return (
-      <ul className={`grp-list ${this.state.groupsExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style}>
-        <li className={this.state.currentTab === 'groups' ? 'tab-cur' : ''}> 
-          <a href={siteRoot + '#groups/'} onClick={() => this.tabItemClick('groups')}>
-          <span className="sharp" aria-hidden="true">#</span>
-          All Groups
-          </a>
-        </li>
-        {this.state.groupItems.map(item => {
-          return (
-            <li key={item.id} className={this.state.currentTab === item.id ? 'tab-cur' : ''}> 
-              <a href={siteRoot + '#group/' + item.id + '/'} className="ellipsis" onClick={() => this.tabItemClick(item.id)}>
-                <span className="sharp" aria-hidden="true">#</span>
-                {item.name}
-              </a>
-            </li>
-          )
-        })}
-      </ul>
-    )
-  }
-
-  renderSharedAdmin() {
-    let height = 0;
-    if (this.state.sharedExtended) {
-      if (!this.adminHeight) {
-        this.adminHeight = 3 * this.listHeight;
-      }
-      height = this.adminHeight;
-    }
-    let style = {height: height};
-    return (
-      <ul className={`${this.state.sharedExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style} >
-        <li className={this.state.currentTab === 'share-admin-libs' ? 'tab-cur' : ''}>
-          <a href={siteRoot + '#share-admin-libs/'} className="ellipsis" title={gettext('Libraries')} onClick={() => this.tabItemClick('share-admin-libs')}>
-            <span aria-hidden="true" className="sharp">#</span>
-            {gettext('Libraries')}
-          </a>
-        </li>
-        <li className={this.state.currentTab === 'share-admin-folders' ? 'tab-cur' : ''}>
-          <a href={siteRoot + '#share-admin-folders/'} className="ellipsis" title={gettext('Folders')} onClick={() => this.tabItemClick('share-admin-folders')}>
-            <span aria-hidden="true" className="sharp">#</span>
-            {gettext('Folders')}
-          </a>
-        </li>
-        <li className={this.state.currentTab === 'share-admin-share-links' ? 'tab-cur' : ''}>
-          <a href={siteRoot + '#share-admin-share-links/'} className="ellipsis" title={gettext('Links')} onClick={() => this.tabItemClick('share-admin-share-links')}>
-            <span aria-hidden="true" className="sharp">#</span>
-            {gettext('Links')}
-          </a>
-        </li>
-      </ul>
-    )
-  }
-
-  render() {
-    return (
-      <div id="side-nav" className="home-side-nav">
-        <div className="side-nav-con">
-          <h3 className="sf-heading">Files</h3>
-          <ul className="side-tabnav-tabs">
-            <li className={`tab ${this.state.currentTab === 'my-libs' ? 'tab-cur' : ''}`}>
-              <a href={ siteRoot + '#my-libs' } className="ellipsis" title={gettext('My Libraries')} onClick={() => this.tabItemClick('my-libs')}>
-                <span className="sf2-icon-user" aria-hidden="true"></span>
-                {gettext('My Libraries')}
-              </a>
-            </li>
-            <li className={`tab ${this.state.currentTab === 'shared-libs' ? 'tab-cur' : ''}`}>
-              <a href={ siteRoot + '#shared-libs/'} className="ellipsis" title={gettext('Shared with me')} onClick={() => this.tabItemClick('shared-libs')}>
-                <span className="sf2-icon-share" aria-hidden="true"></span>
-                {gettext('Shared with me')}
-              </a>
-            </li>
-            <li className={`tab ${this.state.currentTab === 'org' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('org')}>
-            <a href={ siteRoot + '#org/' } className="ellipsis" title={gettext('Shared with all')}>
-              <span className="sf2-icon-organization" aria-hidden="true"></span>
-              {gettext('Shared with all')}
-              </a>
-            </li>
-            <li className="tab" id="group-nav">
-              <a href="#" className="ellipsis user-select-no" title={gettext('Shared with groups')} onClick={this.grpsExtend}>
-                <span className={`toggle-icon float-right fas ${this.state.groupsExtended ?'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
-                <span className="sf2-icon-group" aria-hidden="true"></span>
-                {gettext('Shared with groups')}
-              </a>
-              {this.renderSharedGroups()}
-            </li>
-          </ul>
-
-          <h3 className="sf-heading">Tools</h3>
-          <ul className="side-tabnav-tabs">
-            <li className={`tab ${this.state.currentTab === 'favorites' ? 'tab-cur' : ''}`}>
-              <a href={siteRoot + '#starred/'} title={gettext('Favorites')} onClick={() => this.tabItemClick('favorites')}>
-                <span className="sf2-icon-star" aria-hidden="true"></span>
-                {gettext('Favorites')}
-              </a>
-            </li>
-            <li className={`tab ${this.state.currentTab === 'dashboard' ? 'tab-cur' : ''}`}>
-              <Link to={siteRoot + 'dashboard'} title={gettext('Acitivities')} onClick={() => this.tabItemClick('dashboard')}>
-                <span className="sf2-icon-clock" aria-hidden="true"></span>
-                {gettext('Acitivities')}
-              </Link>
-            </li>
-            <li className={`tab ${this.state.currentTab === 'devices' ? 'tab-cur' : ''}`}>
-              <a href={siteRoot + '#devices/'} className="ellipsis" title={gettext('Linked Devices')} onClick={() => this.tabItemClick('devices')}>
-                <span className="sf2-icon-monitor" aria-hidden="true"></span>
-                {gettext('Linked Devices')}
-              </a>
-            </li>
-            <li className={`tab ${this.state.currentTab === 'drafts' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('drafts')}>
-              <Link to={siteRoot + 'drafts'} title={gettext('Drafts')}>
-                <span className="sf2-icon-edit" aria-hidden="true"></span>
-                {gettext('Drafts')}
-              </Link>
-            </li>
-            <li className="tab" id="share-admin-nav">
-              <a href="#" className="ellipsis user-select-no" title={gettext('Share Admin')} onClick={this.shExtend}>
-                <span className={`toggle-icon float-right fas ${this.state.sharedExtended ? 'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
-                <span aria-hidden="true" className="sf2-icon-wrench"></span>
-                {gettext('Share Admin')}
-              </a>
-              {this.renderSharedAdmin()}
-            </li>
-          </ul>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default MainSideNav;
+import React from 'react';
+import { Link } from '@reach/router';
+import { gettext, siteRoot } from './constants';
+import { seafileAPI } from '../utils/seafile-api';
+
+class  MainSideNav extends React.Component {
+  constructor(props) {
+    super(props);
+    let currentTab = this.props.currentTab || '';
+    this.state = {
+      groupsExtended: false,
+      sharedExtended: false,
+      closeSideBar:false,
+      groupItems: [],
+      currentTab: currentTab,
+    };
+
+    this.listHeight = 24; //for caculate tabheight
+    this.groupsHeight = 0;
+    this.adminHeight = 0;
+  }
+
+  grpsExtend = () => {
+    this.setState({
+      groupsExtended: !this.state.groupsExtended,
+    })
+    this.loadGroups();
+  }
+
+  shExtend = () => {
+    this.setState({
+      sharedExtended: !this.state.sharedExtended,
+    })
+  }
+
+  loadGroups = () => {
+    let _this = this;
+    seafileAPI.listGroups().then(res =>{
+      let data   = res.data.groups;
+      this.groupsHeight = (data.length + 1) * _this.listHeight;
+      _this.setState({
+        groupItems: data
+      })
+    })
+  }
+
+  tabItemClick = (param) => {
+    this.setState({
+      currentTab: param
+    })
+  }
+
+  renderSharedGroups() {
+    let style = {height: 0};
+    if (this.state.groupsExtended) {
+      style = {height: this.groupsHeight};
+    }
+    return (
+      <ul className={`grp-list ${this.state.groupsExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style}>
+        <li className={this.state.currentTab === 'groups' ? 'tab-cur' : ''}> 
+          <a href={siteRoot + '#groups/'} onClick={() => this.tabItemClick('groups')}>
+          <span className="sharp" aria-hidden="true">#</span>
+          All Groups
+          </a>
+        </li>
+        {this.state.groupItems.map(item => {
+          return (
+            <li key={item.id} className={this.state.currentTab === item.id ? 'tab-cur' : ''}> 
+              <a href={siteRoot + '#group/' + item.id + '/'} className="ellipsis" onClick={() => this.tabItemClick(item.id)}>
+                <span className="sharp" aria-hidden="true">#</span>
+                {item.name}
+              </a>
+            </li>
+          )
+        })}
+      </ul>
+    )
+  }
+
+  renderSharedAdmin() {
+    let height = 0;
+    if (this.state.sharedExtended) {
+      if (!this.adminHeight) {
+        this.adminHeight = 3 * this.listHeight;
+      }
+      height = this.adminHeight;
+    }
+    let style = {height: height};
+    return (
+      <ul className={`${this.state.sharedExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style} >
+        <li className={this.state.currentTab === 'share-admin-libs' ? 'tab-cur' : ''}>
+          <a href={siteRoot + '#share-admin-libs/'} className="ellipsis" title={gettext('Libraries')} onClick={() => this.tabItemClick('share-admin-libs')}>
+            <span aria-hidden="true" className="sharp">#</span>
+            {gettext('Libraries')}
+          </a>
+        </li>
+        <li className={this.state.currentTab === 'share-admin-folders' ? 'tab-cur' : ''}>
+          <a href={siteRoot + '#share-admin-folders/'} className="ellipsis" title={gettext('Folders')} onClick={() => this.tabItemClick('share-admin-folders')}>
+            <span aria-hidden="true" className="sharp">#</span>
+            {gettext('Folders')}
+          </a>
+        </li>
+        <li className={this.state.currentTab === 'share-admin-share-links' ? 'tab-cur' : ''}>
+          <a href={siteRoot + '#share-admin-share-links/'} className="ellipsis" title={gettext('Links')} onClick={() => this.tabItemClick('share-admin-share-links')}>
+            <span aria-hidden="true" className="sharp">#</span>
+            {gettext('Links')}
+          </a>
+        </li>
+      </ul>
+    )
+  }
+
+  render() {
+    return (
+      <div id="side-nav" className="home-side-nav">
+        <div className="side-nav-con">
+          <h3 className="sf-heading">Files</h3>
+          <ul className="side-tabnav-tabs">
+            <li className={`tab ${this.state.currentTab === 'my-libs' ? 'tab-cur' : ''}`}>
+              <a href={ siteRoot + '#my-libs' } className="ellipsis" title={gettext('My Libraries')} onClick={() => this.tabItemClick('my-libs')}>
+                <span className="sf2-icon-user" aria-hidden="true"></span>
+                {gettext('My Libraries')}
+              </a>
+            </li>
+            <li className={`tab ${this.state.currentTab === 'shared-libs' ? 'tab-cur' : ''}`}>
+              <a href={ siteRoot + '#shared-libs/'} className="ellipsis" title={gettext('Shared with me')} onClick={() => this.tabItemClick('shared-libs')}>
+                <span className="sf2-icon-share" aria-hidden="true"></span>
+                {gettext('Shared with me')}
+              </a>
+            </li>
+            <li className={`tab ${this.state.currentTab === 'org' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('org')}>
+            <a href={ siteRoot + '#org/' } className="ellipsis" title={gettext('Shared with all')}>
+              <span className="sf2-icon-organization" aria-hidden="true"></span>
+              {gettext('Shared with all')}
+              </a>
+            </li>
+            <li className="tab" id="group-nav">
+              <a href="#" className="ellipsis user-select-no" title={gettext('Shared with groups')} onClick={this.grpsExtend}>
+                <span className={`toggle-icon float-right fas ${this.state.groupsExtended ?'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
+                <span className="sf2-icon-group" aria-hidden="true"></span>
+                {gettext('Shared with groups')}
+              </a>
+              {this.renderSharedGroups()}
+            </li>
+          </ul>
+
+          <h3 className="sf-heading">Tools</h3>
+          <ul className="side-tabnav-tabs">
+            <li className={`tab ${this.state.currentTab === 'favorites' ? 'tab-cur' : ''}`}>
+              <a href={siteRoot + '#starred/'} title={gettext('Favorites')} onClick={() => this.tabItemClick('favorites')}>
+                <span className="sf2-icon-star" aria-hidden="true"></span>
+                {gettext('Favorites')}
+              </a>
+            </li>
+            <li className={`tab ${this.state.currentTab === 'dashboard' ? 'tab-cur' : ''}`}>
+              <Link to={siteRoot + 'dashboard'} title={gettext('Acitivities')} onClick={() => this.tabItemClick('dashboard')}>
+                <span className="sf2-icon-clock" aria-hidden="true"></span>
+                {gettext('Acitivities')}
+              </Link>
+            </li>
+            <li className={`tab ${this.state.currentTab === 'devices' ? 'tab-cur' : ''}`}>
+              <a href={siteRoot + '#devices/'} className="ellipsis" title={gettext('Linked Devices')} onClick={() => this.tabItemClick('devices')}>
+                <span className="sf2-icon-monitor" aria-hidden="true"></span>
+                {gettext('Linked Devices')}
+              </a>
+            </li>
+            <li className={`tab ${this.state.currentTab === 'drafts' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('drafts')}>
+              <Link to={siteRoot + 'drafts'} title={gettext('Drafts')}>
+                <span className="sf2-icon-edit" aria-hidden="true"></span>
+                {gettext('Drafts')}
+              </Link>
+            </li>
+            <li className="tab" id="share-admin-nav">
+              <a href="#" className="ellipsis user-select-no" title={gettext('Share Admin')} onClick={this.shExtend}>
+                <span className={`toggle-icon float-right fas ${this.state.sharedExtended ? 'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
+                <span aria-hidden="true" className="sf2-icon-wrench"></span>
+                {gettext('Share Admin')}
+              </a>
+              {this.renderSharedAdmin()}
+            </li>
+          </ul>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default MainSideNav;

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

@@ -1,52 +1,52 @@
-import React from 'react';
-import { gettext, siteRoot } from './constants';
-import { Modal, ModalBody } from 'reactstrap';
-
-class About extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      modal: false
-    };
-  }
-
-  toggle = () => {
-    this.setState({
-      modal: !this.state.modal
-    });
-  }
-
-  render() {
-    return (
-      <div>
-        <a href="#" className="item" onClick={this.toggle}>{gettext('About')}</a>
-        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
-          <ModalBody>
-            <div className="about-content">
-              <p><img src="/media/img/seafile-logo.png" title="Private Seafile" alt="logo" width="128" height="32" /></p>
-              <p>{gettext('Server Version: 6.3.3')}<br />{gettext('© 2018 Seafile')}</p>
-              <p><a href="http://seafile.com/about/" target="_blank">{gettext('About Us')}</a></p>
-            </div>
-          </ModalBody>
-        </Modal>
-      </div>
-    );
-  }
-}
-
-class SideNavFooter extends React.Component {
-  render() {
-    return (
-      <div className="side-nav-footer">
-        <a href={siteRoot + 'help/'} target="_blank" className="item">{gettext('Help')}</a>
-        <About />
-        <a href={siteRoot + 'download_client_program/'} className="item last-item">
-          <span aria-hidden="true" className="sf2-icon-monitor vam"></span>{' '}
-          <span className="vam">{gettext('Clients')}</span>
-        </a>
-      </div>
-    );
-  }
-}
-
-export default SideNavFooter;
+import React from 'react';
+import { gettext, siteRoot } from './constants';
+import { Modal, ModalBody } from 'reactstrap';
+
+class About extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modal: false
+    };
+  }
+
+  toggle = () => {
+    this.setState({
+      modal: !this.state.modal
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <a href="#" className="item" onClick={this.toggle}>{gettext('About')}</a>
+        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
+          <ModalBody>
+            <div className="about-content">
+              <p><img src="/media/img/seafile-logo.png" title="Private Seafile" alt="logo" width="128" height="32" /></p>
+              <p>{gettext('Server Version: 6.3.3')}<br />{gettext('© 2018 Seafile')}</p>
+              <p><a href="http://seafile.com/about/" target="_blank">{gettext('About Us')}</a></p>
+            </div>
+          </ModalBody>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+class SideNavFooter extends React.Component {
+  render() {
+    return (
+      <div className="side-nav-footer">
+        <a href={siteRoot + 'help/'} target="_blank" className="item">{gettext('Help')}</a>
+        <About />
+        <a href={siteRoot + 'download_client_program/'} className="item last-item">
+          <span aria-hidden="true" className="sf2-icon-monitor vam"></span>{' '}
+          <span className="vam">{gettext('Clients')}</span>
+        </a>
+      </div>
+    );
+  }
+}
+
+export default SideNavFooter;