import wixUsers from ‘wix-users’;
import wixLocation from ‘wix-location’;
$w.onReady( function () {
$w(‘#submit’).onClick( function () {
let email = $w(‘#email’).value;
let password = $w(‘#password’).value;
wixUsers.login(email, password)
.then(() => {
wixLocation.to('https://www.therapaw.com');
})
})
})
let isUserLoggedIn = wixUsers.loggedIn; // true
//Add your code for this event here:
export function forgotPassword_click(event) {
wixUsers.promptForgotPassword();
//Add your code for this event here:
}
The first problem that I’m having is that when a user inputs their username and password and clicks the “Login” button “failure message” pops up. It does this regardless of whether or not they have entered the correct info. They can even login successfully and the faliure message still pops up. It’s very confusing.
My next problem is that there does’t seem to be a way to customize the “forgot password” link. I installed the proper code, as shown above, and it prompts a page that asks them to enter their email so they can reset the password. My issue is that there is no way to customize the email that gets sent. As of now, it sends an email with big Wix logo asking them to reset their password. (see below)
Its very confusing to the users because it’s coming from a 3rd party. How do I resolve this?
Yes like Shan has stated, if you try resetting your password using the same email that you use for your Wix admin account and editing the website, then you will be resetting your own Wix password hence the Wix email.
All other member users of your website will get the basic forgot password email that Shan has displayed in his post too.
As for your custom lightbox login code, you seem to have yours setup differently to mine.
This is the code that I have used for my own custom lightbox login that is on my ‘Members’ page and after the user logs in the same page is refreshed so that the hidden member only elements appear on the page too.
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);
} )
.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.
$w("#errorMessage1").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.
} );
}
As for the ‘Forgot Password’, we can not currently alter the layout for either the forgot password lightbox or the forgot password email, so far we can only do customised login and signup.
You can try changing the title fonts and colours used for the forgot password window, the same that you can change Wix’s own login and signups, however that could mean that your website gets altered.
Hi,
I tried to use the code that you suggested and it doesn’t work on my custom login. I doesn’t even log the user in when they enter their username and password, nor does an error message appear when they enter the wrong password. Can you possibly send me the url of the page that you’re referring to, or else maybe you can send me screenshots of page as it looks for each step of the login process? I’d really appreciate it.
The error message is just a text box element that has a error message written in it, with collapse on load turned on in the properties panel. You will have to make that up yourself as it isn’t added automatically.
You probably already know that when you do a custom form and link a button to submit to a dataset, then you get the options in that window to add a success and error message without having to make it up yourself.
Anyways, paste your code up that you have used and we can check it for errors and see where we go from there.
@givemeawhisky
Here’s the code for custom login light box and a screen shot of the page.
import wixUsers from ‘wix-users’;
import wixLocation from ‘wix-location’;
$w.onReady( function () {
$w(‘#submit’).onClick( function () {
let email = $w(‘#email’).value;
let password = $w(‘#password’).value;
wixUsers.login(email, password)
.then(() => {
wixLocation.to(‘https://www.therapaw.com’);
} )
. catch ( (err) => {
console.log(“Wrong username or password”);$w(‘#wrongLogin’).show()
} )
})
})
let isUserLoggedIn = wixUsers.loggedIn; // true
//Add your code for this event here:
export function forgotPassword_click(event) {
wixUsers.promptForgotPassword();
//Add your code for this event here:
}
Yes, I am aware of the options in that window to add a success and error message without having to make it up yourself. But, that doesn’t work properly either. The error message pops up whether you enter the correct username & password or not.
I would also be very interested in seeing how your page reveals the hidden members area once the user logs in. I’d like to add that to my site as well.
Thanks for you help.
Firstly, I can see a few mistakes in your screenshot above, you don’t need animations on the error message and the properties should be on collapsed to load and not hidden on load. This is how mine is setup.
Plus why have you got the text box connected to a dataset as the code that I pasted up in previous reply does not need to be connected to anything as it is written within the code itself.
You can’t use the code I have posted earlier or the code you are using when you use the error message from the submit to dataset option as shown below.
You will notice on my submit button connected to the dataset, I use both the success and error message on top of each other, however as you know that only one will actually appear.
I do suggest that you use the code that I posted earlier, I know it works for a start.
However, firstly I would correct your errors in the elements properties and take out the animation, then disconnect your button and redo the error message as I have done.
Obviously just do a simple text box like you have already and just change the element name to whatever you are using instead of the error message I have in my code.
Plus I have two error messages in my code as I originally had error messages top and bottom of my lightbox, however now I’ve just got it at the bottom, however I haven’t taken out the error message1 line of the code.
Do these alterations and then retest your code and if it still doesn’t work, then as I suggested, use my code from earlier as that should work.
As for the members login page, well the only thing I have visible on that page is the header and footer along with a logo and one button which says login and changes to logout when members have logged in using the custom login lightbox.
All the member only elements on that page are placed in one strip, purely to have jsut the one input in the code instead of having to type up every different element that I have used.
Then this strip will only appear when the member logins in as the custom login lightbox is set to close itself and then reload the members page, so this reload then makes the code work as it allows the page code to check if user is logged in and then display the members strip, from which members can view things or go to different pages by clicking on buttons etc.
The code for that page I have listed below in a separate reply, just remember that as I have the login button on that same page, I need the custom login lightbox code to refresh the page, which is why I have this in my code: wixLocation.to (wixLocation.url);
If your login lightbox sends the logged in member to another page, then you just need to change the page to your own location.
This is the page code for my members login page, remembering that my login lightbox code will refresh the page when a member logs in so that the page code works.
Note that the strip itself is NOT set to be hidden or collapsed on load, so don’t tick those options in the properties panel.
Also, note that you might have issues with your footer with it only being able to go up to the bottom of the lowest element on your page.
if you use a strip method and you are wanting your footer to move up the page so that it doesn’t just show a big white space when the strip is collapsed.
Then you will need to setup everything within the strip itself and then delete it using your keyboard cut, then you will need to move your footer up to where you want it to be when the hidden strip is not shown.
After saving it once the footer is in position, you need to paste back in the strip again using keyboard commands. This should put it back in the same position, however you will need to check it all again, especially on the mobile editor, before saving your work again.
This is an ongoing problem with a big white gap and it is mentioned in the code forum many times, however I was made appear of this fix in one of the forum posts and have used it ever since as it works perfectly.
Okay, enough talking! Hope this all works for you.
// 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`);
}
Just a quick update, if you use my code above for the members page, then note that I have changed one line from
wixUsers.promptLogin( {"mode": "login"} )
to
wixUsers.promptLogin( {"mode": "signup"} )
Plus also note that in addition, in the member signup settings panel, under the “which option shows first” section you need to select “New member signup”.
This way the default login page will never be triggered by an external application / restricted page / login bar, and only the custom signup page will be opened with a link to the custom login page.
I’ve had to do this as for some reason it has just started to show the Wix own login window instead of the custom login lightbox when members used the login button. However, with applying these two simple changes, it is all working fine again now.
Hi - I’ve been following this thread closely, @givemeawhisky , the problem I am seeing is slightly different.
I have gotten rid of the login bar completely. I have a /login page which has logic similar to yours above (switching between login/logout modes), and I direct to that with my own Login button on the main page.
From the /login page when the user is not logged in, I have a “Forgot password?” link, which when clicked starts the flow via wixUsers.promptForgotPassword(). This flow appears to be a “black box” - it loads a page that prompts the user for the new password, sends them an email and swaps the page for one with a “Done” button. If I click that “Done” button, then it takes me back to the custom login page that launched the flow, which is great.
However, when the user clicks on the link that was sent in the email and is taken to a default page that captures the info to reset their password, they are then ultimately taken to the Wix default login page. Ugh! Is there any way to tell Wix at the end of the “change password flow” to forward to my /login instead of to the default Wix login?
The other odd thing is that when the change password screen initially opens, if I click on the “X” to close it (instead of initiating the flow), the .error() code does not appear to be run (I see nothing in the console log).
In fact, even when I run it to completion I see nothing in the console.log! Here is my code (it was a little unclear to me based on the documentation of the syntax of this API whether I needed a “rejected” aspect within the .then() as well as a separate .catch() clause per the example shown in the API doc, so I ended up implementing both. because my initial implementation was straight out of the API doc and that didn’t show anything in the console log either):
$w("#forgotPassword").onClick( (event) => {
console.log("forgot password clicked");
wixUsers.promptForgotPassword()
.then( ( ) => {
console.log("Prompt for password resolved");
}, () => {
console.log("Prompt for password rejected - likely user closed the dialog box.");
// User closed the password dialog
wixLocation.to(wixLocation.url); // Reload this page
})
.catch( (err) => {
//"The user closed the forgot password dialog"
console.error("Got error with forgot password prompt: " + err);
wixLocation.to(wixLocation.url);
});
});
I only see “forgot password clicked” in the Site Events panel when the user clicks the “Forgot Password” link - I don’t see either the console log entry when the promise resolves, is rejected or has an error.
I have left this issue alone, and am now returning to it because I am still seeing the same behavior. The API doc for promptForgotPassword() states that " returns a Promise that resolves when the user has submitted the forgot password form. ". When in the flow is it considered that “the user has submitted the forgot password form”? When they enter their email address?
In this code:
$w("#forgotPassword").onClick( (event) => {
console.log("forgot password clicked");
wixUsers.promptForgotPassword()
.then( ( ) => {
console.log("Prompt for password resolved");
})
.catch( (err) => {
let errorMsg = err; //"The user closed the forgot password dialog"
console.log("Got error with forgot password prompt: " + errorMsg);
});
});
I am never seeing the “Prompt for password resolved” message in the log, even when I enter an email address, go to my email and click the link and enter a new password which the subsequent screen says has been successfully completed.
So while the functionality of the change password appears to be working (although I must say it is clunky to not have any control over where the user gets re-directed at the end of it), I would really like to take some action in the .then() clause.
