Accounts UI with Material UI and Universe (i18n)

A replacement for accounts-ui to use with React, Material UI and Universe i18n. It is a clone from https://atmospherejs.com/universe/accounts-ui and changed to use Material UI.

Installation

meteor add lucasissa:meteor-accounts-ui-universe-material-ui

• This package assumes that you're using React.

• This package uses Material UI.

  • meteor npm install material-ui

• Login options will show based on installed packages and you need to add them manually, e.g.

  • meteor add accounts-password accounts-facebook ...

Usage

• You need to set up own routes
• Place accounts-ui components where you wish to render forms

Basic usage could look like:

import {ComboBox} from 'meteor/lucasissa:meteor-accounts-ui-universe-material-ui';

Router.route('/login', {
    name: 'login',
    action () {
        mount(Layout, {
            content: <ComboBox />
        });
    }
});

Available components

• LoginBox - simple login form
• RegisterBox - simple register form
• ComboBox - both above forms combined into one
• ResetPasswordBox - password reset form
• EnrollmentBox - password init form

Configuration

Navigation configuration. Example:

1import {AccountsUiConfig} from 'meteor/lucasissa:meteor-accounts-ui-universe-material-ui/AccountsUiConfig';
2
3const goHome = () => {
4    FlowRouter.go('/');
5};
6
7AccountsUiConfig.onExplicitLogin = goHome;
8AccountsUiConfig.onGoToLoggedInHome = goHome;
9AccountsUiConfig.onCancel = goHome;
10AccountsUiConfig.onResetPasswordEmailSent = goHome;

Configuration of BackgroundImage.

• In the same way that you set the properties as shown above, the background image is a property, and should be set as shown below.

After setting the property the component will render in the background of the login screens. Example:

1
2const backgroundImage = Meteor.absoluteUrl('img/manhattan.jpg');
3AccountsUiConfig.backgroundImageUrl = backgroundImage;

Know issues

• Has UI for password reset, but don't provide server-side functionality yet.

However EnrollmentBox can be used to provide the UI to inform the new password to complete the password reset.

• You need to set ServiceConfiguration options for external services on your own, no forms yet

Examples

General e-mail setup

1
2// On the server:
3
4Accounts.emailTemplates.siteName = 'Xxxxx';
5Accounts.emailTemplates.from = 'Xxxx <xxx@xxx.xxx>';
6// ...
7

EnrollmentBox

1
2// On the server:
3
4// Configures "enroll account" email link
5Accounts.urls.enrollAccount = (token) => {
6    let url = Meteor.absoluteUrl("enroll-account/" + token);
7    return url;
8};
9

1
2// On the client:
3
4import {EnrollmentBox} from 'meteor/lucasissa:meteor-accounts-ui-universe-material-ui';
5
6
7FlowRouter.route("/enroll-account/:token", {
8    name: "EnrollAccount",
9    action({token, done}) {
10
11        const onComplete = () => {
12            done();
13            FlowRouter.go('/');
14        };
15
16        mount(Layout, {
17            content: (<EnrollmentBox token={token} onComplete={onComplete} />)
18        });
19    }
20});
21

or

1import {EnrollmentBox} from 'meteor/lucasissa:meteor-accounts-ui-universe-material-ui';
2
3Accounts.onEnrollmentLink((token, done) => {
4    Meteor.setTimeout(() => { // to mount after FlowRouter (you can also use Accounts.urls.enrollAccount)
5        const onComplete = () => {
6            done();
7            FlowRouter.go('/');
8        };
9        mount(MainLayout, {
10            content: <EnrollmentBox token={token} onComplete={onComplete} />
11        });
12    }, 100);
13});

The last one did not work with me, but it was in the original cloned repository.

ResetPasswordBox

1
2// On the server:
3
4// Configures "reset password account" email link
5Accounts.urls.resetPassword = (token) => {
6    return Meteor.absoluteUrl("reset-password/" + token);
7};
8

1
2// On the client:
3
4import {EnrollmentBox} from 'meteor/lucasissa:meteor-accounts-ui-universe-material-ui';
5
6const requestResetPassword = '/send-reset-password';
7
8FlowRouter.route("/login", {
9    name: "Login",
10    action() {
11        mount(Layout, {
12            content: (<LoginBox resetLink={requestResetPassword} />)
13        });
14    }
15});
16
17FlowRouter.route(requestResetPassword, {
18    name: "SendResetPassword",
19    action() {
20        mount(Layout, {
21            content: (<ResetPasswordBox />)
22        });
23    }
24});
25
26FlowRouter.route("/reset-password/:token", {
27    name: "ResetPassword",
28    action({token, done}) {
29
30        const onComplete = () => {
31            // done();
32            FlowRouter.go('/');
33        };
34
35        mount(Layout, {
36            content: (<EnrollmentBox token={token} onComplete={onComplete} />)
37        });
38    }
39});
40