How to Signup and Login in AngularJS

Design for Signup form

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>

Asp.net code for Signup

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

Js Code for Signup

this 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 Login form

Design for Login form

Html Code for Login

This code in use a angularjs and 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>

Asp.net Code for Login

Fatch data from database using webmethod and match with the enterd 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 = '';
};

Enjoy code

Thank You