Tutorial: Custom login/signup lightboxes.
This tutorial aims to show you how to make custom login/signup lightboxes.
//site code
import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
$w.onReady( () => {
if(wixUsers.currentUser.loggedIn) {
$w('#signUpButton').collapse();
$w('#loginButton').collapse();
$w('#accountButton').expand();
$w('#logoutButton').expand();
}
else {
$w('#signUpButton').expand();
$w('#loginButton').expand();
$w('#accountButton').collapse();
$w('#logoutButton').collapse();
}
$w('#logoutButton').onClick(function () {
if(wixUsers.currentUser.loggedIn) {
wixUsers.logout()
.then( () => {
$w('#signUpButton').expand();
$w('#loginButton').expand();
$w('#accountButton').collapse();
$w('#logoutButton').collapse();
});
}
});
$w('#accountButton').onClick(function () {
wixLocation.to('/m/account');
});
});
//login lightbox code
import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
$w.onReady(function (){
$w('#login').onClick(function (){
let email = $w('#email').value;
let password = $w('#password').value;
wixUsers.login(email,password)
.then(()=>{
wixLocation.to('/m/account');
})
})
})
//signup lightbox code
import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
$w.onReady(function(){
$w('#signUp').onClick(function (){
let email = $w('#email').value;
let password = $w('#password').value;
wixUsers.register(email,password)
.then(()=>{
wixLocation.to('/m/account');
})
})
})