2016-03-28 22:34:50 +02:00
# React Accounts UI for Meteor 1.3
2016-03-29 13:53:45 +02:00
Current version 1.0.8
2016-03-28 22:34:50 +02:00
## Features
2016-03-29 04:47:40 +02:00
1. **Easy to use** , mixing the ideas of useraccounts configuration and accounts-ui that everyone already knows and loves.
2016-03-28 22:34:50 +02:00
2. **Server Side Rendering** are supported, trough FlowRouter (SSR).
3. **Components** are everywhere, and extensible by replacing them on Accounts.ui.
4. **Basic routing** included.
5. **Unstyled** is the default, no CSS included.
2016-03-29 00:39:15 +02:00
4. **No password** sign up and sign in are included.
2016-03-28 22:34:50 +02:00
2016-03-29 06:35:41 +02:00
### Existing styles (Use these for a complete solution):
2016-03-29 06:34:37 +02:00
* [Basic ](https://atmospherejs.com/studiointeract/react-accounts-ui-basic )
2016-03-29 06:35:41 +02:00
> Create your own styling, se section below on extending and styling.
2016-03-29 06:34:37 +02:00
2016-03-28 22:34:50 +02:00
## Installation
### Meteor 1.3
`meteor add studiointeract:react-accounts-ui`
> Configuration instructions coming shortly! In the meantime check the example below, and for full details about configuration options check in `./lib/accounts_ui.js`
### Meteor 1.2
2016-03-29 00:39:15 +02:00
> Not supported yet.
2016-03-28 22:34:50 +02:00
## Example setup using FlowRouter (Meteor 1.3)
2016-03-28 22:40:55 +02:00
`meteor add accounts-password`
2016-03-29 02:38:29 +02:00
`meteor add studiointeract:react-accounts-ui`
`meteor add kadira:flow-router-ssr`
2016-03-28 22:38:18 +02:00
2016-03-28 22:34:50 +02:00
```javascript
import { FlowRouter } from 'meteor/kadira:flow-router-ssr';
2016-03-29 04:03:32 +02:00
import { Accounts } from 'meteor/studiointeract:react-accounts-ui';
2016-03-28 22:34:50 +02:00
import React from 'react';
Accounts.ui.config({
2016-03-29 00:39:15 +02:00
passwordSignupFields: 'NO_PASSWORD',
2016-03-29 04:03:32 +02:00
loginPath: '/login',
onSignedInHook: () => FlowRouter.go('/general'),
onSignedOutHook: () => FlowRouter.go('/')
2016-03-28 22:34:50 +02:00
});
FlowRouter.route("/login", {
action(params) {
mount(MainLayout, {
content: < Accounts.ui.LoginForm / >
});
}
});
```
2016-03-28 22:53:14 +02:00
## Styled versions
> Check back here later for a list of styled version i.e. bootstrap, semantic-ui.
2016-03-29 00:40:45 +02:00
**And to you who are a package author**, its easy to write extensions for `studiointeract:react-accounts-ui` by importing and export like the following example:
2016-03-28 22:53:14 +02:00
```javascript
// package.js
Package.describe({
name: 'author:react-accounts-ui-bootstrap',
version: '1.0.0',
summary: 'Bootstrap – Accounts UI for React in Meteor 1.3',
git: 'https://github.com/author/react-accounts-ui-bootstrap',
documentation: 'README.md'
});
Package.onUse(function(api) {
2016-03-29 00:41:02 +02:00
api.versionsFrom('1.3');
2016-03-28 22:53:14 +02:00
api.use('ecmascript');
api.use('studiointeract:react-accounts-ui');
2016-03-29 04:59:02 +02:00
api.imply('session');
2016-03-28 22:53:14 +02:00
api.mainModule('main.jsx');
});
```
2016-03-29 00:39:15 +02:00
2016-03-29 03:16:01 +02:00
```javascript
2016-03-29 04:47:40 +02:00
// package.json
2016-03-29 03:16:01 +02:00
{
"name": "react-accounts-ui-bootstrap",
"description": "Bootstrap – Accounts UI for React in Meteor 1.3",
"repository": {
"type": "git",
"url": "https://github.com/author/react-accounts-ui-bootstrap.git"
},
"keywords": [
"react",
"meteor",
"accounts",
"tracker"
],
"author": "author",
"license": "MIT",
"bugs": {
"url": "https://github.com/author/react-accounts-ui-bootstrap/issues"
},
"homepage": "https://github.com/author/react-accounts-ui-bootstrap",
"dependencies": {
"react": "^15.x",
"react-dom": "^15.x",
"tracker-component": "^1.3.3"
}
}
```
2016-03-29 04:47:40 +02:00
To install the dependencies added in package.json run:
`npm i`
2016-03-28 22:53:14 +02:00
```javascript
// main.jsx
2016-03-29 04:59:02 +02:00
import React from 'react';
2016-03-28 22:53:14 +02:00
import { Accounts } from 'meteor/studiointeract:react-accounts-ui';
/**
* Form.propTypes = {
* fields: React.PropTypes.object.isRequired,
* buttons: React.PropTypes.object.isRequired,
* error: React.PropTypes.string,
* ready: React.PropTypes.bool
* };
*/
class Form extends Accounts.ui.Form {
render() {
const { fields, buttons, error, message, ready = true} = this.props;
return (
< form className = {ready ? " ready " : null } onSubmit = { evt = > evt.preventDefault() } className = "accounts-ui" >
< Accounts.ui.Fields fields = { fields } / >
< Accounts.ui.Buttons buttons = { buttons } / >
< Accounts.ui.FormMessage message = { message } / >
< / form >
);
}
}
class Buttons extends Accounts.ui.Buttons {}
class Button extends Accounts.ui.Button {}
class Fields extends Accounts.ui.Fields {}
class Field extends Accounts.ui.Field {}
class FormMessage extends Accounts.ui.FormMessage {}
// Notice! Accounts.ui.LoginForm manages all state logic at the moment, so avoid
// overwriting this one, but have a look at it and learn how it works. And pull
// requests altering how that works are welcome.
// Alter provided default unstyled UI.
Accounts.ui.Form = Form;
Accounts.ui.Buttons = Buttons;
Accounts.ui.Button = Button;
Accounts.ui.Fields = Fields;
Accounts.ui.Field = Field;
Accounts.ui.FormMessage = FormMessage;
2016-03-29 04:47:40 +02:00
// Export the themed version.
2016-03-29 04:59:02 +02:00
export { Accounts as default };
2016-03-28 22:53:14 +02:00
```
### Available components
* Accounts.ui.LoginForm
* Accounts.ui.Form
* Accounts.ui.Fields
* Accounts.ui.Field
* Accounts.ui.Buttons
* Accounts.ui.Button
* Accounts.ui.FormMessage
2016-03-29 05:12:33 +02:00
## Credits
Thx to the Folks at [Studio Interact ](http://studiointeract.se )