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.
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.
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 . 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
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.
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.
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>
)
}
})
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.
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.
@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. )
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
FYI - just uploaded a react version of accounts ui
alt:react-accounts-ui
It extends alt:react-accounts-unstyled which is very customizable.
Does someone have a full example using alt:react-accounts-unstyled