update to material ui v1

.gitignore

@@ -1 +1,2 @@
+.idea
 node_modules

README.md

@@ -16,7 +16,7 @@
 
 In addition to React this package also depends on [material-ui](http://www.material-ui.com/). So make sure it is installed:
 
-`meteor npm install -S material-ui`
+`meteor npm install --save @material-ui/core`
 
 ## Configuration
 
@@ -46,7 +46,7 @@ if (Meteor.isClient) {
 
 ```
 
-## Example setup using FlowRouter (Meteor 1.3)
+### Example setup using FlowRouter (Meteor 1.3)
 
 `meteor add accounts-password`  
 `meteor add zetoff:accounts-material-ui`
@@ -73,6 +73,70 @@ FlowRouter.route("/login", {
 });
 ```
 
+### Custom props
+
+You can customize the `LoginForm` with by providing some props when rendering it:
+
+```jsx harmony
+import { Accounts } from 'meteor/std:accounts-ui';
+
+const LoginForm = () => (
+  <Accounts.ui.LoginForm 
+    {...{
+      FormMessagesProps: {
+        CloseIcon, // component to use as button to close the snackbar
+        // ... other snackbar props, ex: anchorOrigin
+      },
+      SocialButtonsProps: {
+        asIconButtons: true, // will render social icons using Mui's IconButton
+        icons: {}, // components to be used as icons, keyed by oauthService id
+      },
+    }}
+  />
+);
+```
+
+#### Icons
+
+This package does not provide any icons out of the box, so you will have to explicitly set them. There are two places where icons can be injected:
+
+- the close action in the message Snackbar
+- the social media icons
+
+Example using `mdi-material-ui`:
+
+```jsx harmony
+import { Accounts } from 'meteor/std:accounts-ui';
+
+import Facebook from 'mdi-material-ui/Facebook';
+import Github from 'mdi-material-ui/GithubBox';
+import GooglePlus from 'mdi-material-ui/GooglePlus';
+import Pinterest from 'mdi-material-ui/Pinterest';
+import Rocket from 'mdi-material-ui/Rocket';
+import Twitter from 'mdi-material-ui/Twitter';
+import Close from 'mdi-material-ui/Close';
+
+const LoginForm = () => (
+  <Accounts.ui.LoginForm 
+    {...{
+      FormMessagesProps: {
+        CloseIcon: Close,
+      },
+      SocialButtonsProps: {
+        icons: {
+          facebook: Facebook,
+          twitter: Twitter,
+          github: Github,
+          google: GooglePlus,
+          'meteor-developer': Rocket,
+          pinterest: Pinterest,
+        },
+      },
+    }}
+  />
+);
+```
+
 ## Credits
 
 Made by Zetoff

lib/components/Button/Button.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import MuiButton from '@material-ui/core/Button';
+import { Accounts } from 'meteor/std:accounts-ui';
+
+export default class Button extends Accounts.ui.Button {
+  render() {
+    const {
+      label,
+      href = null,
+      type,
+      disabled = false,
+      onClick,
+      className,
+      classes,
+      icon: Icon,
+    } = this.props;
+    return (
+      <MuiButton
+        variant={type === 'link' ? 'flat' : 'contained'}
+        href={href}
+        color="primary"
+        type={type}
+        className={className}
+        classes={classes}
+        onClick={onClick}
+        disabled={disabled}
+      >
+        {Icon ? <Icon /> : null}
+        {label}
+      </MuiButton>
+    );
+  }
+}

lib/components/Button/index.js

@@ -0,0 +1,5 @@
+import { withStyles } from '@material-ui/core/styles';
+import styles from './styles';
+import Button from './Button';
+
+export default withStyles(styles)(Button);

lib/components/Button/styles.js

@@ -0,0 +1,5 @@
+export default theme => ({
+  root: {
+    marginRight: theme.spacing.unit,
+  },
+})

lib/components/Buttons.jsx

@@ -0,0 +1,3 @@
+import { Accounts } from 'meteor/std:accounts-ui';
+
+export default class Buttons extends Accounts.ui.Buttons {}

lib/components/Field.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import MuiTextField from '@material-ui/core/TextField';
+import { Accounts, STATES } from 'meteor/std:accounts-ui';
+
+export default class Field extends Accounts.ui.Field {
+  render() {
+    const {
+      id,
+      hint,
+      label,
+      type = 'text',
+      onChange,
+      required = false,
+      className,
+      defaultValue = "",
+      message,
+    } = this.props;
+    return !this.state.mount ? null : (
+      <MuiTextField
+        label={label}
+        placeholder={hint}
+        onChange={onChange}
+        fullWidth={true}
+        defaultValue={defaultValue}
+        name={id}
+        helperText={message ? message.message : null}
+        error={message ? ['error', 'warning'].includes(message.type) : false}
+        className={className}
+        type={type}
+        required={required}
+        InputProps={{
+          inputProps: {
+            autoCorrect: "off",
+          }
+        }}
+      />
+    );
+  }
+}

lib/components/Fields.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Accounts } from 'meteor/std:accounts-ui';
+
+export default class Fields extends Accounts.ui.Fields {
+  render() {
+    let {
+      fields = {},
+      className = ""
+    } = this.props;
+    return (
+      <div className={className}>
+        {Object.keys(fields).map((id) => (
+          <Accounts.ui.Field key={id} {...fields[id]}/>
+        ))}
+      </div>
+    );
+  }
+}

lib/components/Form/Form.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Accounts, STATES } from 'meteor/std:accounts-ui';
+
+export default class Form extends Accounts.ui.Form {
+
+  formRef = ref => this.form = ref;
+
+  render() {
+    const {
+      hasPasswordService,
+      oauthServices,
+      fields,
+      buttons,
+      error,
+      messages,
+      ready = true,
+      className,
+      classes,
+      formState,
+      // custom accounts-material-ui props
+      SocialButtonsProps,
+      FormMessagesProps,
+    } = this.props;
+
+    return (
+      <form
+        noValidate
+        ref={this.formRef}
+        className={["accounts", className].join(' ')}
+      >
+        {Object.keys(fields).length === 0 ? null : (
+          <Accounts.ui.Fields
+            className={classes.fields}
+            fields={fields}
+          />
+        )}
+        <Accounts.ui.Buttons buttons={buttons} className={classes.buttons}/>
+        {formState === STATES.SIGN_IN || formState === STATES.SIGN_UP
+          ? (
+            <React.Fragment>
+              <Accounts.ui.PasswordOrService
+                className={classes.passwordOrService}
+                oauthServices={oauthServices}
+              />
+              <Accounts.ui.SocialButtons
+                className={classes.socialButtons}
+                {...SocialButtonsProps}
+                oauthServices={oauthServices}
+              />
+            </React.Fragment>
+          ) : null}
+        <Accounts.ui.FormMessages
+          className={classes.formMessages}
+          {...FormMessagesProps}
+          messages={messages}
+        />
+      </form>
+    );
+  }
+}

lib/components/Form/index.js

@@ -0,0 +1,5 @@
+import { withStyles } from '@material-ui/core/styles';
+import styles from './styles';
+import Form from './Form';
+
+export default withStyles(styles)(Form);

lib/components/Form/styles.js

@@ -0,0 +1,13 @@
+export default theme => ({
+  fields: {},
+  buttons: {
+    marginTop: theme.spacing.unit * 2,
+  },
+  passwordOrService: {
+    marginTop: theme.spacing.unit * 4,
+    marginBottom: theme.spacing.unit * 2,
+    fontWeight: 'bold',
+  },
+  socialButtons: {},
+  formMessages: {},
+});