Implement server-side authentication and update login UI texts
This commit is contained in:
@@ -29,15 +29,27 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
const username = document.getElementById('username').value;
|
||||
const password = document.getElementById('password').value;
|
||||
|
||||
// Simple authentication check (replace with your own logic)
|
||||
if (username === 'fredrik' && password === 'apa') {
|
||||
sessionStorage.setItem('loggedIn', 'true');
|
||||
loginContainer.style.display = 'none';
|
||||
appContainer.style.display = 'block';
|
||||
loadTags();
|
||||
} else {
|
||||
loginMessage.textContent = 'Invalid username or password';
|
||||
}
|
||||
// Send credentials to the server for validation
|
||||
fetch('/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Basic ' + btoa(username + ':' + password)
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
sessionStorage.setItem('loggedIn', 'true');
|
||||
loginContainer.style.display = 'none';
|
||||
appContainer.style.display = 'block';
|
||||
loadTags();
|
||||
} else {
|
||||
loginMessage.textContent = 'Invalid username or password';
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
loginMessage.textContent = 'Error logging in';
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('taskForm').addEventListener('submit', function(e) {
|
||||
|
||||
@@ -14,14 +14,14 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="loginContainer" class="container">
|
||||
<h1 class="center-align">Login</h1>
|
||||
<h1 class="center-align">Logga in</h1>
|
||||
<form id="loginForm">
|
||||
<div class="input-field">
|
||||
<label for="username">Username:</label>
|
||||
<label for="username">Användarnamn:</label>
|
||||
<input type="text" id="username" required>
|
||||
</div>
|
||||
<div class="input-field">
|
||||
<label for="password">Password:</label>
|
||||
<label for="password">Lösenord:</label>
|
||||
<input type="password" id="password" required>
|
||||
</div>
|
||||
<button class="btn waves-effect waves-light" type="submit">Login</button>
|
||||
@@ -48,7 +48,7 @@
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<label for="tags">Tags (separated by commas):</label>
|
||||
<label for="tags">Taggar (separera med komma):</label>
|
||||
<input type="text" id="tags" class="autocomplete">
|
||||
</div>
|
||||
|
||||
|
||||
17
routes/auth.js
Normal file
17
routes/auth.js
Normal file
@@ -0,0 +1,17 @@
|
||||
const express = require('express');
|
||||
const basicAuth = require('basic-auth');
|
||||
const router = express.Router();
|
||||
|
||||
router.post('/login', (req, res) => {
|
||||
const user = basicAuth(req);
|
||||
const username = process.env.AUTH_USERNAME;
|
||||
const password = process.env.AUTH_PASSWORD;
|
||||
|
||||
if (user && user.name === username && user.pass === password) {
|
||||
res.status(200).send('Login successful');
|
||||
} else {
|
||||
res.status(401).send('Authentication required');
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -3,6 +3,7 @@ const express = require('express');
|
||||
const bodyParser = require('body-parser');
|
||||
const debug = require('debug')('app');
|
||||
const tasksRouter = require('./routes/tasks');
|
||||
const authRouter = require('./routes/auth');
|
||||
|
||||
const app = express();
|
||||
const port = 3044;
|
||||
@@ -10,6 +11,7 @@ const port = 3044;
|
||||
app.use(bodyParser.json());
|
||||
app.use(express.static('public'));
|
||||
app.use('/', tasksRouter);
|
||||
app.use('/', authRouter);
|
||||
|
||||
app.listen(port, () => {
|
||||
debug(`Server running at http://localhost:${port}`);
|
||||
|
||||
Reference in New Issue
Block a user