i have created a registration form using html css and javascript when i click in login button it will display a dropdown menu in another window where all the register username will display in the drop down menu.
i have created another html page and create a dropdown menu but how i can,t understand how to retrieve username fro cloudfirestore to the dropdownmenu[enter image description here]
[enter image description here][1]
<html>
<head>
<meta charset="utf-8">
<title>LogIn</title>
<meta name="description" content="">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.2.1/css/fontawesome.min.css" integrity="sha384-QYIZto+st3yW+o8+5OHfT6S482Zsvz2WfOzpFSXMF9zqeLcFV0/wlZpMtyFcZALm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.2/font/bootstrap-icons.css" integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="form-box">
<h1 id="title">Sign up</h1>
<form action="">
<div class="input-group">
<div class="input-field">
<i class="bi bi-person-fill"></i>
<input type="text" id="userName" placeholder="User Name">
</div>
<div class="input-field" id="email">
<i class="bi bi-envelope-fill"></i>
<input type="email" id="Email" placeholder="Email">
</div>
<div class="input-field">
<i class="bi bi-lock-fill"></i>
<input type="password" id="password" placeholder="Password">
</div>
<div class="input-field" id="phoneNumber">
<i class="bi bi-phone-fill"></i>
<input type="tel" id="mobileNumber" placeholder="Mobile No">
</div>
<p>Forget Password Click here</p>
</div>
<div class="btn-field">
<button type="button" id="signupBtn">Sign Up</button>
<button type="button" class="disable" id="signinBtn">Sign In</button>
</div>
</form>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>
<script>
const firebaseConfig = {
apiKey: "AIzaSyD2izIZyRC1IKqfc5RaZ-HHx0CmxTYNNws",
authDomain: "login-with-firebase-data-ae61f.firebaseapp.com",
projectId: "login-with-firebase-data-ae61f",
storageBucket: "login-with-firebase-data-ae61f.appspot.com",
messagingSenderId: "905524976644",
appId: "1:905524976644:web:643932fd262d0b89346951"
};
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth()
const db = firebase.firestore();
</script>
<script src="myScript.js"></script>
</body>
Related
This question already has answers here:
How to prevent buttons from submitting forms
(20 answers)
Closed 1 year ago.
This code was meant to change the innerHTML from 'login' to 'changed' but when I click on the button, the changes work for only a second and changed back to 'login'
please check if I'm doing anything wrong
the html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/64d58efce2.js"
crossorigin="anonymous"
></script>
<script src="script.js" type="text/javascript" defer></script>
<link rel="stylesheet" href="style.css" />
<title>Sign in & Sign up Form</title>
</head>
<body>
</body>
</html>
the javascript code
const main = document.createElement("main")
main.classList.add("foo", "bar")
main.innerHTML =`
<form action="" class="sign-in-form">
<h2 class="title">Sign in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username"/>
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password"/>
</div>
<button type="submit" class="btn solid">Login</button>
<p class="social-text">Or Sign in with social platforms</p>
</form>
`
document.querySelector("body").append(main)
const button = document.querySelector(".btn")
button.addEventListener("click", (event)=>{
event.preventDefault();
button.innerHTML = "changed"
})
You can pass a event to your function and use event.preventDefault() to stop the submission. Otherwise, it will reload the page.
const button = document.querySelector(".btn");
button.addEventListener("click", event => {
event.preventDefault();
button.innerHTML = "changed";
});
<body>
<form action="" class="sign-in-form">
<h2 class="title">Sign in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username" />
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password" />
</div>
<button type="submit" class="btn solid">Login</button>
<p class="social-text">Or Sign in with social platforms</p>
</form>
</body>
So I'm trying to implement login into my website, here is the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter:400,700">
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
<div class="card card-signin my-5">
<div class="card-body">
<h5 class="card-title text-center">Sign In</h5>
<form class="form-signin">
<div class="form-label-group">
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputEmail">Email address</label>
</div>
<div class="form-label-group">
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<label for="inputPassword">Password</label>
</div>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Remember password</label>
</div>
<button onclick="register()" class="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Sign in</button>
<hr class="my-4">
<button class="btn btn-lg btn-google btn-block text-uppercase" type="submit"><i class="fab fa-google mr-2"></i> Sign in with Google</button>
<button class="btn btn-lg btn-facebook btn-block text-uppercase" type="submit"><i class="fab fa-facebook-f mr-2"></i> Sign in with Facebook</button>
</form>
</div>
</div>
</div>
<!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="/__/firebase/8.4.3/firebase-app.js"></script>
<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="/__/firebase/8.4.3/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="/__/firebase/8.4.3/firebase-auth.js"></script>
<script src="/__/firebase/8.4.3/firebase-firestore.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
<script src="login.js"></script>
</body>
</html>
And here is the code for register() in the js file
const firebase = require("firebase");
function register(){
let email = document.getElementById('inputEmail').value
let password = document.getElementById('inputPassword').value
firebase.auth().createUserWithEmailAndPassword(email, password)
.then((userCredential) => {
// Signed in
var user = userCredential.user;
console.log(user); // ...
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorMessage, errorCode);
});
}
However when I try to click the button to invoke the register(), I get a "register is not defined" and if I leave out the import, it'll invoke but then firebase will not be defined.
I was hoping someone could help me out?
I am trying to make a login/register form using firebase but I cannot create a new user. This is my
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- material design css -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SignUp</title>
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="aman-up.css">
</head>
<body>
<header class="header">
<div id="head_div">
<label id="app_name">Gossips</label>
<label id="signin" class="link_types"><a class="link" href="aman-in.html">SignIn</a></label>
<label id="signin" class="link_types"><a class="link" href="aman.html">Home</a></label>
</div>
</header>
<form class="inputs" id="input">
<div id="progress_bar">
<!-- MDL Progress Bar with Indeterminate Progress -->
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="email_up_txt" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="pass_up_txt">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Confirm Password</label>
<input type="password" class="form-control" id="conf_txt">
</div>
<button class="btn btn-primary" id="signup_btn">Sign-Up</button>
</form>
<script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-auth.js"></script>
<script src="aman.js"></script>
</body>
</html>
This is my javascript file:
var firebaseConfig = {
apiKey: "AIzaSyAQv6yaB_E07ZeYMwZBUCer4R58AUjQB3I",
authDomain: "fir-web-app-edc31.firebaseapp.com",
databaseURL: "https://fir-web-app-edc31.firebaseio.com",
projectId: "fir-web-app-edc31",
storageBucket: "fir-web-app-edc31.appspot.com",
messagingSenderId: "956021574925",
appId: "1:956021574925:web:6f3a4e217980d9dd22b444"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
document.getElementById("signup_btn").onclick=function(){
var email=document.getElementById("email_up_txt").value;
var password=document.getElementById("pass_up_txt").value;
firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
alert(errorMessage);
});
alert(email);
}
I can't understand why it's not working properly. It worked fine before but now it is showing problems.
The alert is shown but a new user is not created.
Please help me.
Thank you.
Updated Codeenter image description here
If i remove
Its show reuried filed notoifcation in input filed however if i add the jquery it's allowing me to submit the data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="email2" type="email" class="validate" required="" aria-required="true">
<label for="email2">Email</label>
</div>
<div class="input-field col s12">
<input id="example" name="example" type="text" class="validate" required="" aria-required="true">
<label for="example">Field</label>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" type="submit" name="action" onclick="submitForm(this)">Submit</button>
</div>
</div>
</form>
</div>
<script>
function submitForm(btnClicked) {
$("button").attr("disabled", true);
var jsonObj = {};
jsonObj["FirstName"] = $("#email2").val();
jsonObj["MiddleName"] = $("#example").val();
jsonObj["Submit"] = $(btnClicked).text();
google.script.run.withSuccessHandler(action).saveDate(jsonObj);
}
</script>
</body>
</html>
Form Input Field Required attribute is not working in Google app script HTML web app
Using materialize CSS in my web app -In both the input filed have added Required attribute however on click submit button not getting any notification in input filed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="email2" type="email" class="validate" required="" aria-required="true">
<label for="email2">Email</label>
</div>
<div class="input-field col s12">
<input id="example" name="example" type="text" class="validate" required="" aria-required="true">
<label for="example">Field</label>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" type="submit" name="action" onclick="submitForm(this)">Submit</button>
</div>
</div>
</form>
</div>
<script>
function submitForm(btnClicked) {
$("button").attr("disabled", true);
var jsonObj = {};
jsonObj["FirstName"] = $("#email2").val();
jsonObj["MiddleName"] = $("#example").val();
jsonObj["Submit"] = $(btnClicked).text();
google.script.run.withSuccessHandler(action).saveDate(jsonObj);
}
</script>
</body>
</html>
I am trying to create a login page like facebook. Used html and javascript I managed to create login page with predefined username and password.If you type correct password then it will redirect to a new page. But if you type wrong password or username then it will show error message on the side of textbox like real facebook
my code is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fakebook -Login</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body class="login">
<div id="facebook-Bar">
<div id="facebook-Frame">
<div id="logo"> Facebook </div>
<br>
<br>
<br>
<br>
<div class="loginbox radius">
<h2 style="color:#141823; text-align:center;">Log in to Facebook</h2>
<div class="loginboxinner radius">
<div class="loginheader">
</div>
<div class="loginform">
<form id="login" action="" method="post">
<p>
<input type="text" id="username" name="username" placeholder="Your Email" value="" class="radius" />
</p>
<p>
<input type="password" id="password" name="password" placeholder="Password" class="radius" />
</p>
<p>
<button class="radius title" onclick="check(this.form)" name="client_login">Log In</button>
</p>
<script language="javascript">
function check(form)
{
if(form.username.value == "rohit" && form.password.value == "password")
{
window.open('target.html')
}
else
{
document.getElementById("username").innerHTML = "wrong username"
}
}
</script>
<br>
<br>
forgot your password?</label></td>
| sign up for facebook</label></td>
</form>
</div>
</div>
</div>
</body>
</html>
Here is the facebook error message