회원가입 유효성 검사

public/css/auth.css

@@ -1,4 +1,9 @@
 :root {
+  --font-size-large: 20px;
+  --font-size-default: 16px;
+  --font-size-medium: 14px;
+  --font-size-small: 12px;
+  --font-size-x-small: 9px;
   /* form */
   --input-width: 240px;
   --input-height: 40px;
@@ -66,10 +71,20 @@
 .sign-up-form__input {
   width: var(--input-width);
   height: var(--input-height);
+  margin: 5% 0;
 }
 
 .sign-up-form__submit {
   width: var(--submit-width);
   height: var(--submit-height);
   margin: var(--submit-margin);
 }
+
+.sign-up-form__email,
+.sign-up-form__pwd,
+.sign-up-form__pwd2,
+.sign-up-form__name {
+  min-height: 10px;
+  font-size: var(--font-size-x-small);
+  color: red;
+}

public/js/sign-up.js

@@ -0,0 +1,132 @@
+const form = document.querySelector('.sign-up-form');
+const emailInput = document.querySelector('.sign-up-form__input[name=email]');
+const pwdInput = document.querySelector('.sign-up-form__input[name=pwd]');
+const pwd2Input = document.querySelector('.sign-up-form__input[name=pwd2]');
+const nameInput = document.querySelector('.sign-up-form__input[name=nickname]');
+const submitBtn = document.querySelector('.sign-up-form__submit');
+
+const emailValidDiv = document.querySelector('.sign-up-form__email');
+const pwdValidDiv = document.querySelector('.sign-up-form__pwd');
+const pwd2ValidDiv = document.querySelector('.sign-up-form__pwd2');
+const nameValidDiv = document.querySelector('.sign-up-form__name');
+
+function showIsValid(element, text) {
+  element.innerText = text;
+}
+
+async function checkDuplicateEmail() {
+  const userInput = emailInput.value;
+  const res = await fetch(`http://localhost:3000/auth/check-duplicate-email`, {
+    method: 'POST',
+    body: userInput
+  });
+  const isValid = await res.json();
+  if (!isValid) {
+    showIsValid(emailValidDiv, '이미 사용 중인 이메일입니다.');
+  }
+  return isValid;
+}
+
+async function checkDuplicateName() {
+  const userInput = nameInput.value;
+  const res = await fetch(
+    `http://localhost:3000/auth/check-duplicate-nickname`,
+    {
+      method: 'POST',
+      body: userInput
+    }
+  );
+  const isValid = await res.json();
+  if (!isValid) {
+    showIsValid(nameValidDiv, '이미 사용 중인 닉네임입니다.');
+  }
+  return isValid;
+}
+
+function checkValidEmail() {
+  const regExp =
+    /^[\w!#$%&'*+/=?^_{|}~-]+(?:\.[\w!#$%&'*+/=?^_{|}~-]+)*@(?:\w+\.)+\w+$/;
+
+  if (emailInput.value === '' || regExp.test(emailInput.value)) {
+    showIsValid(emailValidDiv, '');
+    return true;
+  } else {
+    showIsValid(emailValidDiv, '올바른 이메일 주소를 입력해 주세요.');
+    return false;
+  }
+}
+
+function checkStrongPwd() {
+  const regExp =
+    /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]).{8,16}$/;
+
+  if (pwdInput.value === '' || regExp.test(pwdInput.value)) {
+    showIsValid(pwdValidDiv, '');
+    return true;
+  } else {
+    showIsValid(
+      pwdValidDiv,
+      '8~16자 영문 대 소문자, 숫자, 특수문자를 사용해 주세요.'
+    );
+    return false;
+  }
+}
+
+function checkEqualPwd() {
+  if (pwd2Input.value !== '' && pwdInput.value === pwd2Input.value) {
+    showIsValid(pwd2ValidDiv, '');
+    return true;
+  } else {
+    showIsValid(pwd2ValidDiv, '비밀번호가 일치하지 않습니다.');
+    return false;
+  }
+}
+
+function checkValidName() {
+  if (nameInput.value === '' || nameInput.value.length <= 10) {
+    showIsValid(nameValidDiv, '');
+    return true;
+  } else {
+    showIsValid(nameValidDiv, '10자 이하를 입력해 주세요.');
+    return false;
+  }
+}
+
+async function checkValidAll() {
+  const inputs = [emailInput, pwdInput, pwd2Input, nameInput];
+  const divs = [emailValidDiv, pwdValidDiv, pwd2ValidDiv, nameValidDiv];
+
+  inputs.forEach((Item, i) => {
+    if (!Item.value) {
+      showIsValid(divs[i], '필수 정보입니다.');
+    }
+  });
+
+  const isDuplicateEmail = await checkDuplicateEmail();
+  const isDuplicateName = await checkDuplicateName();
+
+  if (
+    checkValidEmail() &&
+    checkStrongPwd() &&
+    checkEqualPwd() &&
+    isDuplicateEmail &&
+    isDuplicateName
+  ) {
+    form.submit();
+  } else {
+    alert('입력하신 정보를 확인하세요.');
+  }
+}
+
+function init() {
+  emailInput.addEventListener('keyup', checkValidEmail);
+  emailInput.addEventListener('focusout', checkDuplicateEmail);
+  pwdInput.addEventListener('keyup', checkStrongPwd);
+  pwdInput.addEventListener('keyup', checkEqualPwd);
+  pwd2Input.addEventListener('keyup', checkEqualPwd);
+  nameInput.addEventListener('keyup', checkValidName);
+  nameInput.addEventListener('focusout', checkDuplicateName);
+  submitBtn.addEventListener('click', checkValidAll);
+}
+
+init();

routes/auth.js

@@ -190,31 +190,115 @@ router.get('/sign-up', (req, res, next) => {
   res.render('sign-up');
 });
 
+// 회원가입 유효성 검증
+function checkValidEmail(userInput) {
+  const regExp =
+    /^[\w!#$%&'*+/=?^_{|}~-]+(?:\.[\w!#$%&'*+/=?^_{|}~-]+)*@(?:\w+\.)+\w+$/;
+
+  return regExp.test(userInput) ? true : false;
+}
+
+function checkStrongPwd(userInput) {
+  const regExp =
+    /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]).{8,16}$/;
+
+  return regExp.test(userInput) ? true : false;
+}
+
+function checkEqualPwd(userInputA, userInputB) {
+  return userInputA === userInputB ? true : false;
+}
+
+function checkValidName(userInput) {
+  return userInput.length <= 10 ? true : false;
+}
+
+function checkDuplicateEmail(userInput) {
+  const sql_user = 'SELECT * FROM user WHERE email=?';
+  db.query(sql_user, [userInput], (err, results) => {
+    if (err) {
+      next(err);
+    } else if (results[0]) {
+      return false;
+    } else {
+      return true;
+    }
+  });
+}
+
+function checkDuplicateName(userInput) {
+  const sql_user = 'SELECT * FROM user WHERE nickname=?';
+  db.query(sql_user, [userInput], (err, results) => {
+    if (err) {
+      next(err);
+    } else if (results[0]) {
+      return false;
+    } else {
+      return true;
+    }
+  });
+}
+
+router.post('/check-duplicate-email', (req, res, next) => {
+  const email = req.body;
+  const sql_user = 'SELECT * FROM user WHERE email=?';
+  db.query(sql_user, [email], (err, results) => {
+    if (err) {
+      next(err);
+    } else if (results[0]) {
+      res.send(false);
+    } else {
+      res.send(true);
+    }
+  });
+});
+
+router.post('/check-duplicate-nickname', (req, res, next) => {
+  const nickname = req.body;
+  const sql_user = 'SELECT * FROM user WHERE nickname=?';
+  db.query(sql_user, [nickname], (err, results) => {
+    if (err) {
+      next(err);
+    } else if (results[0]) {
+      res.send(false);
+    } else {
+      res.send(true);
+    }
+  });
+});
+
 // Sign-up_process Route
 // POST request 암호화 필요
 router.post('/sign-up_process', (req, res, next) => {
-  const post = req.body;
   const id = nanoid();
-  const { email } = post;
-  const { pwd } = post;
-  const { pwd2 } = post;
-  const { nickname } = post;
-  if (pwd !== pwd2) {
-    console.log('비밀번호가 일치하지 않습니다');
-  } else {
-    const salt = randomBytes(64).toString('base64');
-    const secret = pbkdf2Sync(pwd, salt, 100000, 64, 'sha512').toString(
-      'base64'
-    );
-    const sql =
-      'INSERT INTO user (id, email, secret, salt, nickname, create_date) VALUES (?, ?, ?, ?, ?, NOW())';
-    db.query(sql, [id, email, secret, salt, nickname], err => {
-      if (err) {
-        next(err);
-      }
-      res.redirect('/auth/sign-in');
-    });
+  const { email, pwd, pwd2, nickname } = req.body;
+
+  if (
+    !checkValidEmail(email) ||
+    !checkEqualPwd(pwd, pwd2) ||
+    !checkStrongPwd(pwd) ||
+    !checkValidName(nickname)
+  ) {
+    console.log('Invalid User Input');
+    return;
+  }
+
+  if (!checkDuplicateEmail(email) || !checkDuplicateName(nickname)) {
+    console.log('Duplicate User Input');
+    return;
   }
+
+  const salt = randomBytes(64).toString('base64');
+  const secret = pbkdf2Sync(pwd, salt, 100000, 64, 'sha512').toString('base64');
+  const sql =
+    'INSERT INTO user (id, email, secret, salt, nickname, create_date) VALUES (?, ?, ?, ?, ?, NOW())';
+
+  db.query(sql, [id, email, secret, salt, nickname], err => {
+    if (err) {
+      next(err);
+    }
+    res.redirect('/auth/sign-in');
+  });
 });
 
 // Sign-in Route

views/includes/auth/sign-up-container.ejs

@@ -1,31 +1,33 @@
-<form action="/auth/sign-up_process" method="post" class="sign-up-form">
-  <input
-    class="sign-up-form__input"
-    type="text"
-    name="email"
-    placeholder="이메일"
-  />
-  <input
-    class="sign-up-form__input"
-    type="password"
-    name="pwd"
-    placeholder="비밀번호"
-  />
-  <input
-    class="sign-up-form__input"
-    type="password"
-    name="pwd2"
-    placeholder="비밀번호 확인"
-  />
-  <input
-    class="sign-up-form__input"
-    type="text"
-    name="nickname"
-    placeholder="닉네임"
-  />
-  <input
-    class="sign-up-form__submit"
-    type="submit"
-    value="이메일 회원가입"
-  />
-</form>
+<form action="/auth/sign-up_process" method="post" class="sign-up-form">
+  <input
+    class="sign-up-form__input"
+    type="text"
+    name="email"
+    placeholder="이메일"
+  />
+  <div class="sign-up-form__email"></div>
+  <input
+    class="sign-up-form__input"
+    type="password"
+    name="pwd"
+    placeholder="비밀번호"
+    autocomplete="off"
+  />
+  <div class="sign-up-form__pwd"></div>
+  <input
+    class="sign-up-form__input"
+    type="password"
+    name="pwd2"
+    placeholder="비밀번호 확인"
+    autocomplete="off"
+  />
+  <div class="sign-up-form__pwd2"></div>
+  <input
+    class="sign-up-form__input"
+    type="text"
+    name="nickname"
+    placeholder="닉네임"
+  />
+  <div class="sign-up-form__name"></div>
+  <button class="sign-up-form__submit" type="button">이메일 회원가입</button>
+</form>