How can I have a link go to a page as expected for logged in users only? If a user is not logged in I would like a popup login form displayed instead.
PS-I am new to JS and StackOverflow so please be kind and if my future questions should be set up differently, please let me know.
I have tried a lot of different methods and I am able to get the script to display alerts, but not the desired actions.
This is the link HTML that should go to the defined href value if user is logged in and display the pop up if logged out.
Go To New Page
Here is the script I am using and could use help with actions that need to happen.
<script>
function lockedContent(){
if (document.body.classList.contains("logged-in")){
//go to link defined in the href in the <a>
} else {
//display login popup
}
}
</script>
I would like the link to go to the desired url in the href for logged in users and to display a popup for users that are not logged in. So far I can't seem to get either to happen.
You can redirect using window.location. After proper authorization you can add the class logged-in to the body and then redirect
if (document.body.classList.contains("logged-in")) {
// only after proper authorization
window.location.href = 'url of the page'
} else {
// code to call modal display function
}
You can use a button instead and check if user is logged in or not based on that change window.location
let loggedIn = true
function lockedContent(){
if(loggedIn)
{
window.location.href = 'http://www.google.com'
console.log(window.location.href)
}
}
<button onclick="lockedContent()" id="bookOne">Go To New Page</button>
Related
I'm trying to block access for non-admin users to certain pages. So I'm saving a value using localStorage to identify the state of the said user, but when they try to go to admin.html, that page will show for a split second then goes to the one I want them to go. So the user both got to check the page and know that page exists, how can I avoid this?
This is what I have:
CSS
html { visibility: hidden; }
JS
if (localStorage.getItem('Authenticationstate') === 'out') { //if its not logged in
window.location.href = "index.html";
} else if ((localStorage.getItem('AuthenticationState')) !== 'Admin') { //if its a normal user
window.location.href = "Dashboard.html";
}else{ // if its admin
document.getElementsByTagName("html")[0].style.visibility = "visible";
}
$(document).ready(function () {
createChart();
});
So for example, the normal or non-logged in user put "Admin" in the URL, the page Admin shows then switches back to "Dashboard" or "index" (needless to say these 2 pages are always visible, according to the type of user)
Thanks for your help
EDIT: This is a simple demo, not a serious project
You can add a <script> Tag into the <head> Tag so this code will be executed first and before the script tags in the rest of the page. this way you can redirect asap. take a look at: https://www.w3schools.com/js/js_whereto.asp
I have used window.location in my code to see that if I login correctly, it will take me to home page, it shows the alert and correctly displays "password" but it doesn't direct me to the new page
I have already tried looking at this forum and youtube
<button onclick="check(this.form)"> Login </button>
<script>
function check(form) {
if(form.psw.value == "password")
{
home = true;
if(home == true) {
window.location = "destination.html";
}
alert(form.psw.value);
}else {
alert("Wrong Password. Try again or click Forgot Password to reset it.")
}
}
Expected Result is that I get directed to the destination.html page
Actual result is that I stay on my page with the alert "password"
I think the problem is that you are trying to do two things at the same time, show an alert and redirect to 'destination.html'. I believe what is happening is ...the alert is shown before the redirect is completed which prevents the redirect action.
I'm trying to show a message if the user is not logged in. Please Login here (red color) to continue.
In the render method, I need to check and see if the user is already logged in to not show any message.
I also have a login method that directs user to the login page.
I need to show a button to look like a hyperlinked text because I can't call the this.login function in a href. Now there's a big space (because of the button) between "login" and "here". I also need to make "here" red to inform the user that it's clickable.
I tried <div> Please login <a onClick={this.login}>here</a></div> but it "here" looks like a simple text. No link appears. Only the button can add a link and I don't know the reason.
{!this.props.isAuthed && <div> Please login<Button color="inherit" onClick={this.login}>here</Button></div>}
Try this:
<div> Please login <a onClick={this.login} href="#">here</a></div>
The reason is: An a tag without the href attribute is not rendered like a link by browsers. To mitigate that, we add it with some arbitrary value.
On your onClick handler - login in your case - you need to ensure that you prevent the default action - navigating to the relative url # - from happening:
login = e => {
e.preventDefault();
// your login logic
}
I have a login screen which the user logs in using Jquery and AJAX. That's fine. Now what I want is that if the user logs in correctly, I want to load another page.
I tried using document.location = "home.html"; but that refreshes my page. What I want is like that transition that normally we have when we click on tag like
<a href="SchoolMaterials.html"> <!-- this does not refresh -->
I don't know if I explained myself clearly.
Thanks
It will be better to load the page in your callback function of successful login with:
$("#the_div_container_for_new_page").load("SchoolMaterials.html")
UPDATED:
it is something like this:
$(document).ready() {
function login() {
//post with ajax to login
$.post(......, function(result){
if (result.success) {
// load some page after successful login.
$('#id_of_container_div').load("thepage.html");
return;
} else {
// handle error
}
})
}
}
window.location is just what you need. You can also create an anchor element using jQuery and simulate a click on it :
$("<a href='your url'></a>").click();
But i wouldn't recommend that, it's better to post your data to the server and redirect to the page you want.
Could you please help me? This one seems simple but none of my solutions work.
I have a table of pdf links on a page. I want user be able to open them only and only if he is logged in. otherwise an alert message pops up.
If we consider each link is inside a div like below:
<div class="prdc prdc-prodList noAccess">
<a target="_blank" href="/files/test.pdf">Specification</a>
</div>
If user isn't logged in, "noAccess" class is assigned to the link parent otherwise "hasAccess" is assigned to it.
I have this code, but (in case user is logged out) it doesn't work all the times.
$( ".prdc a" ).click(function(e) {
if ( $( this ).parent().hasClass( "noAccess" ) ) {
e.preventDefault();
alert("You should be logged in to have access");
}
});
Does anybody know what is wrong with this code? Or do you know a better solution for this problem?
Thank you in advance
First of all - this is not a good way to do this.
This is because some users who know how to handle developer tools might just delete the class noAccess and access your files. Therefore you should either:
1. Not display the links at all if the user is not logged in.
2. Add additional check on the server side for the status of logged in user and prevent download if the user is not logged in.
And answering your question:
This is probably coused by the use of parent() function. It only gets direct parent of an object, and what you want is closest('.noAccess'). This function will look all predecesors of a given object which have class noAcess.
Hope this helps, cheers!
do this by first not puting the href in a and then when the user has loged in then by using javascript add href. The following code illustrates this:
<div class="prdc prdc-prodList noAccess">
<a target="_blank" id="link">Specification</a></div>
javascript
var some_function_name = function(){
if( some conditions if the user has loged in or not ){
var a = document.getElementById("link");
a.setAttriblue("href","/files/test.pdf");
}
}
and after the user has loged in the your html will look like this:
<div class="prdc prdc-prodList noAccess">
<a target="_blank" id="link" href="/files/test.pdf">Specification</a></div>
DEMO