Implement server-side authentication and update login UI texts

This commit is contained in:
2025-01-24 21:54:05 +01:00
parent 1edcefbd64
commit da2f568acf
4 changed files with 44 additions and 13 deletions

View File

@@ -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) {

View File

@@ -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
View 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;

View File

@@ -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}`);