Add access token to help page

ui/js/actions/user.js

@@ -136,3 +136,14 @@ export function doUserEmailVerify(verificationToken) {
       });
   };
 }
+
+export function doFetchAccessToken() {
+  return function(dispatch, getState) {
+    const success = token =>
+      dispatch({
+        type: types.FETCH_ACCESS_TOKEN_SUCCESS,
+        data: { token },
+      });
+    lbryio.getAuthToken().then(success);
+  };
+}

ui/js/constants/action_types.js

@@ -100,6 +100,7 @@ export const USER_EMAIL_VERIFY_FAILURE = "USER_EMAIL_VERIFY_FAILURE";
 export const USER_FETCH_STARTED = "USER_FETCH_STARTED";
 export const USER_FETCH_SUCCESS = "USER_FETCH_SUCCESS";
 export const USER_FETCH_FAILURE = "USER_FETCH_FAILURE";
+export const FETCH_ACCESS_TOKEN_SUCCESS = "FETCH_ACCESS_TOKEN_SUCCESS";
 
 // Rewards
 export const FETCH_REWARDS_STARTED = "FETCH_REWARDS_STARTED";

ui/js/page/help/index.js

@@ -1,10 +1,17 @@
 import React from "react";
 import { doNavigate } from "actions/app";
 import { connect } from "react-redux";
+import { doFetchAccessToken } from "actions/user";
+import { selectAccessToken } from "selectors/user";
 import HelpPage from "./view";
 
+const select = state => ({
+  accessToken: selectAccessToken(state),
+});
+
 const perform = dispatch => ({
   navigate: (path, params) => dispatch(doNavigate(path, params)),
+  fetchAccessToken: () => dispatch(doFetchAccessToken()),
 });
 
-export default connect(null, perform)(HelpPage);
+export default connect(select, perform)(HelpPage);

ui/js/page/help/view.jsx

@@ -14,6 +14,7 @@ class HelpPage extends React.PureComponent {
       lbryId: null,
       uiVersion: null,
       upgradeAvailable: null,
+      accessTokenHidden: true,
     };
   }
 
@@ -36,6 +37,14 @@ class HelpPage extends React.PureComponent {
         lbryId: info.lbry_id,
       });
     });
+
+    if (!this.props.accessToken) this.props.fetchAccessToken();
+  }
+
+  showAccessToken() {
+    this.setState({
+      accessTokenHidden: false,
+    });
   }
 
   render() {
@@ -121,6 +130,7 @@ class HelpPage extends React.PureComponent {
             </div>
           </div>
         </section>
+
         <section className="card">
           <div className="card__title-primary"><h3>{__("About")}</h3></div>
           <div className="card__content">
@@ -155,6 +165,18 @@ class HelpPage extends React.PureComponent {
                       <th>{__("Installation ID")}</th>
                       <td>{this.state.lbryId}</td>
                     </tr>
+                    <tr>
+                      <th>{__("Access Token")}</th>
+                      <td>
+                        {this.state.accessTokenHidden &&
+                          <Link
+                            label={__("show")}
+                            onClick={this.showAccessToken.bind(this)}
+                          />}
+                        {!this.state.accessTokenHidden &&
+                          this.props.accessToken}
+                      </td>
+                    </tr>
                   </tbody>
                 </table>
               : <BusyMessage message={__("Looking up version info")} />}

ui/js/reducers/user.js

@@ -120,6 +120,14 @@ reducers[types.USER_EMAIL_VERIFY_FAILURE] = function(state, action) {
   });
 };
 
+reducers[types.FETCH_ACCESS_TOKEN_SUCCESS] = function(state, action) {
+  const { token } = action.data;
+
+  return Object.assign({}, state, {
+    accessToken: token,
+  });
+};
+
 export default function reducer(state = defaultState, action) {
   const handler = reducers[action.type];
   if (handler) return handler(state, action);

ui/js/selectors/user.js

@@ -76,3 +76,8 @@ export const selectUserIsAuthRequested = createSelector(
   (isEmailDeclined, isPending, isVerificationCandidate, hasEmail) =>
     !isEmailDeclined && (isPending || !hasEmail || isVerificationCandidate)
 );
+
+export const selectAccessToken = createSelector(
+  _selectState,
+  state => state.accessToken
+);