zetoff / accounts-material-ui

Material-ui integration with std:accounts-ui

React Accounts UI for using Material-UI

Demo Here

Based on and extends std:accounts-ui

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

Installation

meteor add zetoff:accounts-material-ui

Dependencies

In addition to React this package also depends on material-ui. So make sure it is installed:

meteor npm install -S material-ui

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 zetoff:accounts-material-ui meteor npm install -S material-ui

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

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 zetoff:accounts-material-ui meteor npm install -S material-ui

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

accounts-material-ui's Issues

Package imports additional React and babel-runtime to client

When using the bundle-visualizer, I saw that this package imports 2 packages in a nested node_modules folder, react and babel-runtime.

Is it because check-npm-versions isn't used correctly?

This package now uses 65.7kB instead of the 5.78kB of main.jsx!

Remove fix once it is fixed in std:accounts-ui

Remove fix.js once std:accounts-ui is fixed.

studiointeract/accounts-ui#60

Material-Ui Version 17 or 18 Breaks This Package

I know there was a previous bug reported. Same exact error messages but adding this to bump the issue.

Thanks.

Make it compatible with formMessages

Now std:accounts-ui can display multiple messages.

Not able to update

From @philcruz:
I tried updating and I get

The following top-level dependencies were not updated to the very latest version available:

zetoff:accounts-material-ui 0.0.4 (0.0.7 is available)
I removed the package and added it back but it only adds 0.0.4. What am I missing?

Material.ui 0.17.1 compatibility

I'm having a list of error messahes when loading <Accounts.ui.LoginForm />:

• Warning: Failed prop type: Invalid prop required of type string supplied to TextField, expected boolean. in TextField
• Warning: Unknown props floatingLabelText, hintText, fullWidth on
  tag. Remove these props from the element.
• Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
• Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

I've double checked that Accounts.ui.LoginForm is actually imported so the last error is not straightly connected to initial import.

The first error ocuurs apparently because material.ui TextField expects boolean required, while in package code string is passed (main.jsx, 136):

<TextField
	floatingLabelText={label}
	hintText={hint}
	onChange={onChange}
	fullWidth={true}
	defaultValue={defaultValue}
	name={id}
	type={type}
	ref={(ref) => this.input = ref}
	required={required
	? "required"
	: ""}
	autoCapitalize={type == 'email'
	? 'none'
	: false}
	autoCorrect="off"/>

Material 1.0.x support

At some point, Material v1.0.x will have to be supported because the project is already at the pre-release stage at this time.

I don't see a lot of breaking changes, apart from the obvious color API changes.

Exception in delivering result of invoking 'login'

I have a simple Login component

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { Accounts } from 'meteor/std:accounts-ui';
import {STATES} from 'meteor/std:accounts-ui';

class Login extends Component {

	constructor(props){
		super(props);
		this.state = {};
	}

	render() {
		const style = {
			width: 500,
		};
		return (
			<MuiThemeProvider>
				<Accounts.ui.LoginForm />
			</MuiThemeProvider>
		);
	}
}

export default Login;

I enter an email and password and click "Sign In" and I get this error

updateWrapper @ modules.js?hash=ef15340…:13288forceUpdateIfMounted @ modules.js?hash=ef15340…:13162notifyAll @ modules.js?hash=ef15340…:7886flushBatchedUpdates @ modules.js?hash=ef15340…:7739close @ modules.js?hash=ef15340…:7606closeAll @ modules.js?hash=ef15340…:9042perform @ modules.js?hash=ef15340…:8989perform @ modules.js?hash=ef15340…:7648flushBatchedUpdates @ modules.js?hash=ef15340…:7731closeAll @ modules.js?hash=ef15340…:9042perform @ modules.js?hash=ef15340…:8989batchedUpdates @ modules.js?hash=ef15340…:17487batchedUpdates @ modules.js?hash=ef15340…:7656dispatchEvent @ modules.js?hash=ef15340…:17652
meteor.js?hash=ae8b8af…:930 Exception in delivering result of invoking 'login': Invariant Violation: Objects are not valid as a React child (found: object with keys {message, type}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.
at invariant (http://localhost:3000/packages/modules.js?hash=ef153404cfe9fc22438cd3af4ebcae15f6ef6c44:21842:15)
at traverseAllChildrenImpl (http://localhost:3000/packages/modules.js?hash=ef153404cfe9fc22438cd3af4ebcae15f6ef6c44:1781:56)
at traverseAllChildren (http://localhost:3000/packages/modules.js?hash=ef153404cfe9fc22438cd3af4ebcae15f6ef6c44:1809:10)
at Object.instantiateChildren (http://localhost:3000/packages/modules.js?hash=ef153404cfe9fc22438cd3af4ebcae15f6ef6c44:14705:7)
at ReactDOMComponent._reconcilerInstantiateChildren (http://localhost:3000/packages/modules.js?hash=ef153404cfe9fc22438cd3af4ebcae15f6ef6c44:14249:41)
at ReactDOMComponent.mountChildren (http://localhost:3000/packages/modules.js?hash=ef153404cfe9fc22438cd3af4ebcae15f6ef6c44:14288:27)
at ReactDOMComponent._createInitialChildren (http://localhost:3000/packages/modules.js?hash=ef153404cfe9fc22438cd3af4ebcae15f6ef6c44:11458:32)
at ReactDOMComponent.mountComponent (http://localhost:3000/packages/modules.js?hash=ef153404cfe9fc22438cd3af4ebcae15f6ef6c44:11283:12)
at Object.mountComponent (http://localhost:3000/packages/modules.js?hash=ef153404cfe9fc22438cd3af4ebcae15f6ef6c44:8014:35)
at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:3000/packages/modules.js?hash=ef153404cfe9fc22438cd3af4ebcae15f6ef6c44:15689:40)

What could be the problem?

Best way to translate the form

I'd like to use this awesome add-on on a french (and later internationalized) website, is there a simple way of redefining all used texts/labels and error messages?

Exception in delivering result of invoking 'createUser'

My login.jsx is like

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { Accounts } from 'meteor/std:accounts-ui';
import {Card, CardActions, CardHeader, CardText} from 'material-ui/Card';
import Paper from 'material-ui/Paper';

class Login extends Component {



    render() {
        const style = {
            width: 500,
        };
        return (
            <MuiThemeProvider>
                <Accounts.ui.LoginForm />
            </MuiThemeProvider>

        );
    }
}

export default Login;

and the config is like:

Accounts.ui.config({
    passwordSignupFields: 'EMAIL_ONLY',
    homeRoutePath: '/',
    loginPath: '/login',

    onSubmitHook: (error,state) => {
        console.log('submitHook');
        if (error)
            console.log(error);
        else {
            console.log(state);
        }
    },


});

When I put the email and password and click "Register" I get this error:

Exception in delivering result of invoking 'createUser': TypeError: _this6.setState is not a function

What could be the issue?

Upgrade to [email protected]

Getting this warning:

W20170126-02:42:41.020(-5)? (STDERR) WARNING: npm peer requirements (for zetoff:accounts-material-ui) not installed:
W20170126-02:42:41.020(-5)? (STDERR)  - [email protected] installed, [email protected] needed

Is there an easy workaround while we wait to catch up to the new version?

Is there a reason we can't use [email protected] now?

Edit: This is just an annoying warning, it actually still works without any problem (other than the annoying warnings)

Should it not be this.TextField = ref?

ref={(ref) => this.input = ref} this makes an issue when logging in then logging out directly after. Indeed, the email/password will remain in the input field but won't be taken into account when logging in again, giving an error message saying that email/password is required (while it's already filled in the input field).

the issue disappears with ref={(ref) => this.TextField = ref}

It doesn't work with std:[email protected]

Last known working version is std:[email protected]

Problem: the components are not able to find muiTheme, which they access by context.
e.g.

Component.contextTypes = {
   muiTheme: React.PropTypes.object.isRequired
}

@timbrandin do you know why it may not be working? any changes that may affect the context?

Button's href prop doesn't work

Investigate.

DraftJS Kills <Accounts.ui.LoginForm /> - I don’t know why!

I'm really not sure what is happening here. When I click on the "DraftJS" contentEditable - the <Accounts.ui.LoginForm /> instantly disappears. I haven't the foggiest idea why.

Demo:

To see the bug in its current state:

Go to: http://draftjsmeteor.autoschematic.com/

To duplicate the problem in your own development environment:

1. Clone this repository: https://github.com/JeremyIglehart/DraftJSMeteor
2. Create a settings-development.json file (you can leave it blank)
3. Run with npm start

---

The main question:

Does anyone know why DraftJS kills the <Accounts.ui.LoginForm />?

After looking into this problem for two days now, I suspect the problem is hiding somewhere in how <Accounts.ui.LoginForm /> is doing something - perhaps in their STATES API? I'm really confused here. Any help would really be appreciated.

Problems I've ruled out:

1. It's not a Session Variable problem. DraftJS doesn't use them - in fact, there are no Session Variables being used at all right now as far as I can detect (using Meteor Toys)
2. It is not DraftJS killing the page somehow. The reason why is because after the <Accounts.ui.LoginForm /> component I have placed a regular vanilla <p> tag and it is left alone.

It doesn't seem to me this problem has anything to do with Meteor, or React specifically.

Where I'm looking now to solve this:

1. something to do with std:accounts-ui
2. I have no idea where else to look. Based on the gif demo above you can see that the div with the className accounts-ui is rendering just fine - after clicking in the DraftJS contentEditable area, however, something inside this component breaks.

Issues Tracking this Bug:

I've created three issues to try and track this down:

• accounts-material-ui:Issue #26
• std:accounts-ui:Issue #96
• DraftJS's Github Issue #962
• (I've also mentioned this on the Meteor Forums
• StackOverflow Question

Once I find a solution I'll update all of the issues, forums and questions I've posted everywhere.

[email protected] needed?

Getting this warning:
"tmeasday_check-npm-versions.js?hash=ade7cba…:89 WARNING: npm peer requirements (for zetoff:accounts-material-ui) not installed:

• [email protected] installed, [email protected] needed"

Is 0.15.4 still needed?

Objects not valid as React Child

From @brendonlamb

Hmm- seemed like it was working fine at first but it seems like theres some larger issues. I can't register or change password. Just get piles of

Uncaught Error: Objects are not valid as a React child (found: object with keys {message, type}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.(…)

(client-side of course)

Just confirming, i'm using:

"babel-plugin-transform-class-properties": "^6.10.2",
"material-ui": "^0.16.2",
"meteor-node-stubs": "~0.2.0",
"react": "^15.3.2",
"react-addons-pure-render-mixin": "^15.3.2",
"react-dom": "^15.3.2",
"react-mounter": "^1.2.0",
"react-tap-event-plugin": "^1.0.0"

My meteor packages looks like:

react-meteor-data
accounts-password
zetoff:accounts-material-ui

I've been able to make a super-basic login component myself w/ the above packages, but it's no where near as feature complete as yours appears.

Steps:

Login, Log out. Now try logging back in.

image

Once i get this error i can't do anything, logging in/out, register, everything breaks until a full page reload.

No logout button after upgrading from std:[email protected] to 1.2.21

I can log in like normal or reset my password like normal; however, there are no buttons after logging in for logging out. The React inspector shows that the <Buttons> element has a buttons prop which is an empty object.

This problem occurred after upgrading from std:[email protected] to std:[email protected].

Make it compatible with TextField inline messages

Now std:accounts-ui support Field messages