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
1. activity_main.xml Inside the activity_main.xml. <? xml version ="1.0" encoding ="utf-8" ?> <androidx.constraintlayout.widget.ConstraintLayout xmlns: android ="http://schemas.android.com/apk/res/android" xmlns: app ="http://schemas.android.com/apk/res-auto" xmlns: tools ="http://schemas.android.com/tools" android :layout_width ="match_parent" android :layout_height ="match_parent" tools :context =".MainActivity" android :background ="#182b5c" > <WebView android :layout_width ="match_parent" android :layout_height ="match_parent" android :id ="@+id/webView" android :layout_alignParentLeft ="true" android :layout_alignParentStart ="true" android :layout_alignParentTop ="true" android :layout_alignParentRight ="true" android...
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