I am currently working on a frontend for my backend. In the frontend I am using webpack to bundle my JS files. The only problem is they are instantly getting executed which isn’t good for my application, because I can only execute certain code (vertretungsplan.js) after login. So if I redirect to vertretungsplan.html from login.html after a successful login, I want the vertretungsplan.js code to be excecuted (currently the all the code is instantly getting executed).
webpack.config.js:
import path from 'path';
import {CleanWebpackPlugin} from 'clean-webpack-plugin';
const config = {
entry: {
login: './src/js/entry.js',
vertretungsplan: './src/js/vertretungsplan.js'
},
output: {
filename: '[name].js',
path: path.resolve(process.cwd(), 'dist'),
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /.js$/,
use: ["babel-loader"],
exclude: /node_modules/
},
{
test: /.js$/,
use: ["source-map-loader"],
enforce: "pre",
exclude: /node_modules/
},
]
},
resolve: {
extensions: ['.js']
},
watchOptions: {
ignored: /node_modules|dist/,
},
plugins: [
new CleanWebpackPlugin()
]
};
export default config;
entry.js (for multiple output files because code should not be executed all at once)
import "./login.js";
import "./vertretungsplan.js";
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="../styles/main.css" rel="stylesheet" type="text/css">
<title>Vertretungsplan</title>
</head>
<body>
<form>
<label for="username">Username:</label>
<input id="username" name="username" required type="text">
<br>
<label for="password">Password:</label>
<input id="password" name="password" required type="password">
<br>
<input id="submit" type="submit" value="Submit">
</form>
<script defer src="../../dist/login.js" type="module"></script>
</body>
</html>
login.js
import axios from "axios";
console.log("Index.js loaded");
const submitBtn = document.getElementById("submit");
submitBtn.addEventListener("click", submit);
function submit(event) {
event.preventDefault();
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
login(username, password)
}
function login(username, password) {
let data = JSON.stringify({
"username": username,
"password": password
});
let config = {
method: 'post',
maxBodyLength: Infinity,
url: 'http://localhost:8080/api/v1/auth/authenticate',
headers: {
'Content-Type': 'application/json'
},
data: data
};
axios.request(config)
.then((response) => {
const jwtToken = response.data.token;
setCookie("jwt", jwtToken, 7);
window.location.href = "../pages/vertretungsplan.html";
})
.catch((error) => {
console.log(error);
});
}
function setCookie(name, value, days) {
const expires = new Date();
expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
}
vertretungsplan.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="../styles/main.css" rel="stylesheet" type="text/css">
<title>Vertretungsplan</title>
</head>
<body>
<table id="vertretungsplan">
<tr id="vertretungsplan-head">
</tr>
<tbody id="vertretungsplan-body">
</tbody>
</table>
</body>
</html>
vertretungsplan.js
import axios from "axios";
console.log("Vertretungsplan.js loaded");
const head = ["Klasse", "Stunde", "Fach", "Art", "Lehrer", "Vertreter"]; // Überschriften der einzelnen Spalten
const vertretungsplanBody = document.getElementById("vertretungsplan-body");
const vertretungsplanHead = document.getElementById("vertretungsplan-head");
function init() {
let config = {
method: 'get',
maxBodyLength: Infinity,
url: 'http://localhost:8080/api/v1/resources/vertretungsplan'
};
axios.request(config)
.then((response) => {
let data = response.data;
head.forEach((item) => {
vertretungsplanHead.innerHTML += `<th>${item}</th>`;
});
data.forEach((eintrag) => {
const row = document.createElement("tr");
head.forEach((eigenschaft) => {
eigenschaft = eigenschaft.toLowerCase();
const cell = document.createElement("td");
cell.textContent = eintrag[eigenschaft];
row.appendChild(cell);
});
vertretungsplanBody.appendChild(row);
});
})
.catch((error) => {
if (error.response.status === 403) {
window.location.href = "../pages/login.html";
}
});
}
init();
This is the console output on loading the login.html page:
And this is my project hierarchy:
This is my first project like that, so I also have no problem with feedback regarding other things.
