diff options
-rw-r--r-- | backend/index.js | 48 | ||||
-rw-r--r-- | src/components/Login.js | 78 |
2 files changed, 68 insertions, 58 deletions
diff --git a/backend/index.js b/backend/index.js index 670927f..9dae733 100644 --- a/backend/index.js +++ b/backend/index.js @@ -1,5 +1,5 @@ -const expres = require('express'); -const bodyParse = require('body-parser'); +const express = require('express'); +const bodyParser = require('body-parser'); const cors = require('cors'); const bcrypt = require('bcryptjs'); const jwt = require('jsonwebtoken'); @@ -7,37 +7,37 @@ const jwt = require('jsonwebtoken'); const app = express(); const PORT = 5000; -// middleware +// Middleware app.use(bodyParser.json()); app.use(cors()); -// dummy user data -const user = [ - { - id: 1, - username: 'admin', - password: '$2a$10$QWJkLkFgD1kz6X.0Q1jDg.2aH3eRJ/Qnl72sDgB5DlQvPvFjsKFDi' //hashed password for 'password123' - }, +// Dummy user data +const users = [ + { + id: 1, + username: 'admin', + password: '$2a$10$QWJkLkFgD1kz6X.0Q1jDg.2aH3eRJ/Qnl72sDgB5DlQvPvFjsKFDi', // hashed password for 'password123' + }, ]; -// login route +// Login route app.post('/login', async (req, res) => { - const { username, password } = req.body; + const { username, password } = req.body; - const user = users.find((user) => user.username === username); - if (!user) { - return res.status(401).json({ message: 'Invalid credentials'}); - } + const user = users.find((user) => user.username === username); + if (!user) { + return res.status(401).json({ message: 'Invalid credentials' }); + } - const isPasswordValid = await bcrypt.compare(password, user.password); - if (!isPasswordValid) { - return res.status(401).json({ message: 'Invalid credentials'}); - } + const isPasswordValid = await bcrypt.compare(password, user.password); + if (!isPasswordValid) { + return res.status(401).json({ message: 'Invalid credentials' }); + } - const token = jwt.sign({ id: user.id }, 'your_jwt_secret', { expiresIn: '1h' }); - res.json({ token }); + const token = jwt.sign({ id: user.id }, 'your_jwt_secret', { expiresIn: '1h' }); + res.json({ token }); }); app.listen(PORT, () => { - console.log(`Server running on http://localhost:${PORT}`); -});
\ No newline at end of file + console.log(`Server running on http://localhost:${PORT}`); +}); diff --git a/src/components/Login.js b/src/components/Login.js index 620ece0..1b0a9ed 100644 --- a/src/components/Login.js +++ b/src/components/Login.js @@ -2,42 +2,52 @@ import React, { useState } from 'react'; import axios from 'axios'; function Login() { - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(''); - const [error, setError] = useState(''); + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const [error, setError] = useState(''); - const handleSubmit = async (event) => { - event.preventDefault(); - try { - const response = await axios.post('http://localhost:5000/login', { - username, - password, - }); - console.log(response.data); - // handle successful login, e.g., redirect to admin panel - } catch (error) { - setError('Invalid credentialas'); - console.error('Error logging in', error); - } - }; + const handleSubmit = async (event) => { + event.preventDefault(); + try { + const response = await axios.post('http://localhost:5000/login', { + username, + password, + }); + console.log(response.data); + // handle successful login, e.g., redirect to admin panel + } catch (error) { + setError('Invalid credentials'); + console.error('Error logging in', error); + } + }; - return ( - <div className="Login"> - <h2>Login</h2> - {error && <p style={{ color: 'red' }}>{error}</p>} - <form onSubmit={handleSubmit}> - <div> - <lable>Username:</lable> - <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} required /> - </div> - <div> - <lable>Password:</lable> - <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required /> - </div> - <button type="submit">Login</button> - </form> + return ( + <div className="Login"> + <h2>Login</h2> + {error && <p style={{ color: 'red' }}>{error}</p>} + <form onSubmit={handleSubmit}> + <div> + <label>Username:</label> + <input + type="text" + value={username} + onChange={(e) => setUsername(e.target.value)} + required + /> </div> - ); + <div> + <label>Password:</label> + <input + type="password" + value={password} + onChange={(e) => setPassword(e.target.value)} + required + /> + </div> + <button type="submit">Login</button> + </form> + </div> + ); } -export default Login;
\ No newline at end of file +export default Login; |