diff --git a/controllers/indexController.js b/controllers/indexController.js index 7ccb04431aee8ae061ac2a9d19b4876faf0b2626..ac3a6a044286c9202ce03e568a653ddf62706aae 100644 --- a/controllers/indexController.js +++ b/controllers/indexController.js @@ -1,3 +1,4 @@ + module.exports = (req, res) => { res.render('index', { message: req.flash('message') }); } \ No newline at end of file diff --git a/controllers/loginController.js b/controllers/loginController.js index b772892afeb407d038e676ef733ce20379d92fa5..0ef09e331296f71a84ad0793331683ccf104e51f 100644 --- a/controllers/loginController.js +++ b/controllers/loginController.js @@ -8,15 +8,7 @@ module.exports = { loginUser: async (req, res) => { const { email, rpassword } = req.body; - - // ตรวจสอบว่า email และรหัสผ่านถูกส่งมาหรือไม่ - if (!email || !rpassword) { - req.flash('message', 'Please provide both email and password'); - return res.redirect('/login'); - } - try { - // ค้นหาผู้ใช้ในฐานข้อมูล const [rows] = await pool.execute('SELECT * FROM users WHERE email = ?', [email]); if (rows.length === 0) { req.flash('message', 'Email not found'); @@ -25,10 +17,8 @@ module.exports = { const user = rows[0]; const match = await bcrypt.compare(rpassword, user.password); - if (match) { - // ถ้ารหัสผ่านถูกต้อง ให้บันทึก userId ใน session - req.session.userId = user.user_id; + req.session.userId = user.id res.redirect('/'); } else { req.flash('message', 'Password incorrect'); diff --git a/controllers/registerController.js b/controllers/registerController.js index 42233587ea67aad2ef86207aec0ee6733080c83d..dfc085fdc66eb45fcbe0b64c76e83b51450cac53 100644 --- a/controllers/registerController.js +++ b/controllers/registerController.js @@ -1,31 +1,40 @@ -registerUser: async (req, res) => { - const { email, rpassword, confirm_password, fname, lname } = req.body; +const bcrypt = require('bcrypt'); +const pool = require('../db'); - // ตรวจสอบว่ารหัสผ่านทั้งสองตรงกันหรือไม่ - if (rpassword !== confirm_password) { - req.flash('message', 'Passwords do not match!'); - return res.redirect('/register'); - } +module.exports = { + showRegisterPage: (req, res) => { + res.render('register', { message: req.flash('message') }); + }, + + registerUser: async (req, res) => { + const { email, rpassword, confirm_password } = req.body; - try { - // ตรวจสอบว่าอีเมลมีอยู่ในระบบหรือไม่ - const [existingUser] = await pool.execute('SELECT * FROM users WHERE email = ?', [email]); - if (existingUser.length > 0) { - req.flash('message', 'Email is already registered.'); + // ตรวจสอบว่ารหัสผ่านทั้งสองตรงกันหรือไม่ + if (rpassword !== confirm_password) { + req.flash('message', 'Passwords do not match!'); return res.redirect('/register'); } - // แฮชรหัสผ่าน - const hashedPassword = await bcrypt.hash(rpassword, 10); + try { + // ตรวจสอบว่าอีเมลมีอยู่ในระบบหรือไม่ + const [existingUser] = await pool.execute('SELECT * FROM users WHERE email = ?', [email]); + if (existingUser.length > 0) { + req.flash('message', 'Email is already registered.'); + return res.redirect('/register'); + } - // บันทึกข้อมูลผู้ใช้ในฐานข้อมูล รวมทั้ง fname และ lname - const query = 'INSERT INTO users (email, password, fname, lname) VALUES (?, ?, ?, ?)'; - await pool.execute(query, [email, hashedPassword, fname, lname]); + // แฮชรหัสผ่าน + const hashedPassword = await bcrypt.hash(rpassword, 10); - // ส่งข้อความแจ้งเตือนและเปลี่ยนเส้นทางไปที่หน้า login - res.redirect('/login'); - } catch (err) { - console.error('Error inserting user:', err); - res.status(500).send('Error occurred'); + // บันทึกข้อมูลผู้ใช้ในฐานข้อมูล + const query = 'INSERT INTO users (email, password) VALUES (?, ?)'; + await pool.execute(query, [email, hashedPassword]); + + // ส่งข้อความแจ้งเตือนและเปลี่ยนเส้นทางไปที่หน้า login + res.redirect('/login'); + } catch (err) { + console.error('Error inserting user:', err); + res.status(500).send('Error occurred'); + } } -} +}; diff --git a/index.js b/index.js index cb47ef43e7d65372904fc3d816500f76e3e81a44..39e707b5f7d70313b95e960dceba00a0907cd3dd 100644 --- a/index.js +++ b/index.js @@ -3,7 +3,7 @@ const bodyParser = require('body-parser'); const session = require('express-session'); const flash = require('connect-flash'); -global.loggedIn = null; +global.loggedIn = null const app = express(); app.use(express.static('public')); app.use(express.json()); @@ -17,8 +17,8 @@ app.use(session({ app.use(flash()); app.set('view engine', 'ejs'); app.use('*', (req, res, next) => { - loggedIn = req.session.userId; - next(); + loggedIn = req.session.userId + next() }); const indexController = require('./controllers/indexController'); @@ -26,21 +26,14 @@ const loginController = require('./controllers/loginController'); const registerController = require('./controllers/registerController'); const logoutController = require('./controllers/logoutController'); -// Home page app.get('/', indexController); - -// Login routes app.get('/login', loginController.showLoginPage); app.post('/user/login', loginController.loginUser); - -// Register routes app.get('/register', registerController.showRegisterPage); app.post('/user/register', registerController.registerUser); - -// Logout route +app.post('/user/register', registerController.registerUser); app.get('/logout', logoutController); -// Server setup const port = process.env.PORT || 3000; app.listen(port, () => { console.log(`Server running on port ${port}`); diff --git a/views/index.ejs b/views/index.ejs index 393d10a3defda99059f938012bf8720cd6870f36..0a3d6c5131b3dcc6405aabf4773370e28e780c93 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -69,7 +69,7 @@ <!-- banner section start --> <div class="banner_section layout_padding"> - + </div> <!-- banner section end --> diff --git a/views/login.ejs b/views/login.ejs index c5d72eac73dda35d2fdf37082267a920fb8ad6b4..3b22bb0be07420fee0c64f44dcaa65eb4a3cb7b8 100644 --- a/views/login.ejs +++ b/views/login.ejs @@ -1,92 +1,162 @@ + <!doctype html> <html lang="en" data-bs-theme="auto"> - <head> - <script src="/js/color-modes.js"></script> + <head><script src="/js/color-modes.js"></script> + <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="generator" content="Hugo 0.122.0"> <title>Signin</title> - <link href="/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> + + <link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/sign-in/"> + + + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"> + +<link href="/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> + <!-- Favicons --> - <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico"> - <meta name="theme-color" content="#712cf9"> +<link rel="apple-touch-icon" href="/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> +<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> +<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> +<link rel="manifest" href="/docs/5.3/assets/img/favicons/manifest.json"> +<link rel="mask-icon" href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9"> +<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico"> +<meta name="theme-color" content="#712cf9"> + <style> .bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; + -webkit-user-select: none; + -moz-user-select: none; user-select: none; } - /* ปรับแต่งปุ่มและพื้นหลัง */ - .btn-bd-primary { - --bs-btn-bg: #712cf9; - --bs-btn-hover-bg: #6528e0; + @media (min-width: 768px) { + .bd-placeholder-img-lg { + font-size: 3.5rem; + } } - /* ฟอร์มตรงกลาง */ - .form-signin { + .b-example-divider { width: 100%; - max-width: 400px; - padding: 15px; - margin: auto; + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); } - .form-signin .form-floating { - margin-bottom: 1rem; + .b-example-vr { + flex-shrink: 0; + width: 1.5rem; + height: 100vh; } - .form-signin .form-check { - margin-bottom: 1rem; + .bi { + vertical-align: -.125em; + fill: currentColor; } - /* เพิ่มการจัดตำแหน่งข้อความ */ - .form-signin h1 { - font-size: 2rem; - font-weight: bold; - margin-bottom: 1.5rem; + .nav-scroller { + position: relative; + z-index: 2; + height: 2.75rem; + overflow-y: hidden; } - /* ปรับพื้นหลังให้เข้ากับธีม */ - .bg-body-tertiary { - background-color: #f8f9fa; + .nav-scroller .nav { + display: flex; + flex-wrap: nowrap; + padding-bottom: 1rem; + margin-top: -1px; + overflow-x: auto; + text-align: center; + white-space: nowrap; + -webkit-overflow-scrolling: touch; + } + + .btn-bd-primary { + --bd-violet-bg: #712cf9; + --bd-violet-rgb: 112.520718, 44.062154, 249.437846; + + --bs-btn-font-weight: 600; + --bs-btn-color: var(--bs-white); + --bs-btn-bg: var(--bd-violet-bg); + --bs-btn-border-color: var(--bd-violet-bg); + --bs-btn-hover-color: var(--bs-white); + --bs-btn-hover-bg: #6528e0; + --bs-btn-hover-border-color: #6528e0; + --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); + --bs-btn-active-color: var(--bs-btn-hover-color); + --bs-btn-active-bg: #5a23c8; + --bs-btn-active-border-color: #5a23c8; + } + + .bd-mode-toggle { + z-index: 1500; + } + + .bd-mode-toggle .dropdown-menu .active .bi { + display: block !important; } </style> + + + <!-- Custom styles for this template --> + <link href="/css/sign-in.css" rel="stylesheet"> </head> <body class="d-flex align-items-center py-4 bg-body-tertiary"> - <main class="form-signin w-100 m-auto"> - <form action="/user/login" method="POST"> - <!-- แสดงข้อความผิดพลาด --> - <% if (message && message.length > 0) { %> - <div class="alert alert-danger" role="alert"> - <%= message %> - </div> - <% } %> - - <h1 class="h3 mb-3 fw-normal">Sign in</h1> - - <div class="form-floating"> - <label for="floatingInput">Email address</label> - <input type="email" class="form-control" id="floatingInput" name="email" placeholder="name@example.com" required> - </div> - <div class="form-floating"> - <label for="floatingPassword">Password</label> - <input type="password" class="form-control" id="floatingPassword" name="rpassword" placeholder="Password" required> - </div> - - <div class="form-check text-start my-3"> - <input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault"> - <label class="form-check-label" for="flexCheckDefault"> - Remember me - </label> - </div> - - <button class="btn btn-primary w-100 py-2" type="submit">Sign in</button> - </form> - </main> - <script src="/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> - </body> -</html> + <svg xmlns="http://www.w3.org/2000/svg" class="d-none"> + <symbol id="check2" viewBox="0 0 16 16"> + <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> + </symbol> + <symbol id="circle-half" viewBox="0 0 16 16"> + <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/> + </symbol> + <symbol id="moon-stars-fill" viewBox="0 0 16 16"> + <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/> + <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/> + </symbol> + <symbol id="sun-fill" viewBox="0 0 16 16"> + <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/> + </symbol> + </svg> + +<main class="form-signin w-100 m-auto"> + <form action="/user/login" method="POST"> + <% if (message && message.length > 0) { %> + <div class="alert alert-danger" role="alert"> + <%= message %> + </div> + <% } %> + + <h1 class="h3 mb-3 fw-normal">Sign in</h1> + + <div class="form-floating"> + <label for="floatingInput">Email address</label> + <input type="email" class="form-control" id="floatingInput" name="email" placeholder="name@example.com"> + </div> + <div class="form-floating"> + <label for="floatingPassword">Password</label> + <input type="password" class="form-control" id="floatingPassword" name="rpassword" placeholder="Password"> + </div> + + <div class="form-check text-start my-3"> + <input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault"> + <label class="form-check-label" for="flexCheckDefault"> + Remember me + </label> + </div> + <button class="btn btn-primary w-100 py-2" type="submit">Sign in</button> + </form> +</main> +<script src="/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> + + </body> +</html> \ No newline at end of file diff --git a/views/register.ejs b/views/register.ejs index fed113b1fbf6038196d1417b781c8636983af6e0..86678518292f5f9b4335055c8f08840cea58847e 100644 --- a/views/register.ejs +++ b/views/register.ejs @@ -1,3 +1,4 @@ + <!doctype html> <html lang="en" data-bs-theme="auto"> <head><script src="/js/color-modes.js"></script> @@ -10,11 +11,22 @@ <title>Signup</title> <link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/sign-in/"> - <link href="/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> + + + + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"> + +<link href="/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> <!-- Favicons --> - <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico"> - <meta name="theme-color" content="#712cf9"> +<link rel="apple-touch-icon" href="/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> +<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> +<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> +<link rel="manifest" href="/docs/5.3/assets/img/favicons/manifest.json"> +<link rel="mask-icon" href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9"> +<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico"> +<meta name="theme-color" content="#712cf9"> + <style> .bd-placeholder-img { @@ -30,67 +42,118 @@ font-size: 3.5rem; } } + + .b-example-divider { + width: 100%; + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); + } + + .b-example-vr { + flex-shrink: 0; + width: 1.5rem; + height: 100vh; + } + + .bi { + vertical-align: -.125em; + fill: currentColor; + } + + .nav-scroller { + position: relative; + z-index: 2; + height: 2.75rem; + overflow-y: hidden; + } + + .nav-scroller .nav { + display: flex; + flex-wrap: nowrap; + padding-bottom: 1rem; + margin-top: -1px; + overflow-x: auto; + text-align: center; + white-space: nowrap; + -webkit-overflow-scrolling: touch; + } + + .btn-bd-primary { + --bd-violet-bg: #712cf9; + --bd-violet-rgb: 112.520718, 44.062154, 249.437846; + + --bs-btn-font-weight: 600; + --bs-btn-color: var(--bs-white); + --bs-btn-bg: var(--bd-violet-bg); + --bs-btn-border-color: var(--bd-violet-bg); + --bs-btn-hover-color: var(--bs-white); + --bs-btn-hover-bg: #6528e0; + --bs-btn-hover-border-color: #6528e0; + --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); + --bs-btn-active-color: var(--bs-btn-hover-color); + --bs-btn-active-bg: #5a23c8; + --bs-btn-active-border-color: #5a23c8; + } + + .bd-mode-toggle { + z-index: 1500; + } + + .bd-mode-toggle .dropdown-menu .active .bi { + display: block !important; + } </style> + <!-- Custom styles for this template --> <link href="/css/sign-in.css" rel="stylesheet"> </head> <body class="d-flex align-items-center py-4 bg-body-tertiary"> + <svg xmlns="http://www.w3.org/2000/svg" class="d-none"> + <symbol id="check2" viewBox="0 0 16 16"> + <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> + </symbol> + <symbol id="circle-half" viewBox="0 0 16 16"> + <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/> + </symbol> + <symbol id="moon-stars-fill" viewBox="0 0 16 16"> + <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/> + <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/> + </symbol> + <symbol id="sun-fill" viewBox="0 0 16 16"> + <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/> + </symbol> + </svg> <main class="form-signin w-100 m-auto"> <form action="/user/register" method="POST"> <h1 class="h3 mb-3 fw-normal">Sign up</h1> - <div class="form-floating"> - <label for="floatingUsername">Username</label> - <input type="text" class="form-control" id="floatingUsername" name="username" placeholder="Username" required> - </div> - - <div class="form-floating"> - <label for="floatingFname">First Name</label> - <input type="text" class="form-control" id="floatingFname" name="fname" placeholder="First Name" required> - </div> - - <div class="form-floating"> - <label for="floatingLname">Last Name</label> - <input type="text" class="form-control" id="floatingLname" name="lname" placeholder="Last Name" required> - </div> - <div class="form-floating"> <label for="floatingInput">Email address</label> - <input type="email" class="form-control" id="floatingInput" name="email" placeholder="name@example.com" required> + <input type="email" class="form-control" id="floatingInput" name="email" placeholder="name@example.com"> </div> <div class="form-floating"> <label for="floatingPassword">Password</label> - <input type="password" class="form-control" id="floatingPassword" name="rpassword" placeholder="Password" required> + <input type="password" class="form-control" id="floatingPassword" name="rpassword" placeholder="Password"> </div> <div class="form-floating"> <label for="floatingConfirmPassword">Confirm Password</label> - <input type="password" class="form-control" id="floatingConfirmPassword" name="confirm_password" placeholder="Confirm Password" required> + <input type="password" class="form-control" id="floatingConfirmPassword" name="confirm_password" placeholder="Confirm Password"> </div> - <button class="btn btn-primary w-100 py-2" type="submit">Sign up</button> - </form> + + <button class="btn btn-primary w-100 py-2" type="submit">Sign up</button> + </form> </main> - <script src="/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> - - <script> - // เช็ค pass ให้ตรง - const form = document.querySelector('form'); - form.addEventListener('submit', function(e) { - const password = document.getElementById('floatingPassword').value; - const confirmPassword = document.getElementById('floatingConfirmPassword').value; - - if (password !== confirmPassword) { - e.preventDefault(); // Prevent form submission - alert('Passwords do not match!'); - } - }); - </script> +<script src="/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> - </body> -</html> + </body> +</html> \ No newline at end of file