refactor linked devices page via react.js (#2515)

frontend/src/app.js

@@ -9,6 +9,7 @@ import DraftContent from './pages/drafts/draft-content';
 import ReviewContent from './pages/drafts/review-content';
 import FilesActivities from './pages/dashboard/files-activities';
 import Starred from './pages/starred/starred';
+import LinkedDevices from './pages/linked-devices/linked-devices';
 import editUtilties from './utils/editor-utilties';
 
 import 'seafile-ui';
@@ -86,6 +87,7 @@ class App extends Component {
               <ReviewContent path='reviews' />
             </DraftsView>
             <Starred path={siteRoot + 'starred'} />
+            <LinkedDevices path={siteRoot + 'linked-devices'} />
           </Router>
         </MainPanel>
       </div>

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

@@ -164,11 +164,11 @@ class MainSideNav extends React.Component {
                 {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')}>
+            <li className={`tab ${this.state.currentTab === 'linked-devices' ? 'tab-cur' : ''}`}>
+              <Link to={siteRoot + 'linked-devices/'} title={gettext('Linked Devices')} onClick={() => this.tabItemClick('linked-devices')}>
                 <span className="sf2-icon-monitor" aria-hidden="true"></span>
                 {gettext('Linked Devices')}
-              </a>
+              </Link>
             </li>
             <li className={`tab ${this.state.currentTab === 'drafts' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('drafts')}>
               <Link to={siteRoot + 'drafts/'} title={gettext('Drafts')}>

frontend/src/pages/linked-devices/linked-devices.js

@@ -0,0 +1,213 @@
+import moment from 'moment';
+import React, { Component } from 'react';
+import Toast from '../../components/toast';
+
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+import { gettext, siteRoot, loginUrl } from '../../utils/constants';
+
+class Content extends Component {
+
+  render() {
+    const {loading, errorMsg, items} = this.props.data;
+
+    if (loading) {
+      return <span className="loading-icon loading-tip"></span>;
+    } else if (errorMsg) {
+      return <p className="error text-center">{errorMsg}</p>;
+    } else {
+      const desktopThead = (
+        <thead>
+          <tr>
+            <th width="13%">{gettext("Platform")}</th>
+            <th width="30%">{gettext("Device Name")}</th>
+            <th width="30%">{gettext("IP")}</th>
+            <th width="17%">{gettext("Last Access")}</th>
+            <th width="10%"></th>
+          </tr>
+        </thead>
+      );
+      const mobileThead = (
+        <thead>
+          <tr>
+            <th width="25%">{gettext("Platform")}</th>
+            <th width="70%">{gettext('Device Name')}</th>
+            <th width="5%"></th>
+          </tr>
+        </thead>
+      );
+
+      return (
+        <table className="table table-hover table-vcenter">
+          {window.innerWidth >= 768 ? desktopThead : mobileThead}
+          <TableBody items={items} />
+        </table>
+      );
+    }
+  }
+}
+
+class TableBody extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      items: this.props.items
+    };
+  }
+
+  render() {
+
+    let listLinkedDevices = this.state.items.map(function(item, index) {
+      return <Item key={index} data={item} />;
+    }, this);
+
+    return (
+      <tbody>{listLinkedDevices}</tbody>
+    );
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      showOpIcon: false,
+      unlinked: false
+    };
+
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+    this.handleMouseOut = this.handleMouseOut.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleMouseOver() {
+    this.setState({
+      showOpIcon: true
+    });
+  }
+
+  handleMouseOut() {
+    this.setState({
+      showOpIcon: false
+    });
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+
+    const data = this.props.data;
+
+    seafileAPI.unLinkDevice(data.platform, data.device_id).then((res) => {
+      this.setState({
+        unlinked: true
+      });
+      let msg_s = gettext("Successfully unlink %(name)s.");
+      msg_s = msg_s.replace('%(name)s', data.device_name);
+      Toast.success(msg_s);
+    }).catch((error) => {
+      let message = gettext("Failed to unlink %(name)s");
+      message = message.replace('%(name)s', data.device_name);
+      Toast.error(message);
+    });
+  }
+
+  render() {
+    if (this.state.unlinked) {
+      return null;
+    }
+
+    const data = this.props.data;
+
+    let opClasses = 'sf2-icon-delete unlink-device op-icon';
+    opClasses += this.state.showOpIcon ? '' : ' invisible';
+
+    const desktopItem = (
+      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+        <td>{data.platform}</td>
+        <td>{data.device_name}</td>
+        <td>{data.last_login_ip}</td>
+        <td>{moment(data.last_accessed).fromNow()}</td>
+        <td>
+          <a href="#" className={opClasses} title={gettext('Unlink')} aria-label={gettext('Unlink')} onClick={this.handleClick}></a>
+        </td>
+      </tr>
+    );
+
+    const mobileItem = (
+      <tr>
+        <td>{data.platform}</td>
+        <td>{data.device_name}</td>
+        <td>
+          <a href="#" className={opClasses} title={gettext('Unlink')} aria-label={gettext('Unlink')} onClick={this.handleClick}></a>
+        </td>
+      </tr>
+    );
+
+    if (window.innerWidth >= 768) {
+      return desktopItem;
+    } else {
+      return mobileItem;
+    }
+  }
+}
+
+class LinkedDevices extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      items: []
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.listLinkedDevices().then((res) => {
+      //res: {data: Array(2), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
+      this.setState({
+        loading: false,
+        items: res.data
+      });
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          });
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          });
+        }
+
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        });
+      }
+    });
+  }
+
+  render() {
+    return (
+      <div className="cur-view-container" id="linked-devices">
+        <div className="cur-view-path">
+          <h3 className="sf-heading">{gettext('Linked Devices')}</h3>
+        </div>
+        <div className="cur-view-content">
+          <div className="table-container">
+            <Content data={this.state} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default LinkedDevices;

seahub/templates/js/templates.html

@@ -1574,7 +1574,7 @@
         <% } %>
         <% } %>
         <li class="tab<% if (cur_tab == 'devices') { %> tab-cur<% } %>">
-            <a href="{{ SITE_ROOT }}#devices/" class="ellipsis" title="{% trans "Linked Devices" %}"><span aria-hidden="true" class="sf2-icon-monitor"></span>{% trans "Linked Devices" %}</a>
+            <a href="{{ SITE_ROOT }}linked-devices/" class="ellipsis" title="{% trans "Linked Devices" %}"><span aria-hidden="true" class="sf2-icon-monitor"></span>{% trans "Linked Devices" %}</a>
         </li>
         {% if enable_guest_invitation and user.permissions.can_invite_guest %}
         <li class="tab<% if (cur_tab == 'invitations') { %> tab-cur<% } %>">

seahub/urls.py

@@ -192,6 +192,7 @@ urlpatterns = [
     ### React ###
     url(r'^dashboard/$', TemplateView.as_view(template_name="react_app.html"), name="dashboard"),
     url(r'^starred/$', TemplateView.as_view(template_name="react_app.html"), name="starred"),
+    url(r'^linked-devices/$', linked_devices, name="linked_devices"),
 
     ### Ajax ###
     url(r'^ajax/repo/(?P<repo_id>[-0-9a-f]{36})/dirents/$', get_dirents, name="get_dirents"),

seahub/views/__init__.py

@@ -1209,3 +1209,7 @@ def choose_register(request):
     return render(request, 'choose_register.html', {
         'login_bg_image_path': login_bg_image_path
     })
+
+@login_required
+def linked_devices(request):
+    return render(request, "react_app.html")