diff --git a/README.md b/README.md index 2228bbe..3df110d 100644 --- a/README.md +++ b/README.md @@ -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: @@ -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: { @@ -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
+
+ {this.props.header} +
+
+ {this.props.main} +
+ +
+ } +}); +``` + +You would configure this package to use it like this: + +```js +AccountsTemplates.configure({ + defaultLayoutType: 'blaze-to-react', + defaultTemplate: 'myCustomFullPageAtForm', + defaultLayout: MainLayout, + defaultLayoutRegions: { + header: , + 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. + +```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`. @@ -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', @@ -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 \ No newline at end of file diff --git a/lib/core.js b/lib/core.js index 09d0c5b..9b03950 100644 --- a/lib/core.js +++ b/lib/core.js @@ -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), @@ -55,7 +57,6 @@ AccountsTemplates.ROUTE_DEFAULT = { resendVerificationEmail: { name: "atResendVerificationEmail", path: "/send-again"} }; - // Current configuration values AccountsTemplates.options.defaultLayoutRegions = {}; // Redirects @@ -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 @@ -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)) { @@ -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) { @@ -185,7 +243,7 @@ AccountsTemplates.configureRoute = function(route, options) { } ], action: function(params) { - BlazeLayout.render(layoutTemplate, layoutRegions); + doLayout(); } }); } @@ -210,7 +268,7 @@ AccountsTemplates.configureRoute = function(route, options) { } ], action: function() { - BlazeLayout.render(layoutTemplate, layoutRegions); + doLayout(); } }); } diff --git a/package.js b/package.js index 1231a33..3e4351e 100644 --- a/package.js +++ b/package.js @@ -10,7 +10,7 @@ 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) { @@ -18,24 +18,29 @@ Package.onUse(function(api) { api.use([ 'check', - 'kadira:blaze-layout', 'kadira:flow-router', 'underscore', - 'useraccounts:core' + 'useraccounts:core', ], ['client', 'server']); api.imply([ - 'kadira:blaze-layout@2.1.0', 'kadira:flow-router@2.7.0', - 'useraccounts:core@1.12.4' + 'useraccounts:core@1.12.4', ], ['client', 'server']); + api.use([ + 'react', + 'kadira:blaze-layout', + 'kadira:react-layout', + 'gwendall:blaze-to-react@0.1.2' + ], ['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']); });