flow for failed authentication

CHANGELOG.md

@@ -9,7 +9,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
 ## [Unreleased]
 ### Added
   * Add tooltips to controls in header
-  *
+  * New flow for rewards authentication failure
 
 ### Changed
   * Reward-eligible content icon is now a rocket ship :D

ui/js/actions/user.js

@@ -1,6 +1,8 @@
 import * as types from "constants/action_types";
+import * as modals from "constants/modal_types";
 import lbryio from "lbryio";
 import { setLocal } from "utils";
+import { doOpenModal } from "actions/app";
 import { doRewardList, doClaimRewardType } from "actions/rewards";
 import { selectEmailToVerify, selectUser } from "selectors/user";
 import rewards from "rewards";
@@ -20,6 +22,7 @@ export function doAuthenticate() {
         dispatch(doRewardList());
       })
       .catch(error => {
+        dispatch(doOpenModal(modals.AUTHENTICATION_FAILURE));
         dispatch({
           type: types.AUTHENTICATION_FAILURE,
           data: { error },

ui/js/component/app/view.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import Router from "component/router";
 import Header from "component/header";
 import ModalError from "component/modalError";
+import ModalAuthFailure from "component/modalAuthFailure";
 import ModalDownloading from "component/modalDownloading";
 import ModalInsufficientCredits from "component/modalInsufficientCredits";
 import ModalUpgrade from "component/modalUpgrade";
@@ -76,6 +77,7 @@ class App extends React.PureComponent {
         {modal == modals.INSUFFICIENT_CREDITS && <ModalInsufficientCredits />}
         {modal == modals.WELCOME && <ModalWelcome />}
         {modal == modals.FIRST_REWARD && <ModalFirstReward />}
+        {modal == modals.AUTHENTICATION_FAILURE && <ModalAuthFailure />}
       </div>
     );
   }

ui/js/component/modalAuthFailure/index.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { connect } from "react-redux";
+import { doCloseModal } from "actions/app";
+import ModalAuthFailure from "./view";
+
+const select = state => ({});
+
+const perform = dispatch => ({
+  close: () => dispatch(doCloseModal()),
+});
+
+export default connect(select, perform)(ModalAuthFailure);

ui/js/component/modalAuthFailure/view.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Modal } from "component/modal";
+
+class ModalAuthFailure extends React.PureComponent {
+  render() {
+    const { close } = this.props;
+
+    return (
+      <Modal
+        isOpen={true}
+        contentLabel={__("Unable to Authenticate")}
+        type="confirm"
+        confirmButtonLabel={__("Reload")}
+        abortButtonLabel={__("Continue")}
+        onConfirmed={() => { window.location.reload() }}
+        onAborted={close}
+      >
+        <h3>{__("Authentication Failure")}</h3>
+        <p>{__("If reloading does not fix this, or you see this at every start up, please email help@lbry.io.")}</p>
+      </Modal>
+    );
+  }
+}
+
+export default ModalAuthFailure;

ui/js/constants/modal_types.js

@@ -6,3 +6,4 @@ export const INSUFFICIENT_CREDITS = "insufficient_credits";
 export const UPGRADE = "upgrade";
 export const WELCOME = "welcome";
 export const FIRST_REWARD = "first_reward";
+export const AUTHENTICATION_FAILURE = "auth_failure";

ui/js/page/rewards/view.jsx

@@ -122,6 +122,16 @@ class RewardsPage extends React.PureComponent {
           </div>
         );
       }
+    } else if (user === null) {
+      cardHeader = (
+        <div>
+          <div className="card__content empty">
+            <p>
+              {__("This application is unable to earn rewards due to an authentication failure.")}
+            </p>
+          </div>
+        </div>
+      );
     }
 
     return (