If a person Logs in, or Signs up on my landing page to become a member on my website…how can I get them to my Home page after they login???
Hey
Just use the .to function to redirect them after successful login.
How do you get to the page where the .to function is put?
@eliandupre - Add this to your code…
import wixLocation from 'wix-location';
wixLocation.to("/main-page"); //Change the URL ending to whatever page you want to send the user to after they log in.
@givemeawhisky Thank you. Should this be placed anywhere in the main site code? I’m not sure how to get to the “member registration” page.
How are you getting users on your website to login as members on your landing page and do you want both non-members and members to be able to access your home page too?
If both members and non members can have access to your landing page and home page of your website, then simply have a link somewhere to go from your landing page to your home page.
If you have simply used Wix own member login bar for existing members to login with and just want members to be able to access your home page, then you will have to setup code on your landing page that shows a home page button or link only when a member is logged in.
Otherwise, if you have setup a custom login that members can use to login in with, then setup the code on your landing page to direct members to your landing page once they are logged in.
Finally, if you have setup your own custom login or signup lightboxes, then add in your lightbox page code that moves the member onto your home page once the user has logged in.
With signup, that all depends on how your approval for site members is setup, as if it is setup to auto approve straight away then new members who have signed up can also be directed straight to your home page too.
However, if you approve new site members manually, then you will need to change your lightbox code for your signup to take them to a page or another lightbox stating something like your membership is awaiting approval or something like that.
I have listed below my codes for custom login and signup lightboxes and my code for my members login page which only shows a logo and a button saying login. After members have logged in then member parts are shown and members can progress through member parts of the site by use of links etc.
Custom login lightbox going to members my account page once logged in.
import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
$w.onReady(function () {
$w("#forgotPassword").onClick( (event) => {
//wixWindow.lightbox.close()
wixUsers.promptForgotPassword()
.then( ( ) => {
//
} )
.catch( (err) => {
let errorMsg = err; //"The user closed the forgot password dialog"
});
});
});
export function loginButton_click(event) {
let email = $w("#email").value;
let password = $w("#password").value;
wixUsers.login(email, password)
.then( () => {
console.log("User is logged in");
wixLocation.to("/account/my-account"); //Change the URL ending to whatever page you want to send the user to after they log in.
} )
.catch( (err) => {
console.log(err);
$w("#errorMessage").expand(); // You can delete this line if you are not going to add an error message. Use a regular text element set to 'collapse on load' from the Properties Panel.
} );
}
Custom login lightbox that refreshes same page once logged in so code for existing page can work.
import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
$w.onReady(function () {
$w("#forgotPassword").onClick( (event) => {
//wixWindow.lightbox.close()
wixUsers.promptForgotPassword()
.then( ( ) => {
//
} )
.catch( (err) => {
let errorMsg = err; //"The user closed the forgot password dialog"
});
});
});
export function loginButton_onclick(event) {
let email = $w("#email").value;
let password = $w("#password").value;
wixUsers.login(email, password)
.then( () => {
console.log("User is logged in");
wixWindow.lightbox.close();
wixLocation.to(wixLocation.url); //This reloads the same page and allows code to show hidden member parts.
} )
.catch( (err) => {
console.log(err);
$w("#errorMessage").expand(); // You can delete this line if you are not going to add an error message. Use a regular text element set to 'collapse on load' from the Properties Panel.
} );
}
Custom signup lightbox that takes user to signup status page once they have signed up as site member and are awaiting approval, which then takes them back to home page when they close this signup status page.
import wixUsers from 'wix-users';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
$w.onReady(function () {
$w("#registerButton").onClick( (event) => {
let email = $w("#email").value;
let password = $w("#password").value;
let first = $w("#firstName").value;
let last = $w("#lastName").value;
wixUsers.register(email, password, {
contactInfo: {
"firstName": $w('#firstName').value,
"lastName": $w('#lastName').value,
}
} )
.then( (result) => {
let resultStatus = result.status;
wixWindow.lightbox.close();
wixLocation.to("/sign-in-status"); //Change the URL ending to whatever page you want to send the user to after they log in
} );
} );
});
This works perfectly and closes after registering details before moving on to signup status page, then both names will be saved in contacts and once site member is approved the member details will be added to 'members' database.
Code for my members login page which only shows logo and login button, when member clicks on login button it opens up my custom login lightbox and they login through the lightbox. Once logged in the lightbox closes and refreshes the members login page which starts the code and puts the login button as logout and now shows all the member only items that were collapsed and hidden previously.
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
$w.onReady(function () {
//TODO: write your page related code here...
});
import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
$w.onReady( () => {
if(wixUsers.currentUser.loggedIn) {
$w("#loginbutton").label = "Logout";
$w("#membersareaonlystrip").expand();
$w("#whitegapforfooter").hide();
}
else {
$w("#loginbutton").label = "Login";
$w("#membersareaonlystrip").collapse();
$w("#whitegapforfooter ").show();
}
} );
export function loginbutton_onclick(event) {
// user is logged in
if(wixUsers.currentUser.loggedIn) {
// log the user out
wixUsers.logout()
.then( () => {
// update buttons accordingly
$w("#loginbutton").label = "Login";
$w("#membersareaonlystrip").collapse();
$w("#whitegapforfooter ").show();
} );
}
// user is logged out
else {
let userId;
let userEmail;
// prompt the user to log in
wixUsers.promptLogin( {"mode": "signup"} )
.then( (user) => {
userId = user.id;
return user.getEmail();
} )
.then( (email) => {
// check if there is an item for the user in the collection
userEmail = email;
return wixData.query("Members")
.eq("_id", userId)
.find();
} )
.then( (results) => {
// if an item for the user is not found
if (results.items.length === 0) {
// create an item
const toInsert = {
"_id": userId,
"email": userEmail
};
// add the item to the collection
wixData.insert("Members", toInsert)
.catch( (err) => {
console.log(err);
} );
}
// update buttons accordingly
$w("#loginbutton").label = "Logout";
$w("#membersareaonlystrip").expand();
$w("#whitegapforfooter").hide();
} )
.catch( (err) => {
console.log(err);
} );
}
}
export function profilebutton_onclick(event) {
wixLocation.to(`/Members/${wixUsers.currentUser.id}`);
}
export function entermembersbutton_onclick(event) {
wixLocation.to(`/members-area`);
}
export function myaccountbutton_onclick(event) {
wixLocation.to(`/account/my-account`);
}
export function websiteupdatebutton_onclick(event) {
wixLocation.to(`/website-update`);
}
I’m so lost. I am BRAND NEW at all this and I’m a 66 year old Nana. I’ve managed to build a website for our condo residents on earthquake preparedness. They wanted it to be residents-only so I finally figured out how to make a custom registration form for when anyone tries to go to my site. I manually approve any registration applications and back they go to the same form where they login instead of re-registering. So far, so good. But when the new members click on the login choice, it just loops them right back to the main form and round and round they go. They can’t get into the site. I thought using the ready-to-go signup form would mean everything would function as intended. All I did was customize the design of the form a little, like font size, colour, but didn’t change anything else.
I know NOTHING about coding and while I can see if I click DEV mode, it opens up a place on my screen where code can go, I don’t have a clue what to open where, or what code to put in to make the Approved Member login link go to the site’s homepage. If anyone has the patience to back off to a zero knowledge user and help me, it would take a one-crystal-clear-step-at-a-time in plain English to help me fix this.