How to display client side that user already exists - MongoDB

Question

I'm using MongoDB, NodeJS, ejs, passport, etc...

When I try to create a new user with a username that already exists on my DataBase I receive the error from server side

{ UserExistsError: A user with the given username is already registered at Promise.resolve.then.then.then (my/path/for/node_modules/passport-local-mongoose/index.js:238:17) at process._tickCallback (internal/process/next_tick.js:68:7) name: 'UserExistsError', message: 'A user with the given username is already registered' }

and don't append any message on client side, only refresh page and stay on homepage, but don't know a good way to do it and I want that client knows that username is already taken..

Thanks!

My server side:

    const express = require('express'),
    passport = require('passport'),
    User = require('../models/users.js'),

    app = express.Router();


//Get User Data
exports.get_user_data = function(req, res) {

    let userid = req.user._id;

    User.findById(userid)
        .exec((err, user) => {
            if (err) {
                console.log(err);
            } else {
                res.send(user);
            }
        });
}

//Render Register
exports.render_new_register = function(req, res) {

}

//Create New User Account
exports.create_new_account = function(req, res) {

    User.register(new User({
            username: req.body.username,
            companyname: req.body.companyname,
            companyimageURL: req.body.companyimageURL
        }),
        req.body.password,
        (err, user) => {
            if (err) {
                console.log(err);
                return res.redirect('/')
            }
            console.log("SUCCESS");

            logUser(user, req, res);
        }
    )
};

//Render Login
exports.render_login_account = function(req, res) {

};

//Render Logout - end of user session 
exports.render_logout_account_endSession = function(req, res) {
    req.logout();
    res.redirect('/');
};

//Authenticate User Login
exports.user_login_authenticate =
    passport.authenticate("local")


function logUser(user, req, res) {
    req.login(user, (err) => {
        if (err) {
            console.log(err);
            return res.redirect('/');
        }
        res.redirect('/dashboard') //register with success
    })
}

my client side

<!-- Modal REGIST SIGNUP-->
<div class="modal fade" id="myModalRegist" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="outline: none; border: none">
                    <span style="outline: none; border: none" aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="modal__header" class="container text-center">
                    <h1 class="modal__title">WELCOME</h1>
                    <p class="modal__paragraph"> Create a new account</p>
                    <form action="/getstarted" method="POST">
                        <div class="form-group">
                            <input type="text" class="form-control" aria-describedby="username" placeholder="enter username" name="username" required>
                        </div>
                        <div class="form-group">
                            <input id="passwordregist" type="password" class="form-control" placeholder="min 6 characters" required minlength="6" name="password">
                        </div>
                        <div class="form-group">
                            <input id="passwordregist_confirm" type="password" class="form-control" placeholder="min 6 characters" required minlength="6" name="password_confirm">
                        </div>
                        <div class="form-group">
                            <input type="companyname" class="form-control" placeholder="company name" name="companyname" required>
                        </div>
                        <div class="form-group">
                            <input type="companyimageURL" class="form-control" placeholder="company image URL" name="companyimageURL" required>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" required>
                            <label class="form-check-label" for="check">Check me out</label>
                            <div id="alertconfirm"></div>
                        </div>
                        <button id="registersubmitbutton" type="submit" class="btn btn-default button_modal button_modal--colors">Get Started</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- / Modal REGIST SIGNUP-->




<script>
    $('#registersubmitbutton').on('click', function(e) {

        let password = $("#passwordregist").val();
        let password_confirm = $("#passwordregist_confirm").val();


        if (password !== password_confirm) {
            if ($('#alertconfirm').children().length === 0) {
                $('#alertconfirm').append(
                    `<div class="alert" role="alert" style="font-size: 11px; color: #ec1818; padding: 0">
                                Oops! Passwords don't match. Please try again.</div>`
                )
            }
            return false;
        }
    });
</script>

Answer 1

If you want to show a message probably you must use an asyncronous call in your click method ( I prefer create an onSubmit method ) you can do the request using an AJAX.

This is an example how to create an AJAX using POST: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send#Example_POST .

Just keep in mind that the response is the object xhr.responseText .

xhr.onreadystatechange = function() {
    if(this.readyState == XMLHttpRequest.DONE && this.status == 200) {
        console.log(xhr.responseText);
    }
} 

For other hand you must change your logUser method to return a valid JSON:

function logUser(user, req, res) {
        req.login(user, (err) => {
            if (err) {
                return res.json({ error: error });
            }
            res.json({ error: null, message: "User registered" });
        })
    }

Answer 2

You can achieve by first check User exists or not by UserName

Example :

userCtr.create_new_account = (req, res) => {
    const {
      username, companyname, companyimageURL
    } = req.body;

    const query = {
      username: username 
    }

    User.findOne(query)
      .then((user) => {
        if (!user) {
          //create User.
        } else {
          res.status(400).json({ error: 'user already exists' });
        }
      })
      .catch((err) => {
        //return error
      });
  };