diff --git a/frontend/src/components/dialog/generate-share-link.js b/frontend/src/components/dialog/generate-share-link.js
index 794bc86dac..20388da451 100644
--- a/frontend/src/components/dialog/generate-share-link.js
+++ b/frontend/src/components/dialog/generate-share-link.js
@@ -99,6 +99,7 @@ class GenerateShareLink extends React.Component {
   generateShareLink = () => {
     let isValid = this.validateParamsInput();
     if (isValid) {
+      this.setState({errorInfo: ''});
       let { itemPath, repoID } = this.props;
       let { password, expireDays } = this.state;
       let permissions = this.permissions;
@@ -122,6 +123,7 @@ class GenerateShareLink extends React.Component {
         isShowPasswordInput: false,
         expireDays: '',
         isExpireChecked: false,
+        errorInfo: '',
       });
       this.permissions = {
         'can_edit': false,
@@ -163,7 +165,7 @@ class GenerateShareLink extends React.Component {
     if (this.isExpireDaysNoLimit) {
       if (isExpireChecked) {
         if (!expireDays) {
-          this.setState({errorInfo: gettext('Please enter days')});
+          this.setState({errorInfo: 'Please enter days'});
           return false;
         }
         let flag = reg.test(expireDays);
@@ -175,7 +177,7 @@ class GenerateShareLink extends React.Component {
       }
     } else {
       if (!expireDays) {
-        this.setState({errorInfo: gettext('Please enter days')});
+        this.setState({errorInfo: 'Please enter days'});
         return false;
       }
       let flag = reg.test(expireDays);
@@ -284,7 +286,7 @@ class GenerateShareLink extends React.Component {
               <Input type="radio" name="radio1" onChange={this.setPermission('preview')} />{'  '}{gettext('Preview only')}
             </Label>
           </FormGroup>
-          <Label className="err-message">{this.state.errorInfo}</Label><br />
+          <Label className="err-message">{gettext(this.state.errorInfo)}</Label><br />
           <Button onClick={this.generateShareLink}>{gettext('Generate')}</Button>
         </Form>
       );
diff --git a/frontend/src/components/dialog/share-dialog.js b/frontend/src/components/dialog/share-dialog.js
index a971d5649e..6f6f730f7e 100644
--- a/frontend/src/components/dialog/share-dialog.js
+++ b/frontend/src/components/dialog/share-dialog.js
@@ -9,7 +9,7 @@ import GenerateUploadLink from './generate-upload-link';
 import '../../css/share-link-dialog.css';
 
 const propTypes = {
-  itemType: PropTypes.bool.isRequired, // there will be three choose: ['library', 'dir', 'file']
+  itemType: PropTypes.string.isRequired, // there will be three choose: ['library', 'dir', 'file']
   itemName: PropTypes.string.isRequired,
   itemPath: PropTypes.string.isRequired,
   toggleDialog: PropTypes.func.isRequired,
diff --git a/frontend/src/pages/my-libs/item.js b/frontend/src/pages/my-libs/item.js
index 0d9e2b9a76..679d4b9eb0 100644
--- a/frontend/src/pages/my-libs/item.js
+++ b/frontend/src/pages/my-libs/item.js
@@ -1,5 +1,5 @@
 
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Link } from '@reach/router';
@@ -8,6 +8,8 @@ import { gettext, siteRoot, storages, canGenerateShareLink, canGenerateUploadLin
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import RenameInput from '../../components/rename-input';
+import ModalPotal from '../../components/modal-portal';
+import ShareDialog from '../../components/dialog/share-dialog';
 
 const propTypes = {
   data: PropTypes.object.isRequired,
@@ -29,6 +31,7 @@ class Item extends Component {
       showOpIcon: false,
       operationMenuOpen: false,
       showChangeLibName: false, 
+      isShowSharedDialog: false,
       highlight: false,
     };
   }
@@ -73,7 +76,11 @@ class Item extends Component {
 
   share = (e) => {
     e.preventDefault();
-    // TODO
+    this.setState({isShowSharedDialog: true});
+  }
+
+  toggleShareDialog = () => {
+    this.setState({isShowSharedDialog: false});
   }
 
   showDeleteItemPopup = (e) => {
@@ -232,43 +239,69 @@ class Item extends Component {
     );
 
     const desktopItem = (
-      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
-        <td>
-          {this.state.showChangeLibName && (
-            <RenameInput 
-              name={data.repo_name} 
-              onRenameConfirm={this.onRenameConfirm} 
-              onRenameCancel={this.onRenameCancel}
-            />
-          )}
-          {!this.state.showChangeLibName && data.repo_name && (
-            <Link to={data.url}>{data.repo_name}</Link>
-          )}
-          {!this.state.showChangeLibName && !data.repo_name && 
-            (gettext('Broken (please contact your administrator to fix this library)'))
-          }
-        </td>
-        <td>{data.repo_name ? desktopOperations : ''}</td>
-        <td>{Utils.formatSize({bytes: data.size})}</td>
-        {storages.length ? <td>{data.storage_name}</td> : null}
-        <td title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</td>
-      </tr>
+      <Fragment>
+        <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+          <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
+          <td>
+            {this.state.showChangeLibName && (
+              <RenameInput 
+                name={data.repo_name} 
+                onRenameConfirm={this.onRenameConfirm} 
+                onRenameCancel={this.onRenameCancel}
+              />
+            )}
+            {!this.state.showChangeLibName && data.repo_name && (
+              <Link to={data.url}>{data.repo_name}</Link>
+            )}
+            {!this.state.showChangeLibName && !data.repo_name && 
+              (gettext('Broken (please contact your administrator to fix this library)'))
+            }
+          </td>
+          <td>{data.repo_name ? desktopOperations : ''}</td>
+          <td>{Utils.formatSize({bytes: data.size})}</td>
+          {storages.length ? <td>{data.storage_name}</td> : null}
+          <td title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</td>
+        </tr>
+        {this.state.isShowSharedDialog && (
+          <ModalPotal>
+              <ShareDialog 
+                itemType={'library'}
+                itemName={data.repo_name}
+                itemPath={'/'}
+                repoID={data.repo_id}
+                toggleDialog={this.toggleShareDialog}
+              />
+          </ModalPotal>
+        )}
+      </Fragment>
     );
 
     const mobileItem = (
-      <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
-        <td>
-          {data.repo_name ?
-            <Link to={data.url}>{data.repo_name}</Link> :
-            gettext('Broken (please contact your administrator to fix this library)')}
-          <br />
-          <span className="item-meta-info">{Utils.formatSize({bytes: data.size})}</span>
-          <span className="item-meta-info" title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</span>
-        </td>
-        <td>{data.repo_name ? mobileOperations : ''}</td>
-      </tr>
+      <Fragment>
+        <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+          <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
+          <td>
+            {data.repo_name ?
+              <Link to={data.url}>{data.repo_name}</Link> :
+              gettext('Broken (please contact your administrator to fix this library)')}
+            <br />
+            <span className="item-meta-info">{Utils.formatSize({bytes: data.size})}</span>
+            <span className="item-meta-info" title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</span>
+          </td>
+          <td>{data.repo_name ? mobileOperations : ''}</td>
+        </tr>
+        {this.state.isShowSharedDialog && (
+          <ModalPotal>
+              <ShareDialog 
+                itemType={'library'}
+                itemName={data.repo_name}
+                itemPath={'/'}
+                repoID={data.repo_id}
+                toggleDialog={this.toggleShareDialog}
+              />
+          </ModalPotal>
+        )}
+      </Fragment>
     );
 
     return window.innerWidth >= 768 ? desktopItem : mobileItem;