Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Holaa gente, esta es mi primera vez en el foro y también  mi primera incursión en el desarrollo web. Soy estudiante de ingeniería y me encuentro desarrollando un proyecto para una materia, en el cual me encontré una pequeña dificultad y no se me ocurre una forma para lograr mi cometido.

Luego de completar el formulario para la creación de usuarios, necesito que dependiendo las condiciones se desplegue un popup con el correspondiente mensaje ( 1.- Usuario creado con éxito. 2.- El nombre de usuario ya esta en uso. 3.- Las contraseñas ingresadas no coinciden).

Bueno la situación es que el formulario funciona, el controlador y las rutas creo que están bien, pero mi problema es que no sé como desplegar el popup correspondiente al mensaje en cualquiera de los casos. Les dejo el código que tengo a ver si alguien puede ayudarme a resolver la situación o algún consejo de como ordenar y organizar mi código también es bien recibido. Desde ya muchísimas gracias!

HTML del formulario y los mensajes:

<!--
FORMULARIO REGISTRO DE USUARIO
-->

<div class="overlay" id="create-overlay">
  <div class="popup" id="create-popup">
    <h3>Crear nuevo usuario</h3>
    <form method="post" action="/new_user">
      <div class="inputs-conteiner">
      <input type="text" placeholder="Ingrese el nombre de usuario" name="user_name">
      <br>
      <input type="text" placeholder="Ingrese el nombre" name="name">
      <br>
      <input type="text" placeholder="Ingrese el apellido" name="lastname">
      <br>
      <input type="password" placeholder="Ingrese contraseña" name="user_pass">
      <br>
      <input type="password" placeholder="Confirme contraseña" name="confirmation">
      <br>
      <label>Administrador <input type="radio" name="hierarchy" class="hierarchy_input" value=1></label><br>
      <label>Empleado     <input type="radio" name="hierarchy" class="hierarchy_input" value=2></label><br>
      <button type="submit" class="btn-aceptar">Crear usuario</button>
      <button type="button" class="btn-cancel" id="btn-cancel-create">Cancelar</button>
      </div>
    </form>
  </div>
</div>

<!--
FIN DE FORMULARIO PARA REGISTRO DE USUARIOS
-->


<!--RESPUESTAS POST-FORM USER CREATE-->
<!--
MENSAJE DE ERROR (ERROR EN CONFIRMACION DE PASSWORD)
-->
<div class="overlay" id="Err01-overlay">
  <div class="popup" id="Err01-popup">
    <h3>Las contraseñas no coinciden.</h3>
    <form>
      <div class="inputs-conteiner">
        <button type="submit" class="btn-Err1-aceptar">Aceptar</button>
      </div>
    </form>
  </div>
</div>
<!--
FIN DE MENSAJE DE ERROR (ERROR EN CONFIRMACION DE PASSWORD)
-->
<!--
MENSAJE DE ERROR (USUARIO YA EXISTE)
-->
<div class="overlay" id="Err02-overlay">
  <div class="popup" id="Err02-popup">
    <h3>El nombre de usuario ya esta en uso.</h3>
    <form>
      <div class="inputs-conteiner">
        <button type="submit" class="btn-Err2-aceptar">Aceptar</button>
      </div>
    </form>
  </div>
</div>
<!--
FIN DE MENSAJE DE ERROR (USUARIO YA EXISTE)
-->
<!--
MENSAJE EXITO EN LA CREACION DE USUARIO
-->
<div class="overlay" id="Success-overlay">
  <div class="popup" id="Success-popup">
    <h3>El usuario se a creado con exito.</h3>
    <form>
      <div class="inputs-conteiner">
        <button type="submit" class="btn-Success-aceptar">Aceptar</button>
      </div>
    </form>
  </div>
</div>
<!--
FIN DE MENSAJE EXITO EN LA CREACION DE USUARIO
-->
<!--FIN DE RESPUESTAS POST-FORM USER CREATE-->

CSS del overlay mediante el cual se mostrara o se ocultara

  .overlay {
    background: rgba(0,0,0,.5);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden; /* Mantiene la pantalla escondida */
  }
  .overlay.active{
    visibility: visible; /* Muestra la pantalla al activarla mediante js */
  }

Controlador a cargo de la creacion de usuario

module.exports = {
  new: async function (req , res) {
      let userID = req.param('user_name');
      let user_name = req.param('name');
      let user_lastname = req.param('lastname');
      let user_pass = req.param('user_pass');
      let pass_confirmation = req.param('confirmation')
      let hierarchy = req.param('hierarchy');
        if (user_pass !== pass_confirmation) {  //Controla si las contraseñas coinciden
          res.redirect('/');
        }else{
          let check = await User.findOne({user_name : userID}); //Controla si el nombre de usuario esta en uso
          if(!check){             // si el nombre esta disponible crea el usuario
            await User.createEach([{
              user_name: userID,
              user_pass: user_pass,
              name: user_name,
              lastname: user_lastname,
              hierarchy: hierarchy
            },]);
            res.redirect('/');
            }else{       //si el nombre no esta disponible salta aca
            res.send("El usuario ya existe");
        }
        }

  },

};

JS para el popup del formulario (visibility: hidden / visible)

var btnOpenCreatePopup = document.getElementById('btn-new-user'),
    overlay_create = document.getElementById('create-overlay'),
    popup_create = document.getElementById('create-popup'),
    btnCancelCreatePopup = document.getElementById('btn-cancel-create');

btnOpenCreatePopup.addEventListener("click", function () {
  overlay_create.classList.add('active');
  popup_create.classList.add('active');
});

btnCancelCreatePopup.addEventListener("click", function () {
  overlay_create.classList.remove('active');
  popup_create.classList.remove('active');
});

Bueno eso es más o menos lo que tengo, para que se entienda no se como mostrar el popup correspondiente a la situacion dependiendo de lo que diga el controlador. Por ejemplo; en el caso de que las contraseñas sean distintas como puedo desde el controlador ejecutar un JS como el del formulario, para ocultar el formulario, mostrar el mensaje de error y al momento de dar aceptar en el mensaje muestre nuevamente el formulario ya antes visto. Disculpen lo extenso que se volvio el post. Gracias de nuevo, saludos