Skip to content

Commit

Permalink
docs: update forgot password and main readmes
Browse files Browse the repository at this point in the history
  • Loading branch information
@unleashit
unleashit committed Mar 22, 2019
1 parent 6ecd24f commit f905177
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 22 deletions.
46 changes: 29 additions & 17 deletions packages/forgotPassword/readme.md
View file
Original file line number Diff line number Diff line change
@@ -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
```
Expand All @@ -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: {
Expand All @@ -27,34 +27,37 @@ 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 <ForgotPassword
forgotPasswordHandler={this.forgotPasswordHandler}
onSuccess={this.onSuccess}
showDefaultConfirmation={true}
/>;
}
}

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
<ForgotPassword
forgotPasswordHandler={this.forgotPasswordHandler}
onSuccess={this.onSuccess}
onSuccess={<MyCustomConfimationComponent />}
schema={schema}
customFields={[
{
Expand All @@ -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?'
}
]}
/>
Expand All @@ -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()
});
Expand Down Expand Up @@ -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\<ForgotPasswordHandlerResponse> | 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 &#124; 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\<ForgotPasswordSchema> | 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 |
13 changes: 8 additions & 5 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down

0 comments on commit f905177

Please sign in to comment.