Simple CSS /JS for TOTP Demo site

index.css

html {
  font-family: 'Futura', Roboto, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  margin: 0;
  font-family: 'Futura', 'Jetbrains Mono', Roboto, 'Segoe UI', Tahoma, Geneva,
    Verdana, sans-serif;
  background: white;
}

header {
  color: white;
  background-image: linear-gradient(to right, #5f1ebe, #3c91ff);
  height: 100px;
  margin: 10px 20px;
  border-radius: 5px;
}

h1 {
  text-align: center;
  line-height: 100px;
  font-weight: normal;
  margin: 0;
}
.hero {
  font-size: large;
  margin: 10px 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-radius: 8px;
  background-image: linear-gradient(to right, #3c91ff, #8cc8fa);
  padding: 15px;
}

article {
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 10px;
  flex: 420px;
  max-width: 420px;
  overflow: auto;
  word-break: break-word;
  border-radius: 8px;
  border: 1px solid #cccccc;
  border-right: 2px solid #999999;
  border-bottom: 2px solid #999999;
}

article h2 {
  margin: 4px;
}

a {
  text-decoration: none;
  color: black;
  display: block;
}

article:hover {
  border: 2px solid #411482;
}

article p {
  margin-block: 0;
}

h2 {
  text-align: center;
}

article img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

article button {
  margin: 15px;
  padding: 5px;
  border-radius: 3px;
  text-align: center;
}

button,
input,
label {
  display: block;
  font-size: xx-large;
}

.container {
  margin: 0px 10px;
}

section {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

footer {
  background-image: linear-gradient(to right, #5f1ebe, #3c91ff);
  margin: 10px 20px;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
}

footer a {
  color: white;
  display: inline;
}

index.js

const updateForm = (imageElement, callback, label) => {
  const form = document.getElementById('totp');
  const button = document.getElementById('emailnext');

  form.removeChild(button);
  const codeLabel = document.createElement('label');
  codeLabel.setAttribute('for', 'code');
  codeLabel.innerText = 'TOTP Code';
  const code = document.createElement('input');
  code.setAttribute('id', 'code');
  code.setAttribute('type', 'number');
  const codeButton = document.createElement('button');
  codeButton.setAttribute('id', 'codeButton');
  codeButton.innerText = label;
  codeButton.addEventListener('click', function (event) {
    event.preventDefault();
    callback();
  });
  if (imageElement) {
    form.appendChild(imageElement);
  }
  form.appendChild(codeLabel);
  form.appendChild(code);
  form.appendChild(codeButton);
};

const verifyUser = () => {
  const form = document.getElementById('totp');
  const email = document.getElementById('email');
  const code = document.getElementById('code');
  const query = { email: email.value, code: code.value };
  document.body.style.cursor = 'wait';
  fetch('/verify', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(query)
  })
    .then((response) => {
      const status = document.createElement('label');
      if (response.ok) {
        status.innerText = 'Code OK';
      } else {
        status.innerText = 'Code fail';
      }
      form.append(status);
    })
    .catch((err) => console.error(err))
    .finally(() => (document.body.style.cursor = 'default'));
};

const saveUser = () => {
  const form = document.getElementById('totp');
  const email = document.getElementById('email');
  const code = document.getElementById('code');
  const query = { email: email.value, code: code.value };
  document.body.style.cursor = 'wait';
  fetch('/save', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(query)
  })
    .then((response) => {
      const status = document.createElement('label');
      let codeButton = document.getElementById('codeButton');
      const totpimg = document.getElementById('totpimg');
      if (response.ok) {
        codeButton.remove();
        totpimg.remove();
        code.value = '';
        codeButton = document.createElement('button');
        codeButton.innerText = 'Verify';
        codeButton.addEventListener('click', function (event) {
          event.preventDefault();
          verifyUser();
        });
        form.append(codeButton);
        status.innerText = 'Secret saved';
      } else {
        status.innerText = 'Save failed:' + response.statusText;
      }
      form.append(status);
    })
    .catch((err) => console.error(err))
    .finally(() => (document.body.style.cursor = 'default'));
};