Skip to content

Commit

Permalink
Merge pull request #22 from meteor-useraccounts/react-usage
Browse files Browse the repository at this point in the history 
clarify React usage in README
  • Loading branch information
@splendido
splendido committed Dec 7, 2015
2 parents 8ef8bea + 34af472 commit 1701c41
Showing 1 changed file with 70 additions and 48 deletions.
118 changes: 70 additions & 48 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,81 +58,78 @@ AccountsTemplates.configure({
});
```

Useraccounts:flow-routing uses the internal useraccounts

```fullPageAtForm``` is the built-in template useraccounts uses by default for its forms. You can override it on a per-route basis (see below) or replace it with ```defaultTemplate:``` field as above (templates specified in route config will still take precedence). Omit ```defaultTemplate``` (or set to an empty string) to use the ```fullPageAtForm``` template built-in to your useraccounts UI package (ex [material](https://github.com/meteor-useraccounts/materialize/blob/master/lib/full_page_at_form.html)).
`useraccounts:flow-routing` uses the internal useraccounts `fullPageAtForm` is the built-in template useraccounts uses by default for its forms. You can override it on a per-route basis (see below) or replace it with `defaultTemplate:` field as above (templates specified in route config will still take precedence). Omit `defaultTemplate` (or set to an empty string) to use the `fullPageAtForm` template built-in to your useraccounts UI package (ex [material](https://github.com/meteor-useraccounts/materialize/blob/master/lib/full_page_at_form.html)).

NOTE: The above configs must load BEFORE your AccountsTemplates routes are defined (next section).

## React Configuration

Firstly, please ensure that your app depends upon the [React Layout][3] and the [Blaze Layout][2] packages.
User Accounts currents only renders Blaze templates. In order to use User Accounts with React we rely on the [Blaze To React][4] package to render the User Accounts templates.
Firstly, please ensure that your app depends upon the [React Layout][3] and the [Blaze Layout][2] packages. User Accounts currents only renders Blaze templates. In order to use User Accounts with React we rely on the [Blaze To React][4] package to render the User Accounts templates.

Before you configure routes for User Accounts with Flow Router, you will need to make sure you have set a few default configuration items.

Assuming you have a main layout that looks like this:
Assuming you have a main layout that looks like following and you have `<Nav />` and `<Footer />` as your default nav/footer components:

```jsx
MainLayout = React.createClass({
render() {
return <div>
<header>
{this.props.header}
</header>
<main>
{this.props.main}
</main>
<footer>
{this.props.footer}
</footer>
</div>
return (
<div>
<header>
{this.props.nav || <Nav />}
</header>
<main>
{this.props.main}
</main>
<footer>
{this.props.footer || <Footer />}
</footer>
</div>
);
}
});
```

You would configure this package to use it like this:
You would then configure this package to use it like this:

```js
AccountsTemplates.configure({
defaultLayoutType: 'blaze-to-react',
defaultTemplate: 'myCustomFullPageAtForm',
defaultLayout: MainLayout,
defaultLayoutRegions: {
header: <MyNav />,
footer: <MyFooter />
},
defaultContentRegion: 'main'
defaultLayoutType: 'blaze-to-react',
defaultTemplate: 'fullPageAtForm', // default
defaultLayout: MainLayout,
defaultLayoutRegions: {
nav: <Nav />,
footer: <Footer />
},
defaultContentRegion: 'main'
});
```

If you don't have extra content regions (nav, footer, etc) you should pass an empty object to ```defaultLayoutRegions``` key of the config.
If you don't have extra content regions (nav, footer, etc) you should pass an empty object to the `defaultLayoutRegions` key of the config.

```js
AccountsTemplates.configure({
defaultLayoutType: 'blaze-to-react',
defaultTemplate: 'myCustomFullPageAtForm',
defaultLayout: MainLayout,
defaultLayoutRegions: {},
defaultContentRegion: 'main'
defaultTemplate: 'myCustomFullPageAtForm',
defaultLayout: MainLayout,
defaultLayoutRegions: {},
defaultContentRegion: 'main'
});
```
Useraccounts:flow-routing uses the internal useraccounts

```fullPageAtForm``` is the built-in **Blaze** template useraccounts uses by default for its forms. You can override it on a per-route basis (see below) or replace it with ```defaultTemplate:``` field as above (templates specified in route config will still take precedence). Omit ```defaultTemplate``` (or set to an empty string) to use the ```fullPageAtForm``` template built-in to your useraccounts UI package (ex [material](https://github.com/meteor-useraccounts/materialize/blob/master/lib/full_page_at_form.html)).
`useraccounts:flow-routing` uses `fullPageAtForm` for the `defaultTemplate` option. `fullPageAtForm` is the built-in Blaze template that all UserAccounts themed packages (Bootstrap, Materialize, etc.) use for their forms. You can override it on a per-route basis (see below) or replace it as shown above (templates specified in a route config will still take precedence). Omit `defaultTemplate` (or set to an empty string) to use the `fullPageAtForm` template built-in to your useraccounts UI package (ex [material](https://github.com/meteor-useraccounts/materialize/blob/master/lib/full_page_at_form.html)).

Please note that this template must be a **Blaze** template. It will be rendered into your React layout using [Blaze To React][4].

NOTE: The above configs must load BEFORE your AccountsTemplates routes are defined (next section).


## Routes

There are no routes provided by default, but you can easily configure routes for sign in, sign up, forgot password, reset password, change password, enroll account using `AccountsTemplates.configureRoute`.

The simplest way is to make the call passing in only a route code (available route codes are: signIn, signUp, changePwd, forgotPwd, resetPwd, enrollAccount).

This will set up the sign in route with a full-page form:
This will set up the sign in route with a full-page form at `/sign-in`:

```js
AccountsTemplates.configureRoute('signIn');
Expand All @@ -146,24 +143,47 @@ AccountsTemplates.configureRoute(route_code, options);

The following is a complete example of a custom route configuration:

##### Blaze

```js
// routes.js

AccountsTemplates.configureRoute('signIn', {
layoutType: 'blaze',
name: 'signin',
path: '/login',
template: 'myLogin',
layoutTemplate: 'myLayout',
layoutRegions: {
nav: 'myNav',
footer: 'myFooter'
},
contentRegion: 'main'
layoutType: 'blaze',
name: 'signin',
path: '/login',
template: 'myLogin',
layoutTemplate: 'myLayout',
layoutRegions: {
nav: 'customNav',
footer: 'customFooter'
},
contentRegion: 'main'
});
```

##### React

```jsx
// routes.jsx

AccountsTemplates.configureRoute('signIn', {
layoutType: 'blaze-to-react',
name: 'signin',
path: '/login',
template: 'myLogin',
layoutTemplate: CustomLayout,
layoutRegions: {
nav: <CustomNav />,
footer: <CustomFooter />
},
contentRegion: 'main'
});
```

All options are passed to FlowRouter.route() which then creates a new custom route (see the official Flow Router documentation [here](https://atmospherejs.com/kadira/flow-router) for more details).

All the above fields are optional and fall back to default values in case you don't provide them. Default values are as follows:
Default values for all fields are as follows:

| Action | route_code | Route Name | Route Path | Template | Redirect after Timeout |
| --------------- | ------------- | --------------- | --------------- | -------------- |:----------------------:|
Expand All @@ -184,7 +204,9 @@ If you want to protect a route by making sure a user is signed in, you can add t
FlowRouter.route('/private', {
triggersEnter: [AccountsTemplates.ensureSignedIn],
action: function() {
BlazeLayout.render(...)
BlazeLayout.render(...);
// or
ReactLayout.render(...);
}
});
```
Expand All @@ -200,4 +222,4 @@ FlowRouter.triggers.enter([AccountsTemplates.ensureSignedIn]);
[1]: https://atmospherejs.com/kadira/flow-router
[2]: https://atmospherejs.com/kadira/blaze-layout
[3]: https://atmospherejs.com/kadira/react-layout
[4]: https://atmospherejs.com/gwendall/blaze-to-react
[4]: https://atmospherejs.com/gwendall/blaze-to-react

0 comments on commit 1701c41

Please sign in to comment.