I have a question. I have this logic in mind: I got a JavaScript file which contains a condition **if** x = 0 load **index.html** else load **index1.html**. Now, index.html and index1.html are identical and both loads the same JavaScript file which contains a function which should, for the condition x = 0 take the user to the app but need to restrict some actions when x = 1. I'm just trying to know if it is even possible before I decide if I take this approach or completely change the logic of what I need to do. There is another way, creating two versions of the JavaScript file, but it would represent a significant amount of duplicated files as this commented and uncommented functions are present in more than one place on the app and as it is an MVC project I would have, I think, to duplicate more than the file which contains the function itself.
The idea is that I'm going to serve an app with two plans, a FREE plan and a PRO plan. The unique difference between them is a restriction on certain functionalities. So I have this function:
if(userActive.isPro){
var payActive = JSON.parse(localStorage.getItem("payActive"));
if(payActive){
if(parseInt(payActive.status) === 1){
window.location.href= '../app/index.html';
}
}
else{
window.location.href= '../app/index1.html';
}
}
And this is the function which makes the difference for each plan.
function openAddPopup() {
//check first if user is PRO Copy
const userStatus = localStorage.getItem("userKind");
const user = userStatus;
if (user) {
app.router.load('contactEdit', { 'isFavorite': state.isFavorite });
} else {
alert("You can only add 3 elements on the free version");
}
}
For the PRO plan I need to execute the full version of the app and for the FREE plan then the restricted version.
So, is it possible to append a JavaScript function to index.html and index1.html to, in case of the FREE plan, to do the second, but, in case of the PRO plan, the first?
As long as I woke up this morning with a simple solution in mind and want to share it with the community.
In the index.html I put this:
userStatus = 'PRO';
localStorage.setItem( 'userKind', userStatus);
So, in the index1.html this:
const userStatus = localStorage.getItem("userKind");
const user = userStatus;
if (user) {
localStorage.removeItem("userKind");
}
Then in the app.html this:
//check first if user is PRO
const userStatus = localStorage.getItem("userKind");
const user = userStatus;
if (user) {
document.body.append("Pro version")
} else {
alert("Solo se pueden añadir 3 elementos en la versión Éstandar");
}
How it works? When the Auth API send the user to the App, if it is a PRO user the API redirects him/her to the index.html which stores in localStorage the userKind variable with a **PRO** value, but if it is a Standard user, then the API redirects him/her to the index1.html which delete the userKind variable in localStorage. This way it is ensured that if user is PRO loses this condition, he/her just can access to the Standard version.
Here is a working example:
Run index.html and then index1.html, as you are going to function as the Auth API.
Then comment if it is ok or have to be improved.