lbry-desktop/ui/js/component/auth.js

import React from "react";
import lbry from "../lbry.js";
import lbryio from "../lbryio.js";
import Modal from "./modal.js";
import ModalPage from "./modal-page.js";
import Link from "component/link";
import { RewardLink } from "component/reward-link";
import { FormRow } from "../component/form.js";
import { CreditAmount, Address } from "../component/common.js";
import { getLocal, setLocal } from "../utils.js";
import rewards from "../rewards";

class SubmitEmailStage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      rewardType: null,
      email: "",
      submitting: false,
    };
  }

  handleEmailChanged(event) {
    this.setState({
      email: event.target.value,
    });
  }

  onEmailSaved(email) {
    this.props.setStage("confirm", { email: email });
  }

  handleSubmit(event) {
    event.preventDefault();

    this.setState({
      submitting: true,
    });
    lbryio.call("user_email", "new", { email: this.state.email }, "post").then(
      () => {
        this.onEmailSaved(this.state.email);
      },
      error => {
        if (
          error.xhr &&
          (error.xhr.status == 409 ||
            error.message == __("This email is already in use"))
        ) {
          this.onEmailSaved(this.state.email);
          return;
        } else if (this._emailRow) {
          this._emailRow.showError(error.message);
        }
        this.setState({ submitting: false });
      }
    );
  }

  render() {
    return (
      <section>
        <form
          onSubmit={event => {
            this.handleSubmit(event);
          }}
        >
          <FormRow
            ref={ref => {
              this._emailRow = ref;
            }}
            type="text"
            label={__("Email")}
            placeholder="scrwvwls@lbry.io"
            name="email"
            value={this.state.email}
            onChange={event => {
              this.handleEmailChanged(event);
            }}
          />
          <div className="form-row-submit">
            <Link
              button="primary"
              label={__("Next")}
              disabled={this.state.submitting}
              onClick={event => {
                this.handleSubmit(event);
              }}
            />
          </div>
        </form>
      </section>
    );
  }
}

class ConfirmEmailStage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      rewardType: null,
      code: "",
      submitting: false,
      errorMessage: null,
    };
  }

  handleCodeChanged(event) {
    this.setState({
      code: event.target.value,
    });
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({
      submitting: true,
    });

    const onSubmitError = error => {
      if (this._codeRow) {
        this._codeRow.showError(error.message);
      }
      this.setState({ submitting: false });
    };

    lbryio
      .call(
        "user_email",
        "confirm",
        { verification_token: this.state.code, email: this.props.email },
        "post"
      )
      .then(userEmail => {
        if (userEmail.is_verified) {
          this.props.setStage("welcome");
        } else {
          onSubmitError(new Error(__("Your email is still not verified."))); //shouldn't happen?
        }
      }, onSubmitError);
  }

  render() {
    return (
      <section>
        <form
          onSubmit={event => {
            this.handleSubmit(event);
          }}
        >
          <FormRow
            label={__("Verification Code")}
            ref={ref => {
              this._codeRow = ref;
            }}
            type="text"
            name="code"
            placeholder="a94bXXXXXXXXXXXXXX"
            value={this.state.code}
            onChange={event => {
              this.handleCodeChanged(event);
            }}
            helper={__(
              "A verification code is required to access this version."
            )}
          />
          <div className="form-row-submit form-row-submit--with-footer">
            <Link
              button="primary"
              label={__("Verify")}
              disabled={this.state.submitting}
              onClick={event => {
                this.handleSubmit(event);
              }}
            />
          </div>
          <div className="form-field__helper">
            {__("No code?")}
            {" "}
            <Link
              onClick={() => {
                this.props.setStage("nocode");
              }}
              label={__("Click here")}
            />.
          </div>
        </form>
      </section>
    );
  }
}

class WelcomeStage extends React.Component {
  static propTypes = {
    endAuth: React.PropTypes.func,
  };

  constructor(props) {
    super(props);

    this.state = {
      hasReward: false,
      rewardAmount: null,
    };
  }

  onRewardClaim(reward) {
    this.setState({
      hasReward: true,
      rewardAmount: reward.amount,
    });
  }

  render() {
    return !this.state.hasReward
      ? <Modal
          type="custom"
          isOpen={true}
          contentLabel={__("Welcome to LBRY")}
          {...this.props}
        >
          <section>
            <h3 className="modal__header">{__("Welcome to LBRY.")}</h3>
            <p>
              {__(
                "Using LBRY is like dating a centaur. Totally normal up top, and way different underneath."
              )}
            </p>
            <p>{__("Up top, LBRY is similar to popular media sites.")}</p>
            <p>
              {__(
                "Below, LBRY is controlled by users -- you -- via blockchain and decentralization."
              )}
            </p>
            <p>
              {__(
                "Thank you for making content freedom possible! Here's a nickel, kid."
              )}
            </p>
            <div style={{ textAlign: "center", marginBottom: "12px" }}>
              <RewardLink
                type="new_user"
                button="primary"
                onRewardClaim={event => {
                  this.onRewardClaim(event);
                }}
                onRewardFailure={() => this.props.setStage(null)}
                onConfirmed={() => {
                  this.props.setStage(null);
                }}
              />
            </div>
          </section>
        </Modal>
      : <Modal
          type="alert"
          overlayClassName="modal-overlay modal-overlay--clear"
          isOpen={true}
          contentLabel={__("Welcome to LBRY")}
          {...this.props}
          onConfirmed={() => {
            this.props.setStage(null);
          }}
        >
          <section>
            <h3 className="modal__header">{__("About Your Reward")}</h3>
            <p>
              {__("You earned a reward of ")}
              {" "}
              <CreditAmount amount={this.state.rewardAmount} label={false} />
              {" "}{__('LBRY credits, or "LBC".')}
            </p>
            <p>
              {__(
                "This reward will show in your Wallet momentarily, probably while you are reading this message."
              )}
            </p>
            <p>
              {__(
                "LBC is used to compensate creators, to publish, and to have say in how the network works."
              )}
            </p>
            <p>
              {__(
                "No need to understand it all just yet! Try watching or downloading something next."
              )}
            </p>
            <p>
              {__(
                "Finally, know that LBRY is an early beta and that it earns the name."
              )}
            </p>
          </section>
        </Modal>;
  }
}

const ErrorStage = props => {
  return (
    <section>
      <p>{__("An error was encountered that we cannot continue from.")}</p>
      <p>{__("At least we're earning the name beta.")}</p>
      {props.errorText ? <p>{__("Message:")} {props.errorText}</p> : ""}
      <Link
        button="alt"
        label={__("Try Reload")}
        onClick={() => {
          window.location.reload();
        }}
      />
    </section>
  );
};

const PendingStage = props => {
  return (
    <section>
      <p>
        {__("Preparing for first access")} <span className="busy-indicator" />
      </p>
    </section>
  );
};

class CodeRequiredStage extends React.Component {
  constructor(props) {
    super(props);

    this._balanceSubscribeId = null;

    this.state = {
      balance: 0,
      address: getLocal("wallet_address"),
    };
  }

  componentWillMount() {
    this._balanceSubscribeId = lbry.balanceSubscribe(balance => {
      this.setState({
        balance: balance,
      });
    });

    if (!this.state.address) {
      lbry.wallet_unused_address().then(address => {
        setLocal("wallet_address", address);
        this.setState({ address: address });
      });
    }
  }

  componentWillUnmount() {
    if (this._balanceSubscribeId) {
      lbry.balanceUnsubscribe(this._balanceSubscribeId);
    }
  }

  render() {
    const disabled = this.state.balance < 1;
    return (
      <div>
        <section className="section-spaced">
          <p>
            {__(
              "Access to LBRY is restricted as we build and scale the network."
            )}
          </p>
          <p>{__("There are two ways in:")}</p>
          <h3>{__("Own LBRY Credits")}</h3>
          <p>{__("If you own at least 1 LBC, you can get in right now.")}</p>
          <p style={{ textAlign: "center" }}>
            <Link
              onClick={() => {
                setLocal("auth_bypassed", true);
                this.props.setStage(null);
              }}
              disabled={disabled}
              label={__("Let Me In")}
              button={disabled ? "alt" : "primary"}
            />
          </p>
          <p>
            {__("Your balance is ")}<CreditAmount
              amount={this.state.balance}
            />. {__("To increase your balance, send credits to this address:")}
          </p>
          <p>
            <Address
              address={
                this.state.address
                  ? this.state.address
                  : __("Generating Address...")
              }
            />
          </p>
          <p>{__("If you don't understand how to send credits, then...")}</p>
        </section>
        <section>
          <h3>{__("Wait For A Code")}</h3>
          <p>
            {__(
              "If you provide your email, you'll automatically receive a notification when the system is open."
            )}
          </p>
          <p>
            <Link
              onClick={() => {
                this.props.setStage("email");
              }}
              label={__("Return")}
            />
          </p>
        </section>
      </div>
    );
  }
}

export class AuthOverlay extends React.Component {
  constructor(props) {
    super(props);

    this._stages = {
      pending: PendingStage,
      error: ErrorStage,
      nocode: CodeRequiredStage,
      email: SubmitEmailStage,
      confirm: ConfirmEmailStage,
      welcome: WelcomeStage,
    };

    this.state = {
      stage: "pending",
      stageProps: {},
    };
  }

  setStage(stage, stageProps = {}) {
    this.setState({
      stage: stage,
      stageProps: stageProps,
    });
  }

  componentWillMount() {
    lbryio
      .authenticate()
      .then(user => {
        if (!user.has_verified_email) {
          if (getLocal("auth_bypassed")) {
            this.setStage(null);
          } else {
            this.setStage("email", {});
          }
        } else {
          lbryio.call("reward", "list", {}).then(userRewards => {
            userRewards.filter(function(reward) {
              return (
                reward.reward_type == rewards.TYPE_NEW_USER &&
                reward.transaction_id
              );
            }).length
              ? this.setStage(null)
              : this.setStage("welcome");
          });
        }
      })
      .catch(err => {
        this.setStage("error", { errorText: err.message });
        document.dispatchEvent(
          new CustomEvent("unhandledError", {
            detail: {
              message: err.message,
              data: err.stack,
            },
          })
        );
      });
  }

  render() {
    if (!this.state.stage) {
      return null;
    }
    const StageContent = this._stages[this.state.stage];

    if (!StageContent) {
      return (
        <span className="empty">{__("Unknown authentication step.")}</span>
      );
    }

    return this.state.stage != "welcome"
      ? <ModalPage
          className="modal-page--full"
          isOpen={true}
          contentLabel={__("Authentication")}
        >
          <h1>{__("LBRY Early Access")}</h1>
          <StageContent
            {...this.state.stageProps}
            setStage={(stage, stageProps) => {
              this.setStage(stage, stageProps);
            }}
          />
        </ModalPage>
      : <StageContent
          setStage={(stage, stageProps) => {
            this.setStage(stage, stageProps);
          }}
          {...this.state.stageProps}
        />;
  }
}