code refactor to use json for communicating with frontend

frontend/js/login.js

@@ -17,3 +17,25 @@ document.querySelector('form').addEventListener('submit', () => {
     const username = document.getElementById('username').value;
     localStorage.setItem('username', username);
 })
+
+document.getElementById('loginForm').addEventListener('submit', async (e) => {
+    e.preventDefault()
+    const username = document.getElementById('username').value.trim();
+    const password = document.getElementById('password').value.trim();
+    const messageBox = document.getElementById('messageBox');
+    const jsonData = JSON.stringify({ username, password })
+    const response = await fetch ('/auth/login', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: jsonData
+    });
+
+    const result = await response.json();
+    if(response.ok) {
+        location.href='/chat';
+    } else {
+        messageBox.innerText = result.message;
+    }
+})

frontend/js/settings.js

@@ -1,5 +1,4 @@
 const logoutButton = document.getElementById('logout');
-const messageBox = document.getElementById('messageBox');
 
 logoutButton.onclick = logout;
 function logout() {
@@ -28,7 +27,7 @@ document.getElementById('changePasswordForm').addEventListener('submit', async (
     e.preventDefault();
     const cPassword = document.getElementById('cPassword').value.trim();
     const nPassword = document.getElementById('nPassword').value.trim();
-
+    const messageBox = document.getElementById('messageBox');
     const jsonData = JSON.stringify({ cPassword, nPassword });
     const response = await fetch('/auth/changepassword', {
         method: 'POST',
@@ -38,6 +37,6 @@ document.getElementById('changePasswordForm').addEventListener('submit', async (
         body: jsonData
     });
     const result = await response.json();
-    // display result message (successful or no)
+    // Display result message
     messageBox.innerText = result.message;
 })

frontend/js/signup.js

@@ -16,13 +16,29 @@ function showPasswd() {
 
 document.getElementById('signupForm').addEventListener('submit',async function (event) {
     event.preventDefault();
+    const messageBox = document.getElementById('messageBox');
+    const username = document.getElementById('username').value.trim();
+    const password = document.getElementById("password").value.trim();
+    const sPassword = document.getElementById("sPassword").value.trim();
+    const jsonData = JSON.stringify({ username, password });
 
-    const password = document.getElementById("password").value;
-    const sPassword = document.getElementById("sPassword").value;
-    console.log(password, sPassword);
     if(password !== sPassword){
-        alert("Passwords don't match!");
+        messageBox.innerText = "Passwords don't match!"
+        return;
+    }
+
+    const response = await fetch ('/auth/signup', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: jsonData
+    });
+
+    const result = await response.json();
+    if(response.ok) {
+        location.href='/chat';
     } else {
-        this.submit();
+        messageBox.innerText = result.message;
     }
 })

frontend/routes/login.html

@@ -13,7 +13,7 @@
 
 <div class="login">
     <h1>Login</h1>
-    <form action="/auth/login" method="post">
+    <form id="loginForm">
 
         <label for="username"></label>
         <input type="text" name="username" placeholder="Username" id="username" required>
@@ -24,8 +24,10 @@
         <input type="checkbox" onclick="showPasswd()">Show Password
 
         <button type="submit">Login</button>
+
     </form>
 </div>
 <a href="/signup">Sign up</a>
+<p id="messageBox"></p>
 </body>
 </html>

frontend/routes/signup.html

@@ -13,7 +13,7 @@
 
 <div class="signup">
     <h1>Sign up</h1>
-    <form action="/auth/signup" method="post" id="signupForm">
+    <form id="signupForm">
 
         <label for="username"></label>
         <input type="text" name="username" placeholder="Username" id="username" required>
@@ -27,7 +27,7 @@
         <input type="checkbox" id="checkbox" onclick="showPasswd()">Show Passwords
 
         <button type="submit">Sign up</button>
-
+        <p id="messageBox"></p>
     </form>
 </div>
 </body>

frontend/stylesheet/login.css

@@ -16,3 +16,6 @@ button {
     margin: 0 10px; /* Add margin to separate buttons */
 }
 
+p {
+    color: red;
+}

frontend/stylesheet/signup.css

@@ -16,3 +16,7 @@ button {
     margin: 0 10px; /* Add margin to separate buttons */
 }
 
+
+p {
+    color: red;
+}

index.js

@@ -54,7 +54,7 @@ app.post('/auth/logout', (req, res) => {
     res.clearCookie('io', {
         path: '/'
     });
-    res.status(200).json({ message: 'Successfully logged out'});
+    res.status(200).json({ message: 'Successfully logged out', success: true});
 });
 
 // get JWT token API
@@ -80,7 +80,7 @@ app.post('/auth/changepassword', async (req, res) => {
         const decoded = jwt.verify(token, jwtSecret);
         username = username = decoded.username;
     } catch (err) {
-        return res.status(400).json({ message: 'Unauthorized'});
+        return res.status(403).json({ message: 'Unauthorized'});
     }
     try {
         const result = await db.query('SELECT * FROM accounts WHERE username = $1', [username]);
@@ -153,11 +153,20 @@ app.get('/settings', (req, res) => {
         res.sendFile(path.join(__dirname, '/frontend/routes/settings.html'))
     });
 })
-
-// serving the chat page if logged in
 app.get('/', (req, res) => {
     const token = req.cookies.token;
 
+    if(!token) {
+        return res.redirect('/login');
+
+    } else {
+        return res.redirect('/chat');
+    }
+})
+// serving the chat page if logged in
+app.get('/chat', (req, res) => {
+    const token = req.cookies.token;
+
     if(!token) {
         res.redirect('/login');
         return;
@@ -184,14 +193,11 @@ async function signupUser(req, res) {
 
     if(username && password){
         try {
-            // trimming here to avoid app crash when username or password is undefined
-            username = username.trim();
-            password = password.trim();
             // Check if user exists
             const exists = await isUserExists(username);
             if (exists) {
                 console.log('User already exists');
-                return res.status(500).send('User already exists!');
+                return res.status(500).json({ message: 'User already exists!' });
             }
 
             // Hash password
@@ -200,13 +206,13 @@ async function signupUser(req, res) {
 
             // Insert user
             await insertUser(username, hash);
-            return res.status(200).send("Account successfully created <a href=/login>Login screen</a>");
+            return res.status(200).json({ message: "Account successfully created" });
         } catch (err) {
             console.error('Error inserting data:', err);
-            return res.status(500).send('Error inserting data');
+            return res.status(500).json({ message: 'Error inserting data' });
         }
     } else {
-        res.send('Please enter Username and Password!')
+        res.status(400).json({ message: 'Form is empty'})
     }
 }
 
@@ -227,7 +233,7 @@ async function loginUser(req, res) {
                 // Compare password
                 const match = await bcrypt.compare(password, result.rows[0].password);
                 if (!match) {
-                    res.send('Incorrect Username or Password!');
+                    res.status(401).json({ message: 'Invalid password'});
                     return;
                 }
                     const token = jwt.sign({ username }, jwtSecret, {
@@ -239,15 +245,7 @@ async function loginUser(req, res) {
                     });
                     req.session.loggedin = true;
                     req.session.username = username;
-                    res.send(`
+                    res.status(200).json({ message: 'Successfully logged in', success: true });
-                        <p>Login successful!</p>
-                        <p>Redirecting to chat...</p>
-                        <script>
-                            setTimeout(() => {
-                                window.location.href = '/';
-                            }, 1500);
-                        </script>
-                    `);
             } else {
                 res.send('Incorrect Username or Password!');
             }