My objective is to trigger a JS function from a pug template that will store an item in the localStorage. The value of this item will be a parameter passed to the pug template labeled as "token".
I have looked at similar questions in the past and found inspiration from answers that are somewhat similar, such as:
- Pug call js function from another file inside template
- Express / Jade / Pug: Calling a javascript object's functions
Here is the code I ended up with:
users.js
import setToken from "../src/setToken";
router.post("/signin", (req, res) => {
...
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function(result) {
res.render("congrats", {
title: "Congrats",
token: result.getAccessToken().getJwtToken(),
setToken: setToken
});
},
onFailure: function(err) {
next(err);
}
});
});
setToken.js
export default (token) => {
console.log("::: setToken :::");
localStorage.setItem("cognitoToken", token);
};
congrats.pug
extends layout
block scripts
script
| var setToken = #{setToken};
| setToken(#{token})
block content
...
layout.pug includes a client-side JS script with a function called storeToken. I also tried calling this function but nothing happened.
Despite rendering correctly within the <script> tag of my template, the JS code doesn't execute, and nothing gets stored in localStorage. I'm not sure if passing the function reference during template rendering is the best approach or if it should be included on the client side.
EDIT
After inspecting the markup, I noticed that my JS code renders properly within the <script> tag of my template:
<script>
console.log("token: ", **token value**);
var setToken = function (token) {
console.log("::: setToken :::");
localStorage.setItem("cognitoToken", token);
};
setToken(**token value**)
</script>
EDIT 2
In my case, I have 4 pug pages that load sequentially based on the user's progress while registering for Cognito. Injecting JS into the other 3 templates works fine. For example:
block scripts
script(type="text/javascript")
| var page = "confirm";
I can access the variable 'page' in the console and get the output "confirm". However, when attempting the same in my congrats.pug template, it returns undefined. This issue might be related to how the pages are rendered. Comparing one that works and one that doesn't, there doesn't seem to be any noticeable differences, although I could be missing something here.
/*
* Works
*/
router.post("/confirm", (req, res, next) => {
const { confirm } = req.body;
cognitoUser.confirmRegistration(confirm, true, function(err, result) {
if (err) {
next(err);
}
res.render("signin", {
title: "Signin"
});
});
});
//////////
/*
* Doesn't work
*/
router.post("/signin", (req, res) => {
const { username, password } = req.body;
const authenticationData = {
Username: username,
Password: password
};
const authenticationDetails = new AuthenticationDetails(authenticationData);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function(result) {
res.render("congrats", {
title: "Congrats",
token: result.getAccessToken().getJwtToken(),
setToken: setToken
});
},
onFailure: function(err) {
next(err);
}
});
});
//////////