JSFiddle - React, Tailwind, and code Playground

by Alex Cowan

HTML

<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>

<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>

<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-firestore.js"></script>

<script>
  // Initialize Firebase
const firebaseConfig = {
  apiKey: "AIzaSyCOLncqxY-ZwenPYMoH2hbHgscN02C-BoE",
  authDomain: "account-registration-tester.firebaseapp.com",
  projectId: "account-registration-tester",
  storageBucket: "account-registration-tester.appspot.com",
  messagingSenderId: "288090300445",
  appId: "1:288090300445:web:c25725d064560ee48ca6f4",
  measurementId: "G-TWJQZEJCQ4"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

</script>

<style>
  .centertext {
    margin: auto;
    margin-top: 20px;
    width: 60%;
    border: 3px solid #87CFDC;
    padding: 10px;
  }

</style>

<style>
  .centerimg {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

</style>

<div class="companylogo">
  <img src="https://www.tryclarifi.com/wp-content/uploads/2022/08/NEW-LOGO.svg" class="centerimg">
</div>

<div class="centertext">
  <label for="email">Type Your Email</label>
  <ul class="input">
    <input type="email" id="email">
  </ul>
  <label for="password">Type New Password</label>
  <ul class="input">
    <input type="password" id="password">
  </ul>

  <label for="password-verify">Re-type New password</label>
  <ul class="input">
    <input type="password" id="password-verify">
  </ul>

  <button type="submit" onclick="ResetPassword()">Reset password</button>
</div>

CSS

.companylogo img {
  height: auto;
  vertical-align: middle;
  width: 55%;
}

label {
  margin-bottom: 2px;
  display: block;
  text-align: center;
  font-family: Papyrus, Fantasy;
}

ul {
  display: block;
  text-align: center;
}

button {
  background-color: #00B7BD;
  font-family: Papyrus, Fantasy;
  color: white;
  font-weight: bold;
  border-radius: 15px;
  border: none;
  margin-bottom: 2px;
  position: relative;
  left: 45%;
  cursor: pointer;
}

JavaScript

function ResetPassword() {
  if (document.getElementById("password").value == document.getElementById("password-verify").value) {
    userRecord = FirebaseAuth.getInstance().getUserByEmail(email);
    var uid = userRecord.getUid();
    admin
      .auth()
      .deleteUser(uid)
      .then(() => {
        console.log('Successfully deleted user');
      })
      .catch((error) => {
        console.log('Error deleting user:', error);
      });
    username = document.getElementById("email").value;
    password = document.getElementById("password").value;
    firebase.auth().createUserWithEmailAndPassword(username, password);
  } else {
    alert("Passwords don't match! Please type again.")
  }
}