React accounts-ui / user / login components?


#1

This seems to be a FAQ, but one for which so far I haven’t seen answered, so wondering what anyone else is using for user registration / login etc with React?

Wrapping the accounts-ui package as in the tutorial seems far from ideal.


#2

I started doing the accounts-password ui here: https://github.com/gabrielhpugliese/meteor-login-buttons-react/blob/master/client/TodoApp/LoginButtons.jsx

It is almost finished, but far from ideal and it’s not fun at all to do :frowning: . I pratically copied the source code from Meteor’s github and pasted as React. Also the .css is copied from Meteor and I think it should be replaced by inline styles: https://github.com/gabrielhpugliese/meteor-login-buttons-react/blob/master/client/TodoApp/css/LoginButtons.import.less


#3

Thanks for sharing. Here what I’ve found so far:

https://atmospherejs.com/universe/accounts-ui - Semantic UI based, describes itself as a work-in-progress. I couldn’t get its import to work.

https://atmospherejs.com/qnub/accounts-react-material-ui - Material UI based.


#4

Building out your own login components is not all that difficult. @ryanswapp has a youtube tutorial walking you through the basics. It’s very well done.


#5

Very excited to try out the material-ui version. I’ve been wrapping useraccounts with this bit of code and a bunch of modified CSS from the bootstrap styled version:

SignIn = React.createClass({
  render() {
    return (
      <div className="row around-xs">
        <AccountsComponent state="signIn" />
      </div>
    )
  }
})

AccountsComponent = React.createClass({
  componentDidMount() {
    $('#at-signUp').click((e) => {
      e.preventDefault()
      FlowRouter.go('signUp')
    })
    $('#at-forgotPwd').click((e) => {
      e.preventDefault()
      FlowRouter.go('forgotPassword')
    })
  },
  render() {
    return (
      <mui.Paper
        <BlazeToReact {...this.props} blazeTemplate='atForm' />
      </mui.Paper>
    )
  }
})

#6

Thanks for the link to the video. It does make it look simple, but only because it’s the absolute basics. At the end of the video, Ryan reference a more fully worked example in github, but it’s only a login component - no account creation / management.


#7

Here’s a version of Meteor Chef base app with fairly comprehensive accounts components in React:

Not so great for reuse, but may be a useful starting point for a new project.


#8

@energistic, I took a look at the material-ui version, and the code was pretty dense - partly because of the language support, so if you need that, they may not be such a bad thing - but also it’s not particularly modular.

So - I’ve taken the meteor chef react example, updated it to the latest base code, and converted the forms to Material-UI with formsy-react / formsy-material-ui. https://github.com/mbrookes/getting-started-with-react/tree/master/code

I’ve also converted the alerts to use Material-UI Snackbars, but with colors similar to the meteorchef:bert alerts. (I actually quite like the Bert alerts, but it’s not Material-UI. :slight_smile: )

I haven’t converted the AppBar or table (yet), as I was focusing on user-accounts, but that shouldn’t take so long, and the forms layout could maybe use some work - I’m no designer!

I don’t think it would be so much work so extract the relevant parts into an existing project - you can see which files I touched in this commit.

You can try it out here: http://gswr-material-ui.meteor.com


#9

FYI - just uploaded a react version of accounts ui
alt:react-accounts-ui

It extends alt:react-accounts-unstyled which is very customizable.


#10

Does someone have a full example using alt:react-accounts-unstyled


#11

Any updates on the best package for login components? @gilbertmizrahi Did you find an example?