Skip to main content

SIGN UP, SIGN IN HTML, JS, CSS USING FIREBASE


<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

    <title>

        FORM

    </title>

    <!--add scripts-->

    <script src="https://www.gstatic.com/firebasejs/8.9.0/firebase-app.js"></script>

    <script src="https://www.gstatic.com/firebasejs/8.9.0/firebase-analytics.js"></script>

    <script src="https://www.gstatic.com/firebasejs/8.9.0/firebase-auth.js"></script>

    <script src="form.js"></script>

    </head>

<body>

    <h1>WELCOME</h1>

    <div id="frmcontainer">

      <div id="head"></div>

        <input type="email" placeholder="Email" id="email">

        <input type="password" placeholder="Password" id="password">

        <button onclick="signUp()" id="signup">Sign Up</button>

         <button onclick="signIn()" id="signin">Sign In</button>

         <button onclick="signOut()" id="signout">Sign Out</button>

    </div>

    </body>

     <style>

        body{

            background:darkslategrey;

        }

        h1{

            color: #ff4d4d;

            margin: 100px auto;

            text-align: center;

            color: #fff;

        }

        #frmcontainer

        {

            background-color:#fff;

            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

            width: 25%;

            height: 50%;

            margin: 10px auto;

            border-radius: 10px;

        }

        #head{

            background-color:firebrick;

            width: 100%;

            height: 10px;

            border-top-right-radius: 10px;

            border-top-left-radius: 10px;

        }

        #email,#password

        {

            width: 70%;

            height: 40px;

            display: block;

            border: none;

            outline: none;

            border-bottom: 2px solid black;

            margin-left: 5px;

        }

        #signup

        {

            background-color:#fffa65;

            color: #000;

            font-weight: bold; 

            padding: 10px 25px;

            border-radius: 10px;

            text-align: center;

            text-decoration: none;

            display: inline-block;

            font-size: 13px;

            margin-top: 10px;

            margin-left: 2px;

            border: none;

        

        }

        #signin

        {

            background-color: #32ff7e;

            color: #000;

            font-weight: bold; 

            padding: 10px 25px;

            border-radius: 10px;

            text-align: center;

            text-decoration: none;

            display: inline-block;

            font-size: 13px;

            margin-top: 10px;

            margin-left: 2px;

            border: none;

        }

        #signout

        {

            background-color: #ff4d4d;

            color: #000;

            font-weight: bold; 

            padding: 10px 25px;

            border-radius: 10px;

            text-align: center;

            text-decoration: none;

            display: inline-block;

            font-size: 13px;

            border: none;

            margin-top: 10px;

            margin-left: 2px;

            margin-bottom: 5px;

        }

    </style>

</html>


JS


  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "AIzaSyBWj6RXuC9TBXwYAW8YxXnv7CPn7K4j1_M",
    authDomain: "form2-d0590.firebaseapp.com",
    projectId: "form2-d0590",
    storageBucket: "form2-d0590.appspot.com",
    messagingSenderId: "833788475080",
    appId: "1:833788475080:web:e070746b7b8ea33d7a57fd",
    measurementId: "G-KE9B6CG3JF"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();

//add firebase auth

const auth =firebase.auth();

//create fucntions

//sign up function

function signUp(){
    
    var mail =document.getElementById("email");
    var pass =document.getElementById("password");
    
    if(mail.value.length==0){
        alert("Email is required!")
    }
    else if(pass.value.length==0){
        alert("Password is required!")
    }
    else{
    
    const promise = auth.createUserWithEmailAndPassword(mail.value,pass.value);
    
    promise.catch(e=> alert(e.messgae))
    
        alert("Sign up successful!")
    }
}

//sign in function

function signIn(){
    
    var mail =document.getElementById("email");
    var pass =document.getElementById("password");
    
    if(mail.value.length==0){
        alert("Email is required!")
    }
    else if(pass.value.length==0){
        alert("Password is required!")
    }
    else{
    
    const promise = auth.signInWithEmailAndPassword(mail.value,pass.value);
    
    promise.catch(e=> alert(e.messgae))
    
    }
}
//sign out

function signOut(){
    auth.signOut();
    alert("Signed out")
}

//state changed

auth.onAuthStateChanged(function(user){
            if(user){
    var mail = mail.value;
    alert("Active user "+mail);
                    }
else{
    alert("No active user")
}
                        })
                        
       
                        
                        SUBSCRIBE TO OUR YOUTUBE CHANNEL
                        
                        
                        
                     

Comments

Post a Comment

Popular posts from this blog

ACTIVATING MS OFFICE WITHOUT KEY

Step1 Open cmd as admin Step2 copy office directory Step3  Go to office directory, type cd on cmd then paste the office directory you copied e.g., for a 64-bit machine it will look like this. cd C:\Program Files (x86)\Microsoft Office\Office16 Step4 Type in the following commands into cmd then hit enter after every command: cscript ospp.vbs /inpkey:XQNVK-8JYDB-WJ9W3-YJ8YR-WFG99 cscript ospp.vbs /unpkey:BTDRB >nul cscript ospp.vbs /unpkey:KHGM9 >nul cscript ospp.vbs /unpkey:CPQVG >nul cscript ospp.vbs /sethst:kms8.msguides.com cscript ospp.vbs /setprt:1688 cscript ospp.vbs /act METHOD 2 Copy script https://gist.github.com/amitbd1508/fe64e926005c85d424e8e79a943b3b60 @echo off title Activate Microsoft Office 2019 (ALL versions) for FREE - MSGuides.com&cls&echo =====================================================================================&echo #Project: Activating Microsoft software products for FREE without additional software&echo =====================...
Post a Comment
Read more

HOW TO ACTIVATE WINDOWS 10 USING CMD

  Don't have the original windows product key?  Follow the steps below. You must be connected to the internet to work. Don't forget to subscribe to my YouTube channel  here Video Tutorial Please note, DON NOT include the quotation marks, i.e "" have used them to show the beginning and end of the commands. Step 1: Open cmd as admin Step 2: Install KMS client key Use the command “slmgr /ipk your license key ” to install a license key (your license key is the activation key that corresponds to your Windows edition).  The following is the list of Windows 10 Volume license keys. Home: TX9XD-98N7V-6WMQ6-BX7FG-H8Q99 Home N: 3KHY7-WNT83-DGQKR-F7HPR-844BM Home Single Language: 7HNRX-D7KGG-3K4RQ-4WPJ4-YTDFH Home Country Specific: PVMJN-6DFY6-9CCP6-7BKTT-D3WVR Professional: W269N-WFGWX-YVC9B-4J6C9-T83GX Professional N: MH37W-N47XK-V7XM9-C7227-GCQG9 Education: NW6C2-QMPVW-D7KKK-3GKT6-VCFB2 Education N: 2WH4N-8QGBV-H22JP-CT43Q-MDWWJ Enterprise: NPPR9-FWDCX-D2C8J-H872K-2YT43 Enter...
Post a Comment
Read more

WINDOWS 7,8,10 Activator

Copy and paste into your notepad and save it with a .bat extension. Disable your windows security or antivirus then run it as administrator to activate your windows. @echo off title Windows 10 ALL version activator&cls&echo ************************************ &echo Supported products:&echo - Windows 10 Home&echo - Windows 10 Professional&echo - Windows 10 Enterprise, Enterprise LTSB&echo - Windows 10 Education&echo.&echo.&echo ************************************ &echo Windows 10 activation... cscript //nologo c:\windows\system32\slmgr.vbs /ipk TX9XD-98N7V-6WMQ6-BX7FG-H8Q99 >nul cscript //nologo c:\windows\system32\slmgr.vbs /ipk 3KHY7-WNT83-DGQKR-F7HPR-844BM >nul cscript //nologo c:\windows\system32\slmgr.vbs /ipk 7HNRX-D7KGG-3K4RQ-4WPJ4-YTDFH >nul cscript //nologo c:\windows\system32\slmgr.vbs /ipk PVMJN-6DFY6-9CCP6-7BKTT-D3WVR >nul cscript //nologo c:\windows\system32\slmgr.vbs /ipk W269N-WFGWX-YVC9B-4J6C9-T83GX >nul cscrip...
Post a Comment
Read more