I am trying to integrate paypal as a payment option. As I have done it (which works) is not using any paypal snd but just the simple html form. Ive been looking at it for a while and perhaps my question is stupid, but I don't understand what the difference is to just using the html form or (at paypal developer provided sdk)? Could someone explain please?
Also, I am trying to write a backend route with nodes/express. I set up the notify url for paypal which - as I understand- will return to me an object containing data (what was paid, the users paypal id etc.).
so what I did was:
1. set up notify url which goes to the (angular state) /summary. - Im not sure if it perhaps should be the backend url and not the state.
2. then I have the fronted http call (as I also want to display a purchase summary to customer after he paid at paypal).
3. route in the backend to post to db.
I have been looking a lot a different documentation and tutorials but don't quite understand it and if anyone would have a few min explaining it to me, that would be amazing!! Thank you!
app.controller('summaryCtrl', function($scope, $http){
return $http.post('api/order/summary', {???})
.then(function(paypalObj){
$scope.paypalObj=payppalObj;
})
// here I am not sure what Im sending/how do I know what the object Im getting back from paypal named)
})
router.post('/summary', function(req, res, next){
console.log(req.body,res, 'paypal')
User.findById(req.user.id)
....
Order.create
...
})
html form:
<form method="POST" accept-charset="utf-8" action="https://www.sandbox.paypal.com/xxx/xxx" name="pp" id="pp">
<input type="hidden" name="cmd" value="_xclick" class="validate">
<input type="hidden" name="business" value="name#yahoo.com" required="required">
<input type="hidden" name="currency_code" value="USD" required="required">
<input type="hidden" name="quantity" value="{{quantity}}" required="required">
<input type="hidden" name="amount" value="{{price}}" required="required">
<input type="hidden" name="return" value="http://localhost:1337" required="required">
<input type="hidden" name="cancel_return" value="http://localhost:1337/about" required="required">
<input type="hidden" name="notify_url" value="http://localhost:1337/api/order/summary" required="required">
</form>
insight my angular controller (as Im using angular:
$scope.paypalPay=function(){
$('#pp').get(0).submit()
};
We have to validate a value give by users for URL Field.
System ask Facebook, Twitter, Google+ & etc
Can anyone suggest us with best way.
We are using the following pattern,
/((?:https?\:\/\/www\.)|(?:[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$))/i
Thanks,
You can start with using input type as url
example
<form name="form1" ng-controller="x">
<label>Enter Site Name:</label>
<input type="url" ng-model="initialwebsite" name="name" required />
<span style="color:red" ng-show="form1.name.$error.required">
You Can't Leave This Field Empty</span>
<span style="color:red" ng-show="form1.name.$error.url">
Sorry Not a Valid URL, Don't Forget to Use http://</span>
<input type="submit" value="Submit"/>
</form>
For further validation you can refer this link
As example, you can try this one
"#([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\x00A0-\xD7FF\xF900-\xFDCF\xFDF0-\xFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*#)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|-|\.|_|~|[\x00A0-\xD7FF\xF900-\xFDCF\xFDF0-\xFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\d*)?)(\/(([a-z]|\d|-|\.|_|~|[\x00A0-\xD7FF\xF900-\xFDCF\xFDF0-\xFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)*)*|(\/((([a-z]|\d|-|\.|_|~|[\x00A0-\xD7FF\xF900-\xFDCF\xFDF0-\xFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)+(\/(([a-z]|\d|-|\.|_|~|[\x00A0-\xD7FF\xF900-\xFDCF\xFDF0-\xFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)*)*)?)|((([a-z]|\d|-|\.|_|~|[\x00A0-\xD7FF\xF900-\xFDCF\xFDF0-\xFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)+(\/(([a-z]|\d|-|\.|_|~|[\x00A0-\xD7FF\xF900-\xFDCF\xFDF0-\xFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)*)*)|((([a-z]|\d|-|\.|_|~|[\x00A0-\xD7FF\xF900-\xFDCF\xFDF0-\xFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)){0})(\?((([a-z]|\d|-|\.|_|~|[\x00A0-\xD7FF\xF900-\xFDCF\xFDF0-\xFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)|[\xE000-\xF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\x00A0-\xD7FF\xF900-\xFDCF\xFDF0-\xFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)|\/|\?)*)?#iS"
I am using ng-token-auth with angular/ionic that connects to a rails api. I am currently working on the login page. I have the following form in the code:
<form ng-submit="submitLogin(loginForm)" role="form" ng-init="loginForm = {}">
<input type="email"
name="email"
id="email"
placeholder="Email"
ng-model="loginForm.email"
required="required" />
<input type="password"
name="password"
id="password"
placeholder="Password"
ng-model="loginForm.password"
required="required" />
<button type="submit" class="button button-block button-positive">Sign in</button>
</form>
The submitLogin function succesfully sends a post request to:
POST http://localhost:8100/api/auth/sign_in
The problem is that this is on the ionic server. The rails app is located at localhost:3000. How do I get the post request to go to that URL. Since almost every single angular api ever created will be sending requests to a different server, I have to imagine this is included somehow.
You have to change default apiUrl in your app.js file (or whatever you called it) using .config
angular.module('myApp', ['ng-token-auth'])
.config(function($authProvider) {
$authProvider.configure({
apiUrl: 'http://localhost:3000'
});
});
Here is the link to all possible configuration options for
ng-token-auth
I have a form like this:
<form ng-submit="loginFormSubmit()">
<label>
Email address
<input type="email" required ng-model="credentials.email">
</label>
<br>
<label>
Password
<input type="password" required ng-model="credentials.password">
</label>
<input type="submit" value="Log In">
</form>
How can I ensure that the $scope.credentials object is secure and inaccessible? Is there a way to not store the form fields' value in the model at all and simply grab their values when the submit function is called?
More generally, what are the best practices for handling sensitive form data in AngularJS?
If someone has access to your model then they also have access to your DOM and type="password" can easily be changed to type="text" to view the value of the input box.
My recommendation is to be diligent and clear the model values as soon as you've submitted them to the server for verification. (or at least the password)
I'm trying to learn angularjs, and at the moment am looking at forms and form validation. By following the docs on the angular site, I have a template html file as follows:
<form role="form" name="fnolForm" novalidate autocomplete="off" data-ng-submit="submit()">
<fieldset class="form-group">
<legend>Information about you</legend>
<label data-ng-class="{'has-error' : fnolForm.submitError && fnolForm.name.$invalid}">
Your name
<input class="form-control" type="text" data-ng-model="fnol.insuredParty.name" name="name" required/>
<span class="error" data-ng-show="fnolForm.submitError && fnolForm.name.$error.required">Please provide your name</span>
</label>
<label data-ng-class="{'has-error' : fnolForm.submitError && fnolForm.phoneNumber.$invalid}">
Contact number
<input class="form-control" type="tel" data-ng-model="fnol.insuredParty.phoneNumber" name="phoneNumber" required/>
<span class="error" data-ng-show="fnolForm.submitError && fnolForm.phoneNumber.$error.required">Please provide your contact number</span>
</label>
<label data-ng-class="{'has-error' : fnolForm.email.$error.email || (fnolForm.submitError && fnolForm.email.$invalid)}">
Email address
<input class="form-control" type="email" data-ng-model="fnol.insuredParty.email" name="email" required/>
<span class="error" data-ng-show="fnolForm.submitError && fnolForm.email.$error.required">Please provide your email address</span>
<span class="error" data-ng-show="fnolForm.email.$error.email">Please enter a valid email address</span>
</label>
</fieldset>
and in my controller I am doing:
$scope.submit = function() {
if ($scope.fnolForm.$valid) {
// client side validation has passed, do something ....
} else {
// client side validation has failed
$scope.fnolForm.submitError = true;
}
};
Whilst my validation works fine, it doesn't feel right on a number of counts:
Business logic (validation rules) is mixed up with view concerns
The validation rules are not (obviously) testable
Client side validation is easy to work/hack around - needs to be backed up by server-side validation
I'm sure there's a solution to the last point (validation rules being backed up by server side validation); but the first two worry me
Is this really the right way to do client side validation in angular? Do we really have to write the rules within the template like that? And if we do, how on earth are we supposed to unit test the validation rules?
Would be interested in anyone's views (no pun intended :)) on this;
Cheers
Nathan
Edit 31/03/14 19:50
Having read the comments and re-read the code I've pasted, I think I originally had difficulty accepting the fnolForm.submitError && fnolForm.name.$invalid type logic within the view.
However, on reflection I can now see that this is not actually the business logic that determines form validation, it is purely presentation sugar. IE. we can strip all of that out and the form still has the same validation rules:
<form role="form" name="fnolForm" novalidate autocomplete="off" data-ng-submit="submit()">
<fieldset class="form-group">
<legend>Information about you</legend>
<label>
Your name
<input class="form-control" type="text" data-ng-model="fnol.insuredParty.name" name="name" required/>
</label>
<label>
Contact number
<input class="form-control" type="tel" data-ng-model="fnol.insuredParty.phoneNumber" name="phoneNumber" required/>
</label>
<label>
Email address
<input class="form-control" type="email" data-ng-model="fnol.insuredParty.email" name="email" required/>
</label>
</fieldset>
In the above case, my form's validation rules are determined by standard html5 attributes (required, type="email" etc) which angularjs is providing the cross browser logic for, so I don't need to unit test that. And I know that angularjs provides custom additional field validators for mix/max length etc (directives), so I don't to test those either.
But I still can't help thinking that I need to test my form as a unit, in particular whether it's valid or not.
For example, the domain business rules might say that the form can only be submitted if the name, phone number and email fields are all filled out, and that the email address field contains a valid (formatted) email address.
In this case I would want to write a series of unit tests where I populate the form objects properties with various combinations of data, and assert the validity of the form.
Maybe the problem is that I'm coming from a java background, and the above pattern re: unit testing is certainly what I'm used to.
OK, after considering the various options, comments and answers offered (thanks guys), I've gone with a solution based around writing a validation service, and injecting that into the controller.
This seems to ticks the most boxes for me as it means I have a clear definition of what constitutes a valid form, and its testable. But in addition it also uses angularjs directives etc to decorate the form (as per my original markup) - the presentation sugar :)
So, this is my final solution. This is my view template as before:
<form role="form" name="fnolForm" novalidate autocomplete="off" data-ng-submit="submit()">
<fieldset class="form-group">
<legend>Information about you</legend>
<label data-ng-class="{'has-error' : fnolForm.submitError && fnolForm.name.$invalid}">
Your name
<input class="form-control" type="text" data-ng-model="fnol.insuredParty.name" name="name" required/>
<span class="error" data-ng-show="fnolForm.submitError && fnolForm.name.$error.required">Please provide your name</span>
</label>
<label data-ng-class="{'has-error' : fnolForm.submitError && fnolForm.phoneNumber.$invalid}">
Contact number
<input class="form-control" type="tel" data-ng-model="fnol.insuredParty.phoneNumber" name="phoneNumber" required/>
<span class="error" data-ng-show="fnolForm.submitError && fnolForm.phoneNumber.$error.required">Please provide your contact number</span>
</label>
<label data-ng-class="{'has-error' : fnolForm.email.$error.email || (fnolForm.submitError && fnolForm.email.$invalid)}">
Email address
<input class="form-control" type="email" data-ng-model="fnol.insuredParty.email" name="email" required/>
<span class="error" data-ng-show="fnolForm.submitError && fnolForm.email.$error.required">Please provide your email address</span>
<span class="error" data-ng-show="fnolForm.email.$error.email">Please enter a valid email address</span>
</label>
</fieldset>
I have written a service as follows:
fnolService.factory("FnolFormValidator",
[
function() {
return function(fnol) {
return !!(fnol &&
fnol.insuredParty &&
fnol.insuredParty.name &&
fnol.insuredParty.phoneNumber &&
fnol.insuredParty.email &&
fnol.insuredParty.email.match(/^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i) !== null);
}
}
]
);
And I inject it into my controller and use it as follows:
fnolControllers.controller("ReportAccidentController",
[
"$scope",
"$modal",
"fnol",
"FnolFormValidator",
function($scope, $modal, fnol, FnolFormValidator) {
$scope.submit = function() {
if ($scope.fnolForm.$valid && FnolFormValidator($scope.fnol)) {
// client side validation has passed, do something ....
} else {
// client side validation has failed
$scope.fnolForm.submitError = true;
}
};
I quite like this solution because it allows me to unit test the validation rules of the form (ie. the FnolFormValidator service) and also the controller logic. And if I want to test the presentation sugar, then I could write something with Selenium or similar.
To me it feels like the right level of separation of concerns.
I guess it's just how you look at it. I understand where the concern comes in about business logic. I guess I see I don't see it that way though. It's simply just displaying feedback to the user. The logic for this to happen is actually located within the form object. So you are just calling expressions for it to be evaluated elsewhere.
I personally like to keep it there within the view. It feels like it belongs there (although it does start to make simple forms feel a bit bloated). But if you'd rather, you could implement it within the controller. $scope.fnolForm.submitError etc. However, if you wanted real-time feedback, you'd need to put an ng-change() on the input to mimic it. And then set a flag to have your ng-show/hide to evaluate against.
To answer your first point, it's true that it can seem a little mixed up with form validation.
But, all the business logic for setting those error values is taken care of behind the view, and the view is only looking at them or at combinations of them to decide how to display the errors.
But it is alot of code in the view, so my suggestion would be to use a directive for your inputs. See http://docs.angularjs.org/guide/directive .
A directive can wrap up your inputs into 1 'element' and you can just pass in the important pieces. And the directive handles all the code and logic for errors, so you don't need to do that directly in the view. You will just need to require a form element as a parent of your directive and then you can pull the controller for that in as the 4th parameter on your directive's link function. The documentation on directives is extensive and will cover all of that.
Hope that helps!
That's how I am doing the client side validation too. Let me try to answer your questions.
Business logic (validation rules is mixed up with view concerns)
If you also work on the server-side validation, actually angular form validation do not interfere with business logic but they just decide how to show errors or warnings to users, which is totally front-end.
The validation rules are not (obviously) testable
You cannot probably test these validation rules with unit testing but you can definitely test them with e2e or functional testing using selenium drivers. I think it's better to test front-end stuff with e2e testing.
As you noticed, you should always use server-side validation even though you have these nice angular-style client side validation.