Добрый день. Подскажите пожалуйста, как можно вывести ошибки при вводе данных пользователя в поля и ошибки при запросах. На данный момент, ошибки отображаются в консоле. Но хотелось бы, чтоб для пользователя они отображались внутри формы (не алертами). p.s. В js я не так силен...
Вот форма.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Firebase Web Quickstart</title>
<link rel="stylesheet" href="style/style.css">
<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.5.9/firebase-app.js"></script>
<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.5.9/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.9/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.9/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.9/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.9/firebase-functions.js"></script>
</head>
<body>
<div class="container">
<input id="name" type="text" placeholder="Имя"/>
</br>
<input id="surname" type="text" placeholder="Фамилия"/>
</br>
<input id="age" type="number" placeholder="Возраст"/>
</br>
<select id="gender" type="text" placeholder="gender">
<option></option>
<option value="Male">Мужской</option>
<option value="Female">Женский</option>
</select>
<input id="txtEmail" type="email" placeholder="Почта">
</br>
<input id="txtPassword" type="password" placeholder="Пароль">
</br>
<button id="btnLogin" class="btn btn-action">
Войти
</button>
<button id="btnSingup" class="btn btn-secondary">
Зарегистрироваться
</button>
<button id="btnLogout" class="btn btn-action hide">
Выйти
</button>
<button id="btnReset" class="btn btn-action hide1">
Восстановить
</button>
<script type="text/javascript">
(function () {
// Initialize Firebase
var config = {
apiKey: "AIzaSyBT4Z6I8O9LlbjTMPyMBE-LWh3karrbXpE",
authDomain: "new-app-98447.firebaseapp.com",
databaseURL: "https://new-app-98447.firebaseio.com",
projectId: "new-app-98447",
storageBucket: "new-app-98447.appspot.com",
messagingSenderId: "451825055280"
};
firebase.initializeApp(config);
const auth = firebase.auth();
// GET ELEMENTS
let name = document.getElementById('name');
let surname = document.getElementById('surname');
let age = document.getElementById('age');
let gender = document.getElementById('gender');
const txtEmail = document.getElementById('txtEmail');
const txtPassword = document.getElementById('txtPassword');
const btnLogin = document.getElementById('btnLogin');
const btnSingup = document.getElementById('btnSingup');
const btnLogout = document.getElementById('btnLogout');
const btnReset = document.getElementById('btnReset');
const dbRef = firebase.database().ref();
const usersRef = dbRef.child('users');
usersRef.on("child_added", snap => {
console.log("This is users", snap.val());
});
// ADD LOGIN EVENT
btnLogin.addEventListener('click', e => {
// GET EMAIL AND PASS
const email = txtEmail.value;
const pass = txtPassword.value;
const auth = firebase.auth();
// SING IN
// console.log("email and password", email, pass, auth);
const promise = auth.signInWithEmailAndPassword(email, pass);
promise.then(response => {
console.log("This is response", response.user.uid);
dbRef.child("users" + response.user.uid).on("child_added", snap => {
console.log("My user", snap.val());
})
})
.catch(error => console.log(error));
// promise.catch(e => console.log(e.message));
});
// ADD SINUP EVENT
btnSingup.addEventListener('click', e => {
// GET EMAIL AND PASS
const email = txtEmail.value;
const pass = txtPassword.value;
// SING IN
const promise = auth.createUserWithEmailAndPassword(email, pass);
promise
.catch(e => console.log(e.message));
});
btnLogout.addEventListener('click', e => {
firebase.auth().signOut()
.then(function (response) {
console.log("This is response", response);
}, function (error) {
console.log("This is error", error);
})
});
// ADD REALTIME addEventListener
firebase.auth().onAuthStateChanged(firebaseUser => {
if (firebaseUser) {
console.log(firebaseUser);
console.log("This is user", firebaseUser.uid);
let newUser = {};
newUser.name = name.value;
newUser.surname = surname.value;
newUser.age = age.value;
newUser.gender = gender.value;
userRef = dbRef.child("users" + firebaseUser.uid).push(newUser, response => {
console.log("This is user update response", response);
});
btnLogout.classList.remove('hide');
} else {
console.log(e.message);
btnLogout.classList.add('hide');
}
});
// Сброс пароля на почту
btnReset.addEventListener('click', e => {
console.log("This is email", txtEmail.value);
firebase.auth().sendPasswordResetEmail(txtEmail.value)
.then(function () {
console.log("its send");
// Email sent.
}).catch(function (error) {
console.log("This is error", error);
// An error happened.
});
});
}());
</script>
<a class="txt-modals"> <a href="login.html">Login</a> \ <a href="register.html">Registration</a></a>
</div>
</body>
</html>
Буду благодарен за любую помощь.
