conditional statement for contact form not working

Im trying to first, check if both fields are not empty. if empty, alert user its empty. Then check if both user and password math and if they do match, then alert('welcome'). but if I type anything in the boxes, it passes and says welcome? Help!

const container = document.querySelector('.container');
const userInput = document.querySelector('#username');
const passInput = document.querySelector('#password');
const button = document.querySelector('button');

button.addEventListener('click', () => {
    if (!userInput.value || !passInput.value) {
        alert('One or more fields are empty. Please enter password and username');
    }
    if (!userInput.value == 'user21' || !passInput.value == 'user21') {
        alert('password or username inavlid')
    } else if (userInput.value == 'user21' && passInput.value == 'user21') {
        alert(`Welcome ${userInput.value}`);
    }
})*