@doron-alkalay @yisrael-wix Hello , good afternoon , I am trying to make a kind of login within my web page , I have already created my collection with the Email and password fields , inside the page add some input corresponding to each field as well as a button that I want go to another page if the data is correct , so far I could connect my small login with the collection but I would like to know how I can compare the data entered with the data of my annexed collection capture of my collection and the fields from my login They would be so kind to tell me the code to achieve it and if I was right to connect the fields with the collection, I only want a login connected and validated to a dataset I am looking to restrict access to the community of a certain page so I am only looking to make a login to allow people to have their email and password in the dataset. Please help me, it is only for a school assignment PLEASE HELLP ME !!
The basic login page would be like this:
First you import the API needed for this to work, in this case, wixData and wixLocation .
import wixData from "wix-data"
import wixLocation from "wix-location"
Then you need to call a method called $w.onReady() that executes commands related to the elements you have in your page, as soon as the page is ready.
$w.onReady(() => {
//Every code related to elements have to be put here
})
Then you need to create a event listener on the button you created, in the image you called it button1 and labeled it “Enviar”.
$w.onReady(() => {
$w('#button1').onClick(async() => {
//This is listening for clicks
})
})
Now, you can put the code directly inside this method that, but is best practice to create an async function to do it properly. This functions is called checkLogin() and it receives 2 parameters, email and contrasena.
async function checkLogin(email, contrasena) {
}
To compare the login credentials you will have to do an asynchronous query to the dataset logingers.
async function checkLogin(email, contrasena) {
const query = await wixData
.query("logingers")
.eq("email", email)
.eq("contrasena", contrasena)
.find()
if (query.items.length > 0) {
wixLocation.to("/homepage") //Change this to the URL you want to redirect
} else {
console.error("Email/Contrasena wrong!")
}
}
You have also to store the email and contrasena that were type inside variables to feed the function, like this:
$w.onReady(() => {
$w("#button1").onClick(async () => {
let email = $w("#email").value
let contrasena = $w("#contrasena").value
await checkLogin(email, contrasena)
})
})
Your whole code should be something like this:
import wixData from "wix-data"
import wixLocation from "wix-location"
$w.onReady(() => {
$w("#button1").onClick(async () => {
let email = $w("#email").value
let contrasena = $w("#contrasena").value
await checkLogin(email, contrasena)
})
})
async function checkLogin(email, contrasena) {
const query = await wixData
.query("logingers")
.eq("email", email)
.eq("contrasena", contrasena)
.find()
if (query.items.length > 0) {
wixLocation.to("/homepage") //Change this to the URL you want to redirect
} else {
console.error("Email/Contrasena wrong!")
}
}
Try it and let me know!
@bwprado thank you for your prompt response, a question then if I am doing well to connect each element with my dataset? Did you notice that in the code there is no mention of the collection, that part is made explicit in the checkLogin () method?
@riveraanuar22 With this code, you don’t need to connect the elements manually.
@bwprado ok ok i will proceed to unlink them and try the code notice if i have any questions or if i have been successful
@bwprado I already entered the code but it only marks an error in the section shown, what is it due to?
I already got it, now I would like to know how I can do it so that the error message does not appear in the console but in a jlabel
Just add a text element and replace the console.error() with:
$w("#text1").text = "Email/Contrasena wrong!"
ok I’ll do it
When I enter the text box, the wrong password duplicates the message and if I delete it from the box, the box will be deleted. How can I make the box invisible and visible to me when the error occurs?
@riveraanuar22 I didn’t quite get it. Do you want it to be hidden unless the error occurs?
@bwprado that’s right, as long as the error that remains hidden does not occur
@riveraanuar22 you will have to set the element to be hidden at start, do you know how to do that? It is in the same place you change the element ID.
After that you just have to set the element to .hide() if everything is fine or to .show() if something is wrong.
Like this:
$w('#text1').show()
or
$w('#text1').hide()
@bwprado It would be something like this ?
@riveraanuar22 If you follow the logic it says:
If this array ( query.items ) has the length bigger than 0 (it got a result inside the array that matched the query), then take me to principal . Or else (if the length is not bigger than 0 ), you .hide() the text then .show() the text then console.error() .
Does it seem right to you?
I think, this .hide() method show be used somewhere else, don’t you?
@bwprado I did not understand, the hide () method I put it below the import and it hides it and the show () I put it before the console but it does not show it to me I do not know why
The .hide() method should be put inside the if {} .
I think I already got it, I did it like this and it worked for me
I already came out, thank you very much for the advice
@Bruno Prado
Good morning, I have a question, on my page there is a menu in which by means of a button links to a login this login works perfectly which directs to another page, my question is the following, that page which directs the login is not linked to the menu therefore to access said page it is necessary to go through the login again which becomes somewhat tedious, what I am looking for is to make a kind of timer in the login of a period of 5 minutes which allows me to navigate through the site pages including the page which links the login without the need to log in periodically, could you help me
I’m not so sure I followed you correctly, the best way is for you to get the help you need is creating a new post so everyone can chime in, and is going to be easier for other people to find the same answer.