\n\n```\nHere's also my server.js and my media js (shows similar error messages.)","comment":[{"@type":"Comment","author":{"@type":"Person","name":"abdi","url":"https://discord.com/users/684405836994576424","image":"https://cdn.discordapp.com/avatars/684405836994576424/6eb187abb1b0fb6b24edd2af4802b059.webp?size=1024"},"datePublished":"2024-08-10T20:19:08.224Z","text":"server.js\n```const express = require('express');\nconst bodyParser = require('body-parser');\nconst multer = require('multer');\nconst path = require('path');\nconst app = express();\nconst port = 3000;\n\n// Middleware\napp.use(bodyParser.json());\napp.use(bodyParser.urlencoded({ extended: true }));\napp.use(express.static('public')); // Serve static files from the 'public' directory\n\n// Setup multer for file uploads\nconst storage = multer.diskStorage({\n destination: (req, file, cb) => {\n cb(null, 'uploads/');\n },\n filename: (req, file, cb) => {\n cb(null, file.originalname);\n }\n});\nconst upload = multer({ storage });\n\n// Mock database\nlet users = [];\nlet posts = [];\n\n// Serve the HTML files\napp.get('/', (req, res) => res.sendFile(path.join(__dirname, 'public', 'login.html')));\napp.get('/login.html', (req, res) => res.sendFile(path.join(__dirname, 'public', 'login.html')));\napp.get('/register.html', (req, res) => res.sendFile(path.join(__dirname, 'public', 'register.html')));\napp.get('/media.html', (req, res) => res.sendFile(path.join(__dirname, 'public', 'media.html')));\n\n// User login\napp.post('/login', (req, res) => {\n const { username, password } = req.body;\n const user = users.find(user => user.username === username && user.password === password);\n if (user) {\n res.json({ token: 'mock-token', username: user.username });\n } else {\n res.status(401).json({ message: 'Invalid credentials' });\n }\n});\n\n// User registration\napp.post('/register', (req, res) => {\n const { fullname, email, username, password } = req.body;\n if (users.find(user => user.username === username)) {\n return res.status(400).json({ message: 'Username already exists' });\n }\n users.push({ fullname, email, username, password });\n res.status(201).json({ message: 'User registered successfully' });\n});\n\n// Get username\napp.get('/get-username', (req, res) => {\n // Mocked for simplicity. You should check for a valid session here.\n res.json({ username: 'JohnDoe' }); \n});\n\n// Save post\napp.post('/save-post', upload.array('mediaFiles'), (req, res) => {\n const { username, caption } = req.body;\n const mediaFiles = req.files.map(file => file.filename);\n posts.push({ username, caption, mediaFiles });\n res.status(201).json({ message: 'Post saved successfully' });\n});\n\n// Start server\napp.listen(port, () => {\n console.log(`Server running at http://localhost:3000`);\n});\n```"},{"@type":"Comment","author":{"@type":"Person","name":"abdi","url":"https://discord.com/users/684405836994576424","image":"https://cdn.discordapp.com/avatars/684405836994576424/6eb187abb1b0fb6b24edd2af4802b059.webp?size=1024"},"datePublished":"2024-08-10T20:19:18.944Z","text":"media.html\n```\n\n\n \n \n TBDL Hangout Spot\n \n \n\n\n

\n \n

\n\n \n \n\n \n\n \n

\n Warning. This website is still in beta.\n ×\n

\n \n \n \n\n\n```"},{"@type":"Comment","author":{"@type":"Person","name":"abdi","url":"https://discord.com/users/684405836994576424","image":"https://cdn.discordapp.com/avatars/684405836994576424/6eb187abb1b0fb6b24edd2af4802b059.webp?size=1024"},"datePublished":"2024-08-10T20:19:28.935Z","text":"media.js\n```document.addEventListener('DOMContentLoaded', async () => {\n const newPostBtn = document.getElementById('newPostBtn');\n const postModal = new bootstrap.Modal(document.getElementById('postModal'));\n const postForm = document.getElementById('postForm');\n const postsContainer = document.getElementById('posts');\n const imagePopup = document.getElementById('imagePopup');\n const popupImage = document.getElementById('popupImage');\n const closePopup = document.getElementById('closePopup');\n const usernameDisplay = document.getElementById('usernameDisplay');\n const usernameInput = document.getElementById('username');\n\n // Fetch the logged-in username\n try {\n const response = await fetch('/get-username');\n if (!response.ok) throw new Error('Failed to fetch username');\n const data = await response.json();\n const username = data.username;\n\n if (!username) {\n window.location.href = '/login.html';\n } else {\n usernameDisplay.textContent = username;\n usernameInput.value = username;\n }\n } catch (error) {\n console.error(error);\n usernameDisplay.textContent = 'Guest';\n }\n\n // Event listener for new post button\n newPostBtn.addEventListener('click', () => {\n postModal.show();\n });\n\n // Close image popup\n closePopup.addEventListener('click', () => {\n imagePopup.style.display = 'none';\n });\n\n // Form submission\n postForm.addEventListener('submit', async (e) => {\n e.preventDefault();\n const caption = document.getElementById('caption').value;\n const mediaFiles = document.getElementById('mediaFile').files;\n \n if (mediaFiles.length === 0) return;\n \n const formData = new FormData();\n formData.append('username', usernameInput.value);\n formData.append('caption', caption);\n \n for (const mediaFile of mediaFiles) {\n formData.append('mediaFiles', mediaFile);\n }\n \n fetch('/save-post', {\n method: 'POST',\n body: formData,\n credentials: 'include' // Ensure cookies are sent with the request\n }).then(response => {\n if (response.ok) {\n location.reload();\n } else {\n console.error('Error saving post:', response.statusText);\n }\n }).catch(error => console.error('Fetch error:', error));\n }); \n});\n```"},{"@type":"Comment","author":{"@type":"Person","name":"abdi","url":"https://discord.com/users/684405836994576424","image":"https://cdn.discordapp.com/avatars/684405836994576424/6eb187abb1b0fb6b24edd2af4802b059.webp?size=1024"},"datePublished":"2024-08-10T20:19:33.346Z","text":"you don't need to read all of this,"},{"@type":"Comment","author":{"@type":"Person","name":"abdi","url":"https://discord.com/users/684405836994576424","image":"https://cdn.discordapp.com/avatars/684405836994576424/6eb187abb1b0fb6b24edd2af4802b059.webp?size=1024"},"datePublished":"2024-08-10T20:19:49.075Z","text":"i just needa get this working and i'm leaning on the issue being in server.js"},{"@type":"Comment","author":{"@type":"Person","name":"abdi","url":"https://discord.com/users/684405836994576424","image":"https://cdn.discordapp.com/avatars/684405836994576424/6eb187abb1b0fb6b24edd2af4802b059.webp?size=1024"},"datePublished":"2024-08-10T20:19:55.426Z","text":"but i've tried literally everything"},{"@type":"Comment","author":{"@type":"Person","name":"abdi","url":"https://discord.com/users/684405836994576424","image":"https://cdn.discordapp.com/avatars/684405836994576424/6eb187abb1b0fb6b24edd2af4802b059.webp?size=1024"},"datePublished":"2024-08-10T20:19:59.005Z","text":"and i cant figure it out"}]}

Login/signup + making a post

Archived a year ago

8 messages

1 members

Created 2 years ago

Updated 2 years ago

Open in Discord

abdi

Script Kiddie!

So i have a website i'm making and want the person to get to register, then login, then make a post. but, on the register, it doesn't work and gives this error in console.

POST http://127.0.0.1:5500/register 405 (Method Not Allowed)
(anonymous) @ register.html:74
VM153:1 Uncaught (in promise) SyntaxError: Unexpected end of JSON input

Here's my register.html with line 74 being highlighted

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="icon" type="image/x-icon" href="/images/share.png">
    <link rel="stylesheet" type="text/css" href="login.css" />
    <title>Sharewell Register</title>
</head>
<body>
    <h1 data-value="SHAREWELL" class="sharewell">SHAREWELL</h1>
    <div class="login-box">
        <h2>Register</h2>
        <form id="registerForm">
            <div class="user-box">
                <input type="text" id="fullname" required>
                <label>Full Name*</label>
            </div>
            <div class="user-box">
                <input type="email" id="email" required>
                <label>Email*</label>
            </div>
            <div class="user-box">
                <input type="text" id="username" required>
                <label>Username*</label>
            </div>
            <div class="user-box">
                <input type="password" id="password" required>
                <label>Password*</label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
    <a type="button" class="btn btn-light register" href="landing.html">Go Home</a>
 
    <script> 
        const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

        let interval = null;

        document.querySelector("h1").onmouseover = event => {  
            let iteration = 0;
            
            clearInterval(interval);
            
            interval = setInterval(() => {
                event.target.innerText = event.target.innerText
                    .split("")
                    .map((letter, index) => {
                        if(index < iteration) {
                            return event.target.dataset.value[index];
                        }
                        
                        return letters[Math.floor(Math.random() * 26)]
                    })
                    .join("");
                
                if(iteration >= event.target.dataset.value.length){ 
                    clearInterval(interval);
                }
                
                iteration += 1 / 3;
            }, 30);
        }

        // Handle form submission
        document.getElementById('registerForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const fullname = document.getElementById('fullname').value;
            const email = document.getElementById('email').value;
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

        **LINE 74**  const response = await fetch('/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ fullname, email, username, password })
            });

            const data = await response.json();
            if (response.ok) {
                alert('Registration successful! Please login.');
                window.location.href = 'login.html';
            } else {
                alert('Registration failed: ' + data.message);
            }
        });
    </script>
</body>
</html>

Here's also my server.js and my media js (shows similar error messages.)

Test

Login/signup + making a post

Replies (8)

Create a Post

Login/signup + making a post

Replies (8)