Semantic UI – Accounts UI for React in Meteor 1.3

Current version 1.1.8

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.
9. States API makes it possible to use the form on different routes, say you want the login on one route and signup on another, just set the inital state and the links (either globally or per component by using the props).

Based on and extends std:accounts-ui

https://atmospherejs.com/std/accounts-ui

Installation

meteor add std:accounts-semantic

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 semantic:ui-css
meteor add std:accounts-semantic

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

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 semantic:ui-css
meteor add std:accounts-semantic
meteor add kadira:flow-router-ssr

import { FlowRouter } from 'meteor/kadira:flow-router-ssr';
import { Accounts } from 'meteor/std:accounts-semantic';
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