Some time post request takes query string i.e localhost/?password=123456 Don't know why do we need to add button type="button" or type="submit" please suggest thanks
<form name="login" novalidate>
<div class="row">
<input type="text" required name="email" id="username" ng-model="email" class="with-border" autofocus=true auto-focus>
</div>
<div>
<input type="password" required name="password" id="password" ng-model="password" class="with-border" >
</div>
<a class="pull-left recover-password f-pass-valign" href="#!/forgotpassword">Forgot password?</a>
<div class="form-group">
<button ng-click="login(user.email, password)" type="button" class="btn btn-danger">Login</button>
</div>
</form>
<form name="login" novalidate method="post">
<div class="row">
<input type="text" required name="email" id="username" ng-model="email" class="with-border" autofocus=true auto-focus>
</div>
<div>
<input type="password" required name="password" id="password" ng-model="password" class="with-border" >
</div>
<a class="pull-left recover-password f-pass-valign" href="#!/forgotpassword">Forgot password?</a>
<div class="form-group">
<button ng-click="login(user.email, password)" class="btn btn-danger">Login</button>
</div>
</form>
use method as post if you setup button type button then it will work on button click only
Related
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>
when I upload the login page the button will be gray when I click on the screen the button will turn to blue focus is missing please help me with this
Html Code:
<main id="frontpage">
<form id="login-form" name="login_form" novalidate>
<div ng-class='{"input-block": true, "input-block-focus": username_focused, "input-error": login_form.username.$touched&&login_form.username.$invalid, "input-block-disabled":submit_button_value}'>
<div>
<label class="labels">Username</label>
</div>
<input class="loginForm_input" name="username" ng-model="user.username" ng-focus="username_focused=true" ng-blur="username_focused=false"
placeholder="Enter your username" type="text" ng-disabled="submit_button_value" required>
</div>
<div ng-class='{"input-block": true, "input-block-focus": password_focused, "input-error": login_form.password.$touched&&login_form.password.$invalid, "input-block-disabled":submit_button_value}'>
<div>
<label class="labels">Password</label>
</div>
<input class="loginForm_input" name="password" ng-model="user.password" ng-focus="password_focused=true" ng-blur="password_focused=false"
placeholder="Enter your password" type="{{password_type}}" ng-disabled="submit_button_value" required>
<span ng-click="showHidePassword()" ng-class='{"eye-icon-open":password_visible, "eye-icon-close":!password_visible, "pull-right": true}'></span>
</div>
<div>
<button ng-class='["btn", "btn-primary", "horizontal-center", "submit-button",{"submit-button-loading": !submit_button_value }]'
ng-disabled="login_form.$invalid || submit_button_value" ng-click="signin()">
<span ng-if="!submit_button_value">Login</span>
<span ng-if="submit_button_value" class="fa fa-spinner fa-spin"></span>
</button>
</div>
</form>
</main>
As the classes "btn", "btn-primary", "horizontal-center", "submit-button" are common, try the following:
<button class="btn btn-primary horizontal-center submit-button" ng-class="{'submit-button-loading': !submit_button_value }"
ng-disabled="login_form.$invalid || submit_button_value" ng-click="signin()">
HI all i am new in angularjs please someone tell where i am wrong with this code my html is here :
<div class="form">
<div id="signup">
<h1>Welcome Back!</h1>
<form action="/" name="loginForm" method="post" ng-submit="sendLoginData()>
<div class="field-wrap">
<input type="email"required autocomplete="off" name="userEmail" ng-model="user.name" placeholder="E-mail" required/>
<p ng-show="loginForm.userEmail.$error.required">Please Enter Your E-mail</p>
</div>
<div class="field-wrap">
<input type="password"required autocomplete="off" name="userPassword" ng-model="user.password" placeholder="Password" required/>
<p ng-show="loginForm.userPassword.$error.required">Please Enter Your Password</p>
</div>
<span class="forgot">Sign up</span>
<p class="forgot">Forgot Password?</p>
<input type="submit" class="button button-block" ng-disabled="loginForm.$invalid" value="Log IN"/>
</form>
</div>
</div>
You can replace your code with this
<div class="form">
<div id="signup">
<h1>Welcome Back!</h1>
<form action="/" name="loginForm" method="post" ng-submit="sendLoginData()">
<div class="field-wrap">
<input type="email"required autocomplete="off" name="userEmail" ng-model="user.name" placeholder="E-mail" required/>
<p ng-show="loginForm.userEmail.$touched && loginForm.userEmail.$error.required">Please Enter Your E-mail</p>
</div>
<div class="field-wrap">
<input type="password"required autocomplete="off" name="userPassword" ng-model="user.password" placeholder="Password" required/>
<p ng-show="loginForm.userPassword.$touched && loginForm.userPassword.$error.required">Please Enter Your Password</p>
</div>
<span class="forgot">Sign up</span>
<p class="forgot">Forgot Password?</p>
<input type="submit" class="button button-block" ng-disabled="loginForm.$invalid" value="Log IN"/>
</form>
</div>
</div>
I am using ng-hide and ng-show for my login page. While testing I get element not visible, I tried browser.wait() but it says mulitple elements found.
My code is available at
<div class="login-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1024px-Python-logo-notext.svg.png" height="80px" width="80px">
<!-- Create customer Form -->
<div class="login-form" ng-show="signUp">
<form ng-submit="addUser()">
<input type="text" placeholder="Name" ng-model="name" required>
<input type="email" placeholder="Email" ng-model="email" required>
<input type="password" placeholder="Password" ng-model="password" required>
<button ng-disabled="loading" type="submit" class="button-primary">
<span ng-hide="loading">Create</span>
<span ng-show="loading">Loading....</span></button>
</form>
</div>
<div class="login-form" ng-show="login">
<form ng-submit="signIn()" >
<input type="email" placeholder="Email" ng-model="email" required>
<input type="password" placeholder="Password" ng-model="password" required>
<button ng-disabled="loading" type="submit" class="button-primary">
<span ng-hide="loading">Sign In</span>
<span ng-show="loading">Loading....</span></button>
</form>
</div>
<!-- Forgot password -->
<div class="login-form" ng-show="fp" id="fpass">
<form ng-submit="forgotPassword()" >
<input type="email" placeholder="Email" ng-model="email" required>
<button ng-disabled="loading" type="submit" class="button-primary">
<span ng-hide="loading">Resend</span>
<span ng-show="loading">Loading....</span></button>
</form>
</div>
<a href="" id="logIn" ng-click="loginClick()" style="margin-right:5px" ng-hide="login" >Login </a>
Sign Up
Forgot Password
</div>
Test code
<div class="login-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1024px-Python-logo-notext.svg.png" height="80px" width="80px">
<!-- Create customer Form -->
<div class="login-form" ng-show="signUp">
<form ng-submit="addUser()">
<input type="text" placeholder="Name" ng-model="name" required>
<input type="email" placeholder="Email" ng-model="email" required>
<input type="password" placeholder="Password" ng-model="password" required>
<button ng-disabled="loading" type="submit" class="button-primary">
<span ng-hide="loading">Create</span>
<span ng-show="loading">Loading....</span></button>
</form>
</div>
<div class="login-form" ng-show="login">
<form ng-submit="signIn()" >
<input type="email" placeholder="Email" ng-model="email" required>
<input type="password" placeholder="Password" ng-model="password" required>
<button ng-disabled="loading" type="submit" class="button-primary">
<span ng-hide="loading">Sign In</span>
<span ng-show="loading">Loading....</span></button>
</form>
</div>
<!-- Forgot password -->
<div class="login-form" ng-show="fp" id="fpass">
<form ng-submit="forgotPassword()" >
<input type="email" id="fpass-email" placeholder="Email" ng-model="email" required>
<button ng-disabled="loading" type="submit" class="button-primary">
<span ng-hide="loading">Resend</span>
<span ng-show="loading">Loading....</span></button>
</form>
</div>
<a href="" id="logIn" ng-click="loginClick()" style="margin-right:5px" ng-hide="login" >Login </a>
Sign Up
Forgot Password
</div>
Stack trace
) Testing User Sign Up, Login and Logout, Forgot password Test Forgot password and Login
Message:
Failed: No element found using locator: By.cssSelector("div[ng-show='fp'].button-primary")
Stack:
NoSuchElementError: No element found using locator: By.cssSelector("div[ng-show='fp'].button-primary")
at process._tickCallback (node.js:368:9)
Error
at Object.<anonymous> (/home/leo/python-scripts/Flask-Scaffold/app/templates/users/spec.js:35:57)
From: Task: Run it(" Test Forgot password and Login") in control flow
From asynchronous test:
Error
at Suite.<anonymous> (/home/leo/python-scripts/Flask-Scaffold/app/templates/users/spec.js:27:1)
at Object.<anonymous> (/home/leo/python-scripts/Flask-Scaffold/app/templates/users/spec.js:2:1)
2 specs, 2 failures
Finished in 4.807 seconds
[launcher] 0 instance(s) of WebDriver still running
[launcher] chrome #1 failed 2 test(s)
[launcher] overall: 2 failed spec(s)
[launcher] Process exited with error code 1
https://github.com/Leo-G/Flask-Scaffold/blob/develop/app/templates/login.html
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>