Add password reset link to settings page (4468)

CHANGELOG.md

@@ -17,6 +17,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Option to remove abandoned claims from Blocked Channels page _community pr!_ ([#4433](https://github.com/lbryio/lbry-desktop/pull/4433))
 - New channel create/edit page ([#4445](https://github.com/lbryio/lbry-desktop/pull/4445))
 - Add dialog to copy various types of links for a claim _community pr!_ ([#4474](https://github.com/lbryio/lbry-desktop/pull/4474))
+- Add password reset link to settings page for logged in users _community pr!_ ([#4473](https://github.com/lbryio/lbry-desktop/pull/4473))
 
 ### Changed
 

static/app-strings.json

@@ -1252,6 +1252,10 @@
   "Old Password": "Old Password",
   "New Password": "New Password",
   "Set Password": "Set Password",
+  "Reset Your Password": "Reset Your Password",
+  "Reset Password": "Reset Password",
+  "Check your email for a link to reset your password.": "Check your email for a link to reset your password.",
+  "Email sent!": "Email sent!",  
   "App Notifications": "App Notifications",
   "Notification settings for the desktop app.": "Notification settings for the desktop app.",
   "Get notified when a publish or channel is confirmed.": "Get notified when a publish or channel is confirmed.",

ui/component/settingAccountPassword/view.jsx

@@ -4,6 +4,7 @@ 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';
+import UserPasswordReset from 'component/userPasswordReset';
 
 type Props = {
   user: ?User,
@@ -19,6 +20,7 @@ export default function SettingAccountPassword(props: Props) {
   const [oldPassword, setOldPassword] = useState('');
   const [newPassword, setNewPassword] = useState('');
   const [isAddingPassword, setIsAddingPassword] = useState(false);
+  const [forgotPassword, setForgotPassword] = useState(false);
   const hasPassword = user && user.password_set;
 
   function handleSubmit() {
@@ -44,34 +46,43 @@ export default function SettingAccountPassword(props: Props) {
       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)}
-              />
-
+            {forgotPassword ? (
               <div className="section__actions">
-                <Button button="primary" type="submit" label={__('Set Password')} disabled={!newPassword} />
-                {!hasPassword && (
-                  <Button button="link" label={__('Cancel')} onClick={() => setIsAddingPassword(false)} />
-                )}
+                <UserPasswordReset onCancel={() => setForgotPassword(false)} />
               </div>
-            </Form>
-            {passwordSetError && (
-              <div className="section">
-                <ErrorText>{passwordSetError}</ErrorText>
+            ) : (
+              <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={__('Forgot Password?')} onClick={() => setForgotPassword(true)} />
+                    ) : (
+                      <Button button="link" label={__('Cancel')} onClick={() => setIsAddingPassword(false)} />
+                    )}
+                  </div>
+                </Form>
+                {passwordSetError && (
+                  <div className="section">
+                    <ErrorText>{passwordSetError}</ErrorText>
+                  </div>
+                )}
               </div>
             )}
           </div>

ui/component/userPasswordReset/view.jsx

@@ -20,6 +20,7 @@ type Props = {
   passwordResetSuccess: boolean,
   passwordResetError: ?string,
   emailToVerify: ?string,
+  onCancel?: () => void,
 };
 
 function UserPasswordReset(props: Props) {
@@ -32,6 +33,7 @@ function UserPasswordReset(props: Props) {
     doClearPasswordEntry,
     doClearEmailEntry,
     emailToVerify,
+    onCancel,
   } = props;
   const { push } = useHistory();
   const [email, setEmail] = React.useState(emailToVerify || '');
@@ -47,7 +49,12 @@ function UserPasswordReset(props: Props) {
     setEmail('');
     doClearPasswordEntry();
     doClearEmailEntry();
-    push(`/$/${PAGES.AUTH_SIGNIN}`);
+
+    if (onCancel) {
+      onCancel();
+    } else {
+      push(`/$/${PAGES.AUTH_SIGNIN}`);
+    }
   }
 
   React.useEffect(() => {