In this article, I will tell you about how to Create Signup and Login Page with AngularJS. Here is the design:
Html code For Signup
This code in use a angularjs and bootstrap
<div class="form-horizontal" id="singup" name="myForm" ng-show="Registration" ng-hide="true">
<p style="margin-left: 185px; font-size: 200%; font-weight: bold">
New User Registration</p>
<div class="form-group" style="margin-top: 30px">
<label class="col-sm-3 control-label">
Enter UserName</label>
<div class="col-sm-4">
<input type="text" id="uname" name="uname" ng-model="uname" placeholder="User Name"
class="form-control" />
</div>
</div>
<div class="form-group" ng-show="edit5" ng-hide="false">
<label class="col-sm-3 control-label">
Address</label>
<div class="col-sm-4">
<textarea ng-model="add" name="add" id="add" class="form-control" placeholder="Enter Address"></textarea>
</div>
</div>
<div class="form-group" ng-show="edit5" ng-hide="false">
<label class="col-sm-3 control-label">
Phone Number</label>
<div class="col-sm-4">
<input type="text" ng-model="phone" id="phone" placeholder="Phone Number" class="form-control" />
</div>
</div>
<div class="form-group" ng-show="edit5" ng-hide="false">
<label class="col-sm-3 control-label">
Education</label>
<div class="col-sm-4">
<select ng-model="edu" id="edus">
Select
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="BCOM">BCOM</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="MCOM">MCOM</option>
</select>
<br />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">
Gender</label>
<div class="col-sm-4">
<input type="radio" name="gender" ng-model="age" value="Male" />
Male
<input type="radio" name="gender" ng-model="age" value="Female" />
Female
<br />
<tt id="gen" ng-hide="true">{{age | json}}</tt>
<br />
</div>
</div>
<div class="form-group" ng-show="edit5" ng-hide="false">
<label class="col-sm-3 control-label">
Password</label>
<div class="col-sm-4">
<input type="password" ng-model="pass" id="pass" placeholder="Enter Password" class="form-control" />
</div>
</div>
<div class="form-group" ng-show="edit5" ng-hide="false">
<label class="col-sm-3 control-label">
Re-Password</label>
<div class="col-sm-4">
<input type="password" ng-model="repass" id="repass" placeholder="ReEnter Password"
class="form-control" />
</div>
</div>
<button type="button" class="btn btn-primary btn-lg" ng-click="saveUser()" style="margin-left: 150px;">
<span class="glyphicon glyphicon-save"></span>Registration
</button>
<button type="button" id="cbtn" class="btn btn-danger btn-lg" ng-click="cancel_r()">
Cancel
<span class="glyphicon glyphicon-off"></span>
</button>
<br />
<br />
<br />
</div>
Here is the ASP.NET code for Signup. You should save data using webMethod:
<Services.WebMethod()>
Public Shared Function SaveUser(ByVal uname As String, ByVal add As String, ByVal phone As String, ByVal edu As String, ByVal age As String, ByVal pass As String, ByVal repass As String) As String
'Insert
Dim Users As New StrategicAlliance2.User3
Dim UsersDit1 As New StrategicAlliance2.UserRegistrationObject
'Users.GetUserDetailsByID(id)
UsersDit1.Username = uname
UsersDit1.Address = add
UsersDit1.Phone_No = phone
UsersDit1.Education = edu
UsersDit1.Gender = age
UsersDit1.Password = pass
UsersDit1.Re_Password = repass
Users.InsertUserDetails(UsersDit1)
End Function
The following Js Code is for Signup. The below code for saveUser Butoon click:
$scope.saveUser = function()
{
strErrorMsg = "";
notEmpty(document.getElementById('uname'), '-Enter your UserName.');
notEmpty(document.getElementById('add'), '-Enter your Address');
notEmpty(document.getElementById('phone'), '-Enter your Phone Number');
notEmpty(document.getElementById('pass'), '-Enter Password');
notEmpty(document.getElementById('edus'), '-Enter Education');
notEmpty(document.getElementById('repass'), '-Enter Re-Password');
ValidMno(document.getElementById('phone'), '-Enter Valid Phone Number');
checkPass(document.getElementById('repass'), '-Password Not Match')
if (strErrorMsg == '')
{
$.ajax({
type: "POST",
url: "UserLogin.aspx/SaveUser",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
uname: $scope.uname,
fName: $scope.fName,
add: $scope.add,
phone: $scope.phone,
edu: $scope.edu,
age: $scope.age,
pass: $scope.pass,
repass: $scope.repass
}),
success: function(data)
{
alert("Registration Success");
// window.location.href = "UserLogin.aspx";
$scope.login = true;
$scope.Registration = false;
$scope.$apply();
}
});
}
};
Now, it's time to create Login Page
Html Code for Login. The following code in use a Angularjs & Bootstrap
<div class="form-horizontal" ng-show="login" ng-hide="false"><%--
<a class="btn btn-info btn-lg" ng-click="UserR()" style="margin-left: 375px;">
<span
class="glyphicon glyphicon-user"></span>User Registration
</a>--%>
<h1 class="form-signin-heading text-muted" style="margin-top: 10px">
Sign In</h1>
<div class="form-group" style="margin-top: 30px">
<label class="col-sm-2 control-label">
User Name:</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="login_User" name="login_User" ng-model="login_User"
placeholder="User Name" autofocus="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">
Password:</label>
<div class="col-sm-2">
<input type="password" class="form-control" id="login_Pass" name="login_Pass" ng-model="login_Pass"
placeholder="Password" />
</div>
</div>
<button type="button" class="btn btn-primary" ng-click="Login()" style="margin-left: 200px;">
<span class="glyphicon glyphicon-log-in"></span>Sign In
</button>
<button type="button" class="btn btn-danger" ng-click="cancel()">
<span class="glyphicon glyphicon-cancel"></span>Cancel
</button>
<br />
<a href="" style="font-size: 20px; color: Red; margin-left: 135px; margin-top: 20px"
ng-click="UserR()">If you are not Registered Then click here </a>
<br />
<p style="font-size: 20px; color: Blue; margin-left: 180px; margin-top: 10px">
One account is all you need
</p>
<p style="font-size: 16px; color: Black; margin-left: 90px;">
A single username and password gets you into everything Google.
</p>
<img style="margin-left: 75px" src="Images/logo_strip_sign_up_2x.png" height="50px"
width="350px" />
</div>
Code for Login with ASP.NET
The below code is to fatch data from database using webmethod and match with the entered data.
< Services.WebMethod() > Public Shared Function UserLogin() As StrategicAlliance2.UserRegistrationObject()
Dim Users As New StrategicAlliance2.User3
Dim details As New List(Of StrategicAlliance2.UserRegistrationObject)
For Each dtrow As DataRow In Users.GetTableOfUserDetails.Rows
Dim user As New StrategicAlliance2.UserRegistrationObject
user.Username = dtrow("Username").ToString()
user.Password = dtrow("password").ToString()
details.Add(user)
Next
Return details.ToArray()
End Function
Js Code for Login
In this code in login button and cancel button
$scope.Login = function()
{
strErrorMsg = "";
notEmpty(document.getElementById('login_User'), '-Enter your UserName.');
notEmpty(document.getElementById('login_Pass'), '-Enter your Password');
if (strErrorMsg == '')
{
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "UserLogin.aspx/UserLogin",
data: "{}",
dataType: "json",
success: function(data)
{
for (var i = 0; i < data.d.length; i++)
{
User = data.d[i].Username;
Password = data.d[i].Password;
a = (User);
b = (Password);
if ($scope.login_User == a && $scope.login_Pass == b) {
window.location.href = "Default.aspx";
}
}
if ($scope.login_Pass != b)
{
alert("Enter Valid ID And Password");
$scope.login_User = '';
$scope.login_Pass = '';
$scope.$apply();
}
}
});
}
if (strErrorMsg != '')
{
alert('\n' + strErrorMsg);
} else
{
}
};
$scope.cancel = function()
{
$scope.login_User = '';
$scope.login_Pass = '';
};
HostForLIFE.eu AngularJS Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.
