Custom member login with username

Hi guys,

I have #custom #registration and #login on my website. I’ve added a unique username field. The registration works fine because it takes email and password. But for the login page I would like to have the member log in with the username and password. The username is stored in a #collection.

How can I make the members log in with their username and password?

Thank you very much!

https://www.wix.com/corvid/forum/main/comment/5f520228f276a8001715e1a6

Thank you for your response. The member’ email is in the database but he’s not putting the email to log in, just the username and password. Can I query the username and then get the email?

Never mind. It worked. Thanks a lot!

You can query the user name instead of email!!!

:grinning:

So I did this with the help of videos and other developers like you here:

wixData.query("manageProfile")
  .eq("username", $w('#usernameReg').value)
  .find()
  .then( (results) => {

 if ($w("#emailReg").valid && $w("#passwordReg").valid && $w("#birthday").valid && results.items.length < 0) {
 let email = $w("#emailReg").value;
 let password = $w("#passwordReg").value;
 let birth = $w("#birthday").value;
 let username = $w("#usernameReg").value;

   wixUsers.register(email, password, {
     contactInfo: {
 "birthday": birth,
 "username": username 
     }
    })
    .then((result) => {
     $w("#dataset1").save()
      .then((item) => {
       wixLocation.to("/account/profile"); 
      })
      .catch((err) => {
 let errMsg = err;
      });
    })
    .catch((err) => {
 let errorMsg = err;
     console.log(err);
     $w('#emailExists').show(); 
     $w("#usernameErr").show(); 
    });
   console.log("Trying to register"); 
  } else {
   $w('#errorMessageReg').show(); 
   console.log("Missing information"); 
  }

 });

});
} );

I have error messages for each input field, how do is show them separately for each input?

The errors are text elements

Hi Omar ,
You only need 1 text element for showing the error!!!

You can simply do this like-> (My thoughts)

The following code can only be used in register page !!!

wixData.query("manageProfile")
  .eq("username", $w('#usernameReg').value)
  .find()
  .then( (results) => {
 if (results.items.length > 0) {
      console.log("email aldready exists");
      $w('#errorMessageReg').show();  // error text element
  $w('#errorMessageReg').text = "email aldready exists";
 


 
}
else {
 if ($w('#emailReg').valid) {   //checks if email Input is valid
 if ($w('#passwordReg').valid) {  //checks if pass input is valid

 
  }
 else {      // if password input is not valid 
     console.log("password mismatch");  
  $w('#errorMessageReg').show();   //error text element
  $w('#errorMessageReg').text = "password mismatch";

  }
 
}
else {   // if email input is valid
  console.log("email mismatch");
  $w('#errorMessageReg').show();   //error text element
  $w('#errorMessageReg').text = "email mismatch";

 

} 

}
 });

Hi
@ajithkrr

I have been in trouble for a long time, I am very thankful that you will help me.

I have created two dropdowns. In which the first one is { " #cityNameDropdown " } which is connected to the { " #dataset5 " “Delivery Cities” } contains multiple cities which redirects to dynamic pages when clicked except Delhi city.
And the other one is { " #cityLocationDropdown " } which is connected to the { " #dataset4 " “Delhi” } .disable on load, .onChange with { " #cityNameDropdown " } .enable only when city Delhi is clicked and having Delhi’s multiple locations which redirects to their dynamic pages. Both are working well.

My query is that there is a text element on my website Header, which I have named Choose City and whose ID is { " #deliveryCityText " }. I want that whichever city is selected except Delhi from the { " #cityNameDropdown " } or if Delhi is the city selected than whichever Delhi’s location is selected from the { " #cityLocationDropdown " }, it’s value displays in { " #deliveryCityText " } even after changing every page, it should not be changed until it is changed back from dropdown.

For example, you can check some other web by visiting cake24x7 with extension .com

Because I do not know much of coding, please tell the code by giving a little detail with example if possible.

1 Like

I am not sure about this, but you can try →
Home page- code →

$w.onReady(function () {  // when all the elements are ready 

 $w('#deliveryCityText').text = "";  // choose what text  to be shown from the start.
               
});

Then, for your page, where the dropdown is →

$w.onReady(function () {

$w('#cityNameDropdown').onChange( (event) => {   // dropdown

var city  =  $w('#cityNameDropdown').value;  // assigning the variable 'city' as the dropdown value.
  
if (city === "Delhi") {       //if the variable's value is "Delhi"
    console.log("Delhi selected");
   $w('#cityLocationDropdown').enable(); // enables the second dropdown
   
   
  } else {    //if the variable's value is not "Delhi"
  
   $w('#cityLocationDropdown').disable();
    $w('#deliveryCityText').text = city;
  }
  
});

$w('#cityLocationDropdown').onChange( (event) => {  //dropdown 2

var location = $w('#cityLocationDropdown').value;
 $w('#deliveryCityText').text = location;

});

});

You can either do that or use Wix Storage

Reference →


https://www.wix.com/corvid/reference/$w/dropdown/value
https://www.wix.com/corvid/reference/$w/dropdown/onchange

@ajithkrr

Thanks for your reply and cooperation!
I have written all the codes written below and they are also working. I am just stuck in a code which i have bolded below.

My query is that there is a text element on my website Header, which I have named Choose City and whose ID is { “#deliveryCityText” }. I want that whichever city is selected except Delhi from the { “#cityNameDropdown” } or if Delhi is the city selected than whichever Delhi’s location is selected from the { “#cityLocationDropdown” }, it’s value displays in { “#deliveryCityText” } even after changing every page, it should not be changed until it is changed back from dropdown.

For example, you can check some other web by visiting cake24x7 with extension .com
Please guide and help. Thanks.

import wixLocation from 'wix-location';
import wixData from 'wix-data';

$w.onReady(function () {

    wixData.query("Delhi")
        .limit(100)
        .ascending("title1")
        .distinct("title1")
        .then(r => {
 let options = r.items;
            options = options.map(e => { return { label: e, value: e }; });
            $w("#cityLocationDropdown").options = options;
        });

});

export function cityLocationDropdown_change(event) {

    $w("#dataset4").setCurrentItemIndex(event.target.selectedIndex)

        .then(() => {
            wixLocation.to($w("#dataset4").getCurrentItem().title2);
        });

}

$w.onReady(function () {

    $w('#cityLocationDropdown').options;
    $w('#cityLocationDropdown').disable();
    $w('#cityNameDropdown').onChange(() => {

 if ($w('#cityNameDropdown').value === 'Delhi') {
            $w('#cityLocationDropdown').options;
            $w('#cityLocationDropdown').enable();
        } else {
            $w('#cityLocationDropdown').value = '';
            $w('#cityLocationDropdown').disable();
        }
    });

});

export function cityNameDropdown_change(event) {

    $w("#dataset5").setCurrentItemIndex(event.target.selectedIndex)

        .then(() => {
            wixLocation.to($w("#dataset5").getCurrentItem().titleLink);

        });

}

$w.onReady(function () {

    wixData.query("Delivery Cities")
        .eq("titleMain", $w('#cityNameDropdown').value)
        .find()
        .then((results) => {
        $w('#deliveryCityText').text = results.items[0].value;

        console.log(results.items);
        })
        .catch((err) => {
         let errorMsg = err;
        });

});

I saw that you have too many onready function(s) .
Make it in single onready function.
(I am not sure, the code may work under too many onReady, but for the time being , you can make the code(s) under onReady in one onReady.

Only looking in to bolded code →

  1. Make it in single onready function.
    See the bold(ed) and orange piece of code
.then((results) => {
        $w('#deliveryCityText').text = results.items[0].value;

Is ‘value’ your field key ???

.then((results) => {
        $w('#deliveryCityText').text = results.items[0].yourFieldKey;

Let’s say the field key is ‘nope’
So, it should be →

.then((results) => {
        $w('#deliveryCityText').text = results.items[0].nope;

If that also doesn’t work →

.then((results) => {
let items12 = results.items[0];
let text1 = items12.fieldKey;
        $w('#deliveryCityText').text = text1;

or->

.then((results) => {
let items12 = results.items[0];
let text1 = items12.fieldKey;
        $w('#deliveryCityText').text = JSON.stringify(text1);

@ajithkrr

Whatever you have sent the code, I have tried it all, onready function(s) has also been singled out… please check. Everything is working properly just this bolded code is not working.
Anyway, thank you very much you explained it very well and also worked hard. I look forward to what to do? You will also check if something can be solved. Thanks