From 647a5b0c4d8b6689a6a38941471889606f5e4e27 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 6 Apr 2020 17:16:02 -0400
Subject: [PATCH 01/15] new signin/signup

---
 .eslintrc.json                                |   1 +
 package.json                                  |   4 +-
 static/app-strings.json                       |   9 +-
 ui/component/cardVerify/view.jsx              |   2 +-
 ui/component/channelCreate/view.jsx           |   2 +-
 ui/component/common/error-text.jsx            |   2 +-
 .../common/form-components/form-field.jsx     |   4 +-
 ui/component/common/icon-custom.jsx           |   5 +
 ui/component/errorBoundary/view.jsx           |  10 +-
 ui/component/header/view.jsx                  |  19 +-
 ui/component/invited/view.jsx                 |   2 +-
 ui/component/publishFormErrors/view.jsx       |   2 +-
 ui/component/router/view.jsx                  |   6 +-
 ui/component/selectAsset/view.jsx             |   2 +-
 ui/component/sideNavigation/view.jsx          |   7 +-
 ui/component/splash/view.jsx                  |   3 +-
 ui/component/supportsLiquidate/view.jsx       |   2 +-
 ui/component/userChannelFollowIntro/view.jsx  |  82 +++----
 ui/component/userEmail/index.js               |   5 +-
 ui/component/userEmailNew/index.js            |  10 +-
 ui/component/userEmailNew/view.jsx            | 197 +++++++++-------
 ui/component/userEmailReturning/index.js      |  13 ++
 ui/component/userEmailReturning/view.jsx      | 111 +++++++++
 ui/component/userEmailVerify/index.js         |   5 +-
 ui/component/userEmailVerify/view.jsx         |  55 +++--
 ui/component/userFirstChannel/view.jsx        |  83 +++----
 ui/component/userSignIn/index.js              |  49 +---
 ui/component/userSignIn/view.jsx              | 213 ++---------------
 ui/component/userSignUp/index.js              |  52 +++++
 ui/component/userSignUp/view.jsx              | 215 ++++++++++++++++++
 ui/component/userTagFollowIntro/view.jsx      |  65 +++---
 ui/component/userVerify/view.jsx              |   2 +-
 ui/component/walletSend/view.jsx              |   2 +-
 ui/constants/icons.js                         |   1 +
 ui/constants/pages.js                         |   3 +-
 ui/modal/modalRemoveFile/view.jsx             |   2 +-
 ui/modal/modalRevokeClaim/view.jsx            |   2 +-
 ui/modal/modalWalletEncrypt/view.jsx          |   2 +-
 ui/page/rewards/view.jsx                      |   2 +-
 ui/page/signUp/index.js                       |   7 +
 ui/page/signUp/view.jsx                       |  12 +
 ui/scss/component/_card.scss                  |   5 +
 ui/scss/component/_claim-list.scss            |   5 +
 ui/scss/component/_header.scss                |   9 +
 ui/scss/component/_main.scss                  |  23 +-
 ui/scss/component/section.scss                |  44 ++--
 ui/scss/init/_gui.scss                        |   4 +-
 ui/scss/themes/light.scss                     |   2 +-
 yarn.lock                                     |  12 +-
 49 files changed, 845 insertions(+), 531 deletions(-)
 create mode 100644 ui/component/userEmailReturning/index.js
 create mode 100644 ui/component/userEmailReturning/view.jsx
 create mode 100644 ui/component/userSignUp/index.js
 create mode 100644 ui/component/userSignUp/view.jsx
 create mode 100644 ui/page/signUp/index.js
 create mode 100644 ui/page/signUp/view.jsx

diff --git a/.eslintrc.json b/.eslintrc.json
index 8c1d7d658..50e4be5cb 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -30,6 +30,7 @@
     "one-var": 0,
     "prefer-promise-reject-errors": 0,
     "react/jsx-indent": 0,
+    "react/jsx-no-comment-textnodes": 0,
     "react-hooks/exhaustive-deps": "warn",
     "react-hooks/rules-of-hooks": "error",
     "react/no-unescaped-entities": 0,
diff --git a/package.json b/package.json
index 28cb90b9b..35e1abc63 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
     "@babel/register": "^7.0.0",
     "@exponent/electron-cookies": "^2.0.0",
     "@hot-loader/react-dom": "^16.8",
-    "@lbry/components": "^4.0.1",
+    "@lbry/components": "^4.1.1",
     "@reach/menu-button": "0.7.4",
     "@reach/rect": "^0.2.1",
     "@reach/tabs": "^0.1.5",
@@ -131,7 +131,7 @@
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
     "lbry-redux": "lbryio/lbry-redux#1097a63d44a20b87e443fbaa48f95fe3ea5e3f70",
-    "lbryinc": "lbryio/lbryinc#0addc624db54000b0447f4539f91f5758d26eef3",
+    "lbryinc": "lbryio/lbryinc#d6203bbea2ceb805465d20198adbdf7759f896a8",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",
     "lodash-es": "^4.17.14",
diff --git a/static/app-strings.json b/static/app-strings.json
index be009501c..580d25ed4 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -1116,5 +1116,10 @@
   "Repost %count%": "Repost %count%",
   "File Description": "File Description",
   "View %count% reposts": "View %count% reposts",
-  "Preparing your content": "Preparing your content"
-}
+  "Preparing your content": "Preparing your content",
+  "Sign Up with lbry.tv": "Sign Up with lbry.tv",
+  "Already have an account? %sign_in%": "Already have an account? %sign_in%",
+  "Sign in with a password (optional)": "Sign in with a password (optional)",
+  "Sign Up": "Sign Up",
+  "Don't have an account? %sign_up%": "Don't have an account? %sign_up%"
+}
\ No newline at end of file
diff --git a/ui/component/cardVerify/view.jsx b/ui/component/cardVerify/view.jsx
index 901ed4963..904973481 100644
--- a/ui/component/cardVerify/view.jsx
+++ b/ui/component/cardVerify/view.jsx
@@ -165,7 +165,7 @@ class CardVerify extends React.Component {
     return (
       <div>
         {scriptFailedToLoad && (
-          <div className="error-text">There was an error connecting to Stripe. Please try again later.</div>
+          <div className="error__text">There was an error connecting to Stripe. Please try again later.</div>
         )}
 
         <Button
diff --git a/ui/component/channelCreate/view.jsx b/ui/component/channelCreate/view.jsx
index d2a53ba15..3fea3d22c 100644
--- a/ui/component/channelCreate/view.jsx
+++ b/ui/component/channelCreate/view.jsx
@@ -125,7 +125,7 @@ class ChannelCreate extends React.PureComponent<Props, State> {
 
     return (
       <Form onSubmit={this.handleCreateChannel}>
-        {createChannelError && <div className="error-text">{createChannelError}</div>}
+        {createChannelError && <div className="error__text">{createChannelError}</div>}
         <div>
           <FormField
             label={__('Name')}
diff --git a/ui/component/common/error-text.jsx b/ui/component/common/error-text.jsx
index 2b49c8c66..9d99c78de 100644
--- a/ui/component/common/error-text.jsx
+++ b/ui/component/common/error-text.jsx
@@ -8,5 +8,5 @@ type Props = {
 export default function ErrorText(props: Props) {
   const { children } = props;
 
-  return <span className="error-text">{children}</span>;
+  return <span className="error__text">{children}</span>;
 }
diff --git a/ui/component/common/form-components/form-field.jsx b/ui/component/common/form-components/form-field.jsx
index 29165ba44..3c4b963b0 100644
--- a/ui/component/common/form-components/form-field.jsx
+++ b/ui/component/common/form-components/form-field.jsx
@@ -112,7 +112,7 @@ export class FormField extends React.PureComponent<Props> {
         input = (
           <fieldset-section>
             {(label || errorMessage) && (
-              <label htmlFor={name}>{errorMessage ? <span className="error-text">{errorMessage}</span> : label}</label>
+              <label htmlFor={name}>{errorMessage ? <span className="error__text">{errorMessage}</span> : label}</label>
             )}
             <select id={name} {...inputProps}>
               {children}
@@ -173,7 +173,7 @@ export class FormField extends React.PureComponent<Props> {
             <fieldset-section>
               {(label || errorMessage) && (
                 <label htmlFor={name}>
-                  {errorMessage ? <span className="error-text">{errorMessage}</span> : label}
+                  {errorMessage ? <span className="error__text">{errorMessage}</span> : label}
                 </label>
               )}
               {prefix && <label htmlFor={name}>{prefix}</label>}
diff --git a/ui/component/common/icon-custom.jsx b/ui/component/common/icon-custom.jsx
index 82fe8f7ae..fa49abaf4 100644
--- a/ui/component/common/icon-custom.jsx
+++ b/ui/component/common/icon-custom.jsx
@@ -306,6 +306,11 @@ export const icons = {
       <line x1="15" y1="12" x2="3" y2="12" />
     </g>
   ),
+  [ICONS.SIGN_UP]: buildIcon(
+    <g>
+      <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
+    </g>
+  ),
   [ICONS.SIGN_OUT]: buildIcon(
     <g>
       <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
diff --git a/ui/component/errorBoundary/view.jsx b/ui/component/errorBoundary/view.jsx
index c16c3b313..6c064d719 100644
--- a/ui/component/errorBoundary/view.jsx
+++ b/ui/component/errorBoundary/view.jsx
@@ -96,20 +96,20 @@ class ErrorBoundary extends React.Component<Props, State> {
             }
           />
           {!errorWasReported && (
-            <div className="error-wrapper">
-              <span className="error-text">
+            <div className="error__wrapper">
+              <span className="error__text">
                 {__('You are not currently sharing diagnostic data so this error was not reported.')}
               </span>
             </div>
           )}
 
           {errorWasReported && (
-            <div className="error-wrapper">
+            <div className="error__wrapper">
               {/* @if TARGET='web' */}
-              <span className="error-text">{__('Error ID: %sentryEventId%', { sentryEventId })}</span>
+              <span className="error__text">{__('Error ID: %sentryEventId%', { sentryEventId })}</span>
               {/* @endif */}
               {/* @if TARGET='app' */}
-              <span className="error-text">{__('This error was reported and will be fixed.')}</span>
+              <span className="error__text">{__('This error was reported and will be fixed.')}</span>
               {/* @endif */}
             </div>
           )}
diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index a28802b2d..c5e278fe3 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -192,10 +192,16 @@ const Header = (props: Props) => {
                         <span className="menu__link-help">{email}</span>
                       </MenuItem>
                     ) : (
-                      <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH}`)}>
-                        <Icon aria-hidden icon={ICONS.SIGN_IN} />
-                        {__('Sign In')}
-                      </MenuItem>
+                      <React.Fragment>
+                        <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH}`)}>
+                          <Icon aria-hidden icon={ICONS.SIGN_UP} />
+                          {__('Sign Up')}
+                        </MenuItem>
+                        <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH_SIGNIN}`)}>
+                          <Icon aria-hidden icon={ICONS.SIGN_IN} />
+                          {__('Sign In')}
+                        </MenuItem>
+                      </React.Fragment>
                     )}
                   </MenuList>
                 </Menu>
@@ -223,7 +229,10 @@ const Header = (props: Props) => {
               </MenuList>
             </Menu>
             {IS_WEB && !authenticated && (
-              <Button navigate={`/$/${PAGES.AUTH}`} button="primary" label={__('Sign In')} />
+              <div className="header__auth-buttons">
+                <Button navigate={`/$/${PAGES.AUTH_SIGNIN}`} button="link" label={__('Sign In')} />
+                <Button navigate={`/$/${PAGES.AUTH}`} button="primary" label={__('Sign Up')} />
+              </div>
             )}
           </div>
         ) : (
diff --git a/ui/component/invited/view.jsx b/ui/component/invited/view.jsx
index 13307be7c..62ddf259d 100644
--- a/ui/component/invited/view.jsx
+++ b/ui/component/invited/view.jsx
@@ -111,7 +111,7 @@ function Invited(props: Props) {
         )}
         actions={
           <>
-            <p className="error-text">{__('Not a valid invite')}</p>
+            <p className="error__text">{__('Not a valid invite')}</p>
             <div className="card__actions">
               <Button
                 button="primary"
diff --git a/ui/component/publishFormErrors/view.jsx b/ui/component/publishFormErrors/view.jsx
index 4845f3971..8d6faead1 100644
--- a/ui/component/publishFormErrors/view.jsx
+++ b/ui/component/publishFormErrors/view.jsx
@@ -20,7 +20,7 @@ function PublishFormErrors(props: Props) {
   // These are extra help
   // If there is an error it will be presented as an inline error as well
   return (
-    <div className="error-text">
+    <div className="error__text">
       {!title && <div>{__('A title is required')}</div>}
       {!name && <div>{__('A URL is required')}</div>}
       {!isNameValid(name, false) && INVALID_NAME_ERROR}
diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx
index df32388a6..5c5efe9a1 100644
--- a/ui/component/router/view.jsx
+++ b/ui/component/router/view.jsx
@@ -28,6 +28,7 @@ import TagsFollowingManagePage from 'page/tagsFollowingManage';
 import ListBlockedPage from 'page/listBlocked';
 import FourOhFourPage from 'page/fourOhFour';
 import SignInPage from 'page/signIn';
+import SignUpPage from 'page/signUp';
 import SignInVerifyPage from 'page/signInVerify';
 import ChannelsPage from 'page/channels';
 import EmbedWrapperPage from 'page/embedWrapper';
@@ -152,8 +153,9 @@ function AppRouter(props: Props) {
 
       <Route path={`/`} exact component={HomePage} />
       <Route path={`/$/${PAGES.DISCOVER}`} exact component={DiscoverPage} />
-      <Route path={`/$/${PAGES.AUTH}`} exact component={SignInPage} />
-      <Route path={`/$/${PAGES.AUTH}/*`} exact component={SignInPage} />
+      <Route path={`/$/${PAGES.AUTH_SIGNIN}`} exact component={SignInPage} />
+      <Route path={`/$/${PAGES.AUTH}`} exact component={SignUpPage} />
+      <Route path={`/$/${PAGES.AUTH}/*`} exact component={SignUpPage} />
       <Route path={`/$/${PAGES.WELCOME}`} exact component={Welcome} />
       <Route path={`/$/${PAGES.TAGS_FOLLOWING}`} exact component={TagsFollowingPage} />
       <Route
diff --git a/ui/component/selectAsset/view.jsx b/ui/component/selectAsset/view.jsx
index 40abdf1c2..65551d95c 100644
--- a/ui/component/selectAsset/view.jsx
+++ b/ui/component/selectAsset/view.jsx
@@ -74,7 +74,7 @@ function SelectAsset(props: Props) {
         </FormField>
         {assetSource === SOURCE_UPLOAD && (
           <div>
-            {error && <div className="error-text">{error}</div>}
+            {error && <div className="error__text">{error}</div>}
             {!pathSelected && (
               <FileSelector
                 label={'File to upload'}
diff --git a/ui/component/sideNavigation/view.jsx b/ui/component/sideNavigation/view.jsx
index cc9b39383..ce27b926a 100644
--- a/ui/component/sideNavigation/view.jsx
+++ b/ui/component/sideNavigation/view.jsx
@@ -90,7 +90,12 @@ function SideNavigation(props: Props) {
         <ul className="navigation-links">
           {[
             {
-              ...(expanded && !isAuthenticated ? { ...buildLink(PAGES.AUTH, __('Sign In'), ICONS.SIGN_IN) } : {}),
+              ...(expanded && !isAuthenticated ? { ...buildLink(PAGES.AUTH, __('Sign Up'), ICONS.SIGN_UP) } : {}),
+            },
+            {
+              ...(expanded && !isAuthenticated
+                ? { ...buildLink(PAGES.AUTH_SIGNIN, __('Sign In'), ICONS.SIGN_IN) }
+                : {}),
             },
             {
               ...buildLink(null, __('Home'), ICONS.HOME),
diff --git a/ui/component/splash/view.jsx b/ui/component/splash/view.jsx
index c853f104a..dbbbc04fa 100644
--- a/ui/component/splash/view.jsx
+++ b/ui/component/splash/view.jsx
@@ -1,4 +1,5 @@
 // @flow
+import type { Node } from 'react';
 import * as MODALS from 'constants/modal_types';
 import * as SETTINGS from 'constants/settings';
 import React from 'react';
@@ -33,7 +34,7 @@ type Props = {
 };
 
 type State = {
-  details: string,
+  details: string | Node,
   message: string,
   launchedModal: boolean,
   error: boolean,
diff --git a/ui/component/supportsLiquidate/view.jsx b/ui/component/supportsLiquidate/view.jsx
index 9f5c1587f..20da319a5 100644
--- a/ui/component/supportsLiquidate/view.jsx
+++ b/ui/component/supportsLiquidate/view.jsx
@@ -156,7 +156,7 @@ const SupportsLiquidate = (props: Props) => {
         <React.Fragment>
           {abandonClaimError ? (
             <>
-              <div className="error-text">{__('%message%', { message: abandonClaimError })}</div>
+              <div className="error__text">{__('%message%', { message: abandonClaimError })}</div>
               <Button disabled={error} button="primary" onClick={handleClose} label={__('Done')} />
             </>
           ) : (
diff --git a/ui/component/userChannelFollowIntro/view.jsx b/ui/component/userChannelFollowIntro/view.jsx
index 3477eed16..6a0d6d84f 100644
--- a/ui/component/userChannelFollowIntro/view.jsx
+++ b/ui/component/userChannelFollowIntro/view.jsx
@@ -5,7 +5,7 @@ import * as CS from 'constants/claim_search';
 import Nag from 'component/common/nag';
 import { parseURI } from 'lbry-redux';
 import Button from 'component/button';
-import { Form } from 'component/common/form-components/form';
+import Card from 'component/common/card';
 
 type Props = {
   subscribedChannels: Array<Subscription>,
@@ -28,46 +28,46 @@ function UserChannelFollowIntro(props: Props) {
   }, []);
 
   return (
-    <React.Fragment>
-      <h1 className="section__title--large">{__('Find Channels to Follow')}</h1>
-      <p className="section__subtitle">
-        {__(
-          'LBRY works better if you find and follow at least 5 creators you like. You can also block channels you never want to see.'
-        )}
-      </p>
-      <Form onSubmit={onContinue} className="section__body">
-        <div className="card__actions">
-          <Button button="secondary" onClick={onBack} label={__('Back')} />
-          <Button
-            button="primary"
-            type="Submit"
-            onClick={onContinue}
-            label={__('Continue')}
-            disabled={subscribedChannels.length < 2}
-          />
-        </div>
-      </Form>
-      <div className="section__body">
-        <ClaimListDiscover
-          defaultOrderBy={CS.ORDER_BY_TOP}
-          defaultFreshness={CS.FRESH_ALL}
-          claimType="channel"
-          defaultTags={CS.TAGS_FOLLOWED}
-        />
-        {followingCount > 0 && (
-          <Nag
-            type="helpful"
-            message={
-              followingCount === 1
-                ? __('Nice! You are currently following %followingCount% creator', { followingCount })
-                : __('Nice! You are currently following %followingCount% creators', { followingCount })
-            }
-            actionText={__('Continue')}
-            onClick={onContinue}
-          />
-        )}
-      </div>
-    </React.Fragment>
+    <Card
+      title={__('Find Channels to Follow')}
+      subtitle={__(
+        'LBRY works better if you find and follow at least 5 creators you like. You can also block channels you never want to see.'
+      )}
+      actions={
+        <React.Fragment>
+          <div className="section__actions">
+            <Button button="secondary" onClick={onBack} label={__('Back')} />
+            <Button
+              button="primary"
+              type="Submit"
+              onClick={onContinue}
+              label={__('Continue')}
+              disabled={subscribedChannels.length < 2}
+            />
+          </div>
+          <div className="section__body">
+            <ClaimListDiscover
+              defaultOrderBy={CS.ORDER_BY_TOP}
+              defaultFreshness={CS.FRESH_ALL}
+              claimType="channel"
+              defaultTags={CS.TAGS_FOLLOWED}
+            />
+            {followingCount > 0 && (
+              <Nag
+                type="helpful"
+                message={
+                  followingCount === 1
+                    ? __('Nice! You are currently following %followingCount% creator', { followingCount })
+                    : __('Nice! You are currently following %followingCount% creators', { followingCount })
+                }
+                actionText={__('Continue')}
+                onClick={onContinue}
+              />
+            )}
+          </div>
+        </React.Fragment>
+      }
+    />
   );
 }
 
diff --git a/ui/component/userEmail/index.js b/ui/component/userEmail/index.js
index 0449880be..195598bad 100644
--- a/ui/component/userEmail/index.js
+++ b/ui/component/userEmail/index.js
@@ -21,7 +21,4 @@ const perform = dispatch => ({
   fetchAccessToken: () => dispatch(doFetchAccessToken()),
 });
 
-export default connect(
-  select,
-  perform
-)(UserEmailVerify);
+export default connect(select, perform)(UserEmailVerify);
diff --git a/ui/component/userEmailNew/index.js b/ui/component/userEmailNew/index.js
index 6c0e9c33c..8512cf7ff 100644
--- a/ui/component/userEmailNew/index.js
+++ b/ui/component/userEmailNew/index.js
@@ -1,6 +1,6 @@
 import * as SETTINGS from 'constants/settings';
 import { connect } from 'react-redux';
-import { selectEmailNewIsPending, selectEmailNewErrorMessage, doUserEmailNew } from 'lbryinc';
+import { selectEmailNewIsPending, selectEmailNewErrorMessage, doUserSignUp, doClearEmailError } from 'lbryinc';
 import { DAEMON_SETTINGS } from 'lbry-redux';
 import { doSetClientSetting, doSetDaemonSetting } from 'redux/actions/settings';
 import { makeSelectClientSetting, selectDaemonSettings } from 'redux/selectors/settings';
@@ -14,13 +14,11 @@ const select = state => ({
 });
 
 const perform = dispatch => ({
-  addUserEmail: email => dispatch(doUserEmailNew(email)),
   setSync: value => dispatch(doSetClientSetting(SETTINGS.ENABLE_SYNC, value)),
   setShareDiagnosticData: shouldShareData =>
     dispatch(doSetDaemonSetting(DAEMON_SETTINGS.SHARE_USAGE_DATA, shouldShareData)),
+  doSignUp: (email, password) => dispatch(doUserSignUp(email, password)),
+  clearEmailError: () => dispatch(doClearEmailError()),
 });
 
-export default connect(
-  select,
-  perform
-)(UserEmailNew);
+export default connect(select, perform)(UserEmailNew);
diff --git a/ui/component/userEmailNew/view.jsx b/ui/component/userEmailNew/view.jsx
index 9fa177149..8d7e31082 100644
--- a/ui/component/userEmailNew/view.jsx
+++ b/ui/component/userEmailNew/view.jsx
@@ -1,29 +1,36 @@
 // @flow
+import * as PAGES from 'constants/pages';
 import React, { useState } from 'react';
 import { FormField, Form } from 'component/common/form';
 import Button from 'component/button';
 import analytics from 'analytics';
 import { EMAIL_REGEX } from 'constants/email';
 import I18nMessage from 'component/i18nMessage';
+import { useHistory } from 'react-router-dom';
+import Card from 'component/common/card';
+import ErrorText from 'component/common/error-text';
 
 type Props = {
   errorMessage: ?string,
   isPending: boolean,
-  addUserEmail: string => void,
   syncEnabled: boolean,
   setSync: boolean => void,
   balance: number,
   daemonSettings: { share_usage_data: boolean },
   setShareDiagnosticData: boolean => void,
+  doSignUp: (string, ?string) => void,
+  clearEmailError: () => void,
 };
 
 function UserEmailNew(props: Props) {
-  const { errorMessage, isPending, addUserEmail, setSync, daemonSettings, setShareDiagnosticData } = props;
+  const { errorMessage, isPending, doSignUp, setSync, daemonSettings, setShareDiagnosticData, clearEmailError } = props;
   const { share_usage_data: shareUsageData } = daemonSettings;
-  const [newEmail, setEmail] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
   const [localShareUsageData, setLocalShareUsageData] = React.useState(false);
   const [formSyncEnabled, setFormSyncEnabled] = useState(true);
-  const valid = newEmail.match(EMAIL_REGEX);
+  const { push, location } = useHistory();
+  const valid = email.match(EMAIL_REGEX);
 
   function handleUsageDataChange() {
     setLocalShareUsageData(!localShareUsageData);
@@ -31,96 +38,118 @@ function UserEmailNew(props: Props) {
 
   function handleSubmit() {
     setSync(formSyncEnabled);
-    addUserEmail(newEmail);
+    doSignUp(email, password === '' ? undefined : password);
     // @if TARGET='app'
     setShareDiagnosticData(true);
     // @endif
     analytics.emailProvidedEvent();
   }
 
+  function handleChangeToSignIn() {
+    clearEmailError();
+    push(`/$/${PAGES.AUTH_SIGNIN}${location.search}`); // TODO: Don't lose redirect url right here
+  }
+
   return (
-    <React.Fragment>
-      <h1 className="section__title--large">{__('Sign In to lbry.tv')}</h1>
-      <p className="section__subtitle">
-        {/* @if TARGET='web' */}
-        {__('Create a new account or sign in.')}
-        {/* @endif */}
-        {/* @if TARGET='app' */}
-        {__('An account with lbry.tv allows you to earn rewards and backup your data.')}
-        {/* @endif */}
-      </p>
-      <Form onSubmit={handleSubmit} className="section__body">
-        <FormField
-          autoFocus
-          placeholder={__('hotstuff_96@hotmail.com')}
-          type="email"
-          name="sign_up_email"
-          label={__('Email')}
-          value={newEmail}
-          error={errorMessage}
-          onChange={e => setEmail(e.target.value)}
-        />
+    <div className="main__sign-up">
+      <Card
+        title={__('Sign Up with lbry.tv')}
+        // @if TARGET='app'
+        subtitle={__('An account with lbry.tv allows you to earn rewards and backup your data.')}
+        // @endif
+        actions={
+          <div>
+            <Form onSubmit={handleSubmit} className="section">
+              <FormField
+                autoFocus
+                placeholder={__('hotstuff_96@hotmail.com')}
+                type="email"
+                name="sign_up_email"
+                label={__('Email')}
+                value={email}
+                onChange={e => setEmail(e.target.value)}
+              />
+              <FormField
+                type="password"
+                name="sign_in_password"
+                label={__('Password')}
+                value={password}
+                onChange={e => setPassword(e.target.value)}
+              />
 
-        {!IS_WEB && (
-          <FormField
-            type="checkbox"
-            name="sync_checkbox"
-            label={
-              <React.Fragment>
-                {__('Backup your account and wallet data.')}{' '}
-                <Button button="link" href="https://lbry.com/faq/account-sync" label={__('Learn More')} />
-              </React.Fragment>
-            }
-            checked={formSyncEnabled}
-            onChange={() => setFormSyncEnabled(!formSyncEnabled)}
-          />
-        )}
-
-        {!shareUsageData && !IS_WEB && (
-          <FormField
-            type="checkbox"
-            name="share_data_checkbox"
-            checked={localShareUsageData}
-            onChange={handleUsageDataChange}
-            label={
-              <React.Fragment>
-                {__('Share usage data with LBRY inc.')}{' '}
-                <Button button="link" href="https://lbry.com/faq/privacy-and-data" label={__('Learn More')} />
-                {!localShareUsageData && <span className="error-text"> ({__('Required')})</span>}
-              </React.Fragment>
-            }
-          />
-        )}
-        <div className="card__actions">
-          <Button
-            button="primary"
-            type="submit"
-            label={__('Continue')}
-            disabled={!newEmail || !valid || (!IS_WEB && (!localShareUsageData && !shareUsageData)) || isPending}
-          />
-        </div>
-      </Form>
-      {/* @if TARGET='web' */}
-      <p className="help">
-        <React.Fragment>
-          <I18nMessage
-            tokens={{
-              terms: (
-                <Button
-                  tabIndex="2"
-                  button="link"
-                  href="https://www.lbry.com/termsofservice"
-                  label={__('Terms of Service')}
+              {!IS_WEB && (
+                <FormField
+                  type="checkbox"
+                  name="sync_checkbox"
+                  label={
+                    <React.Fragment>
+                      {__('Backup your account and wallet data.')}{' '}
+                      <Button button="link" href="https://lbry.com/faq/account-sync" label={__('Learn More')} />
+                    </React.Fragment>
+                  }
+                  checked={formSyncEnabled}
+                  onChange={() => setFormSyncEnabled(!formSyncEnabled)}
                 />
-              ),
-            }}
-          >
-            By continuing, I agree to the %terms% and confirm I am over the age of 13.
-          </I18nMessage>
-        </React.Fragment>
+              )}
+
+              {!shareUsageData && !IS_WEB && (
+                <FormField
+                  type="checkbox"
+                  name="share_data_checkbox"
+                  checked={localShareUsageData}
+                  onChange={handleUsageDataChange}
+                  label={
+                    <React.Fragment>
+                      {__('Share usage data with LBRY inc.')}{' '}
+                      <Button button="link" href="https://lbry.com/faq/privacy-and-data" label={__('Learn More')} />
+                      {!localShareUsageData && <span className="error__text"> ({__('Required')})</span>}
+                    </React.Fragment>
+                  }
+                />
+              )}
+              <div className="section__actions">
+                <Button
+                  button="primary"
+                  type="submit"
+                  label={__('Continue')}
+                  disabled={!email || !valid || (!IS_WEB && !localShareUsageData && !shareUsageData) || isPending}
+                />
+
+                <p className="help">
+                  <I18nMessage
+                    tokens={{
+                      terms: (
+                        <Button
+                          button="link"
+                          href="https://www.lbry.com/termsofservice"
+                          label={__('Terms of Service')}
+                        />
+                      ),
+                    }}
+                  >
+                    By continuing, I agree to the %terms% and confirm I am over the age of 13.
+                  </I18nMessage>
+                </p>
+              </div>
+            </Form>
+            {errorMessage && (
+              <div className="section">
+                <ErrorText>{errorMessage}</ErrorText>
+              </div>
+            )}
+          </div>
+        }
+      />
+      <p className="card__bottom-gutter">
+        <I18nMessage
+          tokens={{
+            sign_in: <Button button="link" onClick={handleChangeToSignIn} label={__('Sign In')} />,
+          }}
+        >
+          Already have an account? %sign_in%
+        </I18nMessage>
       </p>
-      {/* @endif */}
-    </React.Fragment>
+    </div>
   );
 }
 
diff --git a/ui/component/userEmailReturning/index.js b/ui/component/userEmailReturning/index.js
new file mode 100644
index 000000000..408c75b04
--- /dev/null
+++ b/ui/component/userEmailReturning/index.js
@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import { selectEmailNewErrorMessage, selectEmailToVerify, doUserSignIn, doClearEmailError } from 'lbryinc';
+import UserEmailReturning from './view';
+
+const select = state => ({
+  errorMessage: selectEmailNewErrorMessage(state),
+  emailToVerify: selectEmailToVerify(state),
+});
+
+export default connect(select, {
+  doUserSignIn,
+  doClearEmailError,
+})(UserEmailReturning);
diff --git a/ui/component/userEmailReturning/view.jsx b/ui/component/userEmailReturning/view.jsx
new file mode 100644
index 000000000..25fc38c1f
--- /dev/null
+++ b/ui/component/userEmailReturning/view.jsx
@@ -0,0 +1,111 @@
+// @flow
+import * as PAGES from 'constants/pages';
+import React, { useState } from 'react';
+import { FormField, Form } from 'component/common/form';
+import Button from 'component/button';
+import { EMAIL_REGEX } from 'constants/email';
+import I18nMessage from 'component/i18nMessage';
+import { useHistory } from 'react-router-dom';
+import usePersistedState from 'effects/use-persisted-state';
+import UserEmailVerify from 'component/userEmailVerify';
+import ErrorText from 'component/common/error-text';
+import Card from 'component/common/card';
+import analytics from 'analytics';
+
+type Props = {
+  errorMessage: ?string,
+  emailToVerify: ?string,
+  doClearEmailError: () => void,
+  doUserSignIn: (string, ?string) => void,
+};
+
+function UserEmailReturning(props: Props) {
+  const { errorMessage, doUserSignIn, emailToVerify, doClearEmailError } = props;
+  const [email, setEmail] = useState('');
+  const [showPassword, setShowPassword] = usePersistedState('sign-in-show-password', false);
+  const [password, setPassword] = useState('');
+  const { push, location } = useHistory();
+
+  const valid = email.match(EMAIL_REGEX);
+  const showEmailVerification = emailToVerify;
+
+  function handleSubmit() {
+    doUserSignIn(email, password === '' ? undefined : password);
+    analytics.emailProvidedEvent();
+  }
+
+  function handleChangeToSignIn() {
+    doClearEmailError();
+    push(`/$/${PAGES.AUTH}${location.search}`); // TODO: Don't lose redirect url right here
+  }
+
+  return (
+    <div className="main__sign-in">
+      {showEmailVerification ? (
+        <UserEmailVerify />
+      ) : (
+        <div>
+          <Card
+            title={__('Sign In to lbry.tv')}
+            actions={
+              <div>
+                <Form onSubmit={handleSubmit} className="section">
+                  <FormField
+                    autoFocus
+                    placeholder={__('hotstuff_96@hotmail.com')}
+                    type="email"
+                    name="sign_in_email"
+                    label={__('Email')}
+                    value={email}
+                    onChange={e => setEmail(e.target.value)}
+                  />
+                  {showPassword && (
+                    <FormField
+                      type="password"
+                      name="sign_in_password"
+                      label={__('Password')}
+                      value={password}
+                      onChange={e => setPassword(e.target.value)}
+                    />
+                  )}
+                  {!showPassword && (
+                    <fieldset-section>
+                      <FormField
+                        type="checkbox"
+                        placeholder={__('hotstuff_96@hotmail.com')}
+                        name="sign_in_toggle_password"
+                        label={__('Sign in with a password (optional)')}
+                        checked={showPassword}
+                        onChange={() => setShowPassword(!showPassword)}
+                      />
+                    </fieldset-section>
+                  )}
+
+                  <div className="section__actions">
+                    <Button button="primary" type="submit" label={__('Continue')} disabled={!email || !valid} />
+                  </div>
+                </Form>
+                {errorMessage && (
+                  <div className="section">
+                    <ErrorText>{errorMessage}</ErrorText>
+                  </div>
+                )}
+              </div>
+            }
+          />
+          <p className="card__bottom-gutter">
+            <I18nMessage
+              tokens={{
+                sign_up: <Button button="link" onClick={handleChangeToSignIn} label={__('Sign Up')} />,
+              }}
+            >
+              Don't have an account? %sign_up%
+            </I18nMessage>
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default UserEmailReturning;
diff --git a/ui/component/userEmailVerify/index.js b/ui/component/userEmailVerify/index.js
index 170fc95c8..1fc6ecfd1 100644
--- a/ui/component/userEmailVerify/index.js
+++ b/ui/component/userEmailVerify/index.js
@@ -23,7 +23,4 @@ const perform = dispatch => ({
   toast: message => dispatch(doToast({ message })),
 });
 
-export default connect(
-  select,
-  perform
-)(UserEmailVerify);
+export default connect(select, perform)(UserEmailVerify);
diff --git a/ui/component/userEmailVerify/view.jsx b/ui/component/userEmailVerify/view.jsx
index 4475deacd..9ea462ef9 100644
--- a/ui/component/userEmailVerify/view.jsx
+++ b/ui/component/userEmailVerify/view.jsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import Button from 'component/button';
 import UserSignOutButton from 'component/userSignOutButton';
 import I18nMessage from 'component/i18nMessage';
+import Card from 'component/common/card';
 
 type Props = {
   email: string,
@@ -24,11 +25,14 @@ class UserEmailVerify extends React.PureComponent<Props> {
   }
 
   componentDidMount() {
-    this.emailVerifyCheckInterval = setInterval(() => this.checkIfVerified(), 5000);
+    this.emailVerifyCheckInterval = setInterval(() => {
+      this.checkIfVerified();
+    }, 5000);
   }
 
   componentDidUpdate() {
     const { user } = this.props;
+
     if (this.emailVerifyCheckInterval && user && user.has_verified_email) {
       clearInterval(this.emailVerifyCheckInterval);
     }
@@ -58,29 +62,32 @@ class UserEmailVerify extends React.PureComponent<Props> {
 
     return (
       <React.Fragment>
-        <h1 className="section__title--large">{isReturningUser ? __('Check Your Email') : __('Confirm Your Email')}</h1>
-
-        <p className="section__subtitle">
-          {__(
-            'An email was sent to %email%. Follow the link to %verify_text%. After, this page will update automatically.',
-            {
-              email,
-              verify_text: isReturningUser ? __('sign in') : __('verify your email'),
-            }
-          )}
-        </p>
-
-        <div className="section__body section__actions">
-          <Button
-            button="primary"
-            label={__('Resend Email')}
-            onClick={this.handleResendVerificationEmail}
-            disabled={resendingEmail}
-          />
-          <UserSignOutButton label={__('Start Over')} />
-        </div>
-
-        <p className="help">
+        <Card
+          title={isReturningUser ? __('Check Your Email') : __('Confirm Your Email')}
+          subtitle={
+            <p>
+              {__(
+                'An email was sent to %email%. Follow the link to %verify_text%. After, this page will update automatically.',
+                {
+                  email,
+                  verify_text: isReturningUser ? __('sign in') : __('verify your email'),
+                }
+              )}
+            </p>
+          }
+          actions={
+            <div className="section__actions">
+              <Button
+                button="primary"
+                label={__('Resend Email')}
+                onClick={this.handleResendVerificationEmail}
+                disabled={resendingEmail}
+              />
+              <UserSignOutButton label={__('Start Over')} />
+            </div>
+          }
+        />
+        <p className="card__bottom-gutter">
           <I18nMessage
             tokens={{
               help_link: <Button button="link" href="mailto:help@lbry.com" label="help@lbry.com" />,
diff --git a/ui/component/userFirstChannel/view.jsx b/ui/component/userFirstChannel/view.jsx
index cdd2c96eb..801903f93 100644
--- a/ui/component/userFirstChannel/view.jsx
+++ b/ui/component/userFirstChannel/view.jsx
@@ -4,6 +4,7 @@ import { isNameValid } from 'lbry-redux';
 import Button from 'component/button';
 import { Form, FormField } from 'component/common/form';
 import { INVALID_NAME_ERROR } from 'constants/claim';
+import Card from 'component/common/card';
 export const DEFAULT_BID_FOR_FIRST_CHANNEL = 0.01;
 
 type Props = {
@@ -36,45 +37,51 @@ function UserFirstChannel(props: Props) {
   }
 
   return (
-    <Form onSubmit={handleCreateChannel}>
-      <h1 className="section__title--large">{__('Create A Channel')}</h1>
-      <div className="section__subtitle">
-        <p>{__('A channel is your identity on the LBRY network.')}</p>
-        <p>{__('You can have more than one or remove this later.')}</p>
-      </div>
-      <section className="section__body">
-        <fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix">
-          <fieldset-section>
-            <label htmlFor="auth_first_channel">
-              {createChannelError || nameError ? (
-                <span className="error-text">{createChannelError || nameError}</span>
-              ) : (
-                __('Your Channel')
-              )}
-            </label>
-            <div className="form-field__prefix">@</div>
-          </fieldset-section>
+    <div className="main__channel-creation">
+      <Card
+        title={__('Create A Channel')}
+        subtitle={
+          <React.Fragment>
+            <p>{__('A channel is your identity on the LBRY network.')}</p>
+            <p>{__('You can have more than one or remove this later.')}</p>
+          </React.Fragment>
+        }
+        actions={
+          <Form onSubmit={handleCreateChannel}>
+            <fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix">
+              <fieldset-section>
+                <label htmlFor="auth_first_channel">
+                  {createChannelError || nameError ? (
+                    <span className="error__text">{createChannelError || nameError}</span>
+                  ) : (
+                    __('Your Channel')
+                  )}
+                </label>
+                <div className="form-field__prefix">@</div>
+              </fieldset-section>
 
-          <FormField
-            autoFocus
-            placeholder={__('channel')}
-            type="text"
-            name="auth_first_channel"
-            className="form-field--short"
-            value={channel}
-            onChange={handleChannelChange}
-          />
-        </fieldset-group>
-        <div className="section__actions">
-          <Button
-            button="primary"
-            type="submit"
-            disabled={nameError || !channel || creatingChannel || claimingReward}
-            label={creatingChannel || claimingReward ? __('Creating') : __('Create')}
-          />
-        </div>
-      </section>
-    </Form>
+              <FormField
+                autoFocus
+                placeholder={__('channel')}
+                type="text"
+                name="auth_first_channel"
+                className="form-field--short"
+                value={channel}
+                onChange={handleChannelChange}
+              />
+            </fieldset-group>
+            <div className="section__actions">
+              <Button
+                button="primary"
+                type="submit"
+                disabled={nameError || !channel || creatingChannel || claimingReward}
+                label={creatingChannel || claimingReward ? __('Creating') : __('Create')}
+              />
+            </div>
+          </Form>
+        }
+      />
+    </div>
   );
 }
 
diff --git a/ui/component/userSignIn/index.js b/ui/component/userSignIn/index.js
index 76be35dcf..4489862a7 100644
--- a/ui/component/userSignIn/index.js
+++ b/ui/component/userSignIn/index.js
@@ -1,55 +1,10 @@
-import * as SETTINGS from 'constants/settings';
 import { connect } from 'react-redux';
-import {
-  selectEmailToVerify,
-  selectUser,
-  selectAccessToken,
-  makeSelectIsRewardClaimPending,
-  selectClaimedRewards,
-  rewards as REWARD_TYPES,
-  doClaimRewardType,
-  doUserFetch,
-  selectUserIsPending,
-  selectYoutubeChannels,
-  selectGetSyncIsPending,
-  selectGetSyncErrorMessage,
-  selectSyncHash,
-} from 'lbryinc';
-import { selectMyChannelClaims, selectBalance, selectFetchingMyChannels, selectCreatingChannel } from 'lbry-redux';
-import { makeSelectClientSetting } from 'redux/selectors/settings';
+import { selectUser, selectUserIsPending } from 'lbryinc';
 import UserSignIn from './view';
 
 const select = state => ({
-  emailToVerify: selectEmailToVerify(state),
   user: selectUser(state),
-  accessToken: selectAccessToken(state),
-  channels: selectMyChannelClaims(state),
-  claimedRewards: selectClaimedRewards(state),
-  claimingReward: makeSelectIsRewardClaimPending()(state, {
-    reward_type: REWARD_TYPES.TYPE_CONFIRM_EMAIL,
-  }),
-  balance: selectBalance(state),
-  fetchingChannels: selectFetchingMyChannels(state),
-  youtubeChannels: selectYoutubeChannels(state),
   userFetchPending: selectUserIsPending(state),
-  syncEnabled: makeSelectClientSetting(SETTINGS.ENABLE_SYNC)(state),
-  syncingWallet: selectGetSyncIsPending(state),
-  getSyncError: selectGetSyncErrorMessage(state),
-  hasSynced: Boolean(selectSyncHash(state)),
-  creatingChannel: selectCreatingChannel(state),
 });
 
-const perform = dispatch => ({
-  fetchUser: () => dispatch(doUserFetch()),
-  claimReward: () =>
-    dispatch(
-      doClaimRewardType(REWARD_TYPES.TYPE_CONFIRM_EMAIL, {
-        notifyError: false,
-      })
-    ),
-});
-
-export default connect(
-  select,
-  perform
-)(UserSignIn);
+export default connect(select)(UserSignIn);
diff --git a/ui/component/userSignIn/view.jsx b/ui/component/userSignIn/view.jsx
index b0dc57ac9..2e6a969a0 100644
--- a/ui/component/userSignIn/view.jsx
+++ b/ui/component/userSignIn/view.jsx
@@ -1,215 +1,40 @@
 // @flow
-import * as PAGES from 'constants/pages';
 import React from 'react';
 import { withRouter } from 'react-router';
-import UserEmailNew from 'component/userEmailNew';
-import UserEmailVerify from 'component/userEmailVerify';
-import UserFirstChannel from 'component/userFirstChannel';
-import UserChannelFollowIntro from 'component/userChannelFollowIntro';
-import UserTagFollowIntro from 'component/userTagFollowIntro';
-import { DEFAULT_BID_FOR_FIRST_CHANNEL } from 'component/userFirstChannel/view';
-import { rewards as REWARDS, YOUTUBE_STATUSES } from 'lbryinc';
-import UserVerify from 'component/userVerify';
+import UserEmailReturning from 'component/userEmailReturning';
 import Spinner from 'component/spinner';
-import YoutubeTransferStatus from 'component/youtubeTransferStatus';
-import SyncPassword from 'component/syncPassword';
-import useFetched from 'effects/use-fetched';
-import usePersistedState from 'effects/use-persisted-state';
-import Confetti from 'react-confetti';
 
 type Props = {
   user: ?User,
-  emailToVerify: ?string,
-  channels: ?Array<string>,
-  balance: ?number,
-  fetchingChannels: boolean,
-  claimingReward: boolean,
-  claimReward: () => void,
-  fetchUser: () => void,
-  claimedRewards: Array<Reward>,
-  history: { replace: string => void },
+  history: { push: string => void },
   location: { search: string },
-  youtubeChannels: Array<any>,
-  syncEnabled: boolean,
-  hasSynced: boolean,
-  syncingWallet: boolean,
-  getSyncError: ?string,
-  creatingChannel: boolean,
+  userFetchPending: boolean,
 };
 
 function UserSignIn(props: Props) {
-  const {
-    emailToVerify,
-    user,
-    claimingReward,
-    claimedRewards,
-    channels,
-    claimReward,
-    balance,
-    history,
-    location,
-    fetchUser,
-    youtubeChannels,
-    syncEnabled,
-    syncingWallet,
-    getSyncError,
-    hasSynced,
-    fetchingChannels,
-    creatingChannel,
-  } = props;
+  const { user, location, history, userFetchPending } = props;
   const { search } = location;
   const urlParams = new URLSearchParams(search);
   const redirect = urlParams.get('redirect');
-  const step = urlParams.get('step');
-  const shouldRedirectImmediately = urlParams.get('immediate');
-  const [initialSignInStep, setInitialSignInStep] = React.useState();
-  const [hasSeenFollowList, setHasSeenFollowList] = usePersistedState('channel-follow-intro', false);
-  const [hasSkippedRewards, setHasSkippedRewards] = usePersistedState('skip-rewards-intro', false);
-  const [hasSeenTagsList, setHasSeenTagsList] = usePersistedState('channel-follow-intro', false);
-  const hasVerifiedEmail = user && user.has_verified_email;
-  const rewardsApproved = user && user.is_reward_approved;
-  const isIdentityVerified = user && user.is_identity_verified;
-  const hasFetchedReward = useFetched(claimingReward);
-  const channelCount = channels ? channels.length : 0;
-  const hasClaimedEmailAward = claimedRewards.some(reward => reward.reward_type === REWARDS.TYPE_CONFIRM_EMAIL);
-  const hasYoutubeChannels = youtubeChannels && Boolean(youtubeChannels.length);
-  const isYoutubeTransferComplete =
-    hasYoutubeChannels &&
-    youtubeChannels.every(channel => channel.transfer_state === YOUTUBE_STATUSES.COMPLETED_TRANSFER);
-
-  // Complexity warning
-  // We can't just check if we are currently fetching something
-  // We may want to keep a component rendered while something is being fetched, instead of replacing it with the large spinner
-  // The verbose variable names are an attempt to alleviate _some_ of the confusion from handling all edge cases that come from
-  // reward claiming, channel creation, account syncing, and youtube transfer
-  // The possible screens for the sign in flow
-  const showEmail = !emailToVerify && !hasVerifiedEmail;
-  const showEmailVerification = emailToVerify && !hasVerifiedEmail;
-  const showUserVerification = hasVerifiedEmail && !rewardsApproved && !isIdentityVerified && !hasSkippedRewards;
-  const showSyncPassword = syncEnabled && getSyncError;
-  const showChannelCreation =
-    hasVerifiedEmail &&
-    balance !== undefined &&
-    balance !== null &&
-    balance > DEFAULT_BID_FOR_FIRST_CHANNEL &&
-    channelCount === 0 &&
-    !hasYoutubeChannels;
-  const showYoutubeTransfer = hasVerifiedEmail && hasYoutubeChannels && !isYoutubeTransferComplete;
-  const showFollowIntro = step === 'channels' || (hasVerifiedEmail && !hasSeenFollowList);
-  const showTagsIntro = step === 'tags' || (hasVerifiedEmail && !hasSeenTagsList);
-  const canHijackSignInFlowWithSpinner = hasVerifiedEmail && !getSyncError && !showFollowIntro;
-  const isCurrentlyFetchingSomething = fetchingChannels || claimingReward || syncingWallet || creatingChannel;
-  const isWaitingForSomethingToFinish =
-    // If the user has claimed the email award, we need to wait until the balance updates sometime in the future
-    (!hasFetchedReward && !hasClaimedEmailAward) || (syncEnabled && !hasSynced);
-  const showLoadingSpinner =
-    canHijackSignInFlowWithSpinner && (isCurrentlyFetchingSomething || isWaitingForSomethingToFinish);
+  const showUserEmail = user && !user.password_set && !user.has_verified_email;
+  const showLoading = userFetchPending;
 
   React.useEffect(() => {
-    fetchUser();
-  }, [fetchUser]);
-
-  React.useEffect(() => {
-    // Don't claim the reward if sync is enabled until after a sync has been completed successfully
-    // If we do it before, we could end up trying to sync a wallet with a non-zero balance which will fail to sync
-    const delayForSync = syncEnabled && !hasSynced;
-
-    if (hasVerifiedEmail && !hasClaimedEmailAward && !hasFetchedReward && !delayForSync) {
-      claimReward();
+    if (!showUserEmail) {
+      history.push(redirect || '/');
     }
-  }, [hasVerifiedEmail, claimReward, hasClaimedEmailAward, hasFetchedReward, syncEnabled, hasSynced, balance]);
+  }, [showUserEmail]);
 
-  // Loop through this list from the end, until it finds a matching component
-  // If it never finds one, assume the user has completed every step and redirect them
-  const SIGN_IN_FLOW = [
-    showEmail && <UserEmailNew />,
-    showEmailVerification && <UserEmailVerify />,
-    showUserVerification && <UserVerify onSkip={() => setHasSkippedRewards(true)} />,
-    showChannelCreation && <UserFirstChannel />,
-    showFollowIntro && (
-      <UserChannelFollowIntro
-        onContinue={() => {
-          let url = `/$/${PAGES.AUTH}?reset_scroll=1`;
-          if (redirect) {
-            url += `&redirect=${redirect}`;
-          }
-          if (shouldRedirectImmediately) {
-            url += `&immediate=true`;
-          }
-
-          history.replace(url);
-          setHasSeenFollowList(true);
-        }}
-        onBack={() => {
-          let url = `/$/${PAGES.AUTH}?reset_scroll=1&step=tags`;
-          if (redirect) {
-            url += `&redirect=${redirect}`;
-          }
-          if (shouldRedirectImmediately) {
-            url += `&immediate=true`;
-          }
-
-          history.replace(url);
-          setHasSeenFollowList(false);
-        }}
-      />
-    ),
-    showTagsIntro && (
-      <UserTagFollowIntro
-        onContinue={() => {
-          let url = `/$/${PAGES.AUTH}?reset_scroll=1&step=channels`;
-          if (redirect) {
-            url += `&redirect=${redirect}`;
-          }
-          if (shouldRedirectImmediately) {
-            url += `&immediate=true`;
-          }
-
-          history.replace(url);
-          setHasSeenTagsList(true);
-        }}
-      />
-    ),
-    showYoutubeTransfer && (
-      <div>
-        <YoutubeTransferStatus /> <Confetti recycle={false} style={{ position: 'fixed' }} />
-      </div>
-    ),
-    showSyncPassword && <SyncPassword />,
-    showLoadingSpinner && (
-      <div className="main--empty">
-        <Spinner />
-      </div>
-    ),
-  ];
-
-  function getSignInStep() {
-    for (var i = SIGN_IN_FLOW.length - 1; i > -1; i--) {
-      const Component = SIGN_IN_FLOW[i];
-      if (Component) {
-        // If we want to redirect immediately,
-        // remember the first step so we can redirect once a new step has been reached
-        // Ignore the loading step
-        if (redirect && shouldRedirectImmediately) {
-          if (!initialSignInStep) {
-            setInitialSignInStep(i);
-          } else if (i !== initialSignInStep && i !== SIGN_IN_FLOW.length - 1) {
-            history.replace(redirect);
-          }
-        }
-
-        return Component;
-      }
-    }
-  }
-
-  const componentToRender = getSignInStep();
-
-  if (!componentToRender) {
-    history.replace(redirect || '/');
-  }
-
-  return <section className="main--contained">{componentToRender}</section>;
+  return (
+    <section className="main--contained">
+      {!showLoading && <div>{showUserEmail && <UserEmailReturning />}</div>}
+      {showLoading && (
+        <div className="main--empty">
+          <Spinner />
+        </div>
+      )}
+    </section>
+  );
 }
 
 export default withRouter(UserSignIn);
diff --git a/ui/component/userSignUp/index.js b/ui/component/userSignUp/index.js
new file mode 100644
index 000000000..deaeb731c
--- /dev/null
+++ b/ui/component/userSignUp/index.js
@@ -0,0 +1,52 @@
+import * as SETTINGS from 'constants/settings';
+import { connect } from 'react-redux';
+import {
+  selectEmailToVerify,
+  selectUser,
+  selectAccessToken,
+  makeSelectIsRewardClaimPending,
+  selectClaimedRewards,
+  rewards as REWARD_TYPES,
+  doClaimRewardType,
+  doUserFetch,
+  selectUserIsPending,
+  selectYoutubeChannels,
+  selectGetSyncIsPending,
+  selectGetSyncErrorMessage,
+  selectSyncHash,
+} from 'lbryinc';
+import { selectMyChannelClaims, selectBalance, selectFetchingMyChannels, selectCreatingChannel } from 'lbry-redux';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
+import UserSignIn from './view';
+
+const select = state => ({
+  emailToVerify: selectEmailToVerify(state),
+  user: selectUser(state),
+  accessToken: selectAccessToken(state),
+  channels: selectMyChannelClaims(state),
+  claimedRewards: selectClaimedRewards(state),
+  claimingReward: makeSelectIsRewardClaimPending()(state, {
+    reward_type: REWARD_TYPES.TYPE_CONFIRM_EMAIL,
+  }),
+  balance: selectBalance(state),
+  fetchingChannels: selectFetchingMyChannels(state),
+  youtubeChannels: selectYoutubeChannels(state),
+  userFetchPending: selectUserIsPending(state),
+  syncEnabled: makeSelectClientSetting(SETTINGS.ENABLE_SYNC)(state),
+  syncingWallet: selectGetSyncIsPending(state),
+  getSyncError: selectGetSyncErrorMessage(state),
+  hasSynced: Boolean(selectSyncHash(state)),
+  creatingChannel: selectCreatingChannel(state),
+});
+
+const perform = dispatch => ({
+  fetchUser: () => dispatch(doUserFetch()),
+  claimReward: () =>
+    dispatch(
+      doClaimRewardType(REWARD_TYPES.TYPE_CONFIRM_EMAIL, {
+        notifyError: false,
+      })
+    ),
+});
+
+export default connect(select, perform)(UserSignIn);
diff --git a/ui/component/userSignUp/view.jsx b/ui/component/userSignUp/view.jsx
new file mode 100644
index 000000000..3b20c3dd5
--- /dev/null
+++ b/ui/component/userSignUp/view.jsx
@@ -0,0 +1,215 @@
+// @flow
+import * as PAGES from 'constants/pages';
+import React from 'react';
+import { withRouter } from 'react-router';
+import UserEmailNew from 'component/userEmailNew';
+import UserEmailVerify from 'component/userEmailVerify';
+import UserFirstChannel from 'component/userFirstChannel';
+import UserChannelFollowIntro from 'component/userChannelFollowIntro';
+import UserTagFollowIntro from 'component/userTagFollowIntro';
+import { DEFAULT_BID_FOR_FIRST_CHANNEL } from 'component/userFirstChannel/view';
+import { rewards as REWARDS, YOUTUBE_STATUSES } from 'lbryinc';
+import UserVerify from 'component/userVerify';
+import Spinner from 'component/spinner';
+import YoutubeTransferStatus from 'component/youtubeTransferStatus';
+import SyncPassword from 'component/syncPassword';
+import useFetched from 'effects/use-fetched';
+import usePersistedState from 'effects/use-persisted-state';
+import Confetti from 'react-confetti';
+
+type Props = {
+  user: ?User,
+  emailToVerify: ?string,
+  channels: ?Array<string>,
+  balance: ?number,
+  fetchingChannels: boolean,
+  claimingReward: boolean,
+  claimReward: () => void,
+  fetchUser: () => void,
+  claimedRewards: Array<Reward>,
+  history: { replace: string => void },
+  location: { search: string },
+  youtubeChannels: Array<any>,
+  syncEnabled: boolean,
+  hasSynced: boolean,
+  syncingWallet: boolean,
+  getSyncError: ?string,
+  creatingChannel: boolean,
+};
+
+function UserSignIn(props: Props) {
+  const {
+    emailToVerify,
+    user,
+    claimingReward,
+    claimedRewards,
+    channels,
+    claimReward,
+    balance,
+    history,
+    location,
+    fetchUser,
+    youtubeChannels,
+    syncEnabled,
+    syncingWallet,
+    getSyncError,
+    hasSynced,
+    fetchingChannels,
+    creatingChannel,
+  } = props;
+  const { search } = location;
+  const urlParams = new URLSearchParams(search);
+  const redirect = urlParams.get('redirect');
+  const step = urlParams.get('step');
+  const shouldRedirectImmediately = urlParams.get('immediate');
+  const [initialSignInStep, setInitialSignInStep] = React.useState();
+  const [hasSeenFollowList, setHasSeenFollowList] = usePersistedState('channel-follow-intro', false);
+  const [hasSkippedRewards, setHasSkippedRewards] = usePersistedState('skip-rewards-intro', false);
+  const [hasSeenTagsList, setHasSeenTagsList] = usePersistedState('channel-follow-intro', false);
+  const hasVerifiedEmail = user && user.has_verified_email;
+  const rewardsApproved = user && user.is_reward_approved;
+  const isIdentityVerified = user && user.is_identity_verified;
+  const hasFetchedReward = useFetched(claimingReward);
+  const channelCount = channels ? channels.length : 0;
+  const hasClaimedEmailAward = claimedRewards.some(reward => reward.reward_type === REWARDS.TYPE_CONFIRM_EMAIL);
+  const hasYoutubeChannels = youtubeChannels && Boolean(youtubeChannels.length);
+  const isYoutubeTransferComplete =
+    hasYoutubeChannels &&
+    youtubeChannels.every(channel => channel.transfer_state === YOUTUBE_STATUSES.COMPLETED_TRANSFER);
+
+  // Complexity warning
+  // We can't just check if we are currently fetching something
+  // We may want to keep a component rendered while something is being fetched, instead of replacing it with the large spinner
+  // The verbose variable names are an attempt to alleviate _some_ of the confusion from handling all edge cases that come from
+  // reward claiming, channel creation, account syncing, and youtube transfer
+  // The possible screens for the sign in flow
+  const showEmail = !hasVerifiedEmail;
+  const showEmailVerification = emailToVerify && !hasVerifiedEmail;
+  const showUserVerification = hasVerifiedEmail && !rewardsApproved && !isIdentityVerified && !hasSkippedRewards;
+  const showSyncPassword = syncEnabled && getSyncError;
+  const showChannelCreation =
+    hasVerifiedEmail &&
+    balance !== undefined &&
+    balance !== null &&
+    balance > DEFAULT_BID_FOR_FIRST_CHANNEL &&
+    channelCount === 0 &&
+    !hasYoutubeChannels;
+  const showYoutubeTransfer = hasVerifiedEmail && hasYoutubeChannels && !isYoutubeTransferComplete;
+  const showFollowIntro = step === 'channels' || (hasVerifiedEmail && !hasSeenFollowList);
+  const showTagsIntro = step === 'tags' || (hasVerifiedEmail && !hasSeenTagsList);
+  const canHijackSignInFlowWithSpinner = hasVerifiedEmail && !getSyncError && !showFollowIntro;
+  const isCurrentlyFetchingSomething = fetchingChannels || claimingReward || syncingWallet || creatingChannel;
+  const isWaitingForSomethingToFinish =
+    // If the user has claimed the email award, we need to wait until the balance updates sometime in the future
+    (!hasFetchedReward && !hasClaimedEmailAward) || (syncEnabled && !hasSynced);
+  const showLoadingSpinner =
+    canHijackSignInFlowWithSpinner && (isCurrentlyFetchingSomething || isWaitingForSomethingToFinish);
+
+  React.useEffect(() => {
+    fetchUser();
+  }, [fetchUser]);
+
+  React.useEffect(() => {
+    // Don't claim the reward if sync is enabled until after a sync has been completed successfully
+    // If we do it before, we could end up trying to sync a wallet with a non-zero balance which will fail to sync
+    const delayForSync = syncEnabled && !hasSynced;
+
+    if (hasVerifiedEmail && !hasClaimedEmailAward && !hasFetchedReward && !delayForSync) {
+      claimReward();
+    }
+  }, [hasVerifiedEmail, claimReward, hasClaimedEmailAward, hasFetchedReward, syncEnabled, hasSynced, balance]);
+
+  // Loop through this list from the end, until it finds a matching component
+  // If it never finds one, assume the user has completed every step and redirect them
+  const SIGN_IN_FLOW = [
+    showEmail && <UserEmailNew />,
+    showEmailVerification && <UserEmailVerify />,
+    showUserVerification && <UserVerify onSkip={() => setHasSkippedRewards(true)} />,
+    showChannelCreation && <UserFirstChannel />,
+    showFollowIntro && (
+      <UserChannelFollowIntro
+        onContinue={() => {
+          let url = `/$/${PAGES.AUTH}?reset_scroll=1`;
+          if (redirect) {
+            url += `&redirect=${redirect}`;
+          }
+          if (shouldRedirectImmediately) {
+            url += `&immediate=true`;
+          }
+
+          history.replace(url);
+          setHasSeenFollowList(true);
+        }}
+        onBack={() => {
+          let url = `/$/${PAGES.AUTH}?reset_scroll=1&step=tags`;
+          if (redirect) {
+            url += `&redirect=${redirect}`;
+          }
+          if (shouldRedirectImmediately) {
+            url += `&immediate=true`;
+          }
+
+          history.replace(url);
+          setHasSeenFollowList(false);
+        }}
+      />
+    ),
+    showTagsIntro && (
+      <UserTagFollowIntro
+        onContinue={() => {
+          let url = `/$/${PAGES.AUTH}?reset_scroll=1&step=channels`;
+          if (redirect) {
+            url += `&redirect=${redirect}`;
+          }
+          if (shouldRedirectImmediately) {
+            url += `&immediate=true`;
+          }
+
+          history.replace(url);
+          setHasSeenTagsList(true);
+        }}
+      />
+    ),
+    showYoutubeTransfer && (
+      <div>
+        <YoutubeTransferStatus /> <Confetti recycle={false} style={{ position: 'fixed' }} />
+      </div>
+    ),
+    showSyncPassword && <SyncPassword />,
+    showLoadingSpinner && (
+      <div className="main--empty">
+        <Spinner />
+      </div>
+    ),
+  ];
+
+  function getSignInStep() {
+    for (var i = SIGN_IN_FLOW.length - 1; i > -1; i--) {
+      const Component = SIGN_IN_FLOW[i];
+      if (Component) {
+        // If we want to redirect immediately,
+        // remember the first step so we can redirect once a new step has been reached
+        // Ignore the loading step
+        if (redirect && shouldRedirectImmediately) {
+          if (!initialSignInStep) {
+            setInitialSignInStep(i);
+          } else if (i !== initialSignInStep && i !== SIGN_IN_FLOW.length - 1) {
+            history.replace(redirect);
+          }
+        }
+
+        return Component;
+      }
+    }
+  }
+
+  const componentToRender = getSignInStep();
+
+  if (!componentToRender) {
+    history.replace(redirect || '/');
+  }
+
+  return <section className="main--contained">{componentToRender}</section>;
+}
+
+export default withRouter(UserSignIn);
diff --git a/ui/component/userTagFollowIntro/view.jsx b/ui/component/userTagFollowIntro/view.jsx
index 9a7ad8d9e..9d5f2318f 100644
--- a/ui/component/userTagFollowIntro/view.jsx
+++ b/ui/component/userTagFollowIntro/view.jsx
@@ -4,6 +4,7 @@ import Nag from 'component/common/nag';
 import TagsSelect from 'component/tagsSelect';
 import Button from 'component/button';
 import { Form } from 'component/common/form';
+import Card from 'component/common/card';
 
 type Props = {
   subscribedChannels: Array<Subscription>,
@@ -16,36 +17,40 @@ function UserChannelFollowIntro(props: Props) {
   const followingCount = (followedTags && followedTags.length) || 0;
 
   return (
-    <React.Fragment>
-      <h1 className="section__title--large">{__('Tag Selection')}</h1>
-      <p className="section__subtitle">{__('Select some tags to help us show you interesting things.')}</p>
-      <Form onSubmit={onContinue} className="section__body">
-        <div className="card__actions">
-          <Button
-            button="primary"
-            type="Submit"
-            onClick={onContinue}
-            label={__('Continue')}
-            disabled={followedTags.length < 1}
-          />
-        </div>
-      </Form>
-      <div className="section__body">
-        <TagsSelect hideHeader limitShow={300} help={false} showClose={false} title={__('Follow New Tags')} />
-        {followingCount > 0 && (
-          <Nag
-            type="helpful"
-            message={
-              followingCount === 1
-                ? __('You are currently following %followingCount% tag', { followingCount })
-                : __('You are currently following %followingCount% tags', { followingCount })
-            }
-            actionText={__('Continue')}
-            onClick={onContinue}
-          />
-        )}
-      </div>
-    </React.Fragment>
+    <Card
+      title={__('Tag Selection')}
+      subtitle={__('Select some tags to help us show you interesting things.')}
+      actions={
+        <React.Fragment>
+          <Form onSubmit={onContinue}>
+            <div className="section__actions">
+              <Button
+                button="primary"
+                type="Submit"
+                onClick={onContinue}
+                label={__('Continue')}
+                disabled={followedTags.length < 1}
+              />
+            </div>
+          </Form>
+          <div className="section__body">
+            <TagsSelect hideHeader limitShow={300} help={false} showClose={false} title={__('Follow New Tags')} />
+            {followingCount > 0 && (
+              <Nag
+                type="helpful"
+                message={
+                  followingCount === 1
+                    ? __('You are currently following %followingCount% tag', { followingCount })
+                    : __('You are currently following %followingCount% tags', { followingCount })
+                }
+                actionText={__('Continue')}
+                onClick={onContinue}
+              />
+            )}
+          </div>
+        </React.Fragment>
+      }
+    />
   );
 }
 
diff --git a/ui/component/userVerify/view.jsx b/ui/component/userVerify/view.jsx
index 7d91b733e..83149ff50 100644
--- a/ui/component/userVerify/view.jsx
+++ b/ui/component/userVerify/view.jsx
@@ -92,7 +92,7 @@ class UserVerify extends React.PureComponent<Props> {
             )}
             actions={
               <Fragment>
-                {errorMessage && <p className="error-text">{errorMessage}</p>}
+                {errorMessage && <p className="error__text">{errorMessage}</p>}
                 <CardVerify
                   label={__('Verify Card')}
                   disabled={isPending}
diff --git a/ui/component/walletSend/view.jsx b/ui/component/walletSend/view.jsx
index caa8e27a5..49f04cb62 100644
--- a/ui/component/walletSend/view.jsx
+++ b/ui/component/walletSend/view.jsx
@@ -90,7 +90,7 @@ class WalletSend extends React.PureComponent<Props> {
                     }
                   />
                   {!!Object.keys(errors).length || (
-                    <span className="error-text">
+                    <span className="error__text">
                       {(!!values.address && touched.address && errors.address) ||
                         (!!values.amount && touched.amount && errors.amount) ||
                         (parseFloat(values.amount) === balance &&
diff --git a/ui/constants/icons.js b/ui/constants/icons.js
index 1f4cb3c6d..fb30439e0 100644
--- a/ui/constants/icons.js
+++ b/ui/constants/icons.js
@@ -84,6 +84,7 @@ export const EYE = 'Eye';
 export const EYE_OFF = 'EyeOff';
 export const SIGN_OUT = 'SignOut';
 export const SIGN_IN = 'SignIn';
+export const SIGN_UP = 'Key';
 export const TRENDING = 'Trending';
 export const TOP = 'Top';
 export const NEW = 'New';
diff --git a/ui/constants/pages.js b/ui/constants/pages.js
index 00bbcf6fa..748078c5a 100644
--- a/ui/constants/pages.js
+++ b/ui/constants/pages.js
@@ -1,4 +1,5 @@
-exports.AUTH = 'signin';
+exports.AUTH = 'signup';
+exports.AUTH_SIGNIN = 'signin';
 exports.AUTH_VERIFY = 'verify';
 exports.BACKUP = 'backup';
 exports.CHANNEL = 'channel';
diff --git a/ui/modal/modalRemoveFile/view.jsx b/ui/modal/modalRemoveFile/view.jsx
index 2b5e70db5..971f173fb 100644
--- a/ui/modal/modalRemoveFile/view.jsx
+++ b/ui/modal/modalRemoveFile/view.jsx
@@ -55,7 +55,7 @@ function ModalRemoveFile(props: Props) {
                   onChange={() => setAbandonChecked(!abandonChecked)}
                 />
                 {abandonChecked === true && (
-                  <p className="help error-text">This action is permanent and cannot be undone.</p>
+                  <p className="help error__text">This action is permanent and cannot be undone.</p>
                 )}
 
                 {/* @if TARGET='app' */}
diff --git a/ui/modal/modalRevokeClaim/view.jsx b/ui/modal/modalRevokeClaim/view.jsx
index 15aeab54f..c3243b4d9 100644
--- a/ui/modal/modalRevokeClaim/view.jsx
+++ b/ui/modal/modalRevokeClaim/view.jsx
@@ -71,7 +71,7 @@ export default function ModalRevokeClaim(props: Props) {
             'This will prevent others from resolving and accessing the content you published. It will return the LBC to your spendable balance, less a small transaction fee.'
           )}
         </p>
-        <p className="help error-text"> {__('FINAL WARNING: This action is permanent and cannot be undone.')}</p>
+        <p className="help error__text"> {__('FINAL WARNING: This action is permanent and cannot be undone.')}</p>
       </React.Fragment>
     );
   }
diff --git a/ui/modal/modalWalletEncrypt/view.jsx b/ui/modal/modalWalletEncrypt/view.jsx
index 53e0fbf1b..39ed8f986 100644
--- a/ui/modal/modalWalletEncrypt/view.jsx
+++ b/ui/modal/modalWalletEncrypt/view.jsx
@@ -168,7 +168,7 @@ class ModalWalletEncrypt extends React.PureComponent<Props, State> {
             name="wallet-understand"
             onChange={event => this.onChangeUnderstandConfirm(event)}
           />
-          {failMessage && <div className="error-text">{__(failMessage)}</div>}
+          {failMessage && <div className="error__text">{__(failMessage)}</div>}
         </Form>
         <div className="card__actions">
           <Button button="link" label={__('Cancel')} onClick={closeModal} />
diff --git a/ui/page/rewards/view.jsx b/ui/page/rewards/view.jsx
index f1c8a4cd3..cd373b847 100644
--- a/ui/page/rewards/view.jsx
+++ b/ui/page/rewards/view.jsx
@@ -94,7 +94,7 @@ class RewardsPage extends PureComponent<Props> {
       return (
         <section className="card card--section">
           <h2 className="card__title card__title--deprecated">{__('Rewards Disabled')}</h2>
-          <p className="error-text">
+          <p className="error__text">
             <I18nMessage tokens={{ settings: <Button button="link" navigate="/$/settings" label="Settings" /> }}>
               Rewards are currently disabled for your account. Turn on diagnostic data sharing, in %settings%, to
               re-enable them.
diff --git a/ui/page/signUp/index.js b/ui/page/signUp/index.js
new file mode 100644
index 000000000..34488a69e
--- /dev/null
+++ b/ui/page/signUp/index.js
@@ -0,0 +1,7 @@
+import { connect } from 'react-redux';
+import SignUpPage from './view';
+
+const select = () => ({});
+const perform = () => ({});
+
+export default connect(select, perform)(SignUpPage);
diff --git a/ui/page/signUp/view.jsx b/ui/page/signUp/view.jsx
new file mode 100644
index 000000000..a2e505a25
--- /dev/null
+++ b/ui/page/signUp/view.jsx
@@ -0,0 +1,12 @@
+// @flow
+import React from 'react';
+import UserSignUp from 'component/userSignUp';
+import Page from 'component/page';
+
+export default function SignUpPage() {
+  return (
+    <Page authPage className="main--auth-page">
+      <UserSignUp />
+    </Page>
+  );
+}
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index 414087c2c..24fd3d168 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -245,3 +245,8 @@
     margin-bottom: var(--spacing-small);
   }
 }
+
+.card__bottom-gutter {
+  @extend .help;
+  margin-top: var(--spacing-medium);
+}
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index 9b5ea21b8..298374211 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -95,6 +95,11 @@
     margin-right: var(--spacing-medium);
   }
 
+  .channel-thumbnail {
+    width: 6rem;
+    height: 6rem;
+  }
+
   &:hover {
     .claim-preview__hover-actions {
       display: block;
diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss
index a7c499716..a46e5eca4 100644
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@@ -181,3 +181,12 @@
   margin-top: 0;
   margin-left: var(--spacing-small);
 }
+
+.header__auth-buttons {
+  display: flex;
+  align-items: center;
+
+  & > *:not(:last-child) {
+    margin-right: var(--spacing-small);
+  }
+}
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index eceb06304..524e84d00 100644
--- a/ui/scss/component/_main.scss
+++ b/ui/scss/component/_main.scss
@@ -34,7 +34,7 @@
 }
 
 .main--auth-page {
-  max-width: 60rem;
+  max-width: 70rem;
   margin-top: var(--spacing-main-padding);
   margin-left: auto;
   margin-right: auto;
@@ -61,11 +61,10 @@
 
 .main--contained {
   margin: auto;
-  margin-top: 2rem;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  max-width: 40rem;
+  max-width: 50rem;
   text-align: left;
 
   & > * {
@@ -76,3 +75,21 @@
 .main--full-width {
   width: 100%;
 }
+
+.main__sign-in {
+  max-width: 27rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.main__sign-up {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 35rem;
+}
+
+.main__channel-creation {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 32rem;
+}
diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss
index 15a332ea8..1e28a025a 100644
--- a/ui/scss/component/section.scss
+++ b/ui/scss/component/section.scss
@@ -1,9 +1,8 @@
 .section {
   position: relative;
-  margin-top: var(--spacing-large);
 
-  &:first-of-type {
-    margin-top: 0;
+  ~ .section {
+    margin-top: var(--spacing-large);
   }
 }
 
@@ -51,6 +50,12 @@
   }
 }
 
+.section__subtitle {
+  color: var(--color-text-subtitle);
+  margin: var(--spacing-small) 0;
+  font-size: var(--font-body);
+}
+
 .section__subtitle--status {
   @extend .section__subtitle;
   padding: var(--spacing-small);
@@ -82,6 +87,29 @@
   margin-top: var(--spacing-medium);
 }
 
+.section__actions {
+  display: flex;
+  align-items: center;
+  margin-top: var(--spacing-large);
+
+  &:only-child,
+  &:first-child {
+    margin-top: 0;
+  }
+
+  > *:not(:last-child) {
+    margin-right: var(--spacing-medium);
+  }
+
+  @media (max-width: $breakpoint-small) {
+    flex-wrap: wrap;
+
+    > * {
+      margin-bottom: var(--spacing-small);
+    }
+  }
+}
+
 .section__actions--centered {
   @extend .section__actions;
   justify-content: center;
@@ -94,13 +122,3 @@
 .section__actions--no-margin {
   margin-top: 0;
 }
-
-@media (max-width: $breakpoint-small) {
-  .section__actions {
-    flex-wrap: wrap;
-
-    > * {
-      margin-bottom: var(--spacing-small);
-    }
-  }
-}
diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss
index 0b3a91316..ec397074b 100644
--- a/ui/scss/init/_gui.scss
+++ b/ui/scss/init/_gui.scss
@@ -238,13 +238,13 @@ img {
   }
 }
 
-.error-wrapper {
+.error__wrapper {
   background-color: var(--color-error);
   padding: var(--spacing-small);
   border-radius: var(--border-radius);
 }
 
-.error-text {
+.error__text {
   color: var(--color-text-error);
 }
 
diff --git a/ui/scss/themes/light.scss b/ui/scss/themes/light.scss
index f2d94f9e6..031f0fa10 100644
--- a/ui/scss/themes/light.scss
+++ b/ui/scss/themes/light.scss
@@ -6,7 +6,7 @@
   --color-header-button: #f7f7f7;
 
   // Color
-  --color-background: #f7f7f7;
+  --color-background: #f9f9f9;
   --color-background--splash: #212529;
   --color-border: #ededed;
   --color-background-overlay: #21252980;
diff --git a/yarn.lock b/yarn.lock
index 3df2c0411..e0bea8e95 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -819,10 +819,10 @@
     prop-types "^15.6.2"
     scheduler "^0.18.0"
 
-"@lbry/components@^4.0.1":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-4.0.1.tgz#8dcf7348920383d854c0db640faaf1ac5a72f7ef"
-  integrity sha512-vY84ziZ9EaXoezDBK2VsajvXcSPXDV0fr1VWn2w0iHkGa756RWvNySpnqaKMZH+myK12mvNNc/NkGIW5oO7+5w==
+"@lbry/components@^4.1.1":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-4.1.1.tgz#5830fa0321565965ede3c48ff39518cb24691b3a"
+  integrity sha512-XgeA6q4vnmRHNkM4M5BddRqsIn9DkLgozjhoGuY5j1hnQcyYim3X+pxa7IASL/iS8jOre9JzPDp1bG0HaRgF8w==
 
 "@mapbox/hast-util-table-cell-style@^0.1.3":
   version "0.1.3"
@@ -6147,9 +6147,9 @@ lbry-redux@lbryio/lbry-redux#1097a63d44a20b87e443fbaa48f95fe3ea5e3f70:
     reselect "^3.0.0"
     uuid "^3.3.2"
 
-lbryinc@lbryio/lbryinc#0addc624db54000b0447f4539f91f5758d26eef3:
+lbryinc@lbryio/lbryinc#d6203bbea2ceb805465d20198adbdf7759f896a8:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/0addc624db54000b0447f4539f91f5758d26eef3"
+  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/d6203bbea2ceb805465d20198adbdf7759f896a8"
   dependencies:
     reselect "^3.0.0"
 
-- 
2.45.3


From 7b6cf8125686e95959b51ae0a4a9d36a749f16d8 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 7 Apr 2020 15:48:06 -0400
Subject: [PATCH 02/15] cleanup and password reset

---
 package.json                             |  2 +-
 ui/component/common/error-text.jsx       | 12 +++-
 ui/component/router/view.jsx             |  4 ++
 ui/component/userEmailNew/index.js       |  9 ++-
 ui/component/userEmailNew/view.jsx       | 20 ++++--
 ui/component/userEmailReturning/view.jsx | 22 +++---
 ui/component/userPasswordReset/index.js  | 18 +++++
 ui/component/userPasswordReset/view.jsx  | 80 ++++++++++++++++++++++
 ui/component/userPasswordSet/index.js    | 13 ++++
 ui/component/userPasswordSet/view.jsx    | 87 ++++++++++++++++++++++++
 ui/constants/pages.js                    |  2 +
 ui/page/passwordReset/index.js           |  3 +
 ui/page/passwordReset/view.jsx           | 12 ++++
 ui/page/passwordSet/index.js             |  3 +
 ui/page/passwordSet/view.jsx             | 12 ++++
 ui/page/signIn/index.js                  | 11 +--
 ui/page/signUp/index.js                  |  6 +-
 ui/scss/component/_card.scss             | 20 ++----
 ui/scss/component/_header.scss           |  3 +-
 ui/scss/component/section.scss           |  5 ++
 yarn.lock                                |  4 +-
 21 files changed, 298 insertions(+), 50 deletions(-)
 create mode 100644 ui/component/userPasswordReset/index.js
 create mode 100644 ui/component/userPasswordReset/view.jsx
 create mode 100644 ui/component/userPasswordSet/index.js
 create mode 100644 ui/component/userPasswordSet/view.jsx
 create mode 100644 ui/page/passwordReset/index.js
 create mode 100644 ui/page/passwordReset/view.jsx
 create mode 100644 ui/page/passwordSet/index.js
 create mode 100644 ui/page/passwordSet/view.jsx

diff --git a/package.json b/package.json
index 35e1abc63..ba8e3188a 100644
--- a/package.json
+++ b/package.json
@@ -131,7 +131,7 @@
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
     "lbry-redux": "lbryio/lbry-redux#1097a63d44a20b87e443fbaa48f95fe3ea5e3f70",
-    "lbryinc": "lbryio/lbryinc#d6203bbea2ceb805465d20198adbdf7759f896a8",
+    "lbryinc": "lbryio/lbryinc#d7168f9faef85002f7f0c267f65dddd83b9a2952",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",
     "lodash-es": "^4.17.14",
diff --git a/ui/component/common/error-text.jsx b/ui/component/common/error-text.jsx
index 9d99c78de..a9a2c34ab 100644
--- a/ui/component/common/error-text.jsx
+++ b/ui/component/common/error-text.jsx
@@ -2,11 +2,19 @@
 import React from 'react';
 
 type Props = {
-  children: any,
+  children: string,
 };
 
 export default function ErrorText(props: Props) {
   const { children } = props;
 
-  return <span className="error__text">{children}</span>;
+  if (!children) {
+    return null;
+  }
+
+  // Add a period to the end of error messages
+  let errorMessage = children[0].toUpperCase() + children.slice(1);
+  errorMessage = errorMessage.endsWith('.') ? errorMessage : `${errorMessage}.`;
+
+  return <span className="error__text">{errorMessage}</span>;
 }
diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx
index 5c5efe9a1..0ccf89aae 100644
--- a/ui/component/router/view.jsx
+++ b/ui/component/router/view.jsx
@@ -29,6 +29,8 @@ import ListBlockedPage from 'page/listBlocked';
 import FourOhFourPage from 'page/fourOhFour';
 import SignInPage from 'page/signIn';
 import SignUpPage from 'page/signUp';
+import PasswordResetPage from 'page/passwordReset';
+import PasswordSetPage from 'page/passwordSet';
 import SignInVerifyPage from 'page/signInVerify';
 import ChannelsPage from 'page/channels';
 import EmbedWrapperPage from 'page/embedWrapper';
@@ -154,6 +156,8 @@ function AppRouter(props: Props) {
       <Route path={`/`} exact component={HomePage} />
       <Route path={`/$/${PAGES.DISCOVER}`} exact component={DiscoverPage} />
       <Route path={`/$/${PAGES.AUTH_SIGNIN}`} exact component={SignInPage} />
+      <Route path={`/$/${PAGES.AUTH_PASSWORD_RESET}`} exact component={PasswordResetPage} />
+      <Route path={`/$/${PAGES.AUTH_PASSWORD_SET}`} exact component={PasswordSetPage} />
       <Route path={`/$/${PAGES.AUTH}`} exact component={SignUpPage} />
       <Route path={`/$/${PAGES.AUTH}/*`} exact component={SignUpPage} />
       <Route path={`/$/${PAGES.WELCOME}`} exact component={Welcome} />
diff --git a/ui/component/userEmailNew/index.js b/ui/component/userEmailNew/index.js
index 8512cf7ff..093aba824 100644
--- a/ui/component/userEmailNew/index.js
+++ b/ui/component/userEmailNew/index.js
@@ -1,6 +1,12 @@
 import * as SETTINGS from 'constants/settings';
 import { connect } from 'react-redux';
-import { selectEmailNewIsPending, selectEmailNewErrorMessage, doUserSignUp, doClearEmailError } from 'lbryinc';
+import {
+  selectEmailNewIsPending,
+  selectEmailNewErrorMessage,
+  selectEmailAlreadyExists,
+  doUserSignUp,
+  doClearEmailError,
+} from 'lbryinc';
 import { DAEMON_SETTINGS } from 'lbry-redux';
 import { doSetClientSetting, doSetDaemonSetting } from 'redux/actions/settings';
 import { makeSelectClientSetting, selectDaemonSettings } from 'redux/selectors/settings';
@@ -11,6 +17,7 @@ const select = state => ({
   errorMessage: selectEmailNewErrorMessage(state),
   syncEnabled: makeSelectClientSetting(SETTINGS.ENABLE_SYNC)(state),
   daemonSettings: selectDaemonSettings(state),
+  emailExists: selectEmailAlreadyExists(state),
 });
 
 const perform = dispatch => ({
diff --git a/ui/component/userEmailNew/view.jsx b/ui/component/userEmailNew/view.jsx
index 8d7e31082..fb30d5ca1 100644
--- a/ui/component/userEmailNew/view.jsx
+++ b/ui/component/userEmailNew/view.jsx
@@ -25,11 +25,14 @@ type Props = {
 function UserEmailNew(props: Props) {
   const { errorMessage, isPending, doSignUp, setSync, daemonSettings, setShareDiagnosticData, clearEmailError } = props;
   const { share_usage_data: shareUsageData } = daemonSettings;
-  const [email, setEmail] = useState('');
+  const { push, location } = useHistory();
+  const urlParams = new URLSearchParams(location.search);
+  const emailFromUrl = urlParams.get('email');
+  const defaultEmail = emailFromUrl ? decodeURIComponent(emailFromUrl) : '';
+  const [email, setEmail] = useState(defaultEmail);
   const [password, setPassword] = useState('');
   const [localShareUsageData, setLocalShareUsageData] = React.useState(false);
   const [formSyncEnabled, setFormSyncEnabled] = useState(true);
-  const { push, location } = useHistory();
   const valid = email.match(EMAIL_REGEX);
 
   function handleUsageDataChange() {
@@ -47,7 +50,13 @@ function UserEmailNew(props: Props) {
 
   function handleChangeToSignIn() {
     clearEmailError();
-    push(`/$/${PAGES.AUTH_SIGNIN}${location.search}`); // TODO: Don't lose redirect url right here
+    let url = `/$/${PAGES.AUTH_SIGNIN}`;
+    const urlParams = new URLSearchParams(location.search);
+    if (email) {
+      urlParams.set('email', encodeURIComponent(email));
+    }
+
+    push(`${url}?${urlParams.toString()}`);
   }
 
   return (
@@ -61,7 +70,7 @@ function UserEmailNew(props: Props) {
           <div>
             <Form onSubmit={handleSubmit} className="section">
               <FormField
-                autoFocus
+                autoFocus={!defaultEmail}
                 placeholder={__('hotstuff_96@hotmail.com')}
                 type="email"
                 name="sign_up_email"
@@ -70,6 +79,7 @@ function UserEmailNew(props: Props) {
                 onChange={e => setEmail(e.target.value)}
               />
               <FormField
+                autoFocus={defaultEmail}
                 type="password"
                 name="sign_in_password"
                 label={__('Password')}
@@ -111,7 +121,7 @@ function UserEmailNew(props: Props) {
                 <Button
                   button="primary"
                   type="submit"
-                  label={__('Continue')}
+                  label={__('Sign Up')}
                   disabled={!email || !valid || (!IS_WEB && !localShareUsageData && !shareUsageData) || isPending}
                 />
 
diff --git a/ui/component/userEmailReturning/view.jsx b/ui/component/userEmailReturning/view.jsx
index 25fc38c1f..c63b4598b 100644
--- a/ui/component/userEmailReturning/view.jsx
+++ b/ui/component/userEmailReturning/view.jsx
@@ -21,10 +21,14 @@ type Props = {
 
 function UserEmailReturning(props: Props) {
   const { errorMessage, doUserSignIn, emailToVerify, doClearEmailError } = props;
-  const [email, setEmail] = useState('');
-  const [showPassword, setShowPassword] = usePersistedState('sign-in-show-password', false);
-  const [password, setPassword] = useState('');
   const { push, location } = useHistory();
+  const urlParams = new URLSearchParams(location.search);
+  const emailFromUrl = urlParams.get('email');
+  const defaultEmail = emailFromUrl ? decodeURIComponent(emailFromUrl) : '';
+  const [email, setEmail] = useState(defaultEmail);
+  const [preloadedEmail] = useState(!!defaultEmail);
+  const [showPassword, setShowPassword] = usePersistedState('sign-in-show-password', !!defaultEmail);
+  const [password, setPassword] = useState('');
 
   const valid = email.match(EMAIL_REGEX);
   const showEmailVerification = emailToVerify;
@@ -51,7 +55,7 @@ function UserEmailReturning(props: Props) {
               <div>
                 <Form onSubmit={handleSubmit} className="section">
                   <FormField
-                    autoFocus
+                    autoFocus={!preloadedEmail}
                     placeholder={__('hotstuff_96@hotmail.com')}
                     type="email"
                     name="sign_in_email"
@@ -61,6 +65,7 @@ function UserEmailReturning(props: Props) {
                   />
                   {showPassword && (
                     <FormField
+                      autoFocus={preloadedEmail}
                       type="password"
                       name="sign_in_password"
                       label={__('Password')}
@@ -83,6 +88,7 @@ function UserEmailReturning(props: Props) {
 
                   <div className="section__actions">
                     <Button button="primary" type="submit" label={__('Continue')} disabled={!email || !valid} />
+                    <Button button="link" onClick={handleChangeToSignIn} label={__('Sign Up')} />
                   </div>
                 </Form>
                 {errorMessage && (
@@ -94,13 +100,7 @@ function UserEmailReturning(props: Props) {
             }
           />
           <p className="card__bottom-gutter">
-            <I18nMessage
-              tokens={{
-                sign_up: <Button button="link" onClick={handleChangeToSignIn} label={__('Sign Up')} />,
-              }}
-            >
-              Don't have an account? %sign_up%
-            </I18nMessage>
+            <Button button="link" label={__('Forgot Password?')} navigate={`/$/${PAGES.AUTH_PASSWORD_RESET}`} />
           </p>
         </div>
       )}
diff --git a/ui/component/userPasswordReset/index.js b/ui/component/userPasswordReset/index.js
new file mode 100644
index 000000000..1bdb2ec47
--- /dev/null
+++ b/ui/component/userPasswordReset/index.js
@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+import {
+  doUserPasswordReset,
+  selectPasswordResetSuccess,
+  selectPasswordResetPending,
+  selectPasswordResetError,
+} from 'lbryinc';
+import UserSignIn from './view';
+
+const select = state => ({
+  passwordResetSuccess: selectPasswordResetSuccess(state),
+  passwordResetIsPending: selectPasswordResetPending(state),
+  passwordResetError: selectPasswordResetError(state),
+});
+
+export default connect(select, {
+  doUserPasswordReset,
+})(UserSignIn);
diff --git a/ui/component/userPasswordReset/view.jsx b/ui/component/userPasswordReset/view.jsx
new file mode 100644
index 000000000..4a9e0022d
--- /dev/null
+++ b/ui/component/userPasswordReset/view.jsx
@@ -0,0 +1,80 @@
+// @flow
+import * as PAGES from 'constants/pages';
+import React from 'react';
+import { withRouter } from 'react-router';
+import Card from 'component/common/card';
+import Spinner from 'component/spinner';
+import { Form, FormField } from 'component/common/form';
+import { EMAIL_REGEX } from 'constants/email';
+import ErrorText from 'component/common/error-text';
+import Button from 'component/button';
+
+type Props = {
+  user: ?User,
+  history: { push: string => void },
+  location: { search: string },
+  passwordResetPending: boolean,
+};
+
+function UserPasswordReset(props: Props) {
+  const {
+    doUserPasswordReset,
+    location,
+    history,
+    passwordResetPending,
+    passwordResetError,
+    passwordResetSuccess,
+  } = props;
+  const { search } = location;
+  const [email, setEmail] = React.useState('');
+  const valid = email.match(EMAIL_REGEX);
+
+  function handleSubmit() {
+    doUserPasswordReset(email);
+  }
+
+  return (
+    <section className="main__sign-in">
+      <Card
+        title={__('Reset Your Password')}
+        actions={
+          <div>
+            <Form onSubmit={handleSubmit} className="section">
+              <FormField
+                autoFocus
+                placeholder={__('hotstuff_96@hotmail.com')}
+                type="email"
+                name="sign_in_email"
+                label={__('Email Used To Sign Up')}
+                value={email}
+                onChange={e => setEmail(e.target.value)}
+              />
+
+              <div className="section__actions">
+                <Button
+                  button="primary"
+                  type="submit"
+                  label={passwordResetPending ? __('Resetting') : __('Reset Password')}
+                  disabled={!email || !valid || passwordResetPending}
+                />
+                {passwordResetPending && <Spinner type="small" />}
+                {passwordResetSuccess && <span className="help">Email sent!</span>}
+              </div>
+            </Form>
+            {passwordResetError && (
+              <div className="section">
+                <ErrorText>{passwordResetError}</ErrorText>
+              </div>
+            )}
+          </div>
+        }
+      />
+      <div className="card__bottom-gutter">
+        <Button button="link" label={__('Sign Up')} navigate={`/$/${PAGES.AUTH}`} /> or{' '}
+        <Button button="link" label={__('Sign In')} navigate={`/$/${PAGES.AUTH_SIGNIN}`} />
+      </div>
+    </section>
+  );
+}
+
+export default withRouter(UserPasswordReset);
diff --git a/ui/component/userPasswordSet/index.js b/ui/component/userPasswordSet/index.js
new file mode 100644
index 000000000..2d482bbb7
--- /dev/null
+++ b/ui/component/userPasswordSet/index.js
@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import { doUserPasswordSet, selectPasswordSetSuccess, selectPasswordSetPending, selectPasswordSetError } from 'lbryinc';
+import UserSignIn from './view';
+
+const select = state => ({
+  passwordSetSuccess: selectPasswordSetSuccess(state),
+  passwordSetIsPending: selectPasswordSetPending(state),
+  passwordSetError: selectPasswordSetError(state),
+});
+
+export default connect(select, {
+  doUserPasswordSet,
+})(UserSignIn);
diff --git a/ui/component/userPasswordSet/view.jsx b/ui/component/userPasswordSet/view.jsx
new file mode 100644
index 000000000..3e5370ee2
--- /dev/null
+++ b/ui/component/userPasswordSet/view.jsx
@@ -0,0 +1,87 @@
+// @flow
+import * as PAGES from 'constants/pages';
+import React from 'react';
+import { Lbryio } from 'lbryinc';
+import { useHistory } from 'react-router';
+import Card from 'component/common/card';
+import { Form, FormField } from 'component/common/form';
+import ErrorText from 'component/common/error-text';
+import Button from 'component/button';
+
+type Props = {
+  user: ?User,
+  history: { push: string => void },
+  location: { search: string },
+  passwordSetPending: boolean,
+  passwordSetError: boolean,
+};
+
+function UserPasswordReset(props: Props) {
+  const { passwordSetPending, passwordSetError } = props;
+  const { location } = useHistory();
+  const urlParams = new URLSearchParams(location.search);
+  const email = urlParams.get('email');
+  const authToken = urlParams.get('auth_token');
+  const [password, setPassword] = React.useState('');
+
+  function handleSubmit() {
+    Lbryio.call(
+      'user_password',
+      'set',
+      {
+        auth_token: authToken,
+        password,
+      },
+      'post'
+    )
+      .then(res => {
+        debugger;
+      })
+      .catch(error => {
+        debugger;
+      });
+  }
+
+  return (
+    <section className="main__sign-in">
+      <Card
+        title={__('Choose A New Password')}
+        subtitle={__('Setting a new password for %email%', { email })}
+        actions={
+          <div>
+            <Form onSubmit={handleSubmit} className="section">
+              <FormField
+                autoFocus
+                type="password"
+                name="password_set"
+                label={__('New Password')}
+                value={password}
+                onChange={e => setPassword(e.target.value)}
+              />
+
+              <div className="section__actions">
+                <Button
+                  button="primary"
+                  type="submit"
+                  label={passwordSetPending ? __('Updating') : __('Update Password')}
+                  disabled={!password || passwordSetPending}
+                />
+              </div>
+            </Form>
+            {passwordSetError && (
+              <div className="section">
+                <ErrorText>{passwordSetError}</ErrorText>
+              </div>
+            )}
+          </div>
+        }
+      />
+      <div className="card__bottom-gutter">
+        <Button button="link" label={__('Sign Up')} navigate={`/$/${PAGES.AUTH}`} /> or{' '}
+        <Button button="link" label={__('Sign In')} navigate={`/$/${PAGES.AUTH_SIGNIN}`} />
+      </div>
+    </section>
+  );
+}
+
+export default UserPasswordReset;
diff --git a/ui/constants/pages.js b/ui/constants/pages.js
index 748078c5a..91b0d7a2b 100644
--- a/ui/constants/pages.js
+++ b/ui/constants/pages.js
@@ -1,6 +1,8 @@
 exports.AUTH = 'signup';
 exports.AUTH_SIGNIN = 'signin';
 exports.AUTH_VERIFY = 'verify';
+exports.AUTH_PASSWORD_RESET = 'password-reset';
+exports.AUTH_PASSWORD_SET = 'reset'; // Change this in internal-apis
 exports.BACKUP = 'backup';
 exports.CHANNEL = 'channel';
 exports.DISCOVER = 'discover';
diff --git a/ui/page/passwordReset/index.js b/ui/page/passwordReset/index.js
new file mode 100644
index 000000000..e3cf8568c
--- /dev/null
+++ b/ui/page/passwordReset/index.js
@@ -0,0 +1,3 @@
+import PasswordResetPage from './view';
+
+export default PasswordResetPage;
diff --git a/ui/page/passwordReset/view.jsx b/ui/page/passwordReset/view.jsx
new file mode 100644
index 000000000..3fe6f33e5
--- /dev/null
+++ b/ui/page/passwordReset/view.jsx
@@ -0,0 +1,12 @@
+// @flow
+import React from 'react';
+import UserPasswordReset from 'component/userPasswordReset';
+import Page from 'component/page';
+
+export default function PasswordResetPage() {
+  return (
+    <Page authPage className="main--auth-page">
+      <UserPasswordReset />
+    </Page>
+  );
+}
diff --git a/ui/page/passwordSet/index.js b/ui/page/passwordSet/index.js
new file mode 100644
index 000000000..e3cf8568c
--- /dev/null
+++ b/ui/page/passwordSet/index.js
@@ -0,0 +1,3 @@
+import PasswordResetPage from './view';
+
+export default PasswordResetPage;
diff --git a/ui/page/passwordSet/view.jsx b/ui/page/passwordSet/view.jsx
new file mode 100644
index 000000000..671b60aa7
--- /dev/null
+++ b/ui/page/passwordSet/view.jsx
@@ -0,0 +1,12 @@
+// @flow
+import React from 'react';
+import UserPasswordSet from 'component/userPasswordSet';
+import Page from 'component/page';
+
+export default function PasswordResetPage() {
+  return (
+    <Page authPage className="main--auth-page">
+      <UserPasswordSet />
+    </Page>
+  );
+}
diff --git a/ui/page/signIn/index.js b/ui/page/signIn/index.js
index 476d1c096..1c7a0aeb6 100644
--- a/ui/page/signIn/index.js
+++ b/ui/page/signIn/index.js
@@ -1,10 +1,3 @@
-import { connect } from 'react-redux';
-import SignUpPage from './view';
+import SignInPage from './view';
 
-const select = () => ({});
-const perform = () => ({});
-
-export default connect(
-  select,
-  perform
-)(SignUpPage);
+export default SignInPage;
diff --git a/ui/page/signUp/index.js b/ui/page/signUp/index.js
index 34488a69e..3528a6761 100644
--- a/ui/page/signUp/index.js
+++ b/ui/page/signUp/index.js
@@ -1,7 +1,3 @@
-import { connect } from 'react-redux';
 import SignUpPage from './view';
 
-const select = () => ({});
-const perform = () => ({});
-
-export default connect(select, perform)(SignUpPage);
+export default SignUpPage;
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index 24fd3d168..6933816df 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -138,6 +138,13 @@
   & > *:not(:last-child) {
     margin-right: var(--spacing-medium);
   }
+
+  /* .badge rule inherited from file page prices, should be refactored */
+  .badge {
+    float: right;
+    margin-left: var(--spacing-small);
+    margin-top: 8px; // should be flex'd, but don't blame me! I just moved it down 3px
+  }
 }
 
 .card__title.card__title--deprecated {
@@ -172,19 +179,6 @@
   justify-content: space-between;
 }
 
-.card__title {
-  font-size: var(--font-title);
-  font-weight: var(--font-weight-light);
-  display: block;
-
-  /* .badge rule inherited from file page prices, should be refactored */
-  .badge {
-    float: right;
-    margin-left: var(--spacing-small);
-    margin-top: 8px; // should be flex'd, but don't blame me! I just moved it down 3px
-  }
-}
-
 .card__subtitle {
   color: var(--color-text-subtitle);
   margin: var(--spacing-small) 0;
diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss
index a46e5eca4..7b8398015 100644
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@@ -185,8 +185,9 @@
 .header__auth-buttons {
   display: flex;
   align-items: center;
+  font-weight: var(--font-weight-bold);
 
   & > *:not(:last-child) {
-    margin-right: var(--spacing-small);
+    margin: 0 var(--spacing-medium);
   }
 }
diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss
index 1e28a025a..ce781bf61 100644
--- a/ui/scss/component/section.scss
+++ b/ui/scss/component/section.scss
@@ -108,6 +108,11 @@
       margin-bottom: var(--spacing-small);
     }
   }
+
+  .button--primary ~ .button--link {
+    font-weight: var(--font-weight-bold);
+    margin-left: var(--spacing-small);
+  }
 }
 
 .section__actions--centered {
diff --git a/yarn.lock b/yarn.lock
index e0bea8e95..a8e34c063 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6147,9 +6147,9 @@ lbry-redux@lbryio/lbry-redux#1097a63d44a20b87e443fbaa48f95fe3ea5e3f70:
     reselect "^3.0.0"
     uuid "^3.3.2"
 
-lbryinc@lbryio/lbryinc#d6203bbea2ceb805465d20198adbdf7759f896a8:
+lbryinc@lbryio/lbryinc#d7168f9faef85002f7f0c267f65dddd83b9a2952:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/d6203bbea2ceb805465d20198adbdf7759f896a8"
+  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/d7168f9faef85002f7f0c267f65dddd83b9a2952"
   dependencies:
     reselect "^3.0.0"
 
-- 
2.45.3


From a6f7f6d61748afd1c3eaa35559f180ec8f50415c Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 10 Apr 2020 13:03:28 -0400
Subject: [PATCH 03/15] new flow working

---
 package.json                                 |   4 +-
 ui/component/common/card.jsx                 |   4 +
 ui/component/common/nag.jsx                  |  26 ++--
 ui/component/header/view.jsx                 |   3 -
 ui/component/settingAccountPassword/index.js |  24 ++++
 ui/component/settingAccountPassword/view.jsx |  97 ++++++++++++++
 ui/component/userEmailNew/index.js           |   4 +-
 ui/component/userEmailNew/view.jsx           |  72 +++++-----
 ui/component/userEmailReturning/index.js     |  15 ++-
 ui/component/userEmailReturning/view.jsx     | 130 +++++++++----------
 ui/component/userEmailVerify/view.jsx        |  22 ++--
 ui/component/userPasswordReset/index.js      |   6 +-
 ui/component/userPasswordReset/view.jsx      |  38 ++++--
 ui/component/userPasswordSet/index.js        |   9 +-
 ui/component/userPasswordSet/view.jsx        |   8 +-
 ui/component/userSignIn/index.js             |   8 +-
 ui/component/userSignIn/view.jsx             |  32 ++++-
 ui/component/userSignInPassword/index.js     |  22 ++++
 ui/component/userSignInPassword/view.jsx     |  69 ++++++++++
 ui/modal/walletReceive/view.jsx              |  11 --
 ui/modal/walletSend/view.jsx                 |  10 --
 ui/page/settings/view.jsx                    |   4 +-
 ui/page/signInVerify/view.jsx                |  80 +++++++-----
 ui/scss/component/_card.scss                 |  11 ++
 ui/scss/component/_main.scss                 |   9 +-
 ui/scss/component/nag.scss                   |   4 +
 ui/scss/component/section.scss               |   8 ++
 yarn.lock                                    |   4 +-
 28 files changed, 510 insertions(+), 224 deletions(-)
 create mode 100644 ui/component/settingAccountPassword/index.js
 create mode 100644 ui/component/settingAccountPassword/view.jsx
 create mode 100644 ui/component/userSignInPassword/index.js
 create mode 100644 ui/component/userSignInPassword/view.jsx
 delete mode 100644 ui/modal/walletReceive/view.jsx
 delete mode 100644 ui/modal/walletSend/view.jsx

diff --git a/package.json b/package.json
index ba8e3188a..39a2b0bda 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "dev:electron": "cross-env NODE_ENV=development node ./electron/devServer.js",
     "dev:web": "cd ./lbrytv && yarn dev",
     "dev:web-server": "cross-env NODE_ENV=development yarn compile:web && concurrently \"cross-env NODE_ENV=development yarn compile:web --watch\" \"cd ./lbrytv && yarn dev:server\"",
-    "dev:internal-apis": "LBRY_API_URL='http://localhost:8080' yarn dev:electron",
+    "dev:internal-apis": "LBRY_API_URL='http://' yarn dev:web",
     "dev:iatv": "LBRY_API_URL='http://localhost:15400' SDK_API_URL='http://localhost:15100' yarn dev:web",
     "run:web": "cross-env NODE_ENV=production yarn compile:web && node ./dist/web/server.js",
     "run:web-server": "cross-env NODE_ENV=production yarn compile:web && cd ./lbrytv && yarn dev:server",
@@ -131,7 +131,7 @@
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
     "lbry-redux": "lbryio/lbry-redux#1097a63d44a20b87e443fbaa48f95fe3ea5e3f70",
-    "lbryinc": "lbryio/lbryinc#d7168f9faef85002f7f0c267f65dddd83b9a2952",
+    "lbryinc": "lbryio/lbryinc#05a1c5fc1a558132ef85ac5cca55357842d0ffd7",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",
     "lodash-es": "^4.17.14",
diff --git a/ui/component/common/card.jsx b/ui/component/common/card.jsx
index 7f5f62d35..7664892b4 100644
--- a/ui/component/common/card.jsx
+++ b/ui/component/common/card.jsx
@@ -17,6 +17,7 @@ type Props = {
   isPageTitle?: boolean,
   isBodyTable?: boolean,
   defaultExpand?: boolean,
+  nag?: Node,
 };
 
 export default function Card(props: Props) {
@@ -30,6 +31,7 @@ export default function Card(props: Props) {
     isPageTitle = false,
     isBodyTable = false,
     defaultExpand,
+    nag,
   } = props;
   const [expanded, setExpanded] = useState(defaultExpand);
   const expandable = defaultExpand !== undefined;
@@ -73,6 +75,8 @@ export default function Card(props: Props) {
           {actions && <div className="card__main-actions">{actions}</div>}
         </>
       )}
+
+      {nag}
     </section>
   );
 }
diff --git a/ui/component/common/nag.jsx b/ui/component/common/nag.jsx
index aa9d6fda4..58645fb17 100644
--- a/ui/component/common/nag.jsx
+++ b/ui/component/common/nag.jsx
@@ -7,16 +7,17 @@ import Button from 'component/button';
 
 type Props = {
   message: string | Node,
-  actionText: string,
+  actionText?: string,
   href?: string,
   type?: string,
   inline?: boolean,
+  relative?: boolean,
   onClick?: () => void,
   onClose?: () => void,
 };
 
 export default function Nag(props: Props) {
-  const { message, actionText, href, onClick, onClose, type, inline } = props;
+  const { message, actionText, href, onClick, onClose, type, inline, relative } = props;
 
   const buttonProps = onClick ? { onClick } : { href };
 
@@ -26,18 +27,21 @@ export default function Nag(props: Props) {
         'nag--helpful': type === 'helpful',
         'nag--error': type === 'error',
         'nag--inline': inline,
+        'nag--relative': relative,
       })}
     >
       <div className="nag__message">{message}</div>
-      <Button
-        className={classnames('nag__button', {
-          'nag__button--helpful': type === 'helpful',
-          'nag__button--error': type === 'error',
-        })}
-        {...buttonProps}
-      >
-        {actionText}
-      </Button>
+      {(href || onClick) && (
+        <Button
+          className={classnames('nag__button', {
+            'nag__button--helpful': type === 'helpful',
+            'nag__button--error': type === 'error',
+          })}
+          {...buttonProps}
+        >
+          {actionText}
+        </Button>
+      )}
       {onClose && (
         <Button
           className={classnames('nag__button nag__close', {
diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index c5e278fe3..3a3eb2dfc 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -170,9 +170,6 @@ const Header = (props: Props) => {
                     <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CREATOR_DASHBOARD}`)}>
                       <Icon aria-hidden icon={ICONS.ANALYTICS} />
                       {__('Creator Analytics')}
-                      <span>
-                        <span className="badge badge--alert">New!</span>
-                      </span>
                     </MenuItem>
                     <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.REWARDS}`)}>
                       <Icon aria-hidden icon={ICONS.FEATURED} />
diff --git a/ui/component/settingAccountPassword/index.js b/ui/component/settingAccountPassword/index.js
new file mode 100644
index 000000000..40a78ad69
--- /dev/null
+++ b/ui/component/settingAccountPassword/index.js
@@ -0,0 +1,24 @@
+import { connect } from 'react-redux';
+import {
+  selectUser,
+  selectPasswordSetIsPending,
+  selectPasswordSetSuccess,
+  selectPasswordSetError,
+  doUserPasswordSet,
+  doClearPasswordEntries,
+} from 'lbryinc';
+import { doToast } from 'lbry-redux';
+import UserSignIn from './view';
+
+const select = state => ({
+  user: selectUser(state),
+  passwordSetPending: selectPasswordSetIsPending(state),
+  passwordSetSuccess: selectPasswordSetSuccess(state),
+  passwordSetError: selectPasswordSetError(state),
+});
+
+export default connect(select, {
+  doUserPasswordSet,
+  doToast,
+  doClearPasswordEntries,
+})(UserSignIn);
diff --git a/ui/component/settingAccountPassword/view.jsx b/ui/component/settingAccountPassword/view.jsx
new file mode 100644
index 000000000..1165f504a
--- /dev/null
+++ b/ui/component/settingAccountPassword/view.jsx
@@ -0,0 +1,97 @@
+// @flow
+import React, { useState } from 'react';
+import { FormField, Form } from 'component/common/form';
+import Button from 'component/button';
+import ErrorText from 'component/common/error-text';
+import Card from 'component/common/card';
+
+type Props = {
+  user: ?User,
+  doToast: ({ message: string }) => void,
+  doUserPasswordSet: (string, ?string) => void,
+  doClearPasswordEntries: () => void,
+  passwordSetPending: boolean,
+  passwordSetSuccess: boolean,
+  passwordSetError: ?string,
+};
+
+export default function SettingAccountPassword(props: Props) {
+  const {
+    user,
+    doToast,
+    doUserPasswordSet,
+    //  passwordSetPending,
+    passwordSetSuccess,
+    passwordSetError,
+    doClearPasswordEntries,
+  } = props;
+  const [oldPassword, setOldPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [isAddingPassword, setIsAddingPassword] = useState(false);
+  const hasPassword = user && user.password_set;
+
+  function handleSubmit() {
+    doUserPasswordSet(newPassword, oldPassword);
+  }
+
+  React.useEffect(() => {
+    if (passwordSetSuccess) {
+      setIsAddingPassword(false);
+      doToast({
+        message: __('Password updated successfully.'),
+      });
+      doClearPasswordEntries();
+      setOldPassword('');
+      setNewPassword('');
+    }
+  }, [passwordSetSuccess, setOldPassword, setNewPassword, doClearPasswordEntries, doToast]);
+
+  return (
+    <Card
+      title={__('Account Password')}
+      subtitle={hasPassword ? __('') : __('You do not currently have a password set.')}
+      actions={
+        isAddingPassword ? (
+          <div>
+            <Form onSubmit={handleSubmit} className="section">
+              {hasPassword && (
+                <FormField
+                  type="password"
+                  name="setting_set_old_password"
+                  label={__('Old Password')}
+                  value={oldPassword}
+                  onChange={e => setOldPassword(e.target.value)}
+                />
+              )}
+              <FormField
+                type="password"
+                name="setting_set_new_password"
+                label={__('New Password')}
+                value={newPassword}
+                onChange={e => setNewPassword(e.target.value)}
+              />
+
+              <div className="section__actions">
+                <Button button="primary" type="submit" label={__('Set Password')} disabled={!newPassword} />
+                {!hasPassword && (
+                  <Button button="link" label={__('Cancel')} onClick={() => setIsAddingPassword(false)} />
+                )}
+              </div>
+            </Form>
+            {passwordSetError && (
+              <div className="section">
+                <ErrorText>{passwordSetError}</ErrorText>
+              </div>
+            )}
+          </div>
+        ) : (
+          <Button
+            button="primary"
+            label={hasPassword ? __('Update Your Password') : __('Add A Password')}
+            onClick={() => setIsAddingPassword(true)}
+          />
+        )
+      }
+    />
+  );
+}
diff --git a/ui/component/userEmailNew/index.js b/ui/component/userEmailNew/index.js
index 093aba824..5c6065be1 100644
--- a/ui/component/userEmailNew/index.js
+++ b/ui/component/userEmailNew/index.js
@@ -5,7 +5,7 @@ import {
   selectEmailNewErrorMessage,
   selectEmailAlreadyExists,
   doUserSignUp,
-  doClearEmailError,
+  doClearEmailEntry,
 } from 'lbryinc';
 import { DAEMON_SETTINGS } from 'lbry-redux';
 import { doSetClientSetting, doSetDaemonSetting } from 'redux/actions/settings';
@@ -25,7 +25,7 @@ const perform = dispatch => ({
   setShareDiagnosticData: shouldShareData =>
     dispatch(doSetDaemonSetting(DAEMON_SETTINGS.SHARE_USAGE_DATA, shouldShareData)),
   doSignUp: (email, password) => dispatch(doUserSignUp(email, password)),
-  clearEmailError: () => dispatch(doClearEmailError()),
+  clearEmailEntry: () => dispatch(doClearEmailEntry()),
 });
 
 export default connect(select, perform)(UserEmailNew);
diff --git a/ui/component/userEmailNew/view.jsx b/ui/component/userEmailNew/view.jsx
index fb30d5ca1..626dbb0e5 100644
--- a/ui/component/userEmailNew/view.jsx
+++ b/ui/component/userEmailNew/view.jsx
@@ -12,6 +12,7 @@ import ErrorText from 'component/common/error-text';
 
 type Props = {
   errorMessage: ?string,
+  emailExists: boolean,
   isPending: boolean,
   syncEnabled: boolean,
   setSync: boolean => void,
@@ -19,11 +20,20 @@ type Props = {
   daemonSettings: { share_usage_data: boolean },
   setShareDiagnosticData: boolean => void,
   doSignUp: (string, ?string) => void,
-  clearEmailError: () => void,
+  clearEmailEntry: () => void,
 };
 
 function UserEmailNew(props: Props) {
-  const { errorMessage, isPending, doSignUp, setSync, daemonSettings, setShareDiagnosticData, clearEmailError } = props;
+  const {
+    errorMessage,
+    isPending,
+    doSignUp,
+    setSync,
+    daemonSettings,
+    setShareDiagnosticData,
+    clearEmailEntry,
+    emailExists,
+  } = props;
   const { share_usage_data: shareUsageData } = daemonSettings;
   const { push, location } = useHistory();
   const urlParams = new URLSearchParams(location.search);
@@ -48,17 +58,31 @@ function UserEmailNew(props: Props) {
     analytics.emailProvidedEvent();
   }
 
-  function handleChangeToSignIn() {
-    clearEmailError();
+  function handleChangeToSignIn(additionalParams) {
+    clearEmailEntry();
+
     let url = `/$/${PAGES.AUTH_SIGNIN}`;
     const urlParams = new URLSearchParams(location.search);
+
+    urlParams.delete('email');
     if (email) {
       urlParams.set('email', encodeURIComponent(email));
     }
 
+    urlParams.delete('email_exists');
+    if (emailExists) {
+      urlParams.set('email_exists', '1');
+    }
+
     push(`${url}?${urlParams.toString()}`);
   }
 
+  React.useEffect(() => {
+    if (emailExists) {
+      handleChangeToSignIn();
+    }
+  }, [emailExists]);
+
   return (
     <div className="main__sign-up">
       <Card
@@ -70,7 +94,7 @@ function UserEmailNew(props: Props) {
           <div>
             <Form onSubmit={handleSubmit} className="section">
               <FormField
-                autoFocus={!defaultEmail}
+                autoFocus
                 placeholder={__('hotstuff_96@hotmail.com')}
                 type="email"
                 name="sign_up_email"
@@ -79,7 +103,6 @@ function UserEmailNew(props: Props) {
                 onChange={e => setEmail(e.target.value)}
               />
               <FormField
-                autoFocus={defaultEmail}
                 type="password"
                 name="sign_in_password"
                 label={__('Password')}
@@ -122,24 +145,11 @@ function UserEmailNew(props: Props) {
                   button="primary"
                   type="submit"
                   label={__('Sign Up')}
-                  disabled={!email || !valid || (!IS_WEB && !localShareUsageData && !shareUsageData) || isPending}
+                  disabled={
+                    !email || !password || !valid || (!IS_WEB && !localShareUsageData && !shareUsageData) || isPending
+                  }
                 />
-
-                <p className="help">
-                  <I18nMessage
-                    tokens={{
-                      terms: (
-                        <Button
-                          button="link"
-                          href="https://www.lbry.com/termsofservice"
-                          label={__('Terms of Service')}
-                        />
-                      ),
-                    }}
-                  >
-                    By continuing, I agree to the %terms% and confirm I am over the age of 13.
-                  </I18nMessage>
-                </p>
+                <Button button="link" onClick={handleChangeToSignIn} label={__('Sign In')} />
               </div>
             </Form>
             {errorMessage && (
@@ -151,13 +161,15 @@ function UserEmailNew(props: Props) {
         }
       />
       <p className="card__bottom-gutter">
-        <I18nMessage
-          tokens={{
-            sign_in: <Button button="link" onClick={handleChangeToSignIn} label={__('Sign In')} />,
-          }}
-        >
-          Already have an account? %sign_in%
-        </I18nMessage>
+        <span>
+          <I18nMessage
+            tokens={{
+              terms: <Button button="link" href="https://www.lbry.com/termsofservice" label={__('Terms of Service')} />,
+            }}
+          >
+            By continuing, I agree to the %terms% and confirm I am over the age of 13.
+          </I18nMessage>
+        </span>
       </p>
     </div>
   );
diff --git a/ui/component/userEmailReturning/index.js b/ui/component/userEmailReturning/index.js
index 408c75b04..1e5e0281d 100644
--- a/ui/component/userEmailReturning/index.js
+++ b/ui/component/userEmailReturning/index.js
@@ -1,13 +1,22 @@
 import { connect } from 'react-redux';
-import { selectEmailNewErrorMessage, selectEmailToVerify, doUserSignIn, doClearEmailError } from 'lbryinc';
+import {
+  selectEmailNewErrorMessage,
+  selectEmailToVerify,
+  doUserCheckIfEmailExists,
+  doClearEmailEntry,
+  selectEmailDoesNotExist,
+  selectEmailAlreadyExists,
+} from 'lbryinc';
 import UserEmailReturning from './view';
 
 const select = state => ({
   errorMessage: selectEmailNewErrorMessage(state),
   emailToVerify: selectEmailToVerify(state),
+  emailDoesNotExist: selectEmailDoesNotExist(state),
+  emailExists: selectEmailAlreadyExists(state),
 });
 
 export default connect(select, {
-  doUserSignIn,
-  doClearEmailError,
+  doUserCheckIfEmailExists,
+  doClearEmailEntry,
 })(UserEmailReturning);
diff --git a/ui/component/userEmailReturning/view.jsx b/ui/component/userEmailReturning/view.jsx
index c63b4598b..ec8132b4c 100644
--- a/ui/component/userEmailReturning/view.jsx
+++ b/ui/component/userEmailReturning/view.jsx
@@ -4,43 +4,49 @@ import React, { useState } from 'react';
 import { FormField, Form } from 'component/common/form';
 import Button from 'component/button';
 import { EMAIL_REGEX } from 'constants/email';
-import I18nMessage from 'component/i18nMessage';
 import { useHistory } from 'react-router-dom';
-import usePersistedState from 'effects/use-persisted-state';
 import UserEmailVerify from 'component/userEmailVerify';
-import ErrorText from 'component/common/error-text';
 import Card from 'component/common/card';
+import Nag from 'component/common/nag';
 import analytics from 'analytics';
 
 type Props = {
   errorMessage: ?string,
   emailToVerify: ?string,
-  doClearEmailError: () => void,
+  emailDoesNotExist: boolean,
+  doClearEmailEntry: () => void,
   doUserSignIn: (string, ?string) => void,
+  doUserCheckIfEmailExists: string => void,
 };
 
 function UserEmailReturning(props: Props) {
-  const { errorMessage, doUserSignIn, emailToVerify, doClearEmailError } = props;
+  const { errorMessage, doUserCheckIfEmailExists, emailToVerify, doClearEmailEntry, emailDoesNotExist } = props;
   const { push, location } = useHistory();
   const urlParams = new URLSearchParams(location.search);
   const emailFromUrl = urlParams.get('email');
+  const emailExistsFromUrl = urlParams.get('email_exists');
   const defaultEmail = emailFromUrl ? decodeURIComponent(emailFromUrl) : '';
   const [email, setEmail] = useState(defaultEmail);
-  const [preloadedEmail] = useState(!!defaultEmail);
-  const [showPassword, setShowPassword] = usePersistedState('sign-in-show-password', !!defaultEmail);
-  const [password, setPassword] = useState('');
-
   const valid = email.match(EMAIL_REGEX);
   const showEmailVerification = emailToVerify;
 
   function handleSubmit() {
-    doUserSignIn(email, password === '' ? undefined : password);
+    doUserCheckIfEmailExists(email);
     analytics.emailProvidedEvent();
   }
 
   function handleChangeToSignIn() {
-    doClearEmailError();
-    push(`/$/${PAGES.AUTH}${location.search}`); // TODO: Don't lose redirect url right here
+    doClearEmailEntry();
+    let url = `/$/${PAGES.AUTH}`;
+    const urlParams = new URLSearchParams(location.search);
+
+    urlParams.delete('email_exists');
+    urlParams.delete('email');
+    if (email) {
+      urlParams.set('email', encodeURIComponent(email));
+    }
+
+    push(`${url}?${urlParams.toString()}`);
   }
 
   return (
@@ -48,61 +54,53 @@ function UserEmailReturning(props: Props) {
       {showEmailVerification ? (
         <UserEmailVerify />
       ) : (
-        <div>
-          <Card
-            title={__('Sign In to lbry.tv')}
-            actions={
-              <div>
-                <Form onSubmit={handleSubmit} className="section">
-                  <FormField
-                    autoFocus={!preloadedEmail}
-                    placeholder={__('hotstuff_96@hotmail.com')}
-                    type="email"
-                    name="sign_in_email"
-                    label={__('Email')}
-                    value={email}
-                    onChange={e => setEmail(e.target.value)}
-                  />
-                  {showPassword && (
-                    <FormField
-                      autoFocus={preloadedEmail}
-                      type="password"
-                      name="sign_in_password"
-                      label={__('Password')}
-                      value={password}
-                      onChange={e => setPassword(e.target.value)}
-                    />
-                  )}
-                  {!showPassword && (
-                    <fieldset-section>
-                      <FormField
-                        type="checkbox"
-                        placeholder={__('hotstuff_96@hotmail.com')}
-                        name="sign_in_toggle_password"
-                        label={__('Sign in with a password (optional)')}
-                        checked={showPassword}
-                        onChange={() => setShowPassword(!showPassword)}
-                      />
-                    </fieldset-section>
-                  )}
+        <Card
+          title={__('Sign In to lbry.tv')}
+          actions={
+            <div>
+              <Form onSubmit={handleSubmit} className="section">
+                <FormField
+                  autoFocus={!emailExistsFromUrl}
+                  placeholder={__('hotstuff_96@hotmail.com')}
+                  type="email"
+                  name="sign_in_email"
+                  label={__('Email')}
+                  value={email}
+                  onChange={e => setEmail(e.target.value)}
+                />
 
-                  <div className="section__actions">
-                    <Button button="primary" type="submit" label={__('Continue')} disabled={!email || !valid} />
-                    <Button button="link" onClick={handleChangeToSignIn} label={__('Sign Up')} />
-                  </div>
-                </Form>
-                {errorMessage && (
-                  <div className="section">
-                    <ErrorText>{errorMessage}</ErrorText>
-                  </div>
-                )}
-              </div>
-            }
-          />
-          <p className="card__bottom-gutter">
-            <Button button="link" label={__('Forgot Password?')} navigate={`/$/${PAGES.AUTH_PASSWORD_RESET}`} />
-          </p>
-        </div>
+                <div className="section__actions">
+                  <Button
+                    autoFocus={emailExistsFromUrl}
+                    button="primary"
+                    type="submit"
+                    label={__('Sign In')}
+                    disabled={!email || !valid}
+                  />
+                  <Button button="link" onClick={handleChangeToSignIn} label={__('Sign Up')} />
+                </div>
+              </Form>
+            </div>
+          }
+          nag={
+            <React.Fragment>
+              {!emailDoesNotExist && emailExistsFromUrl && (
+                <Nag type="helpful" relative message={__('That email is already in use. Did you mean to sign in?')} />
+              )}
+              {emailDoesNotExist && (
+                <Nag
+                  type="helpful"
+                  relative
+                  message={__("We can't find that email. Did you mean to sign up?")}
+                  actionText={__('Sign Up')}
+                />
+              )}
+              {!emailExistsFromUrl && !emailDoesNotExist && errorMessage && (
+                <Nag type="error" relative message={errorMessage} />
+              )}
+            </React.Fragment>
+          }
+        />
       )}
     </div>
   );
diff --git a/ui/component/userEmailVerify/view.jsx b/ui/component/userEmailVerify/view.jsx
index 9ea462ef9..5315fd2b7 100644
--- a/ui/component/userEmailVerify/view.jsx
+++ b/ui/component/userEmailVerify/view.jsx
@@ -61,7 +61,7 @@ class UserEmailVerify extends React.PureComponent<Props> {
     const { email, isReturningUser, resendingEmail } = this.props;
 
     return (
-      <React.Fragment>
+      <div className="main__sign-up">
         <Card
           title={isReturningUser ? __('Check Your Email') : __('Confirm Your Email')}
           subtitle={
@@ -88,16 +88,18 @@ class UserEmailVerify extends React.PureComponent<Props> {
           }
         />
         <p className="card__bottom-gutter">
-          <I18nMessage
-            tokens={{
-              help_link: <Button button="link" href="mailto:help@lbry.com" label="help@lbry.com" />,
-              chat_link: <Button button="link" href="https://chat.lbry.com" label="chat" />,
-            }}
-          >
-            Email %help_link% or join our %chat_link% if you encounter any trouble verifying.
-          </I18nMessage>
+          <span>
+            <I18nMessage
+              tokens={{
+                help_link: <Button button="link" href="mailto:help@lbry.com" label="help@lbry.com" />,
+                chat_link: <Button button="link" href="https://chat.lbry.com" label="chat" />,
+              }}
+            >
+              Email %help_link% or join our %chat_link% if you encounter any trouble verifying.
+            </I18nMessage>
+          </span>
         </p>
-      </React.Fragment>
+      </div>
     );
   }
 }
diff --git a/ui/component/userPasswordReset/index.js b/ui/component/userPasswordReset/index.js
index 1bdb2ec47..ec8b0b57d 100644
--- a/ui/component/userPasswordReset/index.js
+++ b/ui/component/userPasswordReset/index.js
@@ -2,17 +2,19 @@ import { connect } from 'react-redux';
 import {
   doUserPasswordReset,
   selectPasswordResetSuccess,
-  selectPasswordResetPending,
+  selectPasswordResetIsPending,
   selectPasswordResetError,
 } from 'lbryinc';
+import { doToast } from 'lbry-redux';
 import UserSignIn from './view';
 
 const select = state => ({
   passwordResetSuccess: selectPasswordResetSuccess(state),
-  passwordResetIsPending: selectPasswordResetPending(state),
+  passwordResetIsPending: selectPasswordResetIsPending(state),
   passwordResetError: selectPasswordResetError(state),
 });
 
 export default connect(select, {
   doUserPasswordReset,
+  doToast,
 })(UserSignIn);
diff --git a/ui/component/userPasswordReset/view.jsx b/ui/component/userPasswordReset/view.jsx
index 4a9e0022d..49652ae96 100644
--- a/ui/component/userPasswordReset/view.jsx
+++ b/ui/component/userPasswordReset/view.jsx
@@ -8,31 +8,37 @@ import { Form, FormField } from 'component/common/form';
 import { EMAIL_REGEX } from 'constants/email';
 import ErrorText from 'component/common/error-text';
 import Button from 'component/button';
+import Nag from 'component/common/nag';
 
 type Props = {
   user: ?User,
-  history: { push: string => void },
-  location: { search: string },
+  doToast: ({ message: string }) => void,
+  doUserPasswordReset: string => void,
   passwordResetPending: boolean,
+  passwordResetSuccess: boolean,
+  passwordResetError: ?string,
 };
 
 function UserPasswordReset(props: Props) {
-  const {
-    doUserPasswordReset,
-    location,
-    history,
-    passwordResetPending,
-    passwordResetError,
-    passwordResetSuccess,
-  } = props;
+  const { doUserPasswordReset, passwordResetPending, passwordResetError, passwordResetSuccess, doToast } = props;
   const { search } = location;
-  const [email, setEmail] = React.useState('');
+  const urlParams = new URLSearchParams(search);
+  const defaultEmail = urlParams.get('email');
+  const [email, setEmail] = React.useState(defaultEmail);
   const valid = email.match(EMAIL_REGEX);
 
   function handleSubmit() {
     doUserPasswordReset(email);
   }
 
+  React.useEffect(() => {
+    if (passwordResetSuccess) {
+      doToast({
+        message: __('Email sent!'),
+      });
+    }
+  }, [passwordResetSuccess]);
+
   return (
     <section className="main__sign-in">
       <Card
@@ -45,7 +51,7 @@ function UserPasswordReset(props: Props) {
                 placeholder={__('hotstuff_96@hotmail.com')}
                 type="email"
                 name="sign_in_email"
-                label={__('Email Used To Sign Up')}
+                label={__('Email')}
                 value={email}
                 onChange={e => setEmail(e.target.value)}
               />
@@ -58,7 +64,6 @@ function UserPasswordReset(props: Props) {
                   disabled={!email || !valid || passwordResetPending}
                 />
                 {passwordResetPending && <Spinner type="small" />}
-                {passwordResetSuccess && <span className="help">Email sent!</span>}
               </div>
             </Form>
             {passwordResetError && (
@@ -68,9 +73,14 @@ function UserPasswordReset(props: Props) {
             )}
           </div>
         }
+        nag={
+          passwordResetSuccess && (
+            <Nag type="helpful" relative message={__('Check your email for a link to reset your password.')} />
+          )
+        }
       />
       <div className="card__bottom-gutter">
-        <Button button="link" label={__('Sign Up')} navigate={`/$/${PAGES.AUTH}`} /> or{' '}
+        <Button button="link" label={__('Sign Up')} navigate={`/$/${PAGES.AUTH}`} />
         <Button button="link" label={__('Sign In')} navigate={`/$/${PAGES.AUTH_SIGNIN}`} />
       </div>
     </section>
diff --git a/ui/component/userPasswordSet/index.js b/ui/component/userPasswordSet/index.js
index 2d482bbb7..e1c396903 100644
--- a/ui/component/userPasswordSet/index.js
+++ b/ui/component/userPasswordSet/index.js
@@ -1,10 +1,15 @@
 import { connect } from 'react-redux';
-import { doUserPasswordSet, selectPasswordSetSuccess, selectPasswordSetPending, selectPasswordSetError } from 'lbryinc';
+import {
+  doUserPasswordSet,
+  selectPasswordSetSuccess,
+  selectPasswordSetIsPending,
+  selectPasswordSetError,
+} from 'lbryinc';
 import UserSignIn from './view';
 
 const select = state => ({
   passwordSetSuccess: selectPasswordSetSuccess(state),
-  passwordSetIsPending: selectPasswordSetPending(state),
+  passwordSetIsPending: selectPasswordSetIsPending(state),
   passwordSetError: selectPasswordSetError(state),
 });
 
diff --git a/ui/component/userPasswordSet/view.jsx b/ui/component/userPasswordSet/view.jsx
index 3e5370ee2..416511b68 100644
--- a/ui/component/userPasswordSet/view.jsx
+++ b/ui/component/userPasswordSet/view.jsx
@@ -13,7 +13,7 @@ type Props = {
   history: { push: string => void },
   location: { search: string },
   passwordSetPending: boolean,
-  passwordSetError: boolean,
+  passwordSetError: ?string,
 };
 
 function UserPasswordReset(props: Props) {
@@ -30,7 +30,7 @@ function UserPasswordReset(props: Props) {
       'set',
       {
         auth_token: authToken,
-        password,
+        new_password: password,
       },
       'post'
     )
@@ -56,7 +56,7 @@ function UserPasswordReset(props: Props) {
                 name="password_set"
                 label={__('New Password')}
                 value={password}
-                onChange={e => setPassword(e.target.value)}
+                onChange={e => console.log('e', e.target.value) || setPassword(e.target.value)}
               />
 
               <div className="section__actions">
@@ -77,7 +77,7 @@ function UserPasswordReset(props: Props) {
         }
       />
       <div className="card__bottom-gutter">
-        <Button button="link" label={__('Sign Up')} navigate={`/$/${PAGES.AUTH}`} /> or{' '}
+        <Button button="link" label={__('Sign Up')} navigate={`/$/${PAGES.AUTH}`} />
         <Button button="link" label={__('Sign In')} navigate={`/$/${PAGES.AUTH_SIGNIN}`} />
       </div>
     </section>
diff --git a/ui/component/userSignIn/index.js b/ui/component/userSignIn/index.js
index 4489862a7..e0a559098 100644
--- a/ui/component/userSignIn/index.js
+++ b/ui/component/userSignIn/index.js
@@ -1,10 +1,14 @@
 import { connect } from 'react-redux';
-import { selectUser, selectUserIsPending } from 'lbryinc';
+import { selectUser, selectUserIsPending, selectEmailToVerify, selectPasswordExists, doUserSignIn } from 'lbryinc';
 import UserSignIn from './view';
 
 const select = state => ({
   user: selectUser(state),
   userFetchPending: selectUserIsPending(state),
+  emailToVerify: selectEmailToVerify(state),
+  passwordExists: selectPasswordExists(state),
 });
 
-export default connect(select)(UserSignIn);
+export default connect(select, {
+  doUserSignIn,
+})(UserSignIn);
diff --git a/ui/component/userSignIn/view.jsx b/ui/component/userSignIn/view.jsx
index 2e6a969a0..b8d1485e0 100644
--- a/ui/component/userSignIn/view.jsx
+++ b/ui/component/userSignIn/view.jsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import { withRouter } from 'react-router';
 import UserEmailReturning from 'component/userEmailReturning';
+import UserSignInPassword from 'component/userSignInPassword';
 import Spinner from 'component/spinner';
 
 type Props = {
@@ -9,28 +10,45 @@ type Props = {
   history: { push: string => void },
   location: { search: string },
   userFetchPending: boolean,
+  doUserSignIn: string => void,
+  emailToVerify: ?string,
+  passwordExists: boolean,
 };
 
 function UserSignIn(props: Props) {
-  const { user, location, history, userFetchPending } = props;
+  const { user, location, history, doUserSignIn, userFetchPending, emailToVerify, passwordExists } = props;
   const { search } = location;
   const urlParams = new URLSearchParams(search);
+  const [emailOnlyLogin, setEmailOnlyLogin] = React.useState(false);
+  const hasVerifiedEmail = user && user.has_verified_email;
   const redirect = urlParams.get('redirect');
-  const showUserEmail = user && !user.password_set && !user.has_verified_email;
   const showLoading = userFetchPending;
+  const showEmail = !passwordExists || emailOnlyLogin;
+  const showPassword = !showEmail && emailToVerify && passwordExists;
 
   React.useEffect(() => {
-    if (!showUserEmail) {
+    if (hasVerifiedEmail || (!showEmail && !showPassword && !showLoading)) {
       history.push(redirect || '/');
     }
-  }, [showUserEmail]);
+  }, [showEmail, showPassword, showLoading, hasVerifiedEmail]);
+
+  React.useEffect(() => {
+    if (emailToVerify && emailOnlyLogin) {
+      doUserSignIn(emailToVerify);
+    }
+  }, [emailToVerify, emailOnlyLogin, doUserSignIn]);
 
   return (
-    <section className="main--contained">
-      {!showLoading && <div>{showUserEmail && <UserEmailReturning />}</div>}
+    <section>
+      {!showLoading && (
+        <div>
+          {showEmail && <UserEmailReturning />}
+          {showPassword && <UserSignInPassword onHandleEmailOnly={() => setEmailOnlyLogin(true)} />}
+        </div>
+      )}
       {showLoading && (
         <div className="main--empty">
-          <Spinner />
+          <Spinner delayed />
         </div>
       )}
     </section>
diff --git a/ui/component/userSignInPassword/index.js b/ui/component/userSignInPassword/index.js
new file mode 100644
index 000000000..e394d1e96
--- /dev/null
+++ b/ui/component/userSignInPassword/index.js
@@ -0,0 +1,22 @@
+import { connect } from 'react-redux';
+import {
+  selectUser,
+  selectUserIsPending,
+  selectEmailToVerify,
+  selectEmailNewErrorMessage,
+  doUserSignIn,
+  doClearEmailEntry,
+} from 'lbryinc';
+import UserSignIn from './view';
+
+const select = state => ({
+  user: selectUser(state),
+  userFetchPending: selectUserIsPending(state),
+  emailToVerify: selectEmailToVerify(state),
+  errorMessage: selectEmailNewErrorMessage(state),
+});
+
+export default connect(select, {
+  doUserSignIn,
+  doClearEmailEntry,
+})(UserSignIn);
diff --git a/ui/component/userSignInPassword/view.jsx b/ui/component/userSignInPassword/view.jsx
new file mode 100644
index 000000000..925526de5
--- /dev/null
+++ b/ui/component/userSignInPassword/view.jsx
@@ -0,0 +1,69 @@
+// @flow
+import * as PAGES from 'constants/pages';
+import React, { useState } from 'react';
+import { FormField, Form } from 'component/common/form';
+import Button from 'component/button';
+import Card from 'component/common/card';
+import analytics from 'analytics';
+import Nag from 'component/common/nag';
+
+type Props = {
+  errorMessage: ?string,
+  emailToVerify: ?string,
+  doClearEmailEntry: () => void,
+  doUserSignIn: (string, ?string) => void,
+  onHandleEmailOnly: () => void,
+};
+
+export default function UserSignInPassword(props: Props) {
+  const { errorMessage, doUserSignIn, emailToVerify, doClearEmailEntry, onHandleEmailOnly } = props;
+  const [password, setPassword] = useState('');
+
+  function handleSubmit() {
+    if (emailToVerify) {
+      doUserSignIn(emailToVerify, password);
+      analytics.emailProvidedEvent();
+    }
+  }
+
+  function handleChangeToSignIn() {
+    onHandleEmailOnly();
+  }
+
+  return (
+    <div className="main__sign-in">
+      <Card
+        title={__('Enter Your lbry.tv Password')}
+        subtitle={__('Signing in with %email%', { email: emailToVerify })}
+        actions={
+          <div>
+            <Form onSubmit={handleSubmit} className="section">
+              <FormField
+                autoFocus
+                type="password"
+                name="sign_in_password"
+                label={__('Password')}
+                value={password}
+                onChange={e => setPassword(e.target.value)}
+              />
+
+              <div className="section__actions">
+                <Button button="primary" type="submit" label={__('Continue')} disabled={!password} />
+                <Button button="link" onClick={handleChangeToSignIn} label={__('Use Magic Link')} />
+              </div>
+            </Form>
+          </div>
+        }
+        nag={errorMessage && <Nag type="error" relative message={errorMessage} />}
+      />
+      <p className="card__bottom-gutter">
+        <Button
+          button="link"
+          label={__('Forgot Password?')}
+          navigate={`/$/${PAGES.AUTH_PASSWORD_RESET}?email=${encodeURIComponent(emailToVerify)}`}
+        />
+        <Button button="link" onClick={doClearEmailEntry} label={__('Cancel')} />
+      </p>
+    </div>
+  );
+}
diff --git a/ui/modal/walletReceive/view.jsx b/ui/modal/walletReceive/view.jsx
deleted file mode 100644
index 85746bff8..000000000
--- a/ui/modal/walletReceive/view.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import WalletAddress from 'component/walletAddress';
-import Page from 'component/page';
-
-const WalletAddressPage = () => (
-  <Page className="main--contained">
-    <WalletAddress />
-  </Page>
-);
-
-export default WalletAddressPage;
diff --git a/ui/modal/walletSend/view.jsx b/ui/modal/walletSend/view.jsx
deleted file mode 100644
index 57bc0dacc..000000000
--- a/ui/modal/walletSend/view.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import WalletSend from 'component/walletSend';
-
-const WalletSendModal = () => (
-  <div>
-    <WalletSend />
-  </div>
-);
-
-export default WalletSendModal;
diff --git a/ui/page/settings/view.jsx b/ui/page/settings/view.jsx
index 31d9143c7..8d06b4d39 100644
--- a/ui/page/settings/view.jsx
+++ b/ui/page/settings/view.jsx
@@ -18,6 +18,7 @@ import { SETTINGS } from 'lbry-redux';
 import Card from 'component/common/card';
 import { getPasswordFromCookie } from 'util/saved-passwords';
 import Spinner from 'component/spinner';
+import SettingAccountPassword from 'component/settingAccountPassword';
 
 // @if TARGET='app'
 export const IS_MAC = process.platform === 'darwin';
@@ -261,11 +262,12 @@ class SettingsPage extends React.PureComponent<Props, State> {
       <Page className="card-stack">
         {!IS_WEB && noDaemonSettings ? (
           <section className="card card--section">
-            <div className="card__title card__title--deprecated">{__('Failed to load settings.')}</div>
+            <div className="card__title card__t itle--deprecated">{__('Failed to load settings.')}</div>
           </section>
         ) : (
           <div>
             <Card title={__('Language')} actions={<SettingLanguage />} />
+            {isAuthenticated && <SettingAccountPassword />}
             {/* @if TARGET='app' */}
             <Card
               title={__('Sync')}
diff --git a/ui/page/signInVerify/view.jsx b/ui/page/signInVerify/view.jsx
index 203467a4e..ef4b4883a 100644
--- a/ui/page/signInVerify/view.jsx
+++ b/ui/page/signInVerify/view.jsx
@@ -1,4 +1,5 @@
 // @flow
+import * as PAGES from 'constants/pages';
 import React, { useState } from 'react';
 import { withRouter } from 'react-router';
 import Page from 'component/page';
@@ -6,7 +7,7 @@ import ReCAPTCHA from 'react-google-recaptcha';
 import Button from 'component/button';
 import { Lbryio } from 'lbryinc';
 import I18nMessage from 'component/i18nMessage';
-import * as PAGES from 'constants/pages';
+import Card from 'component/common/card';
 
 type Props = {
   history: { push: string => void, location: { search: string } },
@@ -88,40 +89,49 @@ function SignInVerifyPage(props: Props) {
 
   return (
     <Page authPage className="main--auth-page">
-      <section className="main--contained">
-        <h1 className="section__title--large">
-          {isAuthenticationSuccess ? __('Sign In Success!') : __('Sign In to lbry.tv')}
-        </h1>
-        <p className="section__subtitle">
-          {isAuthenticationSuccess
-            ? __('You can now close this tab.')
-            : needsRecaptcha
-            ? __('Click below to sign in to lbry.tv')
-            : __('Welcome back! You are automatically being signed in.')}
-        </p>
-        <p className="section__subtitle">
-          {showCaptchaMessage && !isAuthenticationSuccess && (
-            <I18nMessage
-              tokens={{
-                refresh: <Button button="link" label={__('refreshing')} onClick={() => window.location.reload()} />,
-              }}
-            >
-              Not seeing a captcha? Check your ad blocker or try %refresh%.
-            </I18nMessage>
-          )}
-        </p>
-        {!isAuthenticationSuccess && needsRecaptcha && (
-          <div className="section__actions">
-            <ReCAPTCHA
-              sitekey="6LePsJgUAAAAAFTuWOKRLnyoNKhm0HA4C3elrFMG"
-              onChange={onCaptchaChange}
-              asyncScriptOnLoad={onCaptchaReady}
-              onExpired={onAuthError}
-              onErrored={onAuthError}
-            />
-          </div>
-        )}
-      </section>
+      <div className="main__sign-up">
+        <Card
+          title={isAuthenticationSuccess ? __('Sign In Success!') : __('Sign In to lbry.tv')}
+          subtitle={
+            <React.Fragment>
+              <p>
+                {isAuthenticationSuccess
+                  ? __('You can now close this tab.')
+                  : needsRecaptcha
+                  ? __('Click below to sign in to lbry.tv')
+                  : __('Welcome back! You are automatically being signed in.')}
+              </p>
+              {showCaptchaMessage && !isAuthenticationSuccess && (
+                <p>
+                  <I18nMessage
+                    tokens={{
+                      refresh: (
+                        <Button button="link" label={__('refreshing')} onClick={() => window.location.reload()} />
+                      ),
+                    }}
+                  >
+                    Not seeing a captcha? Check your ad blocker or try %refresh%.
+                  </I18nMessage>
+                </p>
+              )}
+            </React.Fragment>
+          }
+          actions={
+            !isAuthenticationSuccess &&
+            needsRecaptcha && (
+              <div className="section__actions">
+                <ReCAPTCHA
+                  sitekey="6LePsJgUAAAAAFTuWOKRLnyoNKhm0HA4C3elrFMG"
+                  onChange={onCaptchaChange}
+                  asyncScriptOnLoad={onCaptchaReady}
+                  onExpired={onAuthError}
+                  onErrored={onAuthError}
+                />
+              </div>
+            )
+          }
+        />
+      </div>
     </Page>
   );
 }
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index 6933816df..bdb708589 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -242,5 +242,16 @@
 
 .card__bottom-gutter {
   @extend .help;
+  display: flex;
+  align-items: center;
   margin-top: var(--spacing-medium);
+
+  &:only-child,
+  &:first-child {
+    margin-top: 0;
+  }
+
+  > *:not(:last-child) {
+    margin-right: var(--spacing-medium);
+  }
 }
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index 524e84d00..5858fc1ab 100644
--- a/ui/scss/component/_main.scss
+++ b/ui/scss/component/_main.scss
@@ -76,18 +76,13 @@
   width: 100%;
 }
 
-.main__sign-in {
+.main__sign-in,
+.main__sign-up {
   max-width: 27rem;
   margin-left: auto;
   margin-right: auto;
 }
 
-.main__sign-up {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 35rem;
-}
-
 .main__channel-creation {
   margin-left: auto;
   margin-right: auto;
diff --git a/ui/scss/component/nag.scss b/ui/scss/component/nag.scss
index e14e2e7ab..e0a3a2cc9 100644
--- a/ui/scss/component/nag.scss
+++ b/ui/scss/component/nag.scss
@@ -32,6 +32,10 @@ $nag-error-z-index: 100001;
   z-index: 1 !important; /* booooooo */
 }
 
+.nag--relative {
+  position: relative;
+}
+
 .nag--helpful {
   background-color: var(--color-secondary);
   color: var(--color-white);
diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss
index ce781bf61..ad5e6e6b3 100644
--- a/ui/scss/component/section.scss
+++ b/ui/scss/component/section.scss
@@ -109,9 +109,17 @@
     }
   }
 
+  .button--primary,
+  .button ~ .button--link {
+    &:focus {
+      @include focus;
+    }
+  }
+
   .button--primary ~ .button--link {
     font-weight: var(--font-weight-bold);
     margin-left: var(--spacing-small);
+    padding: var(--spacing-xsmall);
   }
 }
 
diff --git a/yarn.lock b/yarn.lock
index a8e34c063..b162398ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6147,9 +6147,9 @@ lbry-redux@lbryio/lbry-redux#1097a63d44a20b87e443fbaa48f95fe3ea5e3f70:
     reselect "^3.0.0"
     uuid "^3.3.2"
 
-lbryinc@lbryio/lbryinc#d7168f9faef85002f7f0c267f65dddd83b9a2952:
+lbryinc@lbryio/lbryinc#05a1c5fc1a558132ef85ac5cca55357842d0ffd7:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/d7168f9faef85002f7f0c267f65dddd83b9a2952"
+  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/05a1c5fc1a558132ef85ac5cca55357842d0ffd7"
   dependencies:
     reselect "^3.0.0"
 
-- 
2.45.3


From af8d02f9811effc7d4f991dcd1071e4f31e291fa Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 10 Apr 2020 13:43:25 -0400
Subject: [PATCH 04/15] cleanup

---
 ui/component/header/view.jsx             | 4 ++--
 ui/component/userEmailNew/view.jsx       | 4 ++--
 ui/component/userEmailReturning/view.jsx | 2 +-
 ui/util/saved-passwords.js               | 3 ++-
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index 3a3eb2dfc..d19cae5f2 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -192,7 +192,7 @@ const Header = (props: Props) => {
                       <React.Fragment>
                         <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH}`)}>
                           <Icon aria-hidden icon={ICONS.SIGN_UP} />
-                          {__('Sign Up')}
+                          {__('Join')}
                         </MenuItem>
                         <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH_SIGNIN}`)}>
                           <Icon aria-hidden icon={ICONS.SIGN_IN} />
@@ -228,7 +228,7 @@ const Header = (props: Props) => {
             {IS_WEB && !authenticated && (
               <div className="header__auth-buttons">
                 <Button navigate={`/$/${PAGES.AUTH_SIGNIN}`} button="link" label={__('Sign In')} />
-                <Button navigate={`/$/${PAGES.AUTH}`} button="primary" label={__('Sign Up')} />
+                <Button navigate={`/$/${PAGES.AUTH}`} button="primary" label={__('Join')} />
               </div>
             )}
           </div>
diff --git a/ui/component/userEmailNew/view.jsx b/ui/component/userEmailNew/view.jsx
index 626dbb0e5..4c28ddef4 100644
--- a/ui/component/userEmailNew/view.jsx
+++ b/ui/component/userEmailNew/view.jsx
@@ -86,7 +86,7 @@ function UserEmailNew(props: Props) {
   return (
     <div className="main__sign-up">
       <Card
-        title={__('Sign Up with lbry.tv')}
+        title={__('Join lbry.tv')}
         // @if TARGET='app'
         subtitle={__('An account with lbry.tv allows you to earn rewards and backup your data.')}
         // @endif
@@ -144,7 +144,7 @@ function UserEmailNew(props: Props) {
                 <Button
                   button="primary"
                   type="submit"
-                  label={__('Sign Up')}
+                  label={__('Join')}
                   disabled={
                     !email || !password || !valid || (!IS_WEB && !localShareUsageData && !shareUsageData) || isPending
                   }
diff --git a/ui/component/userEmailReturning/view.jsx b/ui/component/userEmailReturning/view.jsx
index ec8132b4c..ab331f5f8 100644
--- a/ui/component/userEmailReturning/view.jsx
+++ b/ui/component/userEmailReturning/view.jsx
@@ -77,7 +77,7 @@ function UserEmailReturning(props: Props) {
                     label={__('Sign In')}
                     disabled={!email || !valid}
                   />
-                  <Button button="link" onClick={handleChangeToSignIn} label={__('Sign Up')} />
+                  <Button button="link" onClick={handleChangeToSignIn} label={__('Join')} />
                 </div>
               </Form>
             </div>
diff --git a/ui/util/saved-passwords.js b/ui/util/saved-passwords.js
index 0b3b70861..6dbde307e 100644
--- a/ui/util/saved-passwords.js
+++ b/ui/util/saved-passwords.js
@@ -2,7 +2,8 @@ const { DOMAIN } = require('../../config.js');
 const AUTH_TOKEN = 'auth_token';
 const SAVED_PASSWORD = 'saved_password';
 const DEPRECATED_SAVED_PASSWORD = 'saved-password';
-const domain = typeof window === 'object' ? window.location.hostname : DOMAIN;
+const domain =
+  typeof window === 'object' && window.location.hostname.includes('localhost') ? window.location.hostname : DOMAIN;
 const isProduction = process.env.NODE_ENV === 'production';
 const maxExpiration = 2147483647;
 let sessionPassword;
-- 
2.45.3


From ead174361335995e38e4bfbf1c4f2ab2d2f293ca Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 10 Apr 2020 14:04:05 -0400
Subject: [PATCH 05/15] add 'autoComplete' props

---
 ui/component/userEmailNew/view.jsx       | 1 +
 ui/component/userEmailReturning/view.jsx | 1 +
 ui/component/userSignInPassword/view.jsx | 3 ++-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/component/userEmailNew/view.jsx b/ui/component/userEmailNew/view.jsx
index 4c28ddef4..b114fa6b1 100644
--- a/ui/component/userEmailNew/view.jsx
+++ b/ui/component/userEmailNew/view.jsx
@@ -95,6 +95,7 @@ function UserEmailNew(props: Props) {
             <Form onSubmit={handleSubmit} className="section">
               <FormField
                 autoFocus
+                autoComplete
                 placeholder={__('hotstuff_96@hotmail.com')}
                 type="email"
                 name="sign_up_email"
diff --git a/ui/component/userEmailReturning/view.jsx b/ui/component/userEmailReturning/view.jsx
index ab331f5f8..2045b4245 100644
--- a/ui/component/userEmailReturning/view.jsx
+++ b/ui/component/userEmailReturning/view.jsx
@@ -60,6 +60,7 @@ function UserEmailReturning(props: Props) {
             <div>
               <Form onSubmit={handleSubmit} className="section">
                 <FormField
+                  autoComplete
                   autoFocus={!emailExistsFromUrl}
                   placeholder={__('hotstuff_96@hotmail.com')}
                   type="email"
diff --git a/ui/component/userSignInPassword/view.jsx b/ui/component/userSignInPassword/view.jsx
index 925526de5..f15963fc9 100644
--- a/ui/component/userSignInPassword/view.jsx
+++ b/ui/component/userSignInPassword/view.jsx
@@ -40,6 +40,7 @@ export default function UserSignInPassword(props: Props) {
             <Form onSubmit={handleSubmit} className="section">
               <FormField
                 autoFocus
+                autoComplete
                 type="password"
                 name="sign_in_password"
                 label={__('Password')}
@@ -60,7 +61,7 @@ export default function UserSignInPassword(props: Props) {
         <Button
           button="link"
           label={__('Forgot Password?')}
-          navigate={`/$/${PAGES.AUTH_PASSWORD_RESET}?email=${encodeURIComponent(emailToVerify)}`}
+          navigate={`/$/${PAGES.AUTH_PASSWORD_RESET}?email=${encodeURIComponent(emailToVerify || '')}`}
         />
         <Button button="link" onClick={doClearEmailEntry} label={__('Cancel')} />
       </p>
-- 
2.45.3


From a2d759205530a010ab3a7aa6d2e2c50f3e1db215 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 10 Apr 2020 14:16:29 -0400
Subject: [PATCH 06/15] fix prop

---
 ui/component/userEmailReturning/view.jsx | 2 +-
 ui/component/userSignInPassword/view.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/component/userEmailReturning/view.jsx b/ui/component/userEmailReturning/view.jsx
index 2045b4245..3d8eb1ca0 100644
--- a/ui/component/userEmailReturning/view.jsx
+++ b/ui/component/userEmailReturning/view.jsx
@@ -60,7 +60,7 @@ function UserEmailReturning(props: Props) {
             <div>
               <Form onSubmit={handleSubmit} className="section">
                 <FormField
-                  autoComplete
+                  autoComplete="on"
                   autoFocus={!emailExistsFromUrl}
                   placeholder={__('hotstuff_96@hotmail.com')}
                   type="email"
diff --git a/ui/component/userSignInPassword/view.jsx b/ui/component/userSignInPassword/view.jsx
index f15963fc9..91fd1a3bc 100644
--- a/ui/component/userSignInPassword/view.jsx
+++ b/ui/component/userSignInPassword/view.jsx
@@ -40,7 +40,7 @@ export default function UserSignInPassword(props: Props) {
             <Form onSubmit={handleSubmit} className="section">
               <FormField
                 autoFocus
-                autoComplete
+                autoComplete="on"
                 type="password"
                 name="sign_in_password"
                 label={__('Password')}
-- 
2.45.3


From eae29a98381d9072e3d5f3336bda98dc86a7a082 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 10 Apr 2020 17:31:09 -0400
Subject: [PATCH 07/15] try to call email/confirm before resetting password

---
 ui/component/userPasswordSet/view.jsx | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/ui/component/userPasswordSet/view.jsx b/ui/component/userPasswordSet/view.jsx
index 416511b68..92484c3c0 100644
--- a/ui/component/userPasswordSet/view.jsx
+++ b/ui/component/userPasswordSet/view.jsx
@@ -22,18 +22,27 @@ function UserPasswordReset(props: Props) {
   const urlParams = new URLSearchParams(location.search);
   const email = urlParams.get('email');
   const authToken = urlParams.get('auth_token');
+  const verificationToken = urlParams.get('verification_token');
   const [password, setPassword] = React.useState('');
 
   function handleSubmit() {
-    Lbryio.call(
-      'user_password',
-      'set',
-      {
-        auth_token: authToken,
-        new_password: password,
-      },
-      'post'
-    )
+    Lbryio.call('user_email', 'confirm', {
+      auth_token: authToken,
+      email: email,
+      verification_token: verificationToken,
+    })
+      .then(() => {
+        return Lbryio.call(
+          'user_password',
+          'set',
+          {
+            auth_token: authToken,
+            new_password: password,
+          },
+          'post'
+        );
+      })
+
       .then(res => {
         debugger;
       })
-- 
2.45.3


From 2c1ea68f9354a94dca18769231cd60b62ed8ac86 Mon Sep 17 00:00:00 2001
From: Mark Beamer Jr <markbeamerjr@gmail.com>
Date: Sun, 12 Apr 2020 23:16:47 -0400
Subject: [PATCH 08/15] Dont use password reset token for email confirmation.

---
 ui/component/userPasswordSet/view.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/component/userPasswordSet/view.jsx b/ui/component/userPasswordSet/view.jsx
index 92484c3c0..6e6231048 100644
--- a/ui/component/userPasswordSet/view.jsx
+++ b/ui/component/userPasswordSet/view.jsx
@@ -27,7 +27,6 @@ function UserPasswordReset(props: Props) {
 
   function handleSubmit() {
     Lbryio.call('user_email', 'confirm', {
-      auth_token: authToken,
       email: email,
       verification_token: verificationToken,
     })
-- 
2.45.3


From 8c8d59030139f369fd540cb2603e9702656c31f5 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 13 Apr 2020 09:53:59 -0400
Subject: [PATCH 09/15] add password reset

---
 package.json                            |  2 +-
 ui/component/userPasswordReset/index.js |  2 +
 ui/component/userPasswordReset/view.jsx | 33 +++++++++++----
 ui/component/userPasswordSet/index.js   | 18 ++++-----
 ui/component/userPasswordSet/view.jsx   | 53 ++++++++++++++++---------
 yarn.lock                               |  4 +-
 6 files changed, 74 insertions(+), 38 deletions(-)

diff --git a/package.json b/package.json
index 39a2b0bda..abbcced31 100644
--- a/package.json
+++ b/package.json
@@ -131,7 +131,7 @@
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
     "lbry-redux": "lbryio/lbry-redux#1097a63d44a20b87e443fbaa48f95fe3ea5e3f70",
-    "lbryinc": "lbryio/lbryinc#05a1c5fc1a558132ef85ac5cca55357842d0ffd7",
+    "lbryinc": "lbryio/lbryinc#b411291da72727897afb153114894932c9561281",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",
     "lodash-es": "^4.17.14",
diff --git a/ui/component/userPasswordReset/index.js b/ui/component/userPasswordReset/index.js
index ec8b0b57d..ecd39d97f 100644
--- a/ui/component/userPasswordReset/index.js
+++ b/ui/component/userPasswordReset/index.js
@@ -4,6 +4,7 @@ import {
   selectPasswordResetSuccess,
   selectPasswordResetIsPending,
   selectPasswordResetError,
+  doClearPasswordEntries,
 } from 'lbryinc';
 import { doToast } from 'lbry-redux';
 import UserSignIn from './view';
@@ -17,4 +18,5 @@ const select = state => ({
 export default connect(select, {
   doUserPasswordReset,
   doToast,
+  doClearPasswordEntries,
 })(UserSignIn);
diff --git a/ui/component/userPasswordReset/view.jsx b/ui/component/userPasswordReset/view.jsx
index 49652ae96..704fad6c5 100644
--- a/ui/component/userPasswordReset/view.jsx
+++ b/ui/component/userPasswordReset/view.jsx
@@ -1,7 +1,7 @@
 // @flow
 import * as PAGES from 'constants/pages';
 import React from 'react';
-import { withRouter } from 'react-router';
+import { useHistory } from 'react-router-dom';
 import Card from 'component/common/card';
 import Spinner from 'component/spinner';
 import { Form, FormField } from 'component/common/form';
@@ -14,21 +14,38 @@ type Props = {
   user: ?User,
   doToast: ({ message: string }) => void,
   doUserPasswordReset: string => void,
+  doClearPasswordEntries: () => void,
   passwordResetPending: boolean,
   passwordResetSuccess: boolean,
   passwordResetError: ?string,
 };
 
 function UserPasswordReset(props: Props) {
-  const { doUserPasswordReset, passwordResetPending, passwordResetError, passwordResetSuccess, doToast } = props;
+  const {
+    doUserPasswordReset,
+    passwordResetPending,
+    passwordResetError,
+    passwordResetSuccess,
+    doToast,
+    doClearPasswordEntries,
+  } = props;
+  const { location, replace } = useHistory();
   const { search } = location;
   const urlParams = new URLSearchParams(search);
   const defaultEmail = urlParams.get('email');
-  const [email, setEmail] = React.useState(defaultEmail);
+  const [email, setEmail] = React.useState(defaultEmail || '');
   const valid = email.match(EMAIL_REGEX);
 
   function handleSubmit() {
-    doUserPasswordReset(email);
+    if (email) {
+      doUserPasswordReset(email);
+    }
+  }
+
+  function handleRestart() {
+    setEmail('');
+    doClearPasswordEntries();
+    replace();
   }
 
   React.useEffect(() => {
@@ -37,7 +54,7 @@ function UserPasswordReset(props: Props) {
         message: __('Email sent!'),
       });
     }
-  }, [passwordResetSuccess]);
+  }, [passwordResetSuccess, doToast]);
 
   return (
     <section className="main__sign-in">
@@ -48,6 +65,7 @@ function UserPasswordReset(props: Props) {
             <Form onSubmit={handleSubmit} className="section">
               <FormField
                 autoFocus
+                disabled={passwordResetSuccess}
                 placeholder={__('hotstuff_96@hotmail.com')}
                 type="email"
                 name="sign_in_email"
@@ -61,8 +79,9 @@ function UserPasswordReset(props: Props) {
                   button="primary"
                   type="submit"
                   label={passwordResetPending ? __('Resetting') : __('Reset Password')}
-                  disabled={!email || !valid || passwordResetPending}
+                  disabled={!email || !valid || passwordResetPending || passwordResetSuccess}
                 />
+                {passwordResetSuccess && <Button button="link" label={__('Restart')} onClick={handleRestart} />}
                 {passwordResetPending && <Spinner type="small" />}
               </div>
             </Form>
@@ -87,4 +106,4 @@ function UserPasswordReset(props: Props) {
   );
 }
 
-export default withRouter(UserPasswordReset);
+export default UserPasswordReset;
diff --git a/ui/component/userPasswordSet/index.js b/ui/component/userPasswordSet/index.js
index e1c396903..ead9767aa 100644
--- a/ui/component/userPasswordSet/index.js
+++ b/ui/component/userPasswordSet/index.js
@@ -1,18 +1,16 @@
 import { connect } from 'react-redux';
-import {
-  doUserPasswordSet,
-  selectPasswordSetSuccess,
-  selectPasswordSetIsPending,
-  selectPasswordSetError,
-} from 'lbryinc';
+import { doClearEmailEntry, doUserFetch } from 'lbryinc';
+import { doToast } from 'lbry-redux';
 import UserSignIn from './view';
 
 const select = state => ({
-  passwordSetSuccess: selectPasswordSetSuccess(state),
-  passwordSetIsPending: selectPasswordSetIsPending(state),
-  passwordSetError: selectPasswordSetError(state),
+  // passwordSetSuccess: selectPasswordSetSuccess(state),
+  // passwordSetIsPending: selectPasswordSetIsPending(state),
+  // passwordSetError: selectPasswordSetError(state),
 });
 
 export default connect(select, {
-  doUserPasswordSet,
+  doToast,
+  doClearEmailEntry,
+  doUserFetch,
 })(UserSignIn);
diff --git a/ui/component/userPasswordSet/view.jsx b/ui/component/userPasswordSet/view.jsx
index 6e6231048..fc49d5ab1 100644
--- a/ui/component/userPasswordSet/view.jsx
+++ b/ui/component/userPasswordSet/view.jsx
@@ -7,9 +7,14 @@ import Card from 'component/common/card';
 import { Form, FormField } from 'component/common/form';
 import ErrorText from 'component/common/error-text';
 import Button from 'component/button';
+import Nag from 'component/common/nag';
+import Spinner from 'component/spinner';
 
 type Props = {
   user: ?User,
+  doClearEmailEntry: () => void,
+  doUserFetch: () => void,
+  doToast: ({ message: string }) => void,
   history: { push: string => void },
   location: { search: string },
   passwordSetPending: boolean,
@@ -17,21 +22,25 @@ type Props = {
 };
 
 function UserPasswordReset(props: Props) {
-  const { passwordSetPending, passwordSetError } = props;
-  const { location } = useHistory();
+  const { doClearEmailEntry, doToast, doUserFetch } = props;
+  const { location, push } = useHistory();
   const urlParams = new URLSearchParams(location.search);
   const email = urlParams.get('email');
   const authToken = urlParams.get('auth_token');
   const verificationToken = urlParams.get('verification_token');
   const [password, setPassword] = React.useState('');
+  const [error, setError] = React.useState();
+  const [loading, setLoading] = React.useState(false);
 
   function handleSubmit() {
+    setLoading(true);
+
     Lbryio.call('user_email', 'confirm', {
       email: email,
       verification_token: verificationToken,
     })
-      .then(() => {
-        return Lbryio.call(
+      .then(() =>
+        Lbryio.call(
           'user_password',
           'set',
           {
@@ -39,17 +48,27 @@ function UserPasswordReset(props: Props) {
             new_password: password,
           },
           'post'
-        );
-      })
-
-      .then(res => {
-        debugger;
+        )
+      )
+      .then(doUserFetch)
+      .then(() => {
+        setLoading(false);
+        doToast({
+          message: __('Password successfully changed!'),
+        });
+        push(`/`);
       })
       .catch(error => {
-        debugger;
+        setLoading(false);
+        setError(error.message);
       });
   }
 
+  function handleRestart() {
+    doClearEmailEntry();
+    push(`/$/${PAGES.AUTH_SIGNIN}`);
+  }
+
   return (
     <section className="main__sign-in">
       <Card
@@ -64,25 +83,23 @@ function UserPasswordReset(props: Props) {
                 name="password_set"
                 label={__('New Password')}
                 value={password}
-                onChange={e => console.log('e', e.target.value) || setPassword(e.target.value)}
+                onChange={e => setPassword(e.target.value)}
               />
 
               <div className="section__actions">
                 <Button
                   button="primary"
                   type="submit"
-                  label={passwordSetPending ? __('Updating') : __('Update Password')}
-                  disabled={!password || passwordSetPending}
+                  label={loading ? __('Update Password') : __('Updating Password')}
+                  disabled={!password || loading}
                 />
+                {error && <Button button="link" label={__('Restart')} onClick={handleRestart} />}
+                {loading && <Spinner type="small" />}
               </div>
             </Form>
-            {passwordSetError && (
-              <div className="section">
-                <ErrorText>{passwordSetError}</ErrorText>
-              </div>
-            )}
           </div>
         }
+        nag={error && <Nag type="error" relative message={<ErrorText>{error}</ErrorText>} />}
       />
       <div className="card__bottom-gutter">
         <Button button="link" label={__('Sign Up')} navigate={`/$/${PAGES.AUTH}`} />
diff --git a/yarn.lock b/yarn.lock
index b162398ab..2a3761415 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6147,9 +6147,9 @@ lbry-redux@lbryio/lbry-redux#1097a63d44a20b87e443fbaa48f95fe3ea5e3f70:
     reselect "^3.0.0"
     uuid "^3.3.2"
 
-lbryinc@lbryio/lbryinc#05a1c5fc1a558132ef85ac5cca55357842d0ffd7:
+lbryinc@lbryio/lbryinc#b411291da72727897afb153114894932c9561281:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/05a1c5fc1a558132ef85ac5cca55357842d0ffd7"
+  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/b411291da72727897afb153114894932c9561281"
   dependencies:
     reselect "^3.0.0"
 
-- 
2.45.3


From 746b9c6de91b077f10e7a0c0ef6340891184d657 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 13 Apr 2020 10:57:56 -0400
Subject: [PATCH 10/15] password manager improvements

---
 ui/component/userEmailReturning/view.jsx | 3 ++-
 ui/component/userPasswordReset/view.jsx  | 2 ++
 ui/component/userSignInPassword/view.jsx | 3 ++-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/component/userEmailReturning/view.jsx b/ui/component/userEmailReturning/view.jsx
index 3d8eb1ca0..eef1a9674 100644
--- a/ui/component/userEmailReturning/view.jsx
+++ b/ui/component/userEmailReturning/view.jsx
@@ -60,10 +60,11 @@ function UserEmailReturning(props: Props) {
             <div>
               <Form onSubmit={handleSubmit} className="section">
                 <FormField
-                  autoComplete="on"
                   autoFocus={!emailExistsFromUrl}
                   placeholder={__('hotstuff_96@hotmail.com')}
                   type="email"
+                  id="username"
+                  autoComplete="on"
                   name="sign_in_email"
                   label={__('Email')}
                   value={email}
diff --git a/ui/component/userPasswordReset/view.jsx b/ui/component/userPasswordReset/view.jsx
index 704fad6c5..cc4a3b857 100644
--- a/ui/component/userPasswordReset/view.jsx
+++ b/ui/component/userPasswordReset/view.jsx
@@ -69,6 +69,8 @@ function UserPasswordReset(props: Props) {
                 placeholder={__('hotstuff_96@hotmail.com')}
                 type="email"
                 name="sign_in_email"
+                id="username"
+                autoComplete="on"
                 label={__('Email')}
                 value={email}
                 onChange={e => setEmail(e.target.value)}
diff --git a/ui/component/userSignInPassword/view.jsx b/ui/component/userSignInPassword/view.jsx
index 91fd1a3bc..1d9777a35 100644
--- a/ui/component/userSignInPassword/view.jsx
+++ b/ui/component/userSignInPassword/view.jsx
@@ -40,9 +40,10 @@ export default function UserSignInPassword(props: Props) {
             <Form onSubmit={handleSubmit} className="section">
               <FormField
                 autoFocus
-                autoComplete="on"
                 type="password"
                 name="sign_in_password"
+                id="password"
+                autoComplete="on"
                 label={__('Password')}
                 value={password}
                 onChange={e => setPassword(e.target.value)}
-- 
2.45.3


From 563830f7ea954ed3c7762c37a0410c843e6fe7a8 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 13 Apr 2020 11:08:06 -0400
Subject: [PATCH 11/15] update lbryinc

---
 package.json | 2 +-
 yarn.lock    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index abbcced31..557ea06d2 100644
--- a/package.json
+++ b/package.json
@@ -131,7 +131,7 @@
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
     "lbry-redux": "lbryio/lbry-redux#1097a63d44a20b87e443fbaa48f95fe3ea5e3f70",
-    "lbryinc": "lbryio/lbryinc#b411291da72727897afb153114894932c9561281",
+    "lbryinc": "lbryio/lbryinc#75f992ef02ddef3e1cfe3a6632710fffd04b0c68",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",
     "lodash-es": "^4.17.14",
diff --git a/yarn.lock b/yarn.lock
index 2a3761415..d70251459 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6147,9 +6147,9 @@ lbry-redux@lbryio/lbry-redux#1097a63d44a20b87e443fbaa48f95fe3ea5e3f70:
     reselect "^3.0.0"
     uuid "^3.3.2"
 
-lbryinc@lbryio/lbryinc#b411291da72727897afb153114894932c9561281:
+lbryinc@lbryio/lbryinc#75f992ef02ddef3e1cfe3a6632710fffd04b0c68:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/b411291da72727897afb153114894932c9561281"
+  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/75f992ef02ddef3e1cfe3a6632710fffd04b0c68"
   dependencies:
     reselect "^3.0.0"
 
-- 
2.45.3


From 816b3344465ad2c4a7da89a2cafaa275082c4d50 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 13 Apr 2020 13:52:44 -0400
Subject: [PATCH 12/15] cleanup

---
 package.json                                 |  4 +-
 ui/component/header/index.js                 | 10 ++++-
 ui/component/header/view.jsx                 | 22 +++++++++-
 ui/component/router/view.jsx                 |  2 -
 ui/component/settingAccountPassword/index.js |  4 +-
 ui/component/settingAccountPassword/view.jsx |  8 ++--
 ui/component/userEmailNew/view.jsx           | 30 ++++++--------
 ui/component/userEmailVerify/view.jsx        | 42 ++++++++++----------
 ui/component/userPasswordReset/index.js      |  6 ++-
 ui/component/userPasswordReset/view.jsx      | 33 +++++++--------
 ui/component/userPasswordSet/view.jsx        |  6 +--
 ui/component/userSignIn/view.jsx             |  4 +-
 ui/component/userSignInPassword/view.jsx     | 32 +++++++--------
 ui/component/userSignOutButton/index.js      | 14 +++----
 ui/component/userSignOutButton/view.jsx      | 18 +++++++--
 ui/constants/pages.js                        |  3 +-
 ui/page/passwordReset/index.js               |  3 --
 ui/page/passwordReset/view.jsx               | 12 ------
 ui/scss/component/_button.scss               |  5 +++
 ui/scss/component/_modal.scss                |  6 ++-
 ui/scss/init/_gui.scss                       |  2 +-
 yarn.lock                                    | 12 +++---
 22 files changed, 145 insertions(+), 133 deletions(-)
 delete mode 100644 ui/page/passwordReset/index.js
 delete mode 100644 ui/page/passwordReset/view.jsx

diff --git a/package.json b/package.json
index 557ea06d2..97ca2d7ee 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
     "@babel/register": "^7.0.0",
     "@exponent/electron-cookies": "^2.0.0",
     "@hot-loader/react-dom": "^16.8",
-    "@lbry/components": "^4.1.1",
+    "@lbry/components": "^4.1.2",
     "@reach/menu-button": "0.7.4",
     "@reach/rect": "^0.2.1",
     "@reach/tabs": "^0.1.5",
@@ -131,7 +131,7 @@
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
     "lbry-redux": "lbryio/lbry-redux#1097a63d44a20b87e443fbaa48f95fe3ea5e3f70",
-    "lbryinc": "lbryio/lbryinc#75f992ef02ddef3e1cfe3a6632710fffd04b0c68",
+    "lbryinc": "lbryio/lbryinc#12aefaa14343d2f3eac01f2683701f58e53f1848",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",
     "lodash-es": "^4.17.14",
diff --git a/ui/component/header/index.js b/ui/component/header/index.js
index 5877c6825..6c0ea9f26 100644
--- a/ui/component/header/index.js
+++ b/ui/component/header/index.js
@@ -2,7 +2,13 @@ import * as SETTINGS from 'constants/settings';
 import * as MODALS from 'constants/modal_types';
 import { connect } from 'react-redux';
 import { selectBalance, formatCredits } from 'lbry-redux';
-import { selectUserVerifiedEmail, selectGetSyncErrorMessage, selectUserEmail } from 'lbryinc';
+import {
+  selectUserVerifiedEmail,
+  selectGetSyncErrorMessage,
+  selectUserEmail,
+  doClearEmailEntry,
+  doClearPasswordEntry,
+} from 'lbryinc';
 import { doSetClientSetting } from 'redux/actions/settings';
 import { doSignOut, doOpenModal } from 'redux/actions/app';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
@@ -26,6 +32,8 @@ const perform = dispatch => ({
   openMobileNavigation: () => dispatch(doOpenModal(MODALS.MOBILE_NAVIGATION)),
   openChannelCreate: () => dispatch(doOpenModal(MODALS.CREATE_CHANNEL)),
   openSignOutModal: () => dispatch(doOpenModal(MODALS.SIGN_OUT)),
+  clearEmailEntry: () => dispatch(doClearEmailEntry()),
+  clearPasswordEntry: () => dispatch(doClearPasswordEntry()),
 });
 
 export default connect(select, perform)(Header);
diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index d19cae5f2..df580c373 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -40,6 +40,8 @@ type Props = {
   openMobileNavigation: () => void,
   openChannelCreate: () => void,
   openSignOutModal: () => void,
+  clearEmailEntry: () => void,
+  clearPasswordEntry: () => void,
 };
 
 const Header = (props: Props) => {
@@ -58,6 +60,8 @@ const Header = (props: Props) => {
     openMobileNavigation,
     openChannelCreate,
     openSignOutModal,
+    clearEmailEntry,
+    clearPasswordEntry,
   } = props;
 
   // on the verify page don't let anyone escape other than by closing the tab to keep session data consistent
@@ -66,7 +70,16 @@ const Header = (props: Props) => {
   // Sign out if they click the "x" when they are on the password prompt
   const authHeaderAction = syncError ? { onClick: signOut } : { navigate: '/' };
   const homeButtonNavigationProps = isVerifyPage ? {} : authHeader ? authHeaderAction : { navigate: '/' };
-  const closeButtonNavigationProps = authHeader ? authHeaderAction : { onClick: () => history.goBack() };
+  const closeButtonNavigationProps = {
+    onClick: () => {
+      clearEmailEntry();
+      clearPasswordEntry();
+
+      if (syncError) {
+        signOut();
+      }
+    },
+  };
 
   function handleThemeToggle() {
     if (automaticDarkModeEnabled) {
@@ -239,7 +252,12 @@ const Header = (props: Props) => {
               {/* This pushes the close button to the right side */}
               <span />
               <Tooltip label={__('Go Back')}>
-                <Button button="link" icon={ICONS.REMOVE} {...closeButtonNavigationProps} />
+                <Button
+                  button="link"
+                  className="button--header-close"
+                  icon={ICONS.REMOVE}
+                  {...closeButtonNavigationProps}
+                />
               </Tooltip>
             </div>
           )
diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx
index 0ccf89aae..943e7e177 100644
--- a/ui/component/router/view.jsx
+++ b/ui/component/router/view.jsx
@@ -29,7 +29,6 @@ import ListBlockedPage from 'page/listBlocked';
 import FourOhFourPage from 'page/fourOhFour';
 import SignInPage from 'page/signIn';
 import SignUpPage from 'page/signUp';
-import PasswordResetPage from 'page/passwordReset';
 import PasswordSetPage from 'page/passwordSet';
 import SignInVerifyPage from 'page/signInVerify';
 import ChannelsPage from 'page/channels';
@@ -156,7 +155,6 @@ function AppRouter(props: Props) {
       <Route path={`/`} exact component={HomePage} />
       <Route path={`/$/${PAGES.DISCOVER}`} exact component={DiscoverPage} />
       <Route path={`/$/${PAGES.AUTH_SIGNIN}`} exact component={SignInPage} />
-      <Route path={`/$/${PAGES.AUTH_PASSWORD_RESET}`} exact component={PasswordResetPage} />
       <Route path={`/$/${PAGES.AUTH_PASSWORD_SET}`} exact component={PasswordSetPage} />
       <Route path={`/$/${PAGES.AUTH}`} exact component={SignUpPage} />
       <Route path={`/$/${PAGES.AUTH}/*`} exact component={SignUpPage} />
diff --git a/ui/component/settingAccountPassword/index.js b/ui/component/settingAccountPassword/index.js
index 40a78ad69..b66d1f30d 100644
--- a/ui/component/settingAccountPassword/index.js
+++ b/ui/component/settingAccountPassword/index.js
@@ -5,7 +5,7 @@ import {
   selectPasswordSetSuccess,
   selectPasswordSetError,
   doUserPasswordSet,
-  doClearPasswordEntries,
+  doClearPasswordEntry,
 } from 'lbryinc';
 import { doToast } from 'lbry-redux';
 import UserSignIn from './view';
@@ -20,5 +20,5 @@ const select = state => ({
 export default connect(select, {
   doUserPasswordSet,
   doToast,
-  doClearPasswordEntries,
+  doClearPasswordEntry,
 })(UserSignIn);
diff --git a/ui/component/settingAccountPassword/view.jsx b/ui/component/settingAccountPassword/view.jsx
index 1165f504a..0b444095b 100644
--- a/ui/component/settingAccountPassword/view.jsx
+++ b/ui/component/settingAccountPassword/view.jsx
@@ -9,7 +9,7 @@ type Props = {
   user: ?User,
   doToast: ({ message: string }) => void,
   doUserPasswordSet: (string, ?string) => void,
-  doClearPasswordEntries: () => void,
+  doClearPasswordEntry: () => void,
   passwordSetPending: boolean,
   passwordSetSuccess: boolean,
   passwordSetError: ?string,
@@ -23,7 +23,7 @@ export default function SettingAccountPassword(props: Props) {
     //  passwordSetPending,
     passwordSetSuccess,
     passwordSetError,
-    doClearPasswordEntries,
+    doClearPasswordEntry,
   } = props;
   const [oldPassword, setOldPassword] = useState('');
   const [newPassword, setNewPassword] = useState('');
@@ -40,11 +40,11 @@ export default function SettingAccountPassword(props: Props) {
       doToast({
         message: __('Password updated successfully.'),
       });
-      doClearPasswordEntries();
+      doClearPasswordEntry();
       setOldPassword('');
       setNewPassword('');
     }
-  }, [passwordSetSuccess, setOldPassword, setNewPassword, doClearPasswordEntries, doToast]);
+  }, [passwordSetSuccess, setOldPassword, setNewPassword, doClearPasswordEntry, doToast]);
 
   return (
     <Card
diff --git a/ui/component/userEmailNew/view.jsx b/ui/component/userEmailNew/view.jsx
index b114fa6b1..f6dc89349 100644
--- a/ui/component/userEmailNew/view.jsx
+++ b/ui/component/userEmailNew/view.jsx
@@ -9,6 +9,7 @@ import I18nMessage from 'component/i18nMessage';
 import { useHistory } from 'react-router-dom';
 import Card from 'component/common/card';
 import ErrorText from 'component/common/error-text';
+import Nag from 'component/common/nag';
 
 type Props = {
   errorMessage: ?string,
@@ -95,7 +96,6 @@ function UserEmailNew(props: Props) {
             <Form onSubmit={handleSubmit} className="section">
               <FormField
                 autoFocus
-                autoComplete
                 placeholder={__('hotstuff_96@hotmail.com')}
                 type="email"
                 name="sign_up_email"
@@ -152,26 +152,22 @@ function UserEmailNew(props: Props) {
                 />
                 <Button button="link" onClick={handleChangeToSignIn} label={__('Sign In')} />
               </div>
+              <p className="help">
+                <I18nMessage
+                  tokens={{
+                    terms: (
+                      <Button button="link" href="https://www.lbry.com/termsofservice" label={__('Terms of Service')} />
+                    ),
+                  }}
+                >
+                  By continuing, I agree to the %terms% and confirm I am over the age of 13.
+                </I18nMessage>
+              </p>
             </Form>
-            {errorMessage && (
-              <div className="section">
-                <ErrorText>{errorMessage}</ErrorText>
-              </div>
-            )}
           </div>
         }
+        nag={errorMessage && <Nag type="error" relative message={<ErrorText>{errorMessage}</ErrorText>} />}
       />
-      <p className="card__bottom-gutter">
-        <span>
-          <I18nMessage
-            tokens={{
-              terms: <Button button="link" href="https://www.lbry.com/termsofservice" label={__('Terms of Service')} />,
-            }}
-          >
-            By continuing, I agree to the %terms% and confirm I am over the age of 13.
-          </I18nMessage>
-        </span>
-      </p>
     </div>
   );
 }
diff --git a/ui/component/userEmailVerify/view.jsx b/ui/component/userEmailVerify/view.jsx
index 5315fd2b7..446904f59 100644
--- a/ui/component/userEmailVerify/view.jsx
+++ b/ui/component/userEmailVerify/view.jsx
@@ -76,29 +76,29 @@ class UserEmailVerify extends React.PureComponent<Props> {
             </p>
           }
           actions={
-            <div className="section__actions">
-              <Button
-                button="primary"
-                label={__('Resend Email')}
-                onClick={this.handleResendVerificationEmail}
-                disabled={resendingEmail}
-              />
-              <UserSignOutButton label={__('Start Over')} />
-            </div>
+            <React.Fragment>
+              <div className="section__actions">
+                <Button
+                  button="primary"
+                  label={__('Resend Email')}
+                  onClick={this.handleResendVerificationEmail}
+                  disabled={resendingEmail}
+                />
+                <UserSignOutButton label={__('Start Over')} />
+              </div>
+              <p className="help">
+                <I18nMessage
+                  tokens={{
+                    help_link: <Button button="link" href="mailto:help@lbry.com" label="help@lbry.com" />,
+                    chat_link: <Button button="link" href="https://chat.lbry.com" label="chat" />,
+                  }}
+                >
+                  Email %help_link% or join our %chat_link% if you encounter any trouble verifying.
+                </I18nMessage>
+              </p>
+            </React.Fragment>
           }
         />
-        <p className="card__bottom-gutter">
-          <span>
-            <I18nMessage
-              tokens={{
-                help_link: <Button button="link" href="mailto:help@lbry.com" label="help@lbry.com" />,
-                chat_link: <Button button="link" href="https://chat.lbry.com" label="chat" />,
-              }}
-            >
-              Email %help_link% or join our %chat_link% if you encounter any trouble verifying.
-            </I18nMessage>
-          </span>
-        </p>
       </div>
     );
   }
diff --git a/ui/component/userPasswordReset/index.js b/ui/component/userPasswordReset/index.js
index ecd39d97f..af7e940da 100644
--- a/ui/component/userPasswordReset/index.js
+++ b/ui/component/userPasswordReset/index.js
@@ -4,7 +4,8 @@ import {
   selectPasswordResetSuccess,
   selectPasswordResetIsPending,
   selectPasswordResetError,
-  doClearPasswordEntries,
+  doClearPasswordEntry,
+  doClearEmailEntry,
 } from 'lbryinc';
 import { doToast } from 'lbry-redux';
 import UserSignIn from './view';
@@ -18,5 +19,6 @@ const select = state => ({
 export default connect(select, {
   doUserPasswordReset,
   doToast,
-  doClearPasswordEntries,
+  doClearPasswordEntry,
+  doClearEmailEntry,
 })(UserSignIn);
diff --git a/ui/component/userPasswordReset/view.jsx b/ui/component/userPasswordReset/view.jsx
index cc4a3b857..a66a237ca 100644
--- a/ui/component/userPasswordReset/view.jsx
+++ b/ui/component/userPasswordReset/view.jsx
@@ -14,7 +14,8 @@ type Props = {
   user: ?User,
   doToast: ({ message: string }) => void,
   doUserPasswordReset: string => void,
-  doClearPasswordEntries: () => void,
+  doClearPasswordEntry: () => void,
+  doClearEmailEntry: () => void,
   passwordResetPending: boolean,
   passwordResetSuccess: boolean,
   passwordResetError: ?string,
@@ -27,9 +28,10 @@ function UserPasswordReset(props: Props) {
     passwordResetError,
     passwordResetSuccess,
     doToast,
-    doClearPasswordEntries,
+    doClearPasswordEntry,
+    doClearEmailEntry,
   } = props;
-  const { location, replace } = useHistory();
+  const { location, push } = useHistory();
   const { search } = location;
   const urlParams = new URLSearchParams(search);
   const defaultEmail = urlParams.get('email');
@@ -44,8 +46,9 @@ function UserPasswordReset(props: Props) {
 
   function handleRestart() {
     setEmail('');
-    doClearPasswordEntries();
-    replace();
+    doClearPasswordEntry();
+    doClearEmailEntry();
+    push(`/$/${PAGES.AUTH_SIGNIN}`);
   }
 
   React.useEffect(() => {
@@ -83,27 +86,21 @@ function UserPasswordReset(props: Props) {
                   label={passwordResetPending ? __('Resetting') : __('Reset Password')}
                   disabled={!email || !valid || passwordResetPending || passwordResetSuccess}
                 />
-                {passwordResetSuccess && <Button button="link" label={__('Restart')} onClick={handleRestart} />}
+                <Button button="link" label={__('Cancel')} onClick={handleRestart} />
                 {passwordResetPending && <Spinner type="small" />}
               </div>
             </Form>
-            {passwordResetError && (
-              <div className="section">
-                <ErrorText>{passwordResetError}</ErrorText>
-              </div>
-            )}
           </div>
         }
         nag={
-          passwordResetSuccess && (
-            <Nag type="helpful" relative message={__('Check your email for a link to reset your password.')} />
-          )
+          <React.Fragment>
+            {passwordResetError && <Nag type="error" relative message={<ErrorText>{passwordResetError}</ErrorText>} />}
+            {passwordResetSuccess && (
+              <Nag type="helpful" relative message={__('Check your email for a link to reset your password.')} />
+            )}
+          </React.Fragment>
         }
       />
-      <div className="card__bottom-gutter">
-        <Button button="link" label={__('Sign Up')} navigate={`/$/${PAGES.AUTH}`} />
-        <Button button="link" label={__('Sign In')} navigate={`/$/${PAGES.AUTH_SIGNIN}`} />
-      </div>
     </section>
   );
 }
diff --git a/ui/component/userPasswordSet/view.jsx b/ui/component/userPasswordSet/view.jsx
index fc49d5ab1..70838a524 100644
--- a/ui/component/userPasswordSet/view.jsx
+++ b/ui/component/userPasswordSet/view.jsx
@@ -93,7 +93,7 @@ function UserPasswordReset(props: Props) {
                   label={loading ? __('Update Password') : __('Updating Password')}
                   disabled={!password || loading}
                 />
-                {error && <Button button="link" label={__('Restart')} onClick={handleRestart} />}
+                <Button button="link" label={__('Cancel')} onClick={handleRestart} />
                 {loading && <Spinner type="small" />}
               </div>
             </Form>
@@ -101,10 +101,6 @@ function UserPasswordReset(props: Props) {
         }
         nag={error && <Nag type="error" relative message={<ErrorText>{error}</ErrorText>} />}
       />
-      <div className="card__bottom-gutter">
-        <Button button="link" label={__('Sign Up')} navigate={`/$/${PAGES.AUTH}`} />
-        <Button button="link" label={__('Sign In')} navigate={`/$/${PAGES.AUTH_SIGNIN}`} />
-      </div>
     </section>
   );
 }
diff --git a/ui/component/userSignIn/view.jsx b/ui/component/userSignIn/view.jsx
index b8d1485e0..e63b91849 100644
--- a/ui/component/userSignIn/view.jsx
+++ b/ui/component/userSignIn/view.jsx
@@ -40,13 +40,13 @@ function UserSignIn(props: Props) {
 
   return (
     <section>
-      {!showLoading && (
+      {(showEmail || showPassword) && (
         <div>
           {showEmail && <UserEmailReturning />}
           {showPassword && <UserSignInPassword onHandleEmailOnly={() => setEmailOnlyLogin(true)} />}
         </div>
       )}
-      {showLoading && (
+      {!showEmail && !showPassword && showLoading && (
         <div className="main--empty">
           <Spinner delayed />
         </div>
diff --git a/ui/component/userSignInPassword/view.jsx b/ui/component/userSignInPassword/view.jsx
index 1d9777a35..03d6d1e65 100644
--- a/ui/component/userSignInPassword/view.jsx
+++ b/ui/component/userSignInPassword/view.jsx
@@ -1,11 +1,11 @@
 // @flow
-import * as PAGES from 'constants/pages';
 import React, { useState } from 'react';
 import { FormField, Form } from 'component/common/form';
 import Button from 'component/button';
 import Card from 'component/common/card';
 import analytics from 'analytics';
 import Nag from 'component/common/nag';
+import UserPasswordReset from 'component/userPasswordReset';
 
 type Props = {
   errorMessage: ?string,
@@ -16,8 +16,9 @@ type Props = {
 };
 
 export default function UserSignInPassword(props: Props) {
-  const { errorMessage, doUserSignIn, emailToVerify, doClearEmailEntry, onHandleEmailOnly } = props;
+  const { errorMessage, doUserSignIn, emailToVerify, onHandleEmailOnly } = props;
   const [password, setPassword] = useState('');
+  const [forgotPassword, setForgotPassword] = React.useState(false);
 
   function handleSubmit() {
     if (emailToVerify) {
@@ -32,11 +33,13 @@ export default function UserSignInPassword(props: Props) {
 
   return (
     <div className="main__sign-in">
-      <Card
-        title={__('Enter Your lbry.tv Password')}
-        subtitle={__('Signing in with %email%', { email: emailToVerify })}
-        actions={
-          <div>
+      {forgotPassword ? (
+        <UserPasswordReset />
+      ) : (
+        <Card
+          title={__('Enter Your lbry.tv Password')}
+          subtitle={__('Signing in as %email%', { email: emailToVerify })}
+          actions={
             <Form onSubmit={handleSubmit} className="section">
               <FormField
                 autoFocus
@@ -47,6 +50,7 @@ export default function UserSignInPassword(props: Props) {
                 label={__('Password')}
                 value={password}
                 onChange={e => setPassword(e.target.value)}
+                helper={<Button button="link" label={__('Forgot Password?')} onClick={() => setForgotPassword(true)} />}
               />
 
               <div className="section__actions">
@@ -54,18 +58,10 @@ export default function UserSignInPassword(props: Props) {
                 <Button button="link" onClick={handleChangeToSignIn} label={__('Use Magic Link')} />
               </div>
             </Form>
-          </div>
-        }
-        nag={errorMessage && <Nag type="error" relative message={errorMessage} />}
-      />
-      <p className="card__bottom-gutter">
-        <Button
-          button="link"
-          label={__('Forgot Password?')}
-          navigate={`/$/${PAGES.AUTH_PASSWORD_RESET}?email=${encodeURIComponent(emailToVerify || '')}`}
+          }
+          nag={errorMessage && <Nag type="error" relative message={errorMessage} />}
         />
-        <Button button="link" onClick={doClearEmailEntry} label={__('Cancel')} />
-      </p>
+      )}
     </div>
   );
 }
diff --git a/ui/component/userSignOutButton/index.js b/ui/component/userSignOutButton/index.js
index 4fa19d951..b4f98eda7 100644
--- a/ui/component/userSignOutButton/index.js
+++ b/ui/component/userSignOutButton/index.js
@@ -1,14 +1,12 @@
 import { connect } from 'react-redux';
 import { doSignOut } from 'redux/actions/app';
+import { doClearEmailEntry, doClearPasswordEntry } from 'lbryinc';
 import UserSignOutButton from './view';
 
 const select = state => ({});
 
-const perform = dispatch => ({
-  signOut: () => dispatch(doSignOut()),
-});
-
-export default connect(
-  select,
-  perform
-)(UserSignOutButton);
+export default connect(select, {
+  doSignOut,
+  doClearEmailEntry,
+  doClearPasswordEntry,
+})(UserSignOutButton);
diff --git a/ui/component/userSignOutButton/view.jsx b/ui/component/userSignOutButton/view.jsx
index b624f1b33..ca0dbfc92 100644
--- a/ui/component/userSignOutButton/view.jsx
+++ b/ui/component/userSignOutButton/view.jsx
@@ -5,13 +5,25 @@ import Button from 'component/button';
 type Props = {
   button: string,
   label?: string,
-  signOut: () => void,
+  doSignOut: () => void,
+  doClearEmailEntry: () => void,
+  doClearPasswordEntry: () => void,
 };
 
 function UserSignOutButton(props: Props) {
-  const { button = 'link', signOut, label } = props;
+  const { button = 'link', doSignOut, doClearEmailEntry, doClearPasswordEntry, label } = props;
 
-  return <Button button={button} label={label || __('Sign Out')} onClick={signOut} />;
+  return (
+    <Button
+      button={button}
+      label={label || __('Sign Out')}
+      onClick={() => {
+        doClearPasswordEntry();
+        doClearEmailEntry();
+        doSignOut();
+      }}
+    />
+  );
 }
 
 export default UserSignOutButton;
diff --git a/ui/constants/pages.js b/ui/constants/pages.js
index 91b0d7a2b..dd71323cc 100644
--- a/ui/constants/pages.js
+++ b/ui/constants/pages.js
@@ -1,8 +1,7 @@
 exports.AUTH = 'signup';
 exports.AUTH_SIGNIN = 'signin';
 exports.AUTH_VERIFY = 'verify';
-exports.AUTH_PASSWORD_RESET = 'password-reset';
-exports.AUTH_PASSWORD_SET = 'reset'; // Change this in internal-apis
+exports.AUTH_PASSWORD_SET = 'reset';
 exports.BACKUP = 'backup';
 exports.CHANNEL = 'channel';
 exports.DISCOVER = 'discover';
diff --git a/ui/page/passwordReset/index.js b/ui/page/passwordReset/index.js
deleted file mode 100644
index e3cf8568c..000000000
--- a/ui/page/passwordReset/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import PasswordResetPage from './view';
-
-export default PasswordResetPage;
diff --git a/ui/page/passwordReset/view.jsx b/ui/page/passwordReset/view.jsx
deleted file mode 100644
index 3fe6f33e5..000000000
--- a/ui/page/passwordReset/view.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-// @flow
-import React from 'react';
-import UserPasswordReset from 'component/userPasswordReset';
-import Page from 'component/page';
-
-export default function PasswordResetPage() {
-  return (
-    <Page authPage className="main--auth-page">
-      <UserPasswordReset />
-    </Page>
-  );
-}
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index bf674ba7d..764aac5c1 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -46,6 +46,11 @@
   }
 }
 
+.button--header-close {
+  background-color: var(--color-primary-alt);
+  padding: var(--spacing-small);
+}
+
 .button--download-link {
   .button__label {
     white-space: normal;
diff --git a/ui/scss/component/_modal.scss b/ui/scss/component/_modal.scss
index 51295e915..a3f87a96f 100644
--- a/ui/scss/component/_modal.scss
+++ b/ui/scss/component/_modal.scss
@@ -1,7 +1,9 @@
 .ReactModal__Body--open {
   #app {
-    height: 100vh;
-    overflow-y: hidden;
+    @media (max-width: $breakpoint-small) {
+      height: 100vh;
+      overflow-y: hidden;
+    }
   }
 }
 
diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss
index ec397074b..24ed8228b 100644
--- a/ui/scss/init/_gui.scss
+++ b/ui/scss/init/_gui.scss
@@ -201,7 +201,7 @@ img {
   display: block;
   font-size: var(--font-small);
   color: var(--color-text-help);
-  margin-top: var(--spacing-miniscule);
+  margin-top: var(--spacing-small);
   margin-bottom: var(--spacing-small);
 }
 
diff --git a/yarn.lock b/yarn.lock
index d70251459..2aa2dee46 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -819,10 +819,10 @@
     prop-types "^15.6.2"
     scheduler "^0.18.0"
 
-"@lbry/components@^4.1.1":
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-4.1.1.tgz#5830fa0321565965ede3c48ff39518cb24691b3a"
-  integrity sha512-XgeA6q4vnmRHNkM4M5BddRqsIn9DkLgozjhoGuY5j1hnQcyYim3X+pxa7IASL/iS8jOre9JzPDp1bG0HaRgF8w==
+"@lbry/components@^4.1.2":
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-4.1.2.tgz#18eda2f1a73a6241e9a96594ccab8fffb9ef3ae9"
+  integrity sha512-GJx4BTdEtOlm5/JsKUVXBzYeepXTbZ4GjGFrKxzXh6jWw40aFOh8OrHwYM/LHRl1fuKRmB5xpZNWsjw6EKyEeQ==
 
 "@mapbox/hast-util-table-cell-style@^0.1.3":
   version "0.1.3"
@@ -6147,9 +6147,9 @@ lbry-redux@lbryio/lbry-redux#1097a63d44a20b87e443fbaa48f95fe3ea5e3f70:
     reselect "^3.0.0"
     uuid "^3.3.2"
 
-lbryinc@lbryio/lbryinc#75f992ef02ddef3e1cfe3a6632710fffd04b0c68:
+lbryinc@lbryio/lbryinc#12aefaa14343d2f3eac01f2683701f58e53f1848:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/75f992ef02ddef3e1cfe3a6632710fffd04b0c68"
+  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/12aefaa14343d2f3eac01f2683701f58e53f1848"
   dependencies:
     reselect "^3.0.0"
 
-- 
2.45.3


From 375567862966da7dba0c1afe288ec6f45b31f9c5 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 13 Apr 2020 14:20:30 -0400
Subject: [PATCH 13/15] slightly improve close button on sign up page

---
 package.json                                 |  2 +-
 ui/component/header/view.jsx                 |  5 +++++
 ui/component/settingAccountPassword/index.js |  2 --
 ui/component/settingAccountPassword/view.jsx | 11 +----------
 4 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 97ca2d7ee..47eb26d92 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "dev:electron": "cross-env NODE_ENV=development node ./electron/devServer.js",
     "dev:web": "cd ./lbrytv && yarn dev",
     "dev:web-server": "cross-env NODE_ENV=development yarn compile:web && concurrently \"cross-env NODE_ENV=development yarn compile:web --watch\" \"cd ./lbrytv && yarn dev:server\"",
-    "dev:internal-apis": "LBRY_API_URL='http://' yarn dev:web",
+    "dev:internal-apis": "LBRY_API_URL='http://localhost:8080' yarn dev:electron",
     "dev:iatv": "LBRY_API_URL='http://localhost:15400' SDK_API_URL='http://localhost:15100' yarn dev:web",
     "run:web": "cross-env NODE_ENV=production yarn compile:web && node ./dist/web/server.js",
     "run:web-server": "cross-env NODE_ENV=production yarn compile:web && cd ./lbrytv && yarn dev:server",
diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index df580c373..872631056 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -66,6 +66,7 @@ const Header = (props: Props) => {
 
   // on the verify page don't let anyone escape other than by closing the tab to keep session data consistent
   const isVerifyPage = history.location.pathname.includes(PAGES.AUTH_VERIFY);
+  const isSignUpPage = history.location.pathname.includes(PAGES.AUTH);
 
   // Sign out if they click the "x" when they are on the password prompt
   const authHeaderAction = syncError ? { onClick: signOut } : { navigate: '/' };
@@ -75,6 +76,10 @@ const Header = (props: Props) => {
       clearEmailEntry();
       clearPasswordEntry();
 
+      if (isSignUpPage) {
+        history.goBack();
+      }
+
       if (syncError) {
         signOut();
       }
diff --git a/ui/component/settingAccountPassword/index.js b/ui/component/settingAccountPassword/index.js
index b66d1f30d..180f05cde 100644
--- a/ui/component/settingAccountPassword/index.js
+++ b/ui/component/settingAccountPassword/index.js
@@ -1,7 +1,6 @@
 import { connect } from 'react-redux';
 import {
   selectUser,
-  selectPasswordSetIsPending,
   selectPasswordSetSuccess,
   selectPasswordSetError,
   doUserPasswordSet,
@@ -12,7 +11,6 @@ import UserSignIn from './view';
 
 const select = state => ({
   user: selectUser(state),
-  passwordSetPending: selectPasswordSetIsPending(state),
   passwordSetSuccess: selectPasswordSetSuccess(state),
   passwordSetError: selectPasswordSetError(state),
 });
diff --git a/ui/component/settingAccountPassword/view.jsx b/ui/component/settingAccountPassword/view.jsx
index 0b444095b..20f4deb13 100644
--- a/ui/component/settingAccountPassword/view.jsx
+++ b/ui/component/settingAccountPassword/view.jsx
@@ -10,21 +10,12 @@ type Props = {
   doToast: ({ message: string }) => void,
   doUserPasswordSet: (string, ?string) => void,
   doClearPasswordEntry: () => void,
-  passwordSetPending: boolean,
   passwordSetSuccess: boolean,
   passwordSetError: ?string,
 };
 
 export default function SettingAccountPassword(props: Props) {
-  const {
-    user,
-    doToast,
-    doUserPasswordSet,
-    //  passwordSetPending,
-    passwordSetSuccess,
-    passwordSetError,
-    doClearPasswordEntry,
-  } = props;
+  const { user, doToast, doUserPasswordSet, passwordSetSuccess, passwordSetError, doClearPasswordEntry } = props;
   const [oldPassword, setOldPassword] = useState('');
   const [newPassword, setNewPassword] = useState('');
   const [isAddingPassword, setIsAddingPassword] = useState(false);
-- 
2.45.3


From 2cfafceae770d7bb1f512d70fb188666e2aadd66 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 13 Apr 2020 14:45:34 -0400
Subject: [PATCH 14/15] moar fixes

---
 static/app-strings.json                  |  4 +---
 ui/component/header/index.js             |  2 ++
 ui/component/header/view.jsx             | 11 +++++++++--
 ui/component/userEmailReturning/view.jsx |  4 ++--
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index 580d25ed4..2981c0ccd 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -1117,9 +1117,7 @@
   "File Description": "File Description",
   "View %count% reposts": "View %count% reposts",
   "Preparing your content": "Preparing your content",
-  "Sign Up with lbry.tv": "Sign Up with lbry.tv",
   "Already have an account? %sign_in%": "Already have an account? %sign_in%",
   "Sign in with a password (optional)": "Sign in with a password (optional)",
-  "Sign Up": "Sign Up",
   "Don't have an account? %sign_up%": "Don't have an account? %sign_up%"
-}
\ No newline at end of file
+}
diff --git a/ui/component/header/index.js b/ui/component/header/index.js
index 6c0ea9f26..b77d624ab 100644
--- a/ui/component/header/index.js
+++ b/ui/component/header/index.js
@@ -8,6 +8,7 @@ import {
   selectUserEmail,
   doClearEmailEntry,
   doClearPasswordEntry,
+  selectEmailToVerify,
 } from 'lbryinc';
 import { doSetClientSetting } from 'redux/actions/settings';
 import { doSignOut, doOpenModal } from 'redux/actions/app';
@@ -24,6 +25,7 @@ const select = state => ({
   authenticated: selectUserVerifiedEmail(state),
   email: selectUserEmail(state),
   syncError: selectGetSyncErrorMessage(state),
+  emailToVerify: selectEmailToVerify(state),
 });
 
 const perform = dispatch => ({
diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index 872631056..124aa9b1b 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -36,6 +36,7 @@ type Props = {
   authenticated: boolean,
   authHeader: boolean,
   syncError: ?string,
+  emailToVerify?: string,
   signOut: () => void,
   openMobileNavigation: () => void,
   openChannelCreate: () => void,
@@ -62,11 +63,13 @@ const Header = (props: Props) => {
     openSignOutModal,
     clearEmailEntry,
     clearPasswordEntry,
+    emailToVerify,
   } = props;
 
   // on the verify page don't let anyone escape other than by closing the tab to keep session data consistent
   const isVerifyPage = history.location.pathname.includes(PAGES.AUTH_VERIFY);
   const isSignUpPage = history.location.pathname.includes(PAGES.AUTH);
+  const isSignInPage = history.location.pathname.includes(PAGES.AUTH_SIGNIN);
 
   // Sign out if they click the "x" when they are on the password prompt
   const authHeaderAction = syncError ? { onClick: signOut } : { navigate: '/' };
@@ -76,6 +79,10 @@ const Header = (props: Props) => {
       clearEmailEntry();
       clearPasswordEntry();
 
+      if (isSignInPage && !emailToVerify) {
+        history.goBack();
+      }
+
       if (isSignUpPage) {
         history.goBack();
       }
@@ -258,8 +265,8 @@ const Header = (props: Props) => {
               <span />
               <Tooltip label={__('Go Back')}>
                 <Button
-                  button="link"
-                  className="button--header-close"
+                  button="alt"
+                  // className="button--header-close"
                   icon={ICONS.REMOVE}
                   {...closeButtonNavigationProps}
                 />
diff --git a/ui/component/userEmailReturning/view.jsx b/ui/component/userEmailReturning/view.jsx
index eef1a9674..3952df6eb 100644
--- a/ui/component/userEmailReturning/view.jsx
+++ b/ui/component/userEmailReturning/view.jsx
@@ -93,8 +93,8 @@ function UserEmailReturning(props: Props) {
                 <Nag
                   type="helpful"
                   relative
-                  message={__("We can't find that email. Did you mean to sign up?")}
-                  actionText={__('Sign Up')}
+                  message={__("We can't find that email. Did you mean to join?")}
+                  actionText={__('Join')}
                 />
               )}
               {!emailExistsFromUrl && !emailDoesNotExist && errorMessage && (
-- 
2.45.3


From 4dc3ceb30c6c373f0f9a526af1e9ae7574bfd3ee Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 13 Apr 2020 14:53:47 -0400
Subject: [PATCH 15/15] fix password autofil

---
 ui/component/userPasswordReset/index.js | 2 ++
 ui/component/userPasswordReset/view.jsx | 9 ++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/ui/component/userPasswordReset/index.js b/ui/component/userPasswordReset/index.js
index af7e940da..f6799bd8d 100644
--- a/ui/component/userPasswordReset/index.js
+++ b/ui/component/userPasswordReset/index.js
@@ -6,6 +6,7 @@ import {
   selectPasswordResetError,
   doClearPasswordEntry,
   doClearEmailEntry,
+  selectEmailToVerify,
 } from 'lbryinc';
 import { doToast } from 'lbry-redux';
 import UserSignIn from './view';
@@ -14,6 +15,7 @@ const select = state => ({
   passwordResetSuccess: selectPasswordResetSuccess(state),
   passwordResetIsPending: selectPasswordResetIsPending(state),
   passwordResetError: selectPasswordResetError(state),
+  emailToVerify: selectEmailToVerify(state),
 });
 
 export default connect(select, {
diff --git a/ui/component/userPasswordReset/view.jsx b/ui/component/userPasswordReset/view.jsx
index a66a237ca..98f464d35 100644
--- a/ui/component/userPasswordReset/view.jsx
+++ b/ui/component/userPasswordReset/view.jsx
@@ -19,6 +19,7 @@ type Props = {
   passwordResetPending: boolean,
   passwordResetSuccess: boolean,
   passwordResetError: ?string,
+  emailToVerify: ?string,
 };
 
 function UserPasswordReset(props: Props) {
@@ -30,12 +31,10 @@ function UserPasswordReset(props: Props) {
     doToast,
     doClearPasswordEntry,
     doClearEmailEntry,
+    emailToVerify,
   } = props;
-  const { location, push } = useHistory();
-  const { search } = location;
-  const urlParams = new URLSearchParams(search);
-  const defaultEmail = urlParams.get('email');
-  const [email, setEmail] = React.useState(defaultEmail || '');
+  const { push } = useHistory();
+  const [email, setEmail] = React.useState(emailToVerify || '');
   const valid = email.match(EMAIL_REGEX);
 
   function handleSubmit() {
-- 
2.45.3