diff --git a/packages/forgotPassword/readme.md b/packages/forgotPassword/readme.md index f3f8987f..5739529a 100644 --- a/packages/forgotPassword/readme.md +++ b/packages/forgotPassword/readme.md @@ -1,8 +1,8 @@ ## Fogot Password -React forgot password component in Typescript, Formik and Yup for validation. It accepts props including handlers, custom fields, custom Yup schema, custom header and more. +React forgot password component in Typescript, Formik and Yup for validation. It accepts props including submit and sucess handlers, custom fields, custom Yup schema, choice of default or custom success component, header and more. -![login component](forgotPassword.png) +![forgot password component](forgotPassword.png) ### Install ``` @@ -16,7 +16,7 @@ class ForgotPasswordDemo extends React.Component { async forgotPasswordHandler(values) { // should return a Promise in the shape of LoginHandlerResponse below return await fetch( - 'https://api.example.com/auth', + 'https://api.example.com/auth/reset', { method: 'POST', headers: { @@ -27,15 +27,16 @@ class ForgotPasswordDemo extends React.Component { ).then(resp => resp.json()); } - onSuccess(resp) { - // set auth state, etc. resp has full server response from forgotPasswordHandler(). - window.location.href = '/'; + onSuccess(serverResponse) { + // serverResponse has server's full response from forgotPasswordHandler(). + console.log(serverResponse); } render() { return ; } } @@ -43,18 +44,20 @@ class ForgotPasswordDemo extends React.Component { export default ForgotPasswordDemo; ``` +Notes: a `showDefaultConfirmation` prop set to true will show a default confirmation message. `onSuccess` is optional and can take either a function or a React component instance. If you pass in a function, it will be called with the server's reponse. If you instead pass a component, it will render it. + ### Custom Fields -It's possible to replace the default fields with custom fields and attributes by adding a `customFields` prop. The forgotPasswordHandler will be called with their values after passing validation. +It's possible to replace the default email field with custom field(s) and attributes by adding a `customFields` prop. The forgotPasswordHandler will be called with their values after passing validation. -This array of fields will replace the defaults, so don't forget to add email/username and password if you need them. If you create a Yup schema with matching name attributes, it will properly validate. +This array of fields will replace the defaults, so don't forget to add email back if you need it. If you create and pass in a Yup schema with matching name attributes, it will properly validate. Currently input, select, checkbox and textarea fields are supported. ```javascript } schema={schema} customFields={[ { @@ -66,8 +69,14 @@ Currently input, select, checkbox and textarea fields are supported. { elementType: 'input', type: 'text', - name: 'secretQuestion', + name: 'secretQuestion1', label: 'What is your mother\'s maiden name?' + }, + { + elementType: 'input', + type: 'text', + name: 'secretQuestion2', + label: 'What was the name of your first pet?' } ]} /> @@ -79,9 +88,12 @@ const schema = yup.object().shape({ .email() .max(56) .required(), - secretQuestion: yup + secretQuestion1: yup + .string() + .max(512) + .required(), + secretQuestion2: yup .string() - .min(8) .max(512) .required() }); @@ -115,17 +127,17 @@ interface CustomField { ``` ### CSS -Basic css can be imported: `import '@unleashit/forgotPassword/dist/style.css';`, or you can pass in a custom CSS module. Please see CSS in the main readme of the repo for more info. +Basic css can be imported: `import '@unleashit/forgot-password/dist/style.css';`, or you can pass in a custom CSS module. Please see CSS in the main readme of the repo for more info. ### Props | Name | Type | Description | default | | ----------- | ----------- | ---------| ------- | | forgotPasswordHandler | (values: any) => Promise\ | Called on submission and after validation. Use to check auth. Should return the above interface | required | -| onSuccess | (resp: LoginHandlerResponse) => any | Called if forgotPasswordHandler returns success. Provides the server response from forgotPasswordHandler. Use to redirect, store auth state, etc. | required | +| onSuccess | (resp: LoginHandlerResponse) => any | React.Element | Called if forgotPasswordHandler returns success. Provides the server response from forgotPasswordHandler() if a function is passed. If a component instance is passed instead of a function, it will render | n/a | +| showDefaultConfirmation | boolean | If set to true, show a default confirmation message | false | | schema | yup.Schema\ | Yup schema to override the default | standard validation | | header | React.FC | React component to override default header | basic header | -| loader | React.FC | React component to override default loader | Loading... | -| loginUrl | string | Url for login page. Use only if using default header | /login | -| customFields | CustomField[] | Array of custom fields. Replaces defaults (including email/password). Custom validation schema will be needed. | n/a | +| loader | React.FC | React component to override default loader | Sending... | +| customFields | CustomField[] | Array of custom fields. Replaces defaults (including email). Custom validation schema will be needed. | n/a | | cssModuleStyles | { [key: string]: string } | CSS Module object that optionally replaces default. Class names need to match default names. | default CSS | diff --git a/readme.md b/readme.md index 9d11b1d3..bc05bb2c 100644 --- a/readme.md +++ b/readme.md @@ -4,12 +4,15 @@ Lerna + Yarn Workspaces monorepo of various UI components and NPM modules. Writt Just getting going, so far we have... +### React Components +1. [Pagination](https://github.com/unleashit/npm-library/tree/master/packages/pagination) - responsive pagination component in Typescript. Just give it a total, current offset and handler and it returns the new offset as needed. +2. [Login](https://github.com/unleashit/npm-library/tree/master/packages/login) - login component in Typescript, Formik and Yup for validation. It accepts props including submit and sucess handlers, custom fields, custom Yup schema, choice of default or custom header and more. +3. [Sign-up/registration](https://github.com/unleashit/npm-library/tree/master/packages/signup) - signup component in Typescript, Formik and Yup for validation. It accepts props including submit and sucess handlers, custom fields, custom Yup schema, choice of default or custom header and more. +4. [Forgot password](https://github.com/unleashit/npm-library/tree/master/packages/forgotPassword) - forgot password component in Typescript, Formik and Yup for validation. It accepts props including submit and sucess handlers, custom fields, custom Yup schema, choice of default or custom success component, header and more. +5. [React Help Desk](https://github.com/unleashit/npm-library) - coming soon + +### Other 1. [mock-data](https://github.com/unleashit/npm-library/tree/master/packages/mockData) - Typescript wrapper for [mock-data-generator](https://github.com/danibram/mocker-data-generator) to easily generate random data from a selection of templates or full custom schemas. Returns a JS object and/or a file in JSON format. -2. [React pagination](https://github.com/unleashit/npm-library/tree/master/packages/pagination) - responsive pagination component for React in Typescript. Just give it a total, current offset and handler and it returns the new offset as needed. -3. [React login component](https://github.com/unleashit/npm-library/tree/master/packages/login) - React login component in Typescript, Formik and Yup for validation. It accepts props including submit handlers, custom fields, custom Yup schema, custom header and more. -4. [React sign-up/registration component](https://github.com/unleashit/npm-library/tree/master/packages/signup) - React signup component in Typescript, Formik and Yup for validation. It accepts props including submit handlers, custom fields, custom Yup schema, custom header and more. -5. [React forgot password component](https://github.com/unleashit/npm-library/tree/master/packages/forgotPassword) - coming soon. -6. [React Help Desk](https://github.com/unleashit/npm-library) - coming soon A [demo app](https://github.com/unleashit/npm-library/tree/master/packages/demos) is available for previewing the components. Will probably soon be removed in favor of Storybook.