Session optimization (#3423)

frontend/src/components/dialog/generate-upload-link.js

@@ -7,6 +7,7 @@ import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import SharedUploadInfo from '../../models/shared-upload-info';
 import toaster from '../toast';
+import SessionExpiredTip from '../session-expired-tip';
 
 const propTypes = {
   itemPath: PropTypes.string.isRequired,
@@ -38,6 +39,14 @@ class GenerateUploadLink extends React.Component {
         let sharedUploadInfo = new SharedUploadInfo(res.data[0]);
         this.setState({sharedUploadInfo: sharedUploadInfo});
       }
+    }).catch((err) => {
+      if (err.response.status === 403) {
+        toaster.danger(
+          <SessionExpiredTip />,
+          {id: 'session_expired', duration: 3600}
+        )
+        this.props.closeShareDialog();
+      }
     });
   }
 
@@ -125,7 +134,6 @@ class GenerateUploadLink extends React.Component {
 
     let passwordLengthTip = gettext('(at least {passwordLength} characters)');
     passwordLengthTip = passwordLengthTip.replace('{passwordLength}', shareLinkPasswordMinLength);
-
     if (this.state.sharedUploadInfo) {
       let sharedUploadInfo = this.state.sharedUploadInfo;
       return (

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

@@ -320,10 +320,10 @@ class ShareToUser extends React.Component {
               onChangeUserPermission={this.onChangeUserPermission}
             />
             { canInvitePeople &&
-            <a href={siteRoot + 'invitations/'} className="invite-link-in-popup">
+              <a href={siteRoot + 'invitations/'} className="invite-link-in-popup">
-              <i className="sf2-icon-invite invite-link-icon-in-popup"></i>
+                <i className="sf2-icon-invite invite-link-icon-in-popup"></i>
-              <span className="invite-link-icon-in-popup">{gettext('Invite People')}</span>
+                <span className="invite-link-icon-in-popup">{gettext('Invite People')}</span>
-            </a>
+              </a>
             }
           </table>
         </div>

frontend/src/components/session-expired-tip.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { gettext, loginUrl } from '../utils/constants';
+
+function SessionExpiredTip() {
+  return(
+    <span className="session-expired-tip">{gettext('You are log out.')}{' '}
+      <a className="action-link session-expired-link" href={`${loginUrl}?next=${encodeURIComponent(location.href)}`}>{gettext('Login again.')}</a>
+    </span>
+  )
+} 
+
+export default SessionExpiredTip

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -18,6 +18,7 @@ import LibDecryptDialog from '../../components/dialog/lib-decrypt-dialog';
 import LibContentToolbar from './lib-content-toolbar';
 import LibContentContainer from './lib-content-container';
 import FileUploader from '../../components/file-uploader/file-uploader';
+import SessionExpiredTip from '../../components/session-expired-tip';
 
 const propTypes = {
   pathPrefix: PropTypes.array.isRequired,
@@ -72,6 +73,7 @@ class LibContentView extends React.Component {
       isDirentDetailShow: false,
       updateDetail: false,
       itemsShowLength: 100,
+      isSessionExpired: false,
     };
 
     this.oldonpopstate = window.onpopstate;
@@ -340,13 +342,14 @@ class LibContentView extends React.Component {
   showDir = (path) => {
     let repoID = this.props.repoID;
 
-    // update stste
+    if (!this.state.isSessionExpired) {
-    this.setState({
+      // update stste
-      isDirentListLoading: true,
+      this.setState({
-      path: path,
+        isDirentListLoading: true,
-      isViewFile: false,
+        isViewFile: false,
-      selectedDirentList: [],
+        selectedDirentList: [],
-    });
+      });
+    }
 
     // update data
     this.loadDirentList(path);
@@ -411,7 +414,13 @@ class LibContentView extends React.Component {
           });
         });
       });
-    }).catch(() => {
+    }).catch((err) => {
+      if (err.response.status === 403) {
+        toaster.danger(
+          <SessionExpiredTip />,
+          {id: 'session_expired', duration: 3600}
+        )
+      }
       this.setState({
         isFileLoading: false,
         isFileLoadedErr: true,
@@ -445,12 +454,22 @@ class LibContentView extends React.Component {
         direntList: Utils.sortDirents(direntList, this.state.sortBy, this.state.sortOrder),
         dirID: res.data.dir_id,
         readmeMarkdown: markdownItem,
+        path: path,
+        isSessionExpired: false,
       });
 
       if (!this.state.repoEncrypted && direntList.length) {
         this.getThumbnails(repoID, path, this.state.direntList);
       }
-    }).catch(() => {
+    }).catch((err) => {
+      if (err.response.status === 403) {
+        toaster.danger(
+          <SessionExpiredTip />,
+          {id: 'session_expired', duration: 3600}
+        )
+        this.setState({isDirentListLoading: false})
+        return;
+      }
       this.setState({
         isDirentListLoading: false,
         pathExist: false,

media/css/seahub_react.css

@@ -1034,6 +1034,14 @@ a.table-sort-op:focus {
     color: red;
 }
 
+.session-expired-tip {
+    color: red;
+}
+
+.session-expired-link {
+    padding: 0;
+}
+
 /* file-tag */
 .tag-list {
     position: relative;