estoy haciendo una pagina web en la que utilizo booststrap y firebase. Total que tengo el formulario para recoger los datos del usuario para posteriormente enviarselo a firebase para que lo agrege a la base de datos.
He buscado informacion de porque no funciona (no se suben los datos a la base de datos), pero no he encontrado nada el codigo del html es el siguiente:
<html>
<meta charset="UTF-8">
<head>
<title>Casco cines</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="rectk_complicaciones.css" type="text/css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="Index.html">Casco cines</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="Top.html">Top <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="categoria.html">Categoria <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="at_cliente.html">Atención al cliente <span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<a class="navbar-brand" href="login.html">Log in</a>
</form>
</div>
</nav>
<div>
<!-- aca va un espacio -->
</br>
</div>
<div id="SignIn">
<div class="container">
<div id="SignIn-row" class="row justify-content-center align-items-center">
<div id="SignIn-column" class="col-md-6">
<div class="SignIn-box col-md-12">
<form id="SignIn-form" class="form" action="" method="post">
<h3 class="text-center text-info text-dark ">Sign In</h3>
<div class="form-group">
<label for="name" class="text-info text-dark">Name:</label><br>
<input type="text" name="name" id="name" class="form-control">
</div>
<div class="form-group">
<label for="surname" class="text-info text-dark">Surname:</label><br>
<input type="text" name="surname" id="surname" class="form-control">
</div>
<div class="form-group">
<label for="email" class="text-info text-dark">Email:</label><br>
<input type="text" name="email" id="email" class="form-control">
</div>
<div class="form-group">
<label for="inputPassword" class="text-info text-dark">Password:</label><br>
<input type="password" class="form-control" id="inputPassword">
</div>
<div class="form-group">
<label for="repeatpassword" class="text-info text-dark">Repeat Password:</label><br>
<input type="password" class="form-control" id="repeatpassword">
</div>
<div class=" text-center form-group ">
<button type="button" id="end-pls" onClick="aux()" class="btn btn-danger">Registrate</button>
<!-- <script src="https://www.gstatic.com/firebasejs/5.7.2/firebase.js"></script> -->
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-firestore.js"></script>
<script> // Initialize Firebase
var config = {
apiKey: "XXXXXXXXXXX",
authDomain: "xxxxxxxxx",
databaseURL: "xxxxxxxxxxx",
projectId: "xxxxxxxx",
storageBucket: "xxxxxx-xxxxxx.appspot.com",
messagingSenderId: "xxxxxx"
};
firebase.initializeApp(config);
var db= firebase.firestore();
const btn = document.getElementById("end-pls");
btn.addEventListener('click',e=>{
const name = document.getElementById("name").value;
const surname = document.getElementById("surname").value;
const pass=document.getElementById("pass");
const email = document.getElementById("email");
db.collection("Usuarios").add({
name: name,
surname:surname,
pass: pass,
email:email
})
.then(function(docRef) {
console.log("Document written with ID: ", docRef.id);
})
.catch(function(error) {
console.error("Error adding document: ", error);
});
});
</script>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
En firestone tengo las siguientes reglas:
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write;
}
}
}
Y por ultimo, en los datos tengo en la coleccion "Usuarios", en documento "0" (pero mi idea es que se creen de forma automatica por eso intento usar collection(..).add) y la coleccion seria :email,name,pas,surname.
Muchas gracias por adelantado a toda la ayuda.