Comments (4)
I created a little PR: #65. Any suggestions to make the code better, or props' names better, are welcome.
The idea is to pass a function as a prop that would be called every time a user clicks certain buttons. For example, onSignIn
prop would be called every time a user clicks "Sign In" button. The idea is to cover a scenario when the app has its own router and history config and developer wants to change location displayed in browser's address bar manually by pushing new state. Something like
<Accounts.ui.LoginForm
onSwitchToSignIn={() => ::this.props.history.push('/login')} />
from accounts-ui.
I noticed this as well, the correct solution would be to pass the props this way instead (I've also updated the documentation about this):
<Route path="login" component={() => <Accounts.ui.LoginForm formState={STATES.SIGNUP} />}/>
Regarding routing in React Router, I have just added support for Link in the buttons, so if you setup, "loginPath", "signUpPath" and "resetPasswordPath" either in the component props or on Accounts.ui.config it should redirect to the correct path that you added.
i.e. here's a full example:
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, Link, browserHistory } from 'react-router';
import { Accounts, STATES } from 'meteor/std:accounts-ui';
// Layout component
const Layout = ({ children }) => (
<div>{children}</div>
);
// Home component
const Home = () => (
<div>Home</div>
);
Accounts.ui.config({
passwordSignupFields: 'EMAIL_ONLY',
minimumPasswordLength: 6,
loginPath: '/login',
signUpPath: '/register',
resetPasswordPath: '/reset-password',
onSignedInHook: () => browserHistory.push('/'),
});
function redirectNotLoggedIn(nextState, replace) {
if (!Meteor.user()) {
replace({
pathname: '/login',
state: { nextPathname: nextState.location.pathname }
});
}
}
function redirectLoggedIn(nextState, replace) {
if (Meteor.user()) {
replace({
pathname: '/',
state: { nextPathname: nextState.location.pathname }
});
}
}
function main() {
render((
<Router history={browserHistory}>
<Route name="root" component={Layout}>
<Route name="loggedIn" onEnter={redirectNotLoggedIn}>
<Route name="home" path="/" component={Home} />
</Route>
<Route name="loggedOut" onEnter={redirectLoggedIn}>
<Route path="login" component={() =>
<Accounts.ui.LoginForm formState={STATES.SIGN_IN} />}
/>
<Route path="register" component={() =>
<Accounts.ui.LoginForm formState={STATES.SIGN_UP} />}
/>
<Route path="reset-password" component={() =>
<Accounts.ui.LoginForm formState={STATES.PASSWORD_RESET} />}
/>
</Route>
<Route name="*" component={AppNotFound} />
</Route>
</Router>
), document.getElementById("app"));
}
Meteor.startup(() => {
Meteor.autorun(c => {
if (!Meteor.loggingIn()) {
c.stop();
main();
}
})
});
from accounts-ui.
I'm closing this due to inactivity.
from accounts-ui.
I just switched from Flow Router and implemented this as shown above using std:accounts-ui 1.2.19. It's working like a charm and eliminated a Flow Router issue I had where it was taking two clicks on the Register link to switch to the signup UI. Thanks!
from accounts-ui.
Related Issues (20)
- App crashes after adding accounts-ui (forget to call 'Npm.depends') HOT 1
- Login with Facebook - 'Something went wrong' HOT 1
- How to change label
- Accounts.ui.LoginForm without createContainer HOT 4
- Support for React Router v4? HOT 9
- referencing this when it is already the window object in SignUp HOT 1
- Uncaught Error: _registerComponent(...): Target container is not a DOM element. HOT 1
- Sign out? HOT 4
- TypeError: onSubmitHook is not a function HOT 2
- Not seeing any error messages on failed login
- Typo breaking requestPermissions in Accounts.ui.config (1.2.23) HOT 1
- withTracker instead of createContainer on LoginForm.jsx (React16.0 support) HOT 5
- Does this actually work at all with react-router 4? HOT 5
- the constant has a wrong name HOT 1
- Call to `withTracker` is incorrect HOT 2
- Component not rendered & Error with Meteor 1.6 HOT 22
- Replace all UI dependencies with custom field components HOT 1
- Extra fields is not work
- Still maintained? HOT 4
- Conflict issue with [email protected] HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from accounts-ui.