const FIREBASE_URL = 'https://[FIREBASE_PROJECT_ID].firebaseio.com';

const database = new Firebase(FIREBASE_URL);

database.auth().onAuthStateChanged((user) => {

if (user) {

// Logged in, so create a ref to the user's profile and display it on the page

const userProfileRef = database.child('users').childByValue(user.uid());

userProfileRef.on("value", function(snapshot) {

const data = snapshot.val();

console.log(data);

const template = document.createElement('template');

template.innerHTML = `

User Profile

- ${data.name}

${data.email}

`;

const userProfileDiv = document.createElement('div');

userProfileDiv.appendChild(template.content);

document.body.appendChild(userProfileDiv);

});

} else {

// User is not logged in, so display a login form on the page

const loginForm = document.createElement('form');

loginForm.style.display = 'block';

loginForm.setAttribute('action', '/auth/signIn');

loginForm.appendChild(document.createElement('input'));

loginForm.lastChild.type = 'email';

loginForm.firstChild.placeholder = 'Email Address';

loginForm.firstChild.onclick = () => {

const emailInput = document.getElementById('email-input');

const passwordInput = document.getElementById('password-input');

passwordInput.style.display = 'block';

};

loginForm.appendChild(document.createElement('p'));

loginForm.lastChild.textContent = 'Password:';

loginForm.firstChild.onkeyup = (event) => {

const emailInput = document.getElementById('email-input');

const passwordInput = document.getElementById('password-input');

passwordInput.style.display = event.type === 'keydown' ? 'block' : 'none';

};

document.body.appendChild(loginForm);

}

});