feat: add message partials to give user prompt

app.js

@@ -24,14 +24,17 @@ app.set('view engine', 'handlebars')
 app.use(cookieParser());
 app.use(session({
   secret: process.env.SESSION_SECRET,
+  resave: false,
   saveUninitialized: true,
-  resave: true
 }));
-app.use(flash());
 usePassport(app)
+app.use(flash());
 app.use((req, res, next) => {
   res.locals.isAuthenticated = req.isAuthenticated() //將驗證結果傳到res，讓前端樣板可用
   res.locals.user = req.user //將使用者資料傳到res，讓前端樣板可用
+  res.locals.success_msg = req.flash('success_msg')
+  res.locals.warning_msg = req.flash('warning_msg')
+  res.locals.error = req.flash('error')
   next()
 })
 app.use(methodOverride('_method'))

config/passport.js

@@ -11,12 +11,10 @@ module.exports = (app) => {
     User.findOne({ email })
       .then(user => {
         if (!user) {
-          console.log('此Email尚未註冊')
-          return done(null, false)
+          return done(null, false, { message: '此Email尚未註冊' })
         }
         if (password !== user.password) {
-          console.log('帳號或密碼錯誤')
-          return done(null, false)
+          return done(null, false, { message: '帳號或密碼錯誤' })
         }
         done(null, user)
       })

middleware/auth.js

@@ -3,6 +3,7 @@ module.exports = {
     if (req.isAuthenticated()) {
       return next()
     }
+    req.flash('warning_msg', '請先登陸在使用')
     res.redirect('/user/login')
   }
 }

routes/modules/user.js

@@ -9,7 +9,8 @@ router.get('/login', (req, res) => {
 
 router.post('/login', passport.authenticate('local', {
   successRedirect: '/',
-  failureRedirect: '/login'
+  failureFlash: true,
+  failureRedirect: '/user/login'
 }));
 
 router.get('/register', (req, res) => {
@@ -18,27 +19,32 @@ router.get('/register', (req, res) => {
 
 router.post('/register', (req, res) => {
   const { name, email, password, confirmPassword } = req.body
+  let errors = []
+  if (!name || !email || !password || !confirmPassword) {
+    errors.push({ message: '所有欄位都是必填項' })
+  }
+  if (password !== confirmPassword) {
+    errors.push({ message: '密碼和確認密碼不符' })
+  }
+  if (errors.length) {
+    return res.render('register', { name, email, password, confirmPassword, errors })
+  }
   User.findOne({ email })
     .then(user => {
       if (user) {
-        return console.log('此email已被註冊！')
+        errors.push({ message: '此email已被註冊！' })
+        return res.render('register', { name, email, password, confirmPassword, errors })
       }
-      if (!name || !email || !password || !confirmPassword) {
-        return console.log('所有欄位都是必填項')
-      }
-      if (password !== confirmPassword) {
-        return console.log('密碼和確認密碼不符')
-      }
-      User.create({ name, email, password })
-        .then(() => console.log('帳號註冊成功！'))
+      return User.create({ name, email, password })
+        .then(() => res.redirect('/'))
+        .catch(err => console.log(err))
     })
-    .then(() => res.render('register'))
-    .catch(err => console.log(err))
 })
 
 router.get('/logout', (req, res) => {
   req.logout();
-  res.redirect('/');
+  req.flash('success_msg', '登出成功')
+  res.redirect('/user/login');
 });
 
 module.exports = router

views/login.handlebars

@@ -2,6 +2,7 @@
   <div class="col-md-6 m-auto">
     <div class="card card-body">
       <h1 class="text-center mt-3">Login</h1>
+      {{>message}}
       <form action="/user/login" method="POST" class="needs-validation" novalidate>
         <div class="form-group my-3">
           <label for="email">Email：</label>

views/partials/message.handlebars

@@ -0,0 +1,29 @@
+{{#if success_msg}}
+<div class="alert alert-success alert-dismissible fade show" role="alert">
+  {{ success_msg }}
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>
+{{/if}}
+
+{{#if warning_msg}}
+<div class="alert alert-danger alert-dismissible fade show" role="alert">
+  {{ warning_msg }}
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>
+{{/if}}
+
+{{#if errors}}
+{{#each errors}}
+<div class="alert alert-danger alert-dismissible fade show" role="alert">
+  {{ this.message }}
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>
+{{/each}}
+{{/if}}
+
+{{#if error}}
+<div class="alert alert-danger alert-dismissible fade show" role="alert">
+  {{ error }}
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>
+{{/if}}

views/register.handlebars

@@ -2,6 +2,7 @@
   <div class="col-md-6 m-auto">
     <div class="card card-body">
       <h1 class="text-center mt-3">Register</h1>
+      {{> message}}
       <form action="/user/register" method="POST" class="needs-validation" novalidate>
         <div class="form-group my-3">
           <label for="name">NickName:</label>