Merge pull request #717 from matrix-org/matthew/auth-cache

first cut of improving UX for deleting devices.

src/components/structures/LoggedInView.js

@@ -49,11 +49,16 @@ export default React.createClass({
 
     childContextTypes: {
         matrixClient: React.PropTypes.instanceOf(Matrix.MatrixClient),
+        authCache: React.PropTypes.object,
     },
 
     getChildContext: function() {
         return {
             matrixClient: this._matrixClient,
+            authCache: {
+                auth: {},
+                lastUpdate: 0,
+            },
         };
     },
 

src/components/views/settings/DevicesPanelEntry.js

@@ -19,6 +19,9 @@ import React from 'react';
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
+import DateUtils from '../../../DateUtils';
+
+const AUTH_CACHE_AGE = 5 * 60 * 1000; // 5 minutes
 
 export default class DevicesPanelEntry extends React.Component {
     constructor(props, context) {
@@ -30,7 +33,6 @@ export default class DevicesPanelEntry extends React.Component {
         };
 
         this._unmounted = false;
-
         this._onDeleteClick = this._onDeleteClick.bind(this);
         this._onDisplayNameChanged = this._onDisplayNameChanged.bind(this);
         this._makeDeleteRequest = this._makeDeleteRequest.bind(this);
@@ -53,8 +55,12 @@ export default class DevicesPanelEntry extends React.Component {
     _onDeleteClick() {
         this.setState({deleting: true});
 
-        // try without interactive auth to start off
-        this._makeDeleteRequest(null).catch((error) => {
+        if (this.context.authCache.lastUpdate < Date.now() - AUTH_CACHE_AGE) {
+            this.context.authCache.auth = null;
+        }
+
+        // try with auth cache (which is null, so no interactive auth, to start off)
+        this._makeDeleteRequest(this.context.authCache.auth).catch((error) => {
             if (this._unmounted) { return; }
             if (error.httpStatus !== 401 || !error.data || !error.data.flows) {
                 // doesn't look like an interactive-auth failure
@@ -83,6 +89,9 @@ export default class DevicesPanelEntry extends React.Component {
     }
 
     _makeDeleteRequest(auth) {
+        this.context.authCache.auth = auth;
+        this.context.authCache.lastUpdate = Date.now();
+
         const device = this.props.device;
         return MatrixClientPeg.get().deleteDevice(device.device_id, auth).then(
             () => {
@@ -110,8 +119,7 @@ export default class DevicesPanelEntry extends React.Component {
 
         let lastSeen = "";
         if (device.last_seen_ts) {
-            // todo: format the timestamp as "5 minutes ago" or whatever.
-            const lastSeenDate = new Date(device.last_seen_ts);
+            const lastSeenDate = DateUtils.formatDate(new Date(device.last_seen_ts));
             lastSeen = device.last_seen_ip + " @ " +
                 lastSeenDate.toLocaleString();
         }
@@ -160,6 +168,10 @@ DevicesPanelEntry.propTypes = {
     onDeleted: React.PropTypes.func,
 };
 
+DevicesPanelEntry.contextTypes = {
+    authCache: React.PropTypes.object,
+};
+
 DevicesPanelEntry.defaultProps = {
     onDeleted: function() {},
 };