lawrentiy / accounts-material

Material UI – Accounts UI for React in Meteor 1.3

React Accounts UI for Meteor 1.3 - Material UI

Current version 1.1.0

Features

1. Easy to use, mixing the ideas of useraccounts configuration and accounts-ui that everyone already knows and loves.
2. Components are everywhere, and extensible by replacing them on Accounts.ui.
3. Basic routing included, redirections when the user clicks a link in an email or when signing in or out.
4. Unstyled is the default, no CSS included.
5. No password sign up and sign in are included.
6. Extra fields is now supported.
7. Server Side Rendering are supported, trough FlowRouter (SSR).
8. Extending to make your own custom form, for your app, or as a package, all components can be extended and customized.

Based on and extends std:accounts-ui

https://github.com/studiointeract/accounts-ui

Installation

meteor add std:accounts-material

Configuration

We support the standard configuration in the account-ui package. But have extended with some new options.

Accounts.ui.config(options)

Example setup (Meteor 1.3)

meteor add accounts-password
meteor add materialize:materialize
meteor add std:accounts-material

import React from 'react';
import { Accounts } from 'meteor/std:accounts-material';

Accounts.ui.config({
  passwordSignupFields: 'NO_PASSWORD',
  loginPath: '/',
});

if (Meteor.isClient) {
  ReactDOM.render(<Accounts.ui.LoginForm />, document.body)
}

Example setup using FlowRouter (Meteor 1.3)

meteor add accounts-password
meteor add materialize:materialize
meteor add std:accounts-material
meteor add kadira:flow-router-ssr

import { FlowRouter } from 'meteor/kadira:flow-router-ssr';
import { Accounts } from 'meteor/std:accounts-material';
import React from 'react';

Accounts.ui.config({
  passwordSignupFields: 'NO_PASSWORD',
  loginPath: '/login',
  onSignedInHook: () => FlowRouter.go('/'),
  onSignedOutHook: () => FlowRouter.go('/')
});

FlowRouter.route("/login", {
  action(params) {
    mount(MainLayout, {
      content: <Accounts.ui.LoginForm />
    });
  }
});

Credits

Made by the creative folks at Studio Interact