Add change password form (#159)

* Add change password form

* Fix validation callback

* Update title

Author: tar-g

packages/devextreme-cli/templates/react/application/src/NotAuthenticatedContent.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Switch, Route, Redirect } from 'react-router-dom';
 import { SingleCard } from './layouts';
-import { LoginForm, ResetPasswordForm, CreateAccountForm } from './components';
+import { LoginForm, ResetPasswordForm, ChangePasswordForm, CreateAccountForm } from './components';
 
 export default function () {
   return (
@@ -18,12 +18,17 @@ export default function () {
       </Route>
       <Route exact path='/reset-password' >
         <SingleCard
-          title="Password Reset"
+          title="Reset Password"
           description="Please enter the email address that you used to register, and we will send you an email with a link to reset your password."
         >
           <ResetPasswordForm />
         </SingleCard>
       </Route>
+      <Route exact path='/change-password/:recoveryCode' >
+        <SingleCard title="Change Password">
+          <ChangePasswordForm />
+        </SingleCard>
+      </Route>
       <Redirect to={'/login'} />
     </Switch>
   );

packages/devextreme-cli/templates/react/application/src/components/change-password-form/change-password-form.js

@@ -0,0 +1,79 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { useHistory, useParams } from 'react-router-dom';
+import Form, {
+  Item,
+  Label,
+  ButtonItem,
+  ButtonOptions,
+  RequiredRule,
+  CustomRule,
+} from 'devextreme-react/form';
+import LoadIndicator from 'devextreme-react/load-indicator';
+
+export default function (props) {
+  const history = useHistory();
+  const [loading, setLoading] = useState(false);
+  const formData = useRef({});
+  const { recoveryCode } = useParams();
+
+  const onSubmit = useCallback(async (e) => {
+    e.preventDefault();
+    const { password } = formData.current;
+    setLoading(true);
+
+    // Send reset password request
+    console.log(password, recoveryCode);
+
+    history.push('/login');
+  }, [history, recoveryCode]);
+
+  const confirmPassword = useCallback(
+    ({ value }) => value === formData.current.password,
+    []
+  );
+
+  return (
+    <form onSubmit={onSubmit}>
+      <Form formData={formData.current} disabled={loading}>
+        <Item
+          dataField={'password'}
+          editorType={'dxTextBox'}
+          editorOptions={passwordEditorOptions}
+        >
+          <RequiredRule message="Password is required" />
+          <Label visible={false} />
+        </Item>
+        <Item
+          dataField={'confirmedPassword'}
+          editorType={'dxTextBox'}
+          editorOptions={confirmedPasswordEditorOptions}
+        >
+          <RequiredRule message="Password is required" />
+          <CustomRule
+            message={'Passwords do not match'}
+            validationCallback={confirmPassword}
+          />
+          <Label visible={false} />
+        </Item>
+        <ButtonItem>
+          <ButtonOptions
+            width={'100%'}
+            type={'default'}
+            useSubmitBehavior={true}
+          >
+            <span className="dx-button-text">
+              {
+                loading
+                  ? <LoadIndicator width={'24px'} height={'24px'} visible={true} />
+                  : 'Continue'
+              }
+            </span>
+          </ButtonOptions>
+        </ButtonItem>
+      </Form>
+    </form>
+  );
+}
+
+const passwordEditorOptions = { stylingMode: 'filled', placeholder: 'Password', mode: 'password' };
+const confirmedPasswordEditorOptions = { stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' };

packages/devextreme-cli/templates/react/application/src/components/create-account-form/create-account-form.js

@@ -29,7 +29,7 @@ export default function (props) {
   }, [history]);
 
   const confirmPassword = useCallback(
-    ({ value }) => value === formData.current.password ? true : false,
+    ({ value }) => value === formData.current.password,
     []
   );
 

packages/devextreme-cli/templates/react/application/src/components/index.js

@@ -3,4 +3,5 @@ export { default as Footer } from './footer/footer';
 export { default as LoginForm } from './login-form/login-form';
 export { default as ResetPasswordForm } from './reset-password-form/reset-password-form';
 export { default as CreateAccountForm } from './create-account-form/create-account-form';
+export { default as ChangePasswordForm } from './change-password-form/change-password-form';
 export { default as SideNavigationMenu } from './side-navigation-menu/side-navigation-menu';