In this angularjs application I have a login page initially where the user types Username and Password. Once in the application, they can chose another page that requires a different username and password for database access. I want the database username to default to a different value than the login and the password to be blank with a placeholder of Enter a password. However, the defaults in the database page are using the initial login values.
This is the html of the login page:
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" name="username" placeholder="Username" style="width: 80%" autofocus ng-model="credentials.username" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" name="password" placeholder="Password" style="width: 80%" ng-model="credentials.password" />
</div>
</div>
This is the html of the database login:
<div class="row" style="margin-top: 10px; margin-bottom: 10px;">
<label id="inputDBUserNameLabel" style="margin-left: 10px;" >User Name: </label>
<input id="inputDBUserNameText" type="text" ng-model="inputUserName" class="form-control demoInput" value="test" style="margin-left: 5px; width: 25%;"/>
</div>
<div class="row" style="margin-top: 10px; margin-bottom: 10px;">
<label id="inputDBPasswordLabel" style="margin-left: 10px;" >Password: </label>
<input id="inputDBPasswordText" type="password" ng-model="inputPassword" class="form-control demoInput" placeholder="Enter a password" style="margin-left: 5px; width: 25%;"/>
</div>
What am I doing wrong?
UPDATE
Below is the code to my controller when connecting to the the database.
When entering the correct username and password it works:
'use strict';
angular.module('vow-administration-ui')
.controller('UpgradeCtrl', ['$scope', 'UpgradeDB',
function($scope, upgradeDB) {
$scope.title = "Upgrade Database";
$scope.inputServerName = '';
$scope.inputDatabaseName = '';
$scope.inputUserName = '';
$scope.inputPassword = '';
$scope.outputServerName = '';
$scope.outputDatabaseName = '';
$scope.outputUserName = '';
$scope.outputPassword = '';
$scope.UpgradeDatabase = function(){
upgradeDB.save({
inputServerName: $scope.inputServerName,
inputDatabaseName: $scope.inputDatabaseName,
inputUserName: $scope.inputUserName,
inputPassword: $scope.inputPassword,
outputServerName: $scope.outputServerName,
outputDatabaseName: $scope.outputDatabaseName,
outputUserName: $scope.outputUserName,
outputPassword: $scope.outputPassword
}).$promise.then(function(response) {
var responseText = response;
console.log(responseText);
});
};
}]);
UPDATE
I removed the ng-model=inputUserName and both the UserName and Password fields were changed to the expected values. That is the UserName field had the default of test and the Password field had the placeholder of Enter a password even though I did NOT remove the ng-model attribute from the password field.
UPDATE
Login Controller:
angular.module('vow-administration-ui')
.controller('LoginCtrl', function($scope, $rootScope, $location, AUTH_EVENTS, AuthService) {
$scope.isProcessing = false;
$scope.credentials = {
domain: '',
username: '',
password: ''
};
$scope.login = function() {
AuthService.authenticateAdministrator($scope.credentials).then(function() {
$scope.errorMessage = '';
$scope.errorState = false;
$location.path('/launch').replace();
},
function(error) {
AuthService.destroyToken();
$scope.errorMessage = 'Failed to authorize. ' + error.data.ExceptionMessage;
$scope.errorState = true;
});
};
});
Corrected the problem...
It is Google Chrome that was the problem.
Apparently, when you use ids that are a form of 'username' and 'password' Chrome tries to 'help' by inserting the previous text that was used as a username and password.
To fix the problem, I changed my ng-model names to variations of UsrNm and Pwd.
It works now.
Related
I am trying to enter data inside database table via form. I have created an instance of Model and accessed the columns of that table and assigned the input names of form but when I enter data an submit it says Attempt to read property "name" on array. Can anyone guide me if there is anything wrong.
Code of Controller where im inserting datas to database
class UserController extends Controller
{
function registerUser(Request $req)
{
$data = $req->input();
$user_model = new User;
$user_model->fullname = $data->name;
$user_model->mobile = $data->mobile;
$user_model->email = $data->email;
$user_model->password = $data->password;
$user_model->save();
return "registered successfully";
}
}
Code of Form
<div class="register-form">
<h4>Sign Up</h4>
<form method="post" action="register">
#csrf
<input type="text" name="name" placeholder="Full Name" size="40">
<br>
<input type="tel" name="mobile" placeholder="Mobile number" size="40">
<br>
<input type="email" name="email" placeholder="Email" size="40">
<br>
<input type="password" name="password" placeholder="Password" size="40">
<br>
<input id="submit_btn" type="submit" placeholder="Sign Up" size="40">
<hr>
<p>Already, have an account <span href="#" id="sign-in-link">Log In</span></p>
</form>
</div>
function registerUser(Request $req)
{
$user_model = new User;
$user_model->fullname = $req->name;
$user_model->mobile = $req->mobile;
$user_model->email = $req->email;
$user_model->password = bcrypt($req->password); //laravel hashed password
$user_model->save();
return "registered successfully";
}
$req->input is an array. Access it like so.
$user_model->fullname = $data['name'];
$user_model->mobile = $data['mobile'];
$user_model->email = $data['email'];
$user_model->password = $data['password'];
I did in HTML a <form></form> object which should return a username, a email and a password, but for some reason it returns undefined if I do req.body.name or anything else and it just won't work and idk why
This is my HTML markup:
<div style="margin: auto; width: 400px; text-align: center; margin-top: 50px;" class="card">
<h1 class="loginTitle card-title" style="margin-top: 10px;">Register</h1>
<div class="card-body">
<form action="/register" method="POST">
<div>
<label class="loginLabel" for="name">Username: </label>
<input style="margin-left: 68px;" class="loginInput" id="name" name="name" required type="text">
</div>
<div>
<label class="loginLabel" for="email">Email: </label>
<input style="margin-left: 110px;" class="loginInput" id="email" name="email" required type="email">
</div>
<div>
<label class="loginLabel" for="password">Password: </label>
<input style="margin-left: 76px;" class="loginInput" id="password" name="password" required type="password">
</div>
<button type="submit" style="margin-top: 10px;">Register</button>
</form>
Login
</div>
</div>
And this is my NodeJS code:
website.post('/register', async (req, res) => {
var usersReg = []
try {
const hashedPw = await bcrypt.hash(req.body.password, 10)
usersReg.push({
name: req.body.name,
email: req.body.email,
password: hashedPw
})
res.redirect('/login')
}
catch {
res.redirect('/register')
}
console.log(usersReg)
})
Please help me - I don't understand where the error is coming from.
(If I don't do catch it says just that the bcrypt.hash() method needs a string)
This is happening because you are not probably using body-parser. You should use the middleware in your server entry point to parse the body of the requests.
Also, your question is duplicated and you can find the complete answer here.
var bodyParser = require('body-parser')
var app = express()
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())
I want to make a signup form in which user type password which contains combination of alphabet,letter and length > 6 otherwise form will not submit
here I have shown function specifically for password only but i have other function for other input types and they are working properly but it is not.
$('#password').hide();
var password = false;
$('#user_password').focusout(function() {
check_password();
});
function check_password() {
var password = new RegExp(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/);
var password_length = $('#user_password').val().length;
if (password.test($("#user_password").val()) && password_length > 6) {
alert("hello");
$('#password').hide();
} else {
$('#password').html('Password should be more than 6 character and should contain a letter and number');
$('#password').show();
password = true;
}
}
$('#signupfrm').submit(function() {
password = false;
check_password();
if (password == false) {
return true;
} else {
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" name="signupfrm" id="signupfrm" method="post" action="<?php $_SERVER['PHP_SELF'] ?>">
//other input types above password input type
<input type="password" class="form-control" placeholder="Password..." name="user_password" id="user_password" required="">
<span id="password">
</span>
<button type="submit" class="btn btn-login" name="signup" id="signup" value="Signup">Create My Account</button>
</form>
You likely meant to do this
But you need to fix your regex https://regex101.com/r/ND19JO/1
I suggest this:
^(?=.{6,})(?=.*[a-z])(?=.*[A-Z])(?=.*[##$%^&+=]).*$
6 chars one lowerCase, one upperCase and one special char
const passwordRe = new RegExp(/^(?=.{6,})(?=.*[a-z])(?=.*[A-Z])(?=.*[##$%^&+=]).*$/);
const check_password = function() {
const pw = $('#user_password').val();
const pwOK = passwordRe.test(pw);
$('#pwError').toggle(!pwOK);
return pwOK;
}
$(function() {
$('#user_password').focusout(check_password)
$('#signupfrm').on("submit", function(e) {
if (!check_password()) e.preventDefault();
})
})
#pwError {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" name="signupfrm" id="signupfrm" method="post" action="">
<input type="password" class="form-control" placeholder="Password..." name="user_password" id="user_password" value="bla" required="">
<span id="pwError">Password should be more than 6 character and should contain a letter and number</span>
<button type="submit" class="btn btn-login" name="signup" id="signup" value="Signup">Create My Account</button>
</form>
If you have the correct regex, you don't have to test separately for the length:
var password = /^(?=.*\d)(?=.*[a-zA-Z])(?!.*\s).{7,15}$/;
It seems you also do not allow white space in your password. The way to prevent the form from submitting is to execute event.preventDefault() in your submit handler if the password is invalid. So the function check_password needs to return a flag that will be checked. I have removed the code that hides and unhides the password field to reduce the code to its essence:
function check_password() {
var password = /^(?=.*\d)(?=.*[a-zA-Z])(?!.*\s).{7,15}$/;
if (password.test($("#user_password").val())) {
return true;
}
else {
console.log('Password should be more than 6 character and should contain a letter and number and no spaces');
return false;
}
}
$(function() {
$('#signupfrm').submit(function() {
if (!check_password(event)) {
event.preventDefault();
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" name="signupfrm" id="signupfrm" method="post" action="<?php $_SERVER['PHP_SELF'] ?>">
<input type="password" class="form-control" placeholder="Password..." name="user_password" id="user_password" required="">
<span id="password">
</span>
<button type="submit" class="btn btn-login" name="signup" id="signup" value="Signup">Create My Account</button>
</form>
Note that you should only attempt to create the submit handler once you are sure that the document's elements have been created, i.e. element id signupform in this case. That is why that code is placed in a jQuery.ready() block (or its shortcut version). See .ready().
When I submit my Login email (aka username), I want to keep it in my Login form.
When I submit my Register email (aka username), I want to keep it in my Register form.
What is happening is: when I submit my Login form, it writes the email (aka username) to the Register form. Please see image for what is happening.
#{
Page.Title = "Login";
var username = "";
var password = "";
var errorMessage = "";
var confirmPassword = "";
var regMsg = "";
var confToken = "";
var emailBody = "";
var minPass = 2;
var maxPass = 5;
if (!IsPost) {
if (WebSecurity.IsAuthenticated) {errorMessage = String.Format("You are already logged in. (Username: {0})", WebSecurity.CurrentUserName);}
}
if(WebSecurity.IsAuthenticated){
errorMessage = String.Format("You are already logged in. (Username: {0})", WebSecurity.CurrentUserName);
}
if(IsPost){
// Login Form
if (Request.Form["loginSub"] != null){
regMsg = "";
username = Request["username"];
password = Request["password"];
if(WebSecurity.Login(username,password,true)){
Response.Redirect("~/Profile");
}
else
{
errorMessage = "Invalid Username or Password. Please try again.";
}
}
// Register Form
if (Request.Form["registerSub"] != null){
WebSecurity.Logout();
errorMessage = "";
username = Request["username"];
password = Request["password"];
confirmPassword = Request["confirmPassword"];
try {
var mail = new System.Net.Mail.MailAddress(username);
} catch {
regMsg += "<br>Invalid email format.";
}
if (password != confirmPassword) {regMsg += "</br>Passwords don't match.";}
if (WebSecurity.UserExists(username)) {regMsg += String.Format("</br>User '{0}' already exists.", username);}
if (password.Length < minPass || password.Length > maxPass) {regMsg += "</br>Password doesn't meet length requirement.";}
if (regMsg == "") {
WebSecurity.CreateUserAndAccount(username,password,null,false); //Switch with "true" token
regMsg = String.Format("{0} created.", username);
Response.Write("<script>alert('Email verification sent! Please check your email to activate your account.');</script>");
//Response.Write("<script>location.href = 'Default.cshtml';</script>");
}
}
}
}
<style>header {visibility: hidden;}</style>
<body>
<h1>MySite</h1>
<p>
#if(errorMessage != ""){<span>#Html.Raw(errorMessage)</span>}
#if(regMsg != ""){<span>#Html.Raw(regMsg)</span>}
</p>
<fieldset class="fs100">
<legend>Login</legend>
<form method="post" name="login">
#if(WebSecurity.IsAuthenticated){
<p>You are currently logged in as #WebSecurity.CurrentUserName.
Log out
</p>
}
<p>
<label for="username">Email Address:</label><br/>
<input type="text" name="username" id="username" value="" />
</p>
<p>
<label for="password">Password:</label><br/>
<input type="password" name="password" id="password" value="" />
</p>
<p>
<input type="submit" name="loginSub" value="Submit" />
</p>
<p>Forgot Password?</p>
</form>
</fieldset>
<fieldset>
<legend>Register</legend>
<form method="post" name="register">
<p>
<label for="username">Email Address:</label><br/>
<input type="text" name="username" id="username" value='#Request["username"]' />
</p>
<p>
<label for="password">Password #minPass-#maxPass Characters:</label><br/>
<input type="password" name="password" id="password" value="" />
</p>
<p>
<label for="confirmPassword">Confirm Password:</label><br/>
<input type="password" name="confirmPassword" id="confirmPassword" value="" />
</p>
<p>
<input type="submit" name="registerSub" value="Register" />
</p>
</form>
</fieldset>
</body>
Your code is echoing the value from the request in the second form.
If you don't want it to do that, change your code to do something else.
You may want to change each form to have unique field names.
.controller('LoginCtrl', function($scope, $rootScope, $http, $state) {
window.localStorage.removeItem("loggedIn");
if(window.localStorage.getItem("loggedIn") == undefined) {
$scope.doLogin = function() {
var username = $scope.fName + " " + $scope.lName;
console.log(username);
//store login information
window.localStorage.setItem("username", username);
window.localStorage.setItem("password", $scope.password);
window.localStorage.setItem("loggedIn", true);
$http.post('http://localhost:8000/login',{
userName: window.localStorage.getItem("username"),
password: window.localStorage.getItem("password"),
token: $rootScope.devToken,
platform: ionic.Platform.platform()
});
alert("Login Success");
$state.go('main');
};
} else {
alert("Login Success");
$state.go('main');
}
})
<ion-content ng-controller="LoginCtrl">
<form ng-submit="doLogin()" style="display: block; margin: 100px">
<div class="list">
<label class="item item-input">
<input type="text" ng-model="fName" placeholder="First Name">
</label>
<label class="item item-input">
<input type="text" ng-model="lName" placeholder="Last Name">
</label>
<label class="item item-input">
<input type="password" ng-model="password" placeholder="Password" style="text-align: center">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit">Register</button>
</label>
</div>
</form>
</ion-content>
I am trying to get the text from the html field fName and lName using $scope.fName because fName is a ng-model. How come it is returning undefined? I have the controllers set properly. I just can't figure out why username is outputting undefined? I am trying to load the app up at login.html and then once logged in, it will change the state to home.html. I could really use some help doing this.
The ion-content creates its own child scope. Try declaring a main scope object in your controller:
.controller('LoginCtrl', function($scope, $rootScope, $http, $state) {
$scope.data = {}
In your template:
<input type="text" ng-model="data.fName" placeholder="First Name">
In your login submit:
var username = $scope.data.fName + " " + $scope.data.lName;
You don't have validation in place to check whether the values are actually filled or not. The scope is not populated on initialization.
If you hit submit before adding anything there is no way those values can be populated and hence they are undefined.
Do something like this in submit button.
<button class="button button-block button-positive"
type="submit" ng-disabled="!fName||!lName">Register
</button>
Good Luck.
The code implementation is found here.
https://codepen.io/anon/pen/YGzxVz
http://ionicframework.com/docs/components/#toggle
i hope this works for you. A little change with CSS will do the trick