<repo_name>Samad-Ullah/CoffeeCafe<file_sep>/Project Coffee Cafe.md
# CoffeeCafe
In this project i am worked on Authentication of firebase.
I learned All from a youtube channel https://www.youtube.com/watch?v=aN1LnNq4z54&list=PL4cUxeGkcC9jUPIes_B8vRjn1_GaplOPQ
This is actually a good platorm to make web , android and many other applications.
In this projet i used one Cloud function that authtenticate the admin panel which is only for admins.
Coffee detail page is viewed by admin as well as new user.
admin make  new user to admin if he wants.
All data store in fireabase collection named CofeeCollection.


<file_sep>/javascript/index.js
const coffeeList = document.querySelector('.coffeess');
const linksLoggedIn = document.querySelectorAll('.logged-in');
const linksLoggedOut = document.querySelectorAll('.logged-out');
const account = document.querySelector('.account-details');
const adminitems =document.querySelectorAll('.admin');

// toggle UI Elements
const navbarlinks = (user) =>{
    if(user){
     
        if(user.admin){
            adminitems.forEach(item => item.style.display="block");
        }
        

        // account info.
        const html=`
        <div>loged In as ${user.email}</div>
        <div style="color: pink;">${user.admin? "admin" : ""}</div>
        `;
        account.innerHTML=html;

        linksLoggedIn.forEach(item => item.style.display ='block');
        linksLoggedOut.forEach(item =>item.style.display ='none');
    }else{
        //  All logout scenario
        adminitems.forEach(item => item.style.display="none");
        account.innerHTML='';
        linksLoggedIn.forEach(item =>item.style.display ='none');
        linksLoggedOut.forEach(item =>item.style.display ='block');
    }
}


const setupCoffee = (data) =>{
    
    let html = '';
        data.forEach(doc => {
            const coffee =doc.data();
            const li = `
                <li>
                    <div class="collapsible-header grey >${coffee.Price}</div>
                    <div class="collapsible-body white>${coffee.CoffeeName}</div>
                    <div class="collapsible-body white>${coffee.Description}</div>
                
                </li>
            `;
            
            html += li;
            
        });
        coffeeList.innerHTML= html;
    
};


document.addEventListener('DOMContentLoaded', (e) => {
    
    var modals = document.querySelectorAll('.modal');
    M.Modal.init(modals);
    
    var items = document.querySelectorAll('.collapsible');
    M.Collapsible.init(items);
});<file_sep>/javascript/Authentication.js
// for cloud function
const addNewAdmin = document.querySelector('.admin-actions');
addNewAdmin.addEventListener('submit',(e)=>{
    e.preventDefault();
    const adminEmail = document.querySelector('#user-ID').value;
    const confirmNewAdmin = functions.httpsCallable('confirmNewAdmin');
    confirmNewAdmin({email: adminEmail}).then(result =>{
        console.log(result);
    });
});



//for auth state changes
auth.onAuthStateChanged(user =>{
    if(user) {
        user.getIdTokenResult().then(IdTokenResult =>{
           user.admin =IdTokenResult.claims.admin;
           navbarlinks(user);
           
     
        })
        //get data from database
        db.collection('CofeeCollection').onSnapshot(snapshot => {
        setupCoffee (snapshot.docs);
        
       

    });

    }else{
        navbarlinks();
        setupCoffee([]);
    }
});

// add new  Coffee in db 
const addcoffee =document.querySelector('#create-form');
 addcoffee.addEventListener('submit',(e)=>{
    e.preventDefault();

    db.collection('CofeeCollection').add({
        CoffeeName:addcoffee['CoffeeName'].value, 
        Price:addcoffee['Price'].value,
        Description:addcoffee['Description'].value
  }).then(() =>{
      const modal = document.querySelector('#modal-create');
      M.Modal.getInstance(modal).close();
      addcoffee.reset();
  });

});






const signupForm =document.querySelector('#signup-form');
 signupForm.addEventListener('submit',(e)=>{
     e.preventDefault();
     
     // get user data 
     const email = signupForm['signup-email'].value;
     const password = signupForm['signup-password'].value;
     
    auth.createUserWithEmailAndPassword(email,password).then(cred =>{
        console.log(cred.user);

        const modal = document.querySelector('#modal-signup');
        M.Modal.getInstance(modal).close();
        signupForm.reset();
    });
     
 });

 const logout =document.querySelector('#logout');
 logout.addEventListener('click',(e) =>{
     e.preventDefault();
     auth.signOut();
 });

 
 const loginForm=document.querySelector('#login-form');
 loginForm.addEventListener('submit', (e) => {
     e.preventDefault();
     const email = loginForm['login-email'].value;
     const password =loginForm['login-password'].value;

     auth.signInWithEmailAndPassword(email,password).then(cred => {
         console.log(cred.user);
         const modal =document.querySelector('#modal-login');
         M.Modal.getInstance(modal).close();
         loginForm.reset();

     });

 });