Блог

Я вообще не мог подключиться к firebase и разрешить пользователям создавать учетные записи с функциями регистрации, и я попросил своего друга о помощи.. Он сделал кое-что, и он подключился к firebase, но теперь там написано только, что использованное вами электронное письмо уже используется.. Я хочу, чтобы пользователи могли вводить свою собственную электронную почту и могли создавать учетную запись..

 lt;h2gt;Make an account with us or log inlt;/h2gt; lt;div class="container" id="container"gt;  lt;div class="form-container sign-up-container"gt;  lt;form action="#"gt;  lt;h1gt;Create Accountlt;/h1gt;  lt;spangt;or use your email for registrationlt;/spangt;  lt;input type="text" placeholder="Name" id="signupName" gt;  lt;input type="email" placeholder="Email" id="signupEmail" /gt;  lt;input type="password" placeholder="Password" id="signupPassword" /gt; lt;input type="button" id="signup" value= "signup" onclick="signUp()"/gt;  lt;button onsubmit="signup()"gt;signUplt;/buttongt;  lt;/formgt;  lt;/divgt;  lt;div class="form-container sign-in-container"gt;  lt;form action="#"gt;  lt;h1gt;Sign inlt;/h1gt;  lt;spangt;or use your accountlt;/spangt;  lt;input type="email" placeholder="Email" id="loginEmail" /gt;  lt;input type="password" placeholder="Password" id="loginPassword" /gt;  lt;a href="#"gt;Forgot your password?lt;/agt;  lt;buttongt;Sign Inlt;/buttongt;  lt;/formgt;  lt;/divgt;  lt;div class="overlay-container"gt;  lt;div class="overlay"gt;  lt;div class="overlay-panel overlay-left"gt;  lt;h1gt;Welcome Back!lt;/h1gt;  lt;pgt;To keep connected with us please login with your personal infolt;/pgt;  lt;button class="ghost" id="signIn"gt;Sign Inlt;/buttongt;  lt;/divgt;  lt;div class="overlay-panel overlay-right"gt;  lt;h1gt;Hello, Friend!lt;/h1gt;  lt;pgt;Enter your personal details and start journey with uslt;/pgt;  lt;button class="ghost" id="signUp"gt;Sign Uplt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/divgt;  

вот CSS

 @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');  * {  box-sizing: border-box; }  body {  background:white;  display: flex;  justify-content: center;  align-items: center;  flex-direction: column;  font-family: 'Montserrat', sans-serif;  height: 100vh;  margin: -20px 0 50px; }  h1 {  font-weight: bold;  margin: 0; }  h2 {  text-align: center; }  p {  font-size: 14px;  font-weight: 100;  line-height: 20px;  letter-spacing: 0.5px;  margin: 20px 0 30px; }  span {  font-size: 12px; }  a {  color: #333;  font-size: 14px;  text-decoration: none;  margin: 15px 0; }  button {  border-radius: 20px;  border: 1px solid #FF4B2B;  background-color: #FF4B2B;  color: #FFFFFF;  font-size: 12px;  font-weight: bold;  padding: 12px 45px;  letter-spacing: 1px;  text-transform: uppercase;  transition: transform 80ms ease-in; }  button:active {  transform: scale(0.95); }  button:focus {  outline: none; }  button.ghost {  background-color: transparent;  border-color: #FFFFFF; }  form {  background-color: #FFFFFF;  display: flex;  align-items: center;  justify-content: center;  flex-direction: column;  padding: 0 50px;  height: 100%;  text-align: center; }  input {  background-color: #eee;  border: none;  padding: 12px 15px;  margin: 8px 0;  width: 100%; }  .container {  background-color: #fff;  border-radius: 10px;  box-shadow: 0 14px 28px rgba(0,0,0,0.25),   0 10px 10px rgba(0,0,0,0.22);  position: relative;  overflow: hidden;  width: 768px;  max-width: 100%;  min-height: 480px; }  .form-container {  position: absolute;  top: 0;  height: 100%;  transition: all 0.6s ease-in-out; }  .sign-in-container {  left: 0;  width: 50%;  z-index: 2; }  .container.right-panel-active .sign-in-container {  transform: translateX(100%); }  .sign-up-container {  left: 0;  width: 50%;  opacity: 0;  z-index: 1; }  .container.right-panel-active .sign-up-container {  transform: translateX(100%);  opacity: 1;  z-index: 5;  animation: show 0.6s; }  @keyframes show {  0%, 49.99% {  opacity: 0;  z-index: 1;  }    50%, 100% {  opacity: 1;  z-index: 5;  } }  .overlay-container {  position: absolute;  top: 0;  left: 50%;  width: 50%;  height: 100%;  overflow: hidden;  transition: transform 0.6s ease-in-out;  z-index: 100; }  .container.right-panel-active .overlay-container{  transform: translateX(-100%); }  .overlay {  background: #FF416C;  background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);  background: linear-gradient(to right, #FF4B2B, #FF416C);  background-repeat: no-repeat;  background-size: cover;  background-position: 0 0;  color: #FFFFFF;  position: relative;  left: -100%;  height: 100%;  width: 200%;  transform: translateX(0);  transition: transform 0.6s ease-in-out; }  .container.right-panel-active .overlay {  transform: translateX(50%); }  .overlay-panel {  position: absolute;  display: flex;  align-items: center;  justify-content: center;  flex-direction: column;  padding: 0 40px;  text-align: center;  top: 0;  height: 100%;  width: 50%;  transform: translateX(0);  transition: transform 0.6s ease-in-out; }  .overlay-left {  transform: translateX(-20%); }  .container.right-panel-active .overlay-left {  transform: translateX(0); }  .overlay-right {  right: 0;  transform: translateX(0); }  .container.right-panel-active .overlay-right {  transform: translateX(20%); }  .social-container {  margin: 20px 0; }  .social-container a {  border: 1px solid #DDDDDD;  border-radius: 50%;  display: inline-flex;  justify-content: center;  align-items: center;  margin: 0 5px;  height: 40px;  width: 40px; }  footer {  background-color: #222;  color: #fff;  font-size: 14px;  bottom: 0;  position: fixed;  left: 0;  right: 0;  text-align: center;  z-index: 999; }  footer p {  margin: 10px 0; }  footer i {  color: red; }  footer a {  color: #3c97bf;  text-decoration: none; }   

и фактический js, который сделал мой друг

 import { initializeApp } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-app.js"; import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-analytics.js"; import { initializeAuth, getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-auth.js"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries  // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = {  apiKey: "",  authDomain: "firebear-34281.firebaseapp.com",  databaseURL: "https://firebear-34281-default-rtdb.firebaseio.com",  projectId: "firebear-34281",  storageBucket: "firebear-34281.appspot.com",  messagingSenderId: "642455892026",  appId: "",  measurementId: "G-ZHVQEHH0FQ" };  // Initialize Firebase const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app);  const auth = getAuth(); createUserWithEmailAndPassword(auth, 'test@test.com', 'password')  .then((userCredential) =gt; {  // Signed in   const user = userCredential.user;  alert('Signed in');  // ... })  .catch((error) =gt; {  const errorCode = error.code;  const errorMessage = error.message;  alert(error)  // ..  });