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 USE MESSAGE BOX TO DISPLAY OUTPUT FROM A SELECTION CASE IN VB Public Class Form1     Dim mark As Double     Private Sub txtTest_TextChanged(sender As Object, e As EventArgs) Handles txtTest.TextChanged     End Sub     Private Sub btnok_Click(sender As Object, e As EventArgs) Handles btnok.Click         mark = Double.Parse(txtTest.Text)         Select Case (mark)             Case 0 To 49                 MsgBox("Fail!", MsgBoxStyle.Information, "COMMENT")             Case 50 To 64                 MsgBox("Pass", MsgBoxStyle.Information, "COMMENT")             Case 65 To 74                 MsgBox("Credit", MsgBoxStyle.Information, "COMMENT")             Case 75 To...
Post a Comment
Read more
The computer scientist responsible for copy,  cut and paste passes away.  The advent of the personal computer wasn’t just about making these powerful machines available to everyone, it was also about making them accessible and usable, even for those lacking a computer science degree. Larry Tesler, who passed away on Monday, might not be a household name like Steve Jobs or Bill Gates, but his contributions to making computers and mobile devices easier to use are the highlight of a long career influencing modern computing. Born in 1945 in New York, Tesler went on to study computer science at Stanford University, and after graduation he dabbled in artificial intelligence research (long before it became a deeply concerning tool) and became involved in the anti-war and anti-corporate monopoly movements, with companies like IBM as one of his deserving targets. In 1973 Tesler took a job at the Xerox Palo Alto Research Center (PARC) where he worked until 1980. Xerox PARC is famou...
Post a Comment
Read more