Product:
Wix Studio
Situation:
Hi,
I want to create a password-protected dynamic page on my Wix Studio site. However, I don’t like the default “Guest Area” login page (doesn’t fit with the site’s theme). I don’t currently have/nor do I want a Members Area on the site. I understand there might be a way to use a custom lightbox/dev tools to accomplish this?
When someone enters the dynamic page, a lightbox should pop up asking for a username (email) and password. The content on the page (such as images or galleries) should be hidden until the correct username-password combination is entered.
If the credentials are correct, the lightbox should close, and the content will be revealed. If the credentials are wrong, an error message should appear. If the user closes the lightbox, the content remains hidden. I do not want to use the default Members Area, only a custom login system for this specific page.
Below you will find information of what I have so far.
Any help would be appreciated.
P.s. Sorry, my website will be in German, so some of the element names might be in German.
Regards
Problem:
My codes do most of what they are supposed to do. The content on the dynamic page is hidden. Once entering the dynamic page the lightbox comes up. I can enter the e-mail and password, but when I click on the Button - nothing. Absolutly nothing.
When I close the lightbox the content on the dynamic pages stays hidden.
What did I do wrong that my button doesnt work? 
Codes and further information:
Here is a summary of the relevant field and element IDs:
Pages:
- Lightbox Page:
Page name: Login
ID**:#Login - **Dynamic Page (Item)**:
Page Name:Portfolio SNP (Item)
ID:#page1
Field and Element IDs on the Pages:
- Lightbox Page (Login) (
#Login):
- Email Input Field:
#Email(Type: Text) - Password Input Field:
#PasswortEingabe(Type: Password) - Login Button:
#LoginButton - Error Message Text:
#errorMessage(Initially hidden, shown when login fails)** - Close Button:
#CloseButton
- Dynamic Page (
Portfolio SNP (Item)-#page1):
- Content to be Hidden:
- Text Field:
#text9(Initially hidden) - Gallery:
#Galerie(Initially hidden)
- Text Field:
Backend Code (passwort-lightbox.jsw)
// Backend: validate the email and password
export function validateCredentials(email, password) {
const validEmail = "deine-email@example.com"; // Replace with the actual email
const validPassword = "deinPasswort"; // Replace with the actual password
// Check if the provided credentials match
if (email === validEmail && password === validPassword) {
return true;
} else {
return false;
}
}
Frontend Code: (Login.w1nek.js)
import wixWindow from 'wix-window';
import { validateCredentials } from 'backend/passwort-lightbox.jsw'; // Ensure this is correct import
$w.onReady(function () {
// Show the Lightbox when the page is loaded
wixWindow.openLightbox("Login");
// Button click logic for the login button inside the Lightbox
$w("#LoginButton").onClick(async () => {
const email = $w("#Email").value;
const password = $w("#PasswortEingabe").value;
// Call the backend function to validate credentials
const isValid = await validateCredentials(email, password);
if (isValid) {
// If valid, close the Lightbox and show the content on the dynamic page
wixWindow.closeLightbox();
$w("#text9").show(); // Show the hidden content
$w("#Galerie").show(); // Show the gallery or any other hidden content
} else {
// If invalid, show the error message
$w("#errorMessage").show();
}
});
// Close button logic
$w("#CloseButton").onClick(() => {
wixWindow.closeLightbox();
});
});
Frontend Code for Dynamic Page: (w1nek.js)
import wixWindow from 'wix-window';
$w.onReady(function () {
// Initially hide the content
$w("#text9").hide();
$w("#Galerie").hide();
// Open the login lightbox on page load
wixWindow.openLightbox("Login");
});