I'm in Registration.vue component. The component contains registration form with email, password, etc.. fields.
I would like to thanks user for successful registering (with instruction that he should go check email).
What is the best solution to do this?
I was thinking about:
redirecting to second component using this.$router.push or this.$router.replace but this will change URL and when somebody go this URL without registering he will see message that he should check email...
replacing current component with other when registering action successful but I dont know how to do this (without URL change, and with good code).
using <component v-bind:is="currentView"> but I am not sure if this is best solution. I need to make three files (for parent component with :is, for form and for thanks). Also i need to emit event from child that registration went well, but on the other hand i should fire vuex registration action and dont expect for response (see the next sequence)
The other thing is that we should not wait for the vuex action to be completed, but i need to know if registration went well - https://github.com/vuejs/vuex/issues/46#issuecomment-174539828
I am using vue.js 2, vue-router, vuex
Thanks
You could use something like Sweet Alert to display a success or error dialog. It supports Ajax requests so you can display a "your registration is processing, please check your email" message while it is being handled.
The first approach is suitable when user successfully registers and then redirected to login page.
Now issue how to check whether user has entered required field? So there comes form validations. You can use vee-validate plugin and it's perfect for all projects. I am using it and it has so many available validations.
With these UI validations, after they are passed successfully then only submit action will be fired or else user will be prompted for entering required field.
You can see basic example here - http://vee-validate.logaretm.com/index.html#basic-example
When action is performed,
///main.js
...
Vue.use(VeeValidate)
...
// register.vue
this.$validator.validateAll().then((result) => {
if (result) {
//done
this.$router.replace( '/login' );
}
else{
// throw error
}
Simple as that.
Try this approach if you want the UI validations on the form.
Related
I'm new to Nuxt, but I have a bootstrap header with the standard v-if="authenticated" kinda state for login\logout buttons.
The auth provider is firebase which has a onAuthStateChanged method that I use to set (or reset) the user property in the state store.
So page loads, I see the login button, onAuthStateChanged runs, sets the user, then login disappears and logout button shows up (can see the Vuex events from base->set as well).
Question is, what am I doing fundamentally wrong such that I'm getting this flashing state. Is the only way to handle this to work with localStorage? ...should I NOT be storing the user in the state.store?
You need to save it in the store. But make no mistake because when reloading you have to set the token value using localstorage.
These are very good explanations
I am now using the react-admin framework, when the user clicks the Save button on the Edit page. Normally it will go to the List page and show an undo notification at the bottom, but at that time server-side gets validation error (for example, image size, file size). Then all user input at the Edit page is lost.
How can we still remain on the Edit page in case of the server-side error, and go to the List page only if the sever-side returns success?
If I put redirect = false, it will not go to the List page even if the server-side returns success:
const CustomToolbar = props => (
<Toolbar {props} >
<SaveButton redirect={false}/>
</Toolbar>
)
React Admin uses an approach called Optimistic Rendering: when a user fill a form, we are optimistic and render the better result.
This globally improve the user experience by making the results displayed faster, even before the API is reached.
The bad side is that, if the form isn't strictly validated client-side and the API throws an error, the user have to do it again.
From here, I see two solutions to your problem:
Implement a more strict client-side validation of your form
Disable the optimistic rendering by specifying undoable={false}
<Edit {...props} undoable={false}>
{...}
</Edit>
Giving the scenario where when leaving the page is losing unsaved data, the idea is to ask the user for a confirmation.
Using the canDeactivate hook I can easily avoid the user from leaving the page (I'm displaying a confirm dialog).
However, as soon the user press back on the second time, he can leave without a problem. It seems that the state is lost and the canDeactivate hook is no longer called.
*This applies to all pipeline steps (I tried then all, none safes the state after the first next.cancel)
Is there a better way to avoid the user leaving the page?
canDeactivate() {
return Promise.resolve(false);
}
Whether the user is logged in or not, when I call Meteor.user() in Meteor.startup(), the user is always undefined (not logged).
I want to perform an action (redirect the user to an external url where the login must occur) if it is not logged in as soon as the page loads. The problem is that if he is logged in, the page will only know it at some point in time (in milliseconds, of course). I can trap the eventual logged in user with Tracker.autorun, but I want to perform an action now (when the user is always not logged in) and I know only after whether I need to perform it or not (maybe the user is already logged in).
How to do this in Meteor?
EDIT
I ended up with the following working:
Tracker.autorun(() => {
if (!Meteor.user() && !Meteor.loggingIn() && Accounts.loginServicesConfigured()) {
Meteor.loginWithTwitter();
}
});
Try Meteor.loggingIn()
From the docs
if a login method (such as Meteor.loginWithPassword, Meteor.loginWithFacebook, or Accounts.createUser) is currently in progress. A reactive data source.
One solution to the problem is to use the meteorhacks:fast-render package. Its inclusion causes the initial set of data to be sent along with the application code, so the user information is available immediately in the startup method.
If you don't want to use that package, you can always restructure your app so that the "now" you speak of always happen after the initial data is loaded. For example, you can move this check to the onBeforeAction callback of your root controller. This will always run before any template is rendered, assuming you also subscribe to user data in the root controller.
So i've been trying to get FB Connect working on my site, simply for login and authentication, using the Javascript SDK and following the code at:
https://developers.facebook.com/docs/guides/web/
So the button appears, i click it, a dialog pops up, i click that, presumably my site now has permission to know who i am...
Then what? The guide goes on to saying all the stuff I can access through the Facebook API, all the cool things about permissions, but presumably i need the user's ID or access token or something to get at this stuff. How is that given to me? left as a attribute on one of the elements? Left in a Javascript variable somewhere? Given as an argument to some callback? Thrown high into the heavens for me to receive via satellite downlink?
This is probably incredibly simple, but for the life of me i have not been able to figure it out. Facebook's tutorials have failed me, and so has Google. I want to get this in the Javascript, so I can immediately fill in form-data using the user's Facebook name, put a picture, etc. etc., and presumably send this all back to the server so the server can validate with Facebook that the data is real.
I'm assuming you're using the Login button? https://developers.facebook.com/docs/reference/plugins/login/
If you simply want form info, check out the registration plugin - https://developers.facebook.com/docs/plugins/registration/
However, to answer your question, make an API call to /me. For example:
FB.api('/me', function(user) {
if(user != null) {
// The user object now contains info about the logged in user
}
});
You should subscribe to the auth.login event and wrap the above API call in the successful response, i.e.:
FB.Event.subscribe('auth.login', function() {
// JS to run if when the user logs in, for example, the code snippet above
});