Respuesta formulario de creación de usuario Node.js sails html js css comprobar

[arlidem]

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:

Código: [Seleccionar]

<!--
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

Código: [Seleccionar]

  .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

Código: [Seleccionar]

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)

Código: [Seleccionar]

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

[Ogramar]

Buenas, puede que alguna persona llegue a este hilo que había quedado sin respuesta. Voy a dar una opinión al respecto. Ciertas validaciones de un formulario se pueden hacer del lado del cliente con JavaScript, pero hay validaciones como usuario y contraseña que obligadamente hemos de hacer del lado del servidor pues ahí tendremos nuestra base de datos.

En este caso se indica que se trata de la creación de usuarios. Una vez se ponga el usuario y password contra la base de datos podríamos tener un condicional que verifique si ya existe ese usuario o no. La operación puede hacerse con ajax, o bien con el action del formulario para que lleve a la misma página de registro o bien a una página de aterrizaje. Una vez hecha la comprobación, sobre la misma página de login o sobre otra página de aterrizaje, mediante con un condicional haríamos que se ejecute el código html para mostrar el mensaje que se desee:

1.- Usuario creado con éxito.
2.- El nombre de usuario ya esta en uso.
3.- Las contraseñas ingresadas no coinciden

Curso de Ajax disponible en https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=83&Itemid=212
Curso de JavaScript disponible en https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

Salu2