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

WMIC COMMAND IN WINDOWS || GET PROCESSOR, DISK AND RAM INFORMATION USING CMD WMIC COMMAND

INTRODUCTION The Windows Management Instrumentation Command-line (WMIC) is a powerful command-line tool in Windows that allows you to interact with WMI (Windows Management Instrumentation) to manage system settings and retrieve information about the operating system, hardware, and installed software. Here are some common usages of the WMIC command: 1. Get System Information : wmic os get caption, version, osarchitecture This retrieves the operating system's name, version, and architecture. 2. List Installed Software : wmic product get name, version This shows a list of installed programs along with their versions. 3. Get CPU Information : wmic cpu get name, numberofcores, maxclockspeed 4. Get Disk Drive Information: wmic diskdrive get model, size 5. Check hard drive status: wmic diskdrive get status 6. Get Network Adapter Information: wmic nic get name, macaddress 7. Get Running Processes: wmic process get name, processid 8. Shut Down the System: wmic os shutdown 9. Check System Up...
Post a Comment
Read more