Autofill UserId on AngularJS Login Page - javascript

I'm working on a iOS app that uses a WKWebView to log into a website. The website presents a login form written in AngularJS that takes a UserId and Password. I'm attempting to pre-fill the UserId using javascript to fill in the appropriate value:
document.getElementsByName('UserId')[0].value = 'MyUserId'
Once submitted, the form returns 'invalid credentials' as if the userid input field has been left blank. If I subsequently make any manual changes to the UserId input field and resubmit it works.
I have verified that the UserId does contain the correct value. I have also tried to change the AngularJS field attributes prior to submitting the form:
ng-dirty ng-valid-parse ng-touched ng-not-empty ng-valid ng-valid-required
Within my javascript code, I make sure to convert the UserId to a javascript compatible string:
UserId.toString()
Manually typing the UserId and autofill from 1Password works as expected.
I would appreciate any suggestions or advice.
The angular code for the form:
<form class="spark-splash-screen__form spark-text-left ng-dirty ng-valid-parse ng-valid ng-valid-required" novalidate="" name="loginCtrl.loginForm" ng-submit="loginCtrl.submitForm()">
<p class="spark-margin-top--lg spark-margin-bottom" translate="">Sign In to.</p>
<label class="spark-input" fang-input="" ng-class="{
'active': loginCtrl.formData.id
}">
<input class="spark-input__field ng-touched ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required" name="UserId" placeholder="Enter User ID..." role="textbox" required="" ng-model="loginCtrl.formData.id" autofocus="">
<span class="spark-label">User ID</span>
</label>
<label class="spark-input" fang-input="" ng-class="{
'active': loginCtrl.formData.password
}">
<input type="password" class="spark-input__field ng-touched ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required" name="Password" placeholder="What is your password?" role="textbox" required="" ng-model="loginCtrl.formData.password">
<span class="spark-label">Password</span>
<span class="spark-input__addon spark-input__password-toggle">
<i class="spark-input__password-show spark-icon--md spark-icon-password-view"></i>
<i class="spark-input__password-hide spark-icon--md spark-icon-password-hide"></i>
</span>
</label>
<fieldset class="row">
<label class="col-xs-12 spark-checkbox">
<input class="spark-checkbox__input ng-pristine ng-untouched ng-valid ng-empty" type="checkbox" name="RememberMe" ng-model="loginCtrl.formData.rememberMe">
<span class="spark-checkbox__box"></span>
<span class="spark-label" translate="">Remember Me</span>
</label>
</fieldset>
<div class="row">
<div class="col-xs-12 spark-margin-top">
<button type="submit" class="spark-btn spark-btn--md spark-btn--primary spark-block--lte-sm spark-margin-bottom--md spark-pull-right--gte-sm" ng-disabled="loginCtrl.formSubmiting" translate="">Sign In</button>
<div class="spark-splash-screen__help-container spark-pull-left--gte-sm">
<button type="button" class="spark-btn spark-btn--text spark-splash-screen__help spark-margin-bottom--sm" translate="" ng-click="loginCtrl.openDialog('findUserOrPass')">Forgot User ID or Password?</button>
<button type="button" class="spark-btn spark-btn--text spark-splash-screen__help spark-margin-bottom--sm" translate="" ng-click="loginCtrl.openDialog('firstTimeUser')">First-Time User</button>
</div>
</div>
</div>
</form>
This is the answer I figured out after being pointed in the right direction:
document.getElementsByName('UserId')[0].value = useridField;
angular.element(document.getElementsByName('UserId')).scope().loginCtrl.formData.id = useridField;

Try also assigning the ng-model (loginCtrl.formData.id)
From loginCtrl, which I assume is the controller:
document.getElementsByName('UserId')[0].value = 'MyUserId';
formData.id = 'MyUserId';
If you're doing this asynchronously, you may need to $apply:
document.getElementsByName('UserId')[0].value = 'MyUserId';
$scope.$apply(function() {
formData.id = 'MyUserId';
});

This is the answer I figured out after being pointed in the right direction:
document.getElementsByName('UserId')[0].value = useridField;
angular.element(document.getElementsByName('UserId')).scope().loginCtrl.formData.id = useridField;

Related

Not detecting auto fill with javascript

I am working on a project. My goal is to automatically fill in data on a website.
But when I run the JavaScript code
just like this:
document.getElementsByClassName('form-control')[1].value = "MYTEXT";
The form is changing. But when I click the submit button it says this is empty.
I think this website using Angular Js.
This is what I'm working on
<input spellcheck="false" autocapitalize="none"
class="form-control input-sm ng-pristine
ng-untouched ng-valid ng-empty ng-valid-maxlength"
type="text" ng-model="render.etudName" maxlength="60"
ng-change="saveRenderer()" >
How do I solve this problem?
HTML Document is too long.
Some of the html.
<html class="no-js ng-scope" lang="tr" ng-app="VitaminMiddleSchoolApp" id="ng-app" xmlns:ng="http://angularjs.org"><!--<![endif]--><head><style type="text/css">[uib-typeahead-popup].dropdown-menu{display:block;}</style><style type="text/css">.uib-time
<!-- uiView: main --><div ui-view="main" class="vc-fullHeight ng-scope" autoscroll="false" style=""><div ng-controller="mainViewController" class="ng-scope"> <!-- ngIf: !render.shouldUpdatePass --><div ng-if="!render.shouldUpdatePass" id="componentMainView" class="vc-fullHeight ng-scope" fullscreen="false" header-scrolled="false" ng-switch="headerType"
<div class="p-h-xxs ng-binding">Canlı Ders Başlığı *</div> <input spellcheck="false" autocapitalize="none" class="form-control input-sm ng-pristine ng-untouched ng-valid ng-empty ng-valid-maxlength" type="text" ng-model="render.etudName" maxlength="60" ng-change="saveRenderer()"> </div> <div class="col-sm-3 p-xs"> <div class="p-h-xxs ng-binding">Sınıf *</div> <select class="form-control input-sm ng-pristine ng-untouched ng-valid ng-not-empty" name="grade" ng-change="gradeChanged()" ng-options="grade as grade.name for grade in render.grades" ng-model="render.selectedGrade" style=""><option label="5. Sınıf" value="object:3634" selected="selected">5. Sınıf</option><option label="6. Sınıf" value="object:3635">6. Sınıf</option><option label="7. Sınıf" value="object:3636">7. Sınıf</option><option label="8. Sınıf" value="object:3637">8. Sınıf</option></select> </div> <div class="col-sm-3 col-xs-6 p-xs"
You can try to change the $scope. Like this:
document.getElementsByClassName('form-control')[1].scope().value = "MYTEXT";
Read more about the $scope usage in AngularJS from here.

Retrieve values for select box from database at login page

I have created a login form. It include the Customer Name,Username,Password. Customer Name is list of different customers. I have to update the list from database. Can anyone help to solve this issue. Thanks.
My html code for login page is,
<div id="divcust" class="form-group">
<select class="form-control" id="customerlist" placeholder="Customer Name" autofocus required>
<option value="">Select Customer</option>
</select>
</div>
<div id="divusr" class="form-group has-feedback">
<input type="text" id="txtUid" name="username" data-validation="alphanumeric" class="form-control" placeholder="UserName" tabindex="1"/>
<span class="glyphicon glyphicon-user form-control-feedback"></span> </div>
<div id="divpwd" class="form-group has-feedback">
<input type="password" id="txtPwd" name="password" data-validation="length" data-validation-length="min5" class="form-control" placeholder="Password" tabindex="2"/>
<span class="glyphicon glyphicon-lock form-control-feedback"></span> </div>
<div id="divtc"class="form-group has-feedback" >
<input type="checkbox" id="cbtnc" name="check" data-validation="required" data-validation-error-msg="You have to agree to our Terms and Conditions to access" class="minimal" tabindex="3"/>
I accept the Terms and Conditions of access.
<span class="glyphicon form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-offset-8 col-xs-4">
<button type="button" id="btnLogin" class="btn btn-primary btn-block btn-flat" onclick="verifyLogin();" tabindex="4">Sign In</button>
</div>
I used jQuery to use $.ajax() method.
My JSFiddle: https://jsfiddle.net/m6vrfmw1/2/
To use jQuery in your project, add <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
into your <head> tag.
Inside the $.ajax() method, I used $.each() method to iterate over the JSON data and append them into the <select> tag.
$.ajax({
url: "https://www.json-generator.com/api/json/get/clwcxTNthK?indent=2", // URL to fetch data from DB
success: function(data) {
$.each(data, function(index, item){
$("#customerlist").append('<option value="[Add Custom Value Here]">' + item.name + '</option>');
});
}
});

How to remove password saved by remember me option by browser using Angular.js and Javascript

I have one issue in my password field and user name field using Angular.js.I have a login page.Suppose user clicked on remember me option of browser after the login.These saved user name and password is displaying on my username field and password field.I am explaining my code below.
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">User Name :</span>
<div ng-class="{ 'myError': billdata.uname.$touched && billdata.uname.$invalid }">
<input type="text" name="uname" id="uname" class="form-control" placeholder="add user Name" ng-model="login_name" ng-minlength="6" ng-keypress="clearField('uname');" tabindex="6" >
</div>
</div>
<div class="help-block" ng-messages="billdata.uname.$error" ng-if="billdata.uname.$touched">
<p ng-message="minlength" style="color:#F00;">This field is too short.The min length of your user name should be 6.</p>
</div>
<div class="input-group bmargindiv1 col-md-12" ng-hide="showpass">
<span style="position:absolute; right:5px; margin-top:6px; top:0px;"><button class="btn btn-xs btn-success"ng-mousedown="hideShowPassword();" ng-mouseup="hideShowPassword();" ng-mouseleave="hidePassAfterLeave();" ><i class="fa fa-eye"></i></button></span>
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Password :</span>
<div ng-class="{ 'myError': billdata.pass.$touched && billdata.pass.$invalid }">
<input type="{{inputType}}" name="pass" id="passno" class="form-control" placeholder="password" ng-model="password" ng-minlength="8" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[_!##\$%\^&\*])(?=.{8,})/" ng-keypress="clearField('passno');" tabindex="7" >
</div>
The Login credentials used by user at the time of login is available where ever the username and password filed is found which i dont need.Here I need blank user name and password field even the user clicked remember me option of browser.Please help me to resolve this issue .
Try to add 2 hidden inputs to start of your form:
<form autocomplete="off">
<div style="display: none;">
<input type="text" id="PreventChromeAutocomplete"
name="PreventChromeAutocomplete" autocomplete="username" />
<input type="password" id="PreventChromePasswordAutocomplete"
name="PreventChromePasswordAutocomplete" autocomplete="password" />
</div>
<!-- Rest form -->
</form>
you can try this
<input type="password" autocomplete="off" />
try adding autocomplete="off" on your form also
<form autocomplete="off" ...></form>
Try using javascript as :
$('#passno').attr("autocomplete", "off");
or add (autocomplete="off") attribute in html input tag :
For more info, refer http://www.w3schools.com/tags/att_input_autocomplete.asp
Try same for username field as well. :)

e.preventDefault(); stopping form from submitting when valid using Stripe's jquery.payment

I'm using Stripe's jQuery plugin to validate credit card entry fields before details are being sent off for server side validation, but using Stripe's example my form will not submit, even when credit card data is valid.
The server side validation catches any issues, but I'd like to give users isntant feedback if there's an error in their data before it goes off to the server.
Stripe's jQuery plugin: https://stripe.com/blog/jquery-payment.
Their example: http://stripe.github.io/jquery.payment/example/
I'm using Bootstrap 3.3.4 and jQuery 1.11.2
My Form:
<form novalidate autocomplete="on" name="securepay" id="securepay" method="post" action="?func=validate" data-toggle="validator">
<div class="form-group col-sm-6">
<label for="cc-number" class="control-label">Card Number:</label>
<input id="cc-number" name="cc-number" type="tel" class="form-control cc-number paymentInput" autocomplete="cc-number" placeholder="•••• •••• •••• ••••" data-error="Please enter the long card number" value="" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="cc-exp" class="control-label">Expiry Date:</label>
<input id="cc-exp" name="cc-exp" type="tel" class="form-control cc-exp paymentInput" autocomplete="cc-exp" placeholder="MM / YY" data-error="Please enter the expiry date shown on the card" value="" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="cc-cvc" class="control-label">CVC Number:</label>
<input id="cc-cvc" name="cc-cvc" type="tel" class="form-control cc-cvc paymentInput" autocomplete="off" placeholder="•••" data-toggle="popover" data-trigger="focus" data-placement="right" title="CVC Security Number" data-content="On most cards, the 3-digit security code is on the back, to the right of the signature. On American Express cards, the 4-digit security code is on the front, to the top-right of the card number." data-error="Please enter the CVC number" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="cc-name" class="control-label">Name on Card:</label>
<input id="cc-name" name="cc-name" type="text" class="form-control cc-name paymentInput" autocomplete="cc-name" data-error="Please enter your name as specified on the card" value="" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="cc-terms" required><span class="text-info small">Please confirm that you agree to our Terms and Conditions</span>
</label>
</div>
</div>
<div class="form-group col-sm-12">
<button type="submit" id="secure-submit" class="btn btn-primary margin-10">Make Payment</button>
</div>
</form>
My Javascript:
$(function () {
$('[data-toggle="popover"]').popover({container: 'body'})
//Form Validation
$('#securepay').validator()
//$('[data-text]').payment('restrictText');
$('.cc-number').payment('formatCardNumber');
$('.cc-exp').payment('formatCardExpiry');
$('.cc-cvc').payment('formatCardCVC');
$.fn.toggleInputError = function(erred) {
this.parent('.form-group').toggleClass('has-error', erred);
this.parent('button').toggleClass('disabled', erred);
return this;
};
$('form').submit(function(e) {
e.preventDefault();
var cardType = $.payment.cardType($('.cc-number').val());
$('.cc-number').toggleInputError(!$.payment.validateCardNumber($('.cc-number').val()));
$('.cc-exp').toggleInputError(!$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal')));
$('.cc-cvc').toggleInputError(!$.payment.validateCardCVC($('.cc-cvc').val(), cardType));
$('.cc-brand').val(cardType);
});
});
The problem is it uses e.preventDefault(); which causes the form to not submit, even if the validation passes.
I'd like to use preventDefault(); to stop the form from being submitted if there's an error, but what would be the best way implament it so that the form will submit when the validation passes? I'd tried a few different options, but I just don't seem to be able to get it to work the way I want it to.
at the end of your function you can add
$(this).unbind('submit').submit()
if the validation passed.
maybe I am a little late, but perhaps it can be useful to someone..
$('form').submit(function(e) {
e.preventDefault();
var cardType = $.payment.cardType($('.cc-number').val());
$('.cc-number').toggleInputError(!$.payment.validateCardNumber($('.cc-number').val()));
$('.cc-exp').toggleInputError(!$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal')));
$('.cc-cvc').toggleInputError(!$.payment.validateCardCVC($('.cc-cvc').val(), cardType));
$('.cc-brand').val(cardType);
//check if there are errors
if(!$('.has-error').length) {
// The answare of #loli
$(this).unbind('submit').submit();
}
});

Watin - Submit button remain disabled after filling form

I have a website which I need to login to automatically.
I am trying to use Watin .NET library in order to do that.
When I fill out the user name and password fields using Watin, the sumbit button remains disabled.
I tried applying many events on the other fields (KeyPress, KeyDown, KeyUp, Tab, Enter...) Nothing worked.
Pardon me for finding the button by value, but this is the only way that I found that worked.
var field = ie.TextField(Find.ByName("userName"));
field.TypeText("username");
field.KeyDown();
field.KeyUp();
field = ie.TextField(Find.ByName("password"));
field.TypeText("pwd");
field.KeyDown();
field.KeyUp();
ie.Button(Find.ByValue("התחבר")).Click();
I am getting an exception that the button is disabled.
The page which I need to login to is:
https://portal.dorad.co.il/#/Login
All that I want is to find an automatic way to make the sumbit button enabled so that I can login.
Login Form Code:
<form class="span5 offset4 loginForm ng-pristine ng-invalid ng-invalid-required" name="loginForm" ng-submit="doLogin()" autocomplete="off">
<h2>
Login
</h2>
<fieldset>
<div class="control-group">
<label class="control-label" for="fullName">
User Name
</label>
<div class="controls">
<input name="userName" id="useName" ng-required="true" type="text" ng-model="user.userName" auto-fill-sync="" autocomplete="off" class="ng-pristine ng-invalid ng-invalid-required" required="required">
<span class="alert alert-error" ng-show="loginForm.userName.$error.required && loginForm.userName.$dirty" style="display: none;">
Mandatory Field
</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="emailAddress">
Password
</label>
<div class="controls">
<input name="password" id="password" type="password" ng-model="user.password" auto-fill-sync="" ng-required="true" autocomplete="off" class="ng-pristine ng-invalid ng-invalid-required" required="required">
<span class="alert alert-error" ng-show="loginForm.password.$error.required && loginForm.password.$dirty" style="display: none;">
Mandatory Field
</span>
</div>
</div>
</fieldset>
<input type="submit" class="btn" value="התחבר" ng-disabled="loginForm.$invalid" disabled="disabled">
</form>
This might be due to firing of an event getting blocked.
Try using:
Element fg = ie.TextField(Find.ByName("password"));
fg.DomContainer.RunScript("$('#"+fg.id+'").change();");
This solved a similar problem for me.
Ok. Then try to use Eval function which takes java script code. Pass the two elements to the below method and check.
private void ChangeAndBlur(Element element)
{
try
{
element.DomContainer.Eval(string.Format("$('#{0}').change()", element.Id));
element.DomContainer.Eval(string.Format("$('#{0}').blur()", element.Id));
}
catch
{ }
}

Categories

Resources