Sending valid error messages from backend during sign in/ signup to the forntend

[piotrkosinski137]

⚠️ Is your feature request related to a problem? Please describe

I've tried to sign in with to short password via UI. I got "An error occurred!" error message.

💡 Describe the solution you'd like

We should create error object which will be passed to the frontend. Error object should contain error message, which will be displayed on UI

🤚 Do you want to develop this feature yourself?

Yes I can 👍

• Yes
• No

[jmprathab]

Welcome on board. Feel free to raise questions or clarifications if any. Awaiting your PR 😊!

[piotrkosinski137]

#201

[bayotheman]

Hi @mslowiak @jmprathab could I take this task?

[Bharath-Ganesh]

@jmprathab @mslowiak Is it for up-for-grabs? I would love to spend more time on it then

[Ak55915]

Hi @jmprathab @mslowiak Could i take this issue?

[Ganesh1521]

Here is Code

Javascript Code for Frontend

<title>Sign Up</title>

Sign Up

Username:

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
    
    <button type="submit">Sign Up</button>
</form>

<div id="error-message" style="color: red;"></div>

<script>
    document.getElementById('signup-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        
        const response = await fetch('/signup', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ username, password })
        });
        
        if (response.status === 200) {
            document.getElementById('error-message').innerText = 'Signup successful!';
        } else {
            const data = await response.json();
            document.getElementById('error-message').innerText = data.error;
        }
    });
</script>

Backend (Node.js with Express.js):

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.post('/signup', (req, res) => {
const { username, password } = req.body;

if (!username || !password) {
return res.status(400).json({ error: 'Username and password are required.' });
}

res.status(200).json({ message: 'Signup successful!' });

});

app.listen(3000, () => {
console.log('Server is running on port 3000');
});