[Login & Register authentication with Node js] (6) 회원가입 시 오류가 나면 message 띄우기

<본 블로그는 Traversy Media 의 유튜브를 참고해서 공부하며 작성하였습니다 :-)>

=> Node.js With Passport Authentication | Full Project

=> authentication app with login, register and access control using Node.js, Express, Passport, Mongoose

 

 

🥕 DB에 저장할 User Schema & 회원가입 시 규칙 안지키면 message 띄우기

🐧 models/User.js

User schema 작성

const mongoose = require("mongoose");

const UserSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true
  },
  email: {
    type: String,
    required: true
  },
  password: {
    type: String,
    required: true
  },
  date: {
    type: Date,
    default: Date.now
  }
}, { collection: 'Passport' });

const User = mongoose.model("User", UserSchema);
module.exports = User;

 

🐧 routes/user.js

const express = require("express");
const router = express.Router();
const AppError = require("../misc/AppError");

// Login Page
router.get("/login", (req, res) => {
  res.render("login");
});

// Register Page
router.get("/register", (req, res) => {
  res.render("register");
});

// Register Handle
router.post('/register', (req, res) => {
  const { name, email, password, password2 } = req.body;
  let errors = [];

  if (!name || !email || !password || !password2) {
    errors.push({ msg: 'Please enter all fields' });
  }

  if (password != password2) {
    errors.push({ msg: 'Passwords do not match' });
  }

  if (password.length < 6) {
    errors.push({ msg: 'Password must be at least 6 characters' });
  }

  if (errors.length > 0) {
    res.render('register', {
      errors,
      name,
      email,
      password,
      password2
    });
  } else {
    res.send("pass");
  }

});

module.exports = router;

 

🐧 partials/messages.ejs

<% if(typeof errors !="undefined" ) { %>
  <% errors.forEach(function(error) { %>
    
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      <%= error.msg %>
      <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  <% }); %>
<% } %>

 

🐧 views/register.ejs

include로 경로 받을 때

<%-include("경로")%> 이렇게 바뀜

<div class="row mt-5">
  <div class="col-md-6 m-auto">
    <div class="card card-body">
      <h1 class="text-center mb-3">
        <i class="fas fa-user-plus"></i>Register</h1>
        <%-include('./partials/messages.ejs') %>
        <!-- POST로 받아요 -->
        <form action="/users/register" method="POST">
          <div class="form-group">
            <label for="name">Name</label>
            <input 
              type="name"
              id="name" 
              name="name"
              class="form-control"
              placeholder="Enter Name"
              value="<%= typeof name != 'undefined' ? name : '' %>" />
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input
              type="email"
              id="email"
              name="email"
              class="form-control"
              placeholder="Enter Email"
              value="<%= typeof email != 'undefined' ? email : '' %>" />
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input
              type="password"
              id="password" 
              name="password" 
              class="form-control" 
              placeholder="Create Password"
              value="<%= typeof password != 'undefined' ? password : '' %>" />
          </div>
          <div class="form-group">
            <label for="password2">Confirm Password</label>
            <input 
              type="password" 
              id="password2"
              name="password2" 
              class="form-control"
              placeholder="Confirm Password"
              value="<%= typeof password2 != 'undefined' ? password2 : '' %>" />
          </div>
          <button type="submit" class="btn btn-primary btn-block">
            Register
          </button>
        </form>
        <p class="lead mt-4">Have An Account? <a href="/users/login">Login</a></p>
    </div>
  </div>
</div>

로그인이 틀리면 저렇게 메시지가 나옴

 

회원가입 완료되면 pass로 send (추후 바꿀 예정)