How to implement two recaptcha in the same page - recaptcha

How we can implement Two recaptcha user control on the same page.
Problem :
we have two views one for tell a friend about the site by sending e-mail and another authoring any note. the tell a friend part is hidden which send e-mail through ajax and note author part is visible so it is making problem when we need both but in different way.

Refactor to avoid usability issue
This doesn't seem reasonable and I would suggest to avoid this at all costs, because you have a serious usability issue if you do need two of them. Why would you need two captchas anyway? The main idea behind a captcha is that it assures that there was a person entering data in the form and not a computer.
So if there's one captcha on the page, you're assured. So if the first one was filled by a person, all other data is as well and you don't need a second one.
But I can see one scenario where two captchas could come into place. And that's when you'd have two <form> elements on the page. So a user can either submit one or the other. In this case user will always submit data from just one form and not both. So you could avoid this as well by either:
separating these two forms into two pages/views with an additional pre-condition page where a user would select one of the two forms
hiding captcha at first, but when a user starts entering data into one of the forms you could move the hidden DIV with captcha inside the form and display it. This way there would only be one captcha on the page and it would be on the form that the user is about to send
The second one is the one you'd want to avoid. If you give us more details what your business problem is, we could give you a much better answer.
Alternatives
Since you described your actual business problem I suggest you take a look at the honey pot trick, that is more frequently used for this kind of scenarios. Because if you used too many captchas on your site, people would get annoyed. They are tedious work, that's for sure. Honey pot trick may help you avoid these unnecessary data entering.
The other question is of course: Are your users logged in when they have these actions available? Especially the editing one. If they are, you can better mitigate this problem. You could set a time limit per user for sending out messages. Like few per minute. That's what a person would do. And of course store the information about sending out these emails, so you can still keep historical track of what users did so you can disable accounts of this gets abused. But when users are logged in they normally don't have to enter captchas since they've already identified themselves during authentication phase.
The ultimate question is of course: Why would a bot send out emails to friends? they wouldn't be able to send any kind of spam would they? What's the point then? It's more likely that bots will abuse your system if they can spam users anyhow. Either by sending email with content or leaving spam comments on your site. These forms need to be bot checked.

Related

What is the best practice to get the required data into VueJS component?

I'm building my first VueJS application which is intended to be used by hundreds of people in the future. I tried to make the individual components reusable and indpendent as possible. To achieve this i decided to let every component fetch its required data themselves. This works fine but i'm not sure if its best practice. I could also pass the data between the components or even using the 2-way data binding functionality.
The sketch bellow describes one of the situations i have. Note that 1 account has 1..* users. As you can see i need to fetch the accounts to display them in the accountOverviewComponent.
Currently i only fetch the accounts in the accountOverviewComponent and fetch the users when the account edit button by the passed accountId in the accountOverviewComponent is clicked. This way i don't fetch data i don't need at the time.
I can also include the users (god knows which data/relations will be added in future) to the fetch account response as wel so i can pass all required data to the accountShowComponent when a account edit button is clicked. This way i can save requests to the server with the side note that i fetch users of accounts i dont need. A possible disadvantage is that the account is updated in the accountShowComponent and not in the accountOverviewComponent (for example when the accountShowComponent is a modal on top of the accountOverviewComponent. So i need to pass the updatet account back or re-fetch the accounts after a save or something.
As third option I can do the same in option 2 but than with the 2-way data binding which handles the data synchronization between the components. This will probably restrict the usage of the accountShowComponent to cases where the accountShowComponent is used "on top" of a parent which contains the data.
I can also store the data in a Vuex store and update the stores all the time. I read that this is bad practive as it should be only used for data which is required accros the SPA. I think Vuex is overkill in "simple" situations like this?
What is the best practice of the described situation? I have a bunch of comparable situations/scenarios in my application. Performance (also for mobile devices), scalability and being "future proof" (extendability/modularity) are important for me. Can someone help me out because i'm a bit lost in the options i have?
UPDATE
The reason i think Vue is overkill is comming from this article which makes totally sense from a software engineer perspective to me (i may be wrong). As my components have a kind of "parent - child" relation so i can solve my "issue" easily with passing data (or use 2-way data binding) and callback-events.
The number one use case for storing data in a centralized store like Vuex, is, because the data must be accessible in multiple places of your application, by components which oftentimes are not related in any way (they neither are parents or children of each other). An example of this would be certain user settings to configure how your application looks or what date format should be used, to name a concrete example.

Additional validation logic before sending a request to the external system

I'm publishing a comment on Instagram using their API. In the documentation they describe the rules that the message that is being sent has to pass. So far my approach always was to add the validation layer just before the message would be sent to the service checking if it satisfies all the requirements. I preferred to get back to the user quicker with the proper error without sending any requests to the social network.
It requires to maintain additional logic in my application and in case of Instagram, where rules are not so simple (like e.g. just limiting the length of the message) I started thinking if that's the optimal approach.
For example, one of the requirements on comments is that they cannot contain more than 4 hashtags which forces me to keep some logic to be able to check how many hashtags are in a string.
Would you think that the effort put into keeping that validation is worth it? I always thought so, but am not so sure any more.
Would you think that the effort put into keeping that validation is
worth it? I always thought so, but am not so sure any more.
Absolutely yes unless you don't care about user at all.
User is your primary value and his comfort is above all things. So, double validation is a must for a good software.
I think you shouldn't struggle to implement absolutely ALL Instagram checks, but at least most of those, that users fail most often.

How to implement form that requires users to validate email or phone number?

I'm trying to improve this form to make it a little more user friendly.
The main area I'm trying to improve is the validation process.
Right now, the form gets filled out on index page /, and the user is re-directed by the server to a /validate page. To improve the experience, the email or phone number is shown to the user so they can see whether they entered it correctly. (though rarely, it does happen)
I'm also not sure if the user should be given the opportunity to use another form of validation.
The one problem with the setup on the server side is storing the form information between page requests.
Currently I'm using the flash(one-time sessions) to store the email or the phone number. Once the user submits the form the session is lost.
I don't like using sessions for forms, because any time you have more than one window open (not that they should be in this case) the data can start to become unpredictable
I also don't want to use the url params for storing information, as this can have sensitive information being passed back and forth, and stored in browser history.
I was thinking I could do ajax, which I try not to use on sites facing a broad audience where someone is bound to be using an old version of IE.
The data I get from the form is stored in the database. I could use the GET method to store an id in params. If I use the id (or a random unique id) I run the risk of anyone guessing these ids and having access to other website users' email address and phone numbers.
I could also use a combination of the flash and hidden inputs with the unique id, but the danger of showing personal information is still there.

Mapping all Use Case flows of action to User Stories [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 5 years ago.
Improve this question
I'm attempting to write my requirements out as User Stories. Moving from a waterfall world, I am much more familiar with Use Cases.
One of the things I like about Use Cases is each interaction with the system is well-defined, as well as all the alternate and exception flows of action.
UC-01
Success Scenario:
The user navigates to the customer
The user clicks the Add Contract button
The user fills in the Contract Name, Contract #, Start Date and End Date fields
The system asks for confirmation
The user fills clicks the save button, and the contract is saved
Exceptions
5a. The user aborts, and the contract is not saved
Alternate flow
1a. The user uses the filter to select the customer
Where would the exception and alternate flows be captured in an Agile approach?
They wouldn't be captured as such.
You are approaching user stories from the wrong angle. Coming from waterfall this is quite a common misunderstanding.
Your story in this example should be something like:
As a user I want to add a contract to a customer so that [insert value here]
From the example you can note two things:
I can't finish it because I have no idea of what the value of this story is to the customer. This is quite important because it drives any negotiation over the story. For example, one doesn't want to spend a lot of time on stories which have a very marginal value.
There isn't much detail. This is on purpose, because the story tries to capture the problem or the opportunity, not the solution. As a user, there are many theoretical ways in which I can achieve my aim of adding a contract to a customer.
The focus of stories is letting the users achieve their goals.
Normally you can write details about how you currently speculate that the story will be implemented on the "back of the card" or in a notes field in your ALM tool, but the point I am trying to make is that stories are negotiable in how they are implemented.
Your developers are expected to interact with your customer representative during the iteration to discuss/prototype/try out the various different possible solutions so that the aim of the story is achieved efficiently and effectively.
A very simple and yet quite exemplary and typical example: what if you forget an edge case, alternate flow or exception? With stories, that's no problem: the developer discovers it, has a chat with the product representative, and they make up a plan to handle it.
You can do this because it's clear that handling these cases is part of the user story. Not so with the requirement, which is prescriptive on what the solution should be, instead of what it should achieve.
> Where would the exception and alternate flows be captured in an Agile approach?
A Use Case is a form of feature documentation.
This documentation can be created
before implementation (as specificatoin in waterfall)
during or after implementation or not at all (agil)
In Scrum you would just have a feature-request "Add Customer" in the Backlog without the scenarios.
Many agile practices do not dictate that you have to write your requirements out as user stories with acceptance criteria. All that is needed is a list of requirements (aka Product Backlog) that is ordered. When giving these requirements to the team in a sprint planning session they should be the minimal amount of information that is still clear enough for the team to understand and build. There is a fine line between doing too little grooming and over analysing the requirement; this takes time to get right.
Having said that, user stories are commonly used as they make sense to multiple parties involved in the process where other forms of requirements are limited to a specific audience; i.e. you have to teach people how to read and understand use cases but do not have to do that for user stories. Obviously writing it is a different problem.
I like #Sklivvz and #k3b answers.
Regarding your example.
First: As Sklivvz wrote, the User Story defines the problem and the goal. I differ in the opinion regarding side tracks and exceptions. Those are, in my eyes, small stories to. With there own priority. I.e. the ability to cancel the process could be of higher prio than some validation problem story.
My Answer in short: Write a story for the main goal, side goals, exceptions and alternate flows.
positive side effect: The product owner (you?) has the chance to prioritize those stories.
agree with some of the above and would like to add the following (hope this is useful).
Use Cases are not specifically/only related to waterfall, they are merely a means to visual behaviours (use cases) of a system and the relationships between those behaviours and other system behaviours, and external entities to the system (actors).
There is no reason why a user story cannot be further described by use cases and use case scenarios.
Remember, just because you are practicing (I guess, but not restricted too) Agile that does not means you cannot design stuff. Just don't let the design have more value over the result i.e the product (although in complex . safety systems this should be the case).
When you capture stories initially, they should be very brief and focused on benefits.
When you've discussed solution with the team and ready to start implementation, you should document it with more details.
I like Given/When/Then format and I'd re-write this Use Case into this (real goal may be different, but still you'll get the main idea):
Title:
As a user I want to add contract to customers so that I can track contracts history
Given customers list
When user clicks to Customer
Then he sees Customer Details view
And Add Contract button
[mockup]
Given Customer Details view
When user clicks Add Contract button
Then he see a popup with fields:
Contract Name - field spec: [default value, max lenth, etc]
Contract # - [field spec]
Start Date - [field spec]
End Date - [field spec]
[form mockup]
Given user filled form correctly
When he click Save button
Then he sees confirmation dialog ["Do you really want to add this contract?"]
[NOTE: I think this confirmation is stupid and not required]
Given user see a confirmation dialog
When he clicks Yes
Then the contract is saved
And user sees success message "Contract is saved for customer XXX"
Given user see a confirmation dialog
When he clicks No
Then the contract is not saved
And confirmation dialog closes
NOTE: most likely this scenario is a separate user story
Given home page
When I click Add Contract link
Then I see Contract form
And "Select customer" drop down field
...
As you see, you can quite easily use Given/When/Then format to describe user stories. It is very important to make sure that true value of user story is captured. Otherwise it is very easy to make some decisions that will be really bad from the business point of view.

Saving Ajax Form Data Best Practices

I am just wondering what general best practice is for saving data in Ajax Forms. In Spree ECommerce for example, every time you change a value in a list of objects (say you change the quantity of a certain Item in an Order), it updates the database with an Ajax call.
Is it better to have the User manually press "Save" or "Update" when they're done editing a form, or if you can (you have setup an ajax alternative), to just automatically save the data every time something changes?
It seems like Stack Overflow Careers saves a "Draft" of your profile every few seconds using some ajax thing.
As such, it seems like there's 3 ways to save data in a form if you have Ajax going:
User presses button, saves all data at once, not good if data is important
Save every time interval
Save every change
What do you recommend?
Good question. I don't think there's a one-size-fits-all best-practice that covers all situations. Generally, the more user-friendly your solution is, the greater the complexity of implementation, the less likely the potential for a proper gracefully degrading solution (unless you have been very, very careful).
Also, there are implications to whichever approach you have opted to go with. For example, autosaving periodically might not be a good idea where substantial data validation is involved. A user might type some stuff in, and get an error message after a few seconds. Instant feedback would be much more beneficial to the user in such a situation, as it is possible that the input which led to the failed validation was, say, a few actions ago, so it might be somewhat confusing to the user.
Saving whenever the user changes something (a keypress, a checkbox selection, etc.) would seem to be the way to go from a usability perspective, but again, it depends on what you are doing and could have negative side-effects. For example, if the user is on a slow connection, he/she might feel that your site is slow or buggy. It would also yield a lot more database queries than the old-school 'click save' method.
I guess an obvious way to get around some of the above caveats would be to incorporate on-the-spot client side validation, but what works in the end might well be down to what your hallway testers say.
Final recommendation: create the old-style 'click save to save' forms and enhance from there, making sure things don't break without javascript (unless you have express permission from a higher authority). Hope that wasn't all nonsense.
It all depends on the situation. If the form is going to change due to user input then you may be better served save/update form on every change. Otherwise wait for an explicit user action.
I can only see trouble on the horizon if you adopt an autosave strategy for a form..
I know this post is old, but I like this simple solution, if the user change som data on your form and try to leave page without saving it, I prompt a remember message
In a global .js:
var validate=false;
window.onbeforeunload = function() { if(validate) return "You made some changes, are you sure you want to leave?"; };
In the form page, (i did it in jquery):
$('input,textarea,select').change(function(){ validate=true; });
$('form').submit(function() { validate=false; });
BR!

Resources