stop a link if user isn't logged in - javascript

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

Related

Conditional Logic On A Link

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>

Calling auth0 login in href

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
}

Javascript confirm() still executes action when cancel is clicked. :(

<script type="text/javascript">
confirm("Delete user?.");
window.location.href = "users.php";
</script>
$qqq = mysql_query("DELETE from users WHERE panelistname='$theuser'") or die(mysql_error())
considering the code above, (inside a php file, so no worries with certain syntax errors you might notice) the problem here is that when click cancel on the confirm() dialog box that will show up. the delete action still executes. This question might be considered a double since, yeah, I found some questions relevant to this one but I just can't fixed this one myself.
the one I found codes it something like this:
"if (confirm('Are you...?')) commentDelete(1); return false"
I can't find a way to solve this problem, I don't know which part should I insert the SQL command(delete) in this format. Please someone show me how to do this right. :) thanks!
EDIT: I just saw that Nick Zuber posted a similar answer around 1 minute before I posted mine (actually, while I was writing it :P)
I don't clearly understand what you are trying to do.
You want to show the user a confirm window, and if they click Yes, delete some entry in the database, and if they click No, redirect them to the page 'users.php' ?
If it's what you want to do, then you can't do it like this. You can't use JS conditions with PHP. The PHP code is executed server-side (in the server), whereas the JS code is executed client-side (in the browser). What you would need is to do something like this:
warning: don't use this code, it's unsecure and shouldn't ever be used in a real app, it's just to show you how the whole thing works
(IN USERS.PHP)
if(isset($_GET['delete_dat_user']))
{
$qqq = mysql_query("DELETE from users WHERE panelistname='" . $_GET['delete_dat_user'] . "'") or die(mysql_error());
}
(IN THE WEBPAGE)
if(confirm('u serious u want to delete the user'))
{
window.location = 'users.php?delete_dat_user=theUserName';
}
else
{
nope
}
When your page loads, the PHP on your page will automatically execute, regardless of your JavaScript. Instead, try to prompt the user if they want to delete the account and if they click yes redirect them to a page that has your PHP query.
Also, the confirm function returns a boolean value depending on which option is clicked by the user. Try putting it in an if statement:
if(confirm("Delete user?.")){
window.location.href = "delete_user_page.php";
}else{
// cancel was clicked
}

How to change the login button to logout when user loggs in via iframe form

I have not been able to find a close enough answer to this question to find a solution that works.
I am working in a custom website, and at various points, the user login status is checked before the user can proceed with the action. If they are not logged in, they are asked to login first, and then they are allowed to proceed. To keep the user experience clean, most of this is done through in-page pop-ups that contain an iframe.
The login functionality is working perfectly, but when the user is done with the action and closes the window, the "login" button still shows, making it appear that they have not logged in. They actually have to refresh the page to see their login status. I would prefer, however, that the login status to appear seamless as well.
Currently, I have the login link contained in a div in the parent page:
<div class="top_nav">
<div class="contest_buttons">
<div class="c_button bkg_gray c_bottom w_quarter" id="#login_tab">
<?php echo showif(!empty($_SESSION['userID']),'
Logout','
Login'); ?>
</div>
<div class="c_button bkg_gray c_bottom w_quarter" id="#profile_tab">
<?php echo showif(!empty($_SESSION['userID']),'
My Profile','
Register'); ?>
</div>
<div class="c_button bkg_gray c_bottom w_half">
Wayne Daily News
</div>
</div>
</div>
The closest I have gotten to anything that could work is:
$('#login_tab', window.parent.document).html('Logout');
I'm not really sure where to go from there.
At the least, I want the #login_tab to read "Logout" when login has completed, but being able to update the #profile_tab to read "My Profile" would be great as well.
I am a PHP programmer that is just dabbling in JS and jQuery so far, so even pointing me in the right direction might be helpful. :)
I found something that shows some promise. It's not as clean as I would like, but this code seems like it might hold a solution...
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto(
{
callback: function(){
document.location.reload(true);
}
})
});
</script>
Because I am using PrettyPhoto to create the popups and iframes, I may be able to integrate a method or call another script that would handle my needs and it would occur on the event that the window is closed by the user.
What would it take to make something work this way?
There are many ways you could accomplish this.
You could have the login button on the page(s) inside iframe.?
or You could create the html for the 2 buttons inside php vars and call through said button links.?
However I would try using JS & CSS, check out this simple example of Button state switching.
http://css-tricks.com/swapping-out-text-five-different-ways/
After reading your latest comments, Maybe try to create login buttons depending on session state.
eg:
if( !isset($_SESSION) ){
//echo login links here
}
also don't forget to use
session_start();
in the page shown in iframe.

What's the javascript to only click a link if it exists?

I'm in the SeleniumIDE , but calling out to javascript.
Seems like this would be a fairly common scenario for others too.
I have a good test suite but the first thing it does is login.
I would like the suite to start off be making sure I am logged out and if not, logging me out.
I can tell if I am logged in by the presence of a 'Logout' hyperlink
But I only want to click on logout IF I am currently logged in, otherwise I want to do nothing, as trying to click on a non-existent element would raise an error if I am not already logged in)
So logically this is:
if ui element(logout link in my case) exists
click on logout link
else
do nothing
end
I am using the Selenium IDE and calling javascript - Given that I can't do if then in the basic seleniumIDE I was hoping I could do this in javascript itself.
something like:
store javascript{if ([a with text 'Logout' exists]) then click on it end;} id1
although instead of click on it [this], it would also be ok (though more brittle) if I just visited the url which is
http://my-apps-domain/users/sign_out
but I'm not sure of the exact syntax.
The relevant HTML is:
<li>Logout</li>
If it exists I would like to click on the a (or visit the url directly), otherwise nothing.
I would like to find a non-jquery solution if possible.
Update: I have found that even javascript{window.location.replace('http://google.com') } closes my seleniumIDE window and replaces it with google but doesn't affect the actual window where the tests themselves were running.
Triggering a click event in raw JavaScript can be tricky (check out this answer: https://stackoverflow.com/a/10339248/2386700)
However, if you can also use jQuery, that would simplify things. For example, if the logout button has an id like "logout" then you could do something like this:
var logoutButton = $('#logout');
if (logoutButton != null) {
logoutButton.click();
}
Since you don't have control over the HTML, I suggest referencing the link in another manner. The URL seems very reliable for that purpose:
var logoutLink = document.querySelector('a[href="/users/sign_out"]');
if(logoutLink != null) {
window.location.href = logoutLink.href;
}
You don't need to fire any kind of click event, because page navigation can easily be done with window.location.
UPDATE:
Another idea is to assign your button an id, then click it with selenium:
var logoutLink = document.querySelector('a[href="/users/sign_out"]');
if(logoutLink != null) {
logoutLink.setAttribute("id", "logoutLink");
}

Categories