GTM Blacklist specific div by class - analytics

I'd like to use the GTM blacklist feature for only not send the input values of the HTML input fields that belongs to a specific class.
So far I've been able to blacklist all the clicks, but this is just too much.
In the below example, I'd like not to send the inputPassword input (see the gtm-blacklist class)
<form novalidate="" class="ng-pristine ng-valid-email ng-invalid ng-invalid-required" name="form_login" ng-submit="login(user)">
<div class="form-group">
<!--<label class="control-label" for="inputEmail"> Email</label>-->
<input class="form-control ng-pristine ng-untouched ng-valid-email ng-invalid ng-invalid-required" type="email" id="inputEmail" placeholder="Email" ng-model="user.email" ng-initial="" required="">
<div class="field-underline"></div>
</div>
<div class="form-group">
<input class="form-control ng-pristine ng-invalid ng-invalid-required ng-touched gtm-blacklist" type="password" id="inputPassword" placeholder="Password" ng-model="user.password" ng-initial="" required="">
<div class="field-underline"></div>
</div>
<div class="form-group">
<button type="button" class="forgot-pass btn btn-link">Forgot password</button>
<button type="button" class="show-new-customer btn btn-link">Create an Account</button>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default btn-primary btn-login" disabled="disabled" ng-disabled="!user.email || form_login.$error.email"> Sign in</button>
</div>
</form>

Unfortunaltley, that isn't how the blacklist works.
The blacklist is for restricting which tags, triggers, and variables are allowed on a page.
To stop users with GTM access from scraping passwords, you could instead restrict the use of custom HTML and custom JavaScript on your login page.To do this, blacklist the customScripts class.
dataLayer = [{
...
'gtm.blacklist': ['customScripts']
}];
This works because none of the inbuilt variables will return an input value.

Related

Angularjs ng-disabled not working with autofill

When I reload the browser and show login page. Two input field for username and password are autofill with chrome.
But the login button is greyout and show "not allowed" cursor when hover on.
If I click anywhere in the page, the login button will be enable.
Here is my code for login form:
<form name="form">
<div class="form-group">
<input type="email" id="login-email" class="form-control"
name="email"
ng-model="vm.data.email"
required
placeholder="Email Address">
</div>
<div class="form-group">
<input type="password" id="login-password" class="form-control"
name="password"
ng-model="vm.data.password"
required
placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-rectangle btn-primary"
ng-click="vm.submit()"
ng-disabled="form.$invalid">Sign in
</button>
</div>
</form>
You may try autocomplete false.
<form name="form">
<div class="form-group">
<input type="email" id="login-email" class="form-control"
name="email"
ng-model="vm.data.email"
required
placeholder="Email Address" autocomplete="false">
</div>
<div class="form-group">
<input type="password" id="login-password" class="form-control"
name="password"
ng-model="vm.data.password"
required
placeholder="Password" autocomplete="false">
</div>
<div class="form-group">
<button type="submit" class="btn btn-rectangle btn-primary"
ng-click="vm.submit()"
ng-disabled="form.$invalid">Sign in
</button>
</div>

How to enable/disable button with validation in Angular JS

Expected: After Entering Valid Email ID pattern button should be enabled.
Happened: After Entering Valid Email ID button goes disabled.
This is my Input textfield in HTML:
<form class="form-inline">
<div class="form-group">
<label for="emailID">Enter Email ID</label>
<input type="email" class="form-control" id="emailID" ng-model="c.emailID" placeholder="Enter EmailID">
</div>
<div class="form-group">
<label for="Password">Enter Password</label>
<input type="password" class="form-control" id="password" ng-model="c.password" placeholder="Enter Password">
</div>
<button type="submit" ng-model="button" ng-click ="submit(c)" ng-disabled="c.emailID" class="btn btn-primary">Login</button>
This is my AngularjS Script :`
var myApp1=angular.module('myApp',[]);
myApp1.controller('myController',['$scope',function($scope)
{
$scope.submit=function(c)
{
}
}]);
First add a name to your form and to your input:
<form name="myForm" class="form-inline">
<input type="email" name="emailID" class="form-control" id="emailID" ng-model="c.emailID" placeholder="Enter EmailID">
Then change your ng-disabled:
<button type="submit" ng-model="button" ng-click ="submit(c)" ng-disabled="!(myForm.emailID.$valid && myForm.emailID.$dirty)" class="btn btn-primary">Login</button>
$dirty is added because we want the user to actually enter an value before we enable. Or you can add required on your input if its a compulsory input field.
Also refer: http://www.w3schools.com/angular/angular_validation.asp

data-ng-trim="false" is not working in angular

My html is
My html is
<form name="signInForm" novalidate="">
<div class="form-group has-feedback has-feedback-left">
<label class="control-label sr-only">Email address</label>
<input type="email" class="form-control" name="username" placeholder="Email address" required="" data-ng-model="user.username" data-ng-trim="false"/>
</div>
<div class="form-group clearfix">
<div class="pull-right">
<button type="submit" class="btn btn-primary submit-button" data-ng-click="signIn()">
<span class="submit-button-text">Sign in</span>
</button>
</div>
</div>
</form>
Controller :
$scope.signIn = function(isValid) {
$log.log("username is" + $scope.user.username + $scope.user.password);
}
when I clicked sign in button , mu user name white spaces are trim off. But I want that white spaces in my user name should retain so that I can track it and displayed error message.
So I used 'data-ng-trim = false' .
But it seems its not working.
Please help.
Unfortunately there ng-trim doesn't apply to input type="email". What you can do is change the input to type="text" in order to use the ng-trim, but this solution is not ideal.
See the Angular documentation for input type=email
You have to use ng-trim="false":
<input type="email" class="form-control" name="username"
placeholder="Email address" required=""
data-ng-model="user.username"
ng-trim="false"/>
If it is not working for you, please update you angularjs version here.

Doing AngularJS validation without making use of form element?

Is it possible to make use of the angularJS validation tools without wrapping the controls in a form, and what would this be called?
Normal angularjs form validation example:
<form name="form" class="form-validation">
<p class="text-muted">Please fill the information to continue</p>
<div class="form-group">
<label>Username <em class="text-muted">(allow 'a-zA-Z0-9', 4-10 length)</em></label>
<input type="text" class="form-control" ng-model="user.name" ng-pattern="/^[a-zA-Z0-9]{4,10}$/" required >
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" ng-model="user.email" required >
</div>
<button type="submit" class="btn btn-success" ng-disabled="form.$invalid">Submit</button>
</form>

unable to edit/modify fields in my angularjs form

I am displaying a form in a modal. But when I click on the text input field it is not allowing me to enter text. similarly unable to change/select radio buttons
But when trying with "tab" it is working.
code
<form role="form" name="basicDetails" class="form-validation">
<div class="col-sm-6 b-r">
<h3 class="m-t-none m-b font-thin">Basic Details</h3>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="Enter Email" ng-model="email" required>
</div>
<div class="form-group">
<label>User Name</label>
<input type="text" class="form-control" placeholder="Enter User Name" ng-model="username" ng-pattern="/^[a-zA-Z ]{1,17}$/" required>
</div>
</div>
<div class="checkbox m-t-lg">
<button type="submit" class="btn btn-sm btn-success pull-right text-uc m-t-n-xs" ng-click="ok()"><strong>UPDATE</strong></button>
<button type="submit" class="btn btn-sm btn-danger pull-right text-uc m-t-n-xs" ng-click="close()"><strong>CLOSE</strong></button>
</div>
</form>
inspect element shows
Can someone help me to trace the issue.

Resources