add change-password form to nextjs app template

Author: GoodDayForSurf

packages/devextreme-cli/src/templates/nextjs/application/src/api/auth.tsx

@@ -51,10 +51,10 @@ export async function createAccount(email<%=#isTypeScript%>: string<%=/isTypeScr
   }
 }
 
-export async function changePassword(email<%=#isTypeScript%>: string<%=/isTypeScript%>, recoveryCode<%=#isTypeScript%>?: string<%=/isTypeScript%>) {
+export async function changePassword(email<%=#isTypeScript%>: string<%=/isTypeScript%>) {
   try {
     // Send request
-    console.log(email, recoveryCode);
+    console.log(email);
 
     return {
       isOk: true

packages/devextreme-cli/src/templates/nextjs/application/src/app/auth/[type]/page.tsx

@@ -2,7 +2,12 @@
 import { use } from 'react';
 import { notFound } from 'next/navigation';
 import { SingleCard } from '@/layouts';
-import { LoginForm, CreateAccountForm, ResetPasswordForm } from '@/components'
+import {
+  LoginForm,
+  CreateAccountForm,
+  ResetPasswordForm,
+  ChangePasswordForm,
+} from '@/components';
 
 const formText<%=#isTypeScript%>: Record<string, Record<string, string>><%=/isTypeScript%> = {
   'login': {
@@ -14,6 +19,9 @@ const formText<%=#isTypeScript%>: Record<string, Record<string, string>><%=/isTy
   'reset-password': {
     title: 'Reset Password',
     description: 'Please enter the email address that you used to register, and we will send you a link to reset your password via Email.'
+  },
+  'change-password': {
+    title: 'Change Password',
   }
 }
 
@@ -22,6 +30,7 @@ function AuthForm({name}<%=#isTypeScript%>: {name: string}<%=/isTypeScript%>) {
     case 'login': return <LoginForm />;
     case 'create-account': return <CreateAccountForm />;
     case 'reset-password': return <ResetPasswordForm />;
+    case 'change-password': return <ChangePasswordForm />;
   }
 }
 

packages/devextreme-cli/src/templates/nextjs/application/src/components/change-password-form/ChangePasswordForm.scss

@@ -0,0 +1,12 @@
+.reset-password-form {
+  .submit-button {
+    margin-top: 18px;
+  }
+
+  .login-link {
+    color: var(--base-accent);
+    font-size: 12px;
+    text-align: center;
+    margin-top: 6px;
+  }
+}

packages/devextreme-cli/src/templates/nextjs/application/src/components/change-password-form/ChangePasswordForm.tsx

@@ -0,0 +1,86 @@
+'use client'
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import Form, {
+  Item,
+  Label,
+  ButtonItem,
+  ButtonOptions,
+  RequiredRule,
+  CustomRule,
+} from 'devextreme-react/form';
+import LoadIndicator from 'devextreme-react/load-indicator';
+import notify from 'devextreme/ui/notify';
+<%=#isTypeScript%>import { ValidationCallbackData } from 'devextreme-react/common';<%=/isTypeScript%>
+import { changePassword } from '../../api/auth';
+
+export default function ChangePasswordForm() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const formData = useRef({ password: '' });
+
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
+  e.preventDefault();
+  const { password } = formData.current;
+  setLoading(true);
+
+  const result = await changePassword(password);
+  setLoading(false);
+
+  if (result.isOk) {
+    router('/login');
+  } else {
+    notify(result.message, 'error', 2000);
+  }
+}, [router]);
+
+const confirmPassword = useCallback(
+  ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => 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/src/templates/nextjs/application/src/components/index.tsx

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

packages/devextreme-cli/testing/__tests__/nextjs-ts.test.js

@@ -6,5 +6,6 @@ testAppTemplate(nextjsTs, {
         profile: 'pages/profile',
         tasks: 'pages/tasks',
         page: 'pages/new-page',
+        'change-password': 'auth/change-password',
     },
 });

packages/devextreme-cli/testing/__tests__/nextjs.test.js

@@ -6,5 +6,6 @@ testAppTemplate(nextjsJs, {
         profile: 'pages/profile',
         tasks: 'pages/tasks',
         page: 'pages/new-page',
+        'change-password': 'auth/change-password',
     },
 });

packages/devextreme-cli/testing/app-template.test.shared.js

@@ -16,6 +16,7 @@ module.exports = (env, { port, urls } = { port: '8080', urls: {} }) => {
         profile: 'profile',
         tasks: 'tasks',
         page: `${(env.engine === 'angular' ? 'pages/' : '')}new-page`,
+        'change-password': 'change-password/123',
         ...urls,
     };
 
@@ -322,7 +323,7 @@ module.exports = (env, { port, urls } = { port: '8080', urls: {} }) => {
                                     await openPage(appUrl);
                                     await logOut();
                                     await page.evaluate(
-                                        'const a = document.createElement("a");a.href="#/change-password/123";a.click()'
+                                        `const a = document.createElement("a");a.href="${getPageURL('change-password')}";a.click()`
                                     );
                                     await page.waitForSelector('form');