Skip to content

Commit

Permalink
Merge pull request #20 from timothyarmes/react
Browse files Browse the repository at this point in the history 
Allow for React-based layouts
  • Loading branch information
@splendido
splendido committed Dec 5, 2015
2 parents 76781ab + 0014903 commit 4220538
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 14 deletions.
75 changes: 72 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,14 @@

User Accounts is a suite of packages for the [Meteor.js](https://www.meteor.com/) platform. It provides highly customizable user accounts UI templates for many different front-end frameworks. At the moment it includes forms for sign in, sign up, forgot password, reset password, change password, enroll account, and link or remove of many 3rd party services.

This package is an optional add-on for integration with [Flow Router][1] and [Blaze Layout][2].
This package is an optional add-on for integration with [Flow Router][1] and either [Blaze Layout][2] or [React Layout][3].

## Configuration
## Blaze Configuration

Firstly, please ensure that your app depends upon the [Blaze Layout][2] package.

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

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:

Expand All @@ -34,6 +37,7 @@ You would configure this package to use it like this:

```js
AccountsTemplates.configure({
defaultLayoutType: 'blaze', // Optional, the default is 'blaze'
defaultTemplate: 'myCustomFullPageAtForm',
defaultLayout: 'myLayout',
defaultLayoutRegions: {
Expand All @@ -60,6 +64,68 @@ Useraccounts:flow-routing uses the internal useraccounts

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.

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:

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

You would 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'
});
```

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

```js
AccountsTemplates.configure({
defaultLayoutType: 'blaze-to-react',
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)).

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`.
Expand All @@ -82,6 +148,7 @@ The following is a complete example of a custom route configuration:

```js
AccountsTemplates.configureRoute('signIn', {
layoutType: 'blaze',
name: 'signin',
path: '/login',
template: 'myLogin',
Expand Down Expand Up @@ -132,3 +199,5 @@ 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
68 changes: 63 additions & 5 deletions lib/core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@

// Add new configuration options
_.extend(AccountsTemplates.CONFIG_PAT, {
defaultLayoutType: Match.Optional(String),
defaultLayout: Match.Optional(Match.OneOf(String, Match.Where(_.isFunction))),
defaultTemplate: Match.Optional(String),
defaultLayoutRegions: Match.Optional(Object),
defaultContentRegion: Match.Optional(String),
Expand Down Expand Up @@ -55,7 +57,6 @@ AccountsTemplates.ROUTE_DEFAULT = {
resendVerificationEmail: { name: "atResendVerificationEmail", path: "/send-again"}
};


// Current configuration values
AccountsTemplates.options.defaultLayoutRegions = {};
// Redirects
Expand Down Expand Up @@ -136,6 +137,8 @@ AccountsTemplates.configureRoute = function(route, options) {
throw new Error("signUp route configured but forbidClientAccountCreation set to true!");
}

// Use BlazeLayout by default
var defaultLayoutType = AccountsTemplates.options.defaultLayoutType || 'blaze';
// fullPageAtForm template unless user specified a different site-wide default
var defaultTemplate = AccountsTemplates.options.defaultTemplate || "fullPageAtForm";
// Determines the default layout to be used in case no specific one is
Expand All @@ -146,11 +149,66 @@ AccountsTemplates.configureRoute = function(route, options) {

var name = options.name; // Default provided...
var path = options.path; // Default provided...
var layoutType = options.layoutType || defaultLayoutType;
var template = options.template || defaultTemplate;
var layoutTemplate = options.layoutTemplate || defaultLayout;
var contentRegion = options.contentRegion || defaultContentRegion;
var layoutRegions = _.clone(options.layoutRegions || defaultLayoutRegions || {});
layoutRegions[contentRegion] = template;

if (layoutType === "blaze") {

// Ensure that we have the required packages to render Blaze templates

if (Package['kadira:blaze-layout']) {
var BlazeLayout = Package['kadira:blaze-layout'].BlazeLayout;
} else {
throw new Error("useraccounts:flow-routing requires that your project includes the BlazeLayout package.");
}

// Strings are assumed to be Blaze template names
layoutRegions[contentRegion] = template;
}

if (layoutType === "blaze-to-react") {

// Ensure that we have the required packages to render Blaze templates
//
// For now we need to render the main template using BlazeToReact

if (Package['react-runtime']) {
var React = Package['react-runtime'].React;
} else {
throw new Error("layoutTemplate is a React element but React runtime package is not found");
}

if (Package['kadira:react-layout']) {
var ReactLayout = Package['kadira:react-layout'].ReactLayout;
} else {
throw new Error("useraccounts:flow-routing requires that your project includes the react-layout package.");
}

if (Package['gwendall:blaze-to-react']) {
var BlazeToReact = Package['gwendall:blaze-to-react'].BlazeToReact;
} else {
throw new Error("useraccounts:flow-routing requires that your project includes the gwendall:blaze-to-react package.");
}

layoutRegions[contentRegion] = React.createElement(BlazeToReact, { blazeTemplate: template });

}

function doLayout() {
if (layoutType === "blaze-to-react") {

// The layout template is a React Class.
// We need to render using ReactLayout and BlazeToReact

ReactLayout.render(layoutTemplate, layoutRegions);
} else {
// Render using BlazeLayout
BlazeLayout.render(layoutTemplate, layoutRegions);
}
}

// Possibly adds token parameter
if (_.contains(["enrollAccount", "resetPwd", "verifyEmail"], route)) {
Expand All @@ -165,7 +223,7 @@ AccountsTemplates.configureRoute = function(route, options) {
}
],
action: function(params) {
BlazeLayout.render(layoutTemplate, layoutRegions);
doLayout();

var token = params.paramToken;
Accounts.verifyEmail(token, function(error) {
Expand All @@ -185,7 +243,7 @@ AccountsTemplates.configureRoute = function(route, options) {
}
],
action: function(params) {
BlazeLayout.render(layoutTemplate, layoutRegions);
doLayout();
}
});
}
Expand All @@ -210,7 +268,7 @@ AccountsTemplates.configureRoute = function(route, options) {
}
],
action: function() {
BlazeLayout.render(layoutTemplate, layoutRegions);
doLayout();
}
});
}
Expand Down
17 changes: 11 additions & 6 deletions package.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,32 +10,37 @@ Package.describe({
name: 'useraccounts:flow-routing',
summary: 'UserAccounts package providing routes configuration capability via kadira:flow-router.',
version: '1.12.4',
git: 'https://github.com/meteor-useraccounts/flow-routing.git'
git: 'https://github.com/meteor-useraccounts/flow-routing.git',
});

Package.onUse(function(api) {
api.versionsFrom('[email protected]');

api.use([
'check',
'kadira:blaze-layout',
'kadira:flow-router',
'underscore',
'useraccounts:core'
'useraccounts:core',
], ['client', 'server']);

api.imply([
'kadira:[email protected]',
'kadira:[email protected]',
'useraccounts:[email protected]'
'useraccounts:[email protected]',
], ['client', 'server']);

api.use([
'react',
'kadira:blaze-layout',
'kadira:react-layout',
'gwendall:[email protected]'
], ['client', 'server'], { weak: true });

api.addFiles([
'lib/core.js',
], ['client', 'server']);

api.addFiles([
'lib/client/client.js',
'lib/client/templates_helpers/at_input.js'
'lib/client/templates_helpers/at_input.js',
], ['client']);
});

0 comments on commit 4220538

Please sign in to comment.