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.
Related
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>
Hi i am a beginner starting to trying out bootstrap now i am trying to do form validation, i tried to follow the guide
on https://getbootstrap.com/docs/5.0/forms/validation/ and when i run the exact form validation code, it seem bootstrap doesn't load in my chrome and not vaildating.
I had included the bootstrap css and js cdn link in my code.
Any helps will be greatly appreciated.
my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict';
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation');
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
})();
</script>
</head>
<body>
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">#</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
Add the script tag just above closing </body> tag. It seems you got the script tag on between the <head/> tag which is causing the problem
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
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?
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 have a simple Jquery script which allow me to place a nice drop down login box but i have a simple issue with it
when i tried to place more than 1 box lets say 5 the script totally messed
i believe its something regarding the DIV id's and duplication but i don't find a way to resolve this problem
JS code
// Login Form
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
html code
<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Dropdown Login Freebie | The Finished Box</title>
<link rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script src="js/login.js"></script>
</head>
<body>
<div id="bar">
<div id="container">
<!-- Login Starts Here -->
<div id="loginContainer">
<span>Login</span><em></em>
<div style="clear:both"></div>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
</fieldset>
<span>Forgot your password?</span>
</form>
</div>
</div>
<!-- Login Ends Here -->
</div>
</div>
</body>
</html>
Yes, Change the ID's and It will work for more than one.