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() {
@@ -43,6 +45,12 @@ export default function SettingAccountPassword(props: Props) {
       subtitle={hasPassword ? '' : __('You do not currently have a password set.')}
       actions={
         isAddingPassword ? (
+          <div>
+            {forgotPassword ? (
+              <div className="section__actions">
+                <UserPasswordReset onCancel={() => setForgotPassword(false)} />
+              </div>
+            ) : (
               <div>
                 <Form onSubmit={handleSubmit} className="section">
                   {hasPassword && (
@@ -61,10 +69,11 @@ export default function SettingAccountPassword(props: Props) {
                     value={newPassword}
                     onChange={e => setNewPassword(e.target.value)}
                   />
-
                   <div className="section__actions">
                     <Button button="primary" type="submit" label={__('Set Password')} disabled={!newPassword} />
-                {!hasPassword && (
+                    {hasPassword ? (
+                      <Button button="link" label={__('Forgot Password?')} onClick={() => setForgotPassword(true)} />
+                    ) : (
                       <Button button="link" label={__('Cancel')} onClick={() => setIsAddingPassword(false)} />
                     )}
                   </div>
@@ -75,6 +84,8 @@ export default function SettingAccountPassword(props: Props) {
                   </div>
                 )}
               </div>
+            )}
+          </div>
         ) : (
           <Button
             button="primary"

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,8 +49,13 @@ function UserPasswordReset(props: Props) {
     setEmail('');
     doClearPasswordEntry();
     doClearEmailEntry();
+
+    if (onCancel) {
+      onCancel();
+    } else {
       push(`/$/${PAGES.AUTH_SIGNIN}`);
     }
+  }
 
   React.useEffect(() => {
     if (passwordResetSuccess) {