Post
Ask Question

How to Signup and Login in AngularJS

Design for Signup form


Html code For Signup

This code in use a angularjs and bootstrap

  1. <div class="form-horizontal" id="singup" name="myForm" ng-show="Registration" ng-hide="true">  
  2.     <p style="margin-left: 185px; font-size: 200%; font-weight: bold">  
  3. New User Registration</p>  
  4.     <div class="form-group" style="margin-top: 30px">  
  5.         <label class="col-sm-3 control-label">  
  6. Enter UserName</label>  
  7.         <div class="col-sm-4">  
  8.             <input type="text" id="uname" name="uname" ng-model="uname" placeholder="User Name"  
  9. class="form-control" />  
  10.         </div>  
  11.     </div>  
  12.     <div class="form-group" ng-show="edit5" ng-hide="false">  
  13.         <label class="col-sm-3 control-label">  
  14. Address</label>  
  15.         <div class="col-sm-4">  
  16.             <textarea ng-model="add" name="add" id="add" class="form-control" placeholder="Enter Address"></textarea>  
  17.         </div>  
  18.     </div>  
  19.     <div class="form-group" ng-show="edit5" ng-hide="false">  
  20.         <label class="col-sm-3 control-label">  
  21. Phone Number</label>  
  22.         <div class="col-sm-4">  
  23.             <input type="text" ng-model="phone" id="phone" placeholder="Phone Number" class="form-control" />  
  24.         </div>  
  25.     </div>  
  26.     <div class="form-group" ng-show="edit5" ng-hide="false">  
  27.         <label class="col-sm-3 control-label">  
  28. Education</label>  
  29.         <div class="col-sm-4">  
  30.             <select ng-model="edu" id="edus">  
  31. Select  
  32.                 <option value="BCA">BCA</option>  
  33.                 <option value="BBA">BBA</option>  
  34.                 <option value="BCOM">BCOM</option>  
  35.                 <option value="MCA">MCA</option>  
  36.                 <option value="MBA">MBA</option>  
  37.                 <option value="MCOM">MCOM</option>  
  38.             </select>  
  39.             <br />  
  40.         </div>  
  41.     </div>  
  42.     <div class="form-group">  
  43.         <label class="col-sm-3 control-label">  
  44. Gender</label>  
  45.         <div class="col-sm-4">  
  46.             <input type="radio" name="gender" ng-model="age" value="Male" />  
  47. Male  
  48.             <input type="radio" name="gender" ng-model="age" value="Female" />  
  49. Female  
  50.             <br />  
  51.             <tt id="gen" ng-hide="true">{{age | json}}</tt>  
  52.             <br />  
  53.         </div>  
  54.     </div>  
  55.     <div class="form-group" ng-show="edit5" ng-hide="false">  
  56.         <label class="col-sm-3 control-label">  
  57. Password</label>  
  58.         <div class="col-sm-4">  
  59.             <input type="password" ng-model="pass" id="pass" placeholder="Enter Password" class="form-control" />  
  60.         </div>  
  61.     </div>  
  62.     <div class="form-group" ng-show="edit5" ng-hide="false">  
  63.         <label class="col-sm-3 control-label">  
  64. Re-Password</label>  
  65.         <div class="col-sm-4">  
  66.             <input type="password" ng-model="repass" id="repass" placeholder="ReEnter Password"  
  67. class="form-control" />  
  68.         </div>  
  69.     </div>  
  70.     <button type="button" class="btn btn-primary btn-lg" ng-click="saveUser()" style="margin-left: 150px;">  
  71.         <span class="glyphicon glyphicon-save"></span>Registration  
  72.   
  73.     </button>  
  74.     <button type="button" id="cbtn" class="btn btn-danger btn-lg" ng-click="cancel_r()">  
  75. Cancel   
  76.         <span class="glyphicon glyphicon-off"></span>  
  77.     </button>  
  78.     <br />  
  79.     <br />  
  80.     <br />  
  81. </div> 
Asp.net code for Signup

save data using webMethod
  1. <Services.WebMethod()>  
  2. 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  
  3. 'Insert  
  4. Dim Users As New StrategicAlliance2.User3  
  5. Dim UsersDit1 As New StrategicAlliance2.UserRegistrationObject  
  6. 'Users.GetUserDetailsByID(id)  
  7. UsersDit1.Username = uname  
  8. UsersDit1.Address = add  
  9. UsersDit1.Phone_No = phone  
  10. UsersDit1.Education = edu  
  11. UsersDit1.Gender = age  
  12. UsersDit1.Password = pass  
  13. UsersDit1.Re_Password = repass  
  14. Users.InsertUserDetails(UsersDit1)  
  15. End Function
Js Code for Signup

this code for saveUser Butoon click
  1. $scope.saveUser = function()   
  2. {  
  3.     strErrorMsg = "";  
  4.     notEmpty(document.getElementById('uname'), '-Enter your UserName.');  
  5.     notEmpty(document.getElementById('add'), '-Enter your Address');  
  6.     notEmpty(document.getElementById('phone'), '-Enter your Phone Number');  
  7.     notEmpty(document.getElementById('pass'), '-Enter Password');  
  8.     notEmpty(document.getElementById('edus'), '-Enter Education');  
  9.     notEmpty(document.getElementById('repass'), '-Enter Re-Password');  
  10.     ValidMno(document.getElementById('phone'), '-Enter Valid Phone Number');  
  11.     checkPass(document.getElementById('repass'), '-Password Not Match')  
  12.     if (strErrorMsg == '')  
  13.     {  
  14.         $.ajax({  
  15.             type: "POST",  
  16.             url: "UserLogin.aspx/SaveUser",  
  17.             contentType: "application/json; charset=utf-8",  
  18.             data: JSON.stringify({  
  19.                 uname: $scope.uname,  
  20.                 fName: $scope.fName,  
  21.                 add: $scope.add,  
  22.                 phone: $scope.phone,  
  23.                 edu: $scope.edu,  
  24.                 age: $scope.age,  
  25.                 pass: $scope.pass,  
  26.                 repass: $scope.repass  
  27.             }),  
  28.             success: function(data)   
  29.             {  
  30.                 alert("Registration Success");  
  31.                 // window.location.href = "UserLogin.aspx";  
  32.                 $scope.login = true;  
  33.                 $scope.Registration = false;  
  34.                 $scope.$apply();  
  35.             }  
  36.   
  37.         });  
  38.     }  
  39. };  
Now Login form

Design for Login form



Html Code for Login

This code in use a angularjs and bootstrap
  1. <div class="form-horizontal" ng-show="login" ng-hide="false"><%--   
  2.     <a class="btn btn-info btn-lg" ng-click="UserR()" style="margin-left: 375px;">  
  3.         <span  
  4. class="glyphicon glyphicon-user"></span>User Registration   
  5.     </a>--%>  
  6.     <h1 class="form-signin-heading text-muted" style="margin-top: 10px">  
  7. Sign In</h1>  
  8.     <div class="form-group" style="margin-top: 30px">  
  9.         <label class="col-sm-2 control-label">  
  10. User Name:</label>  
  11.         <div class="col-sm-2">  
  12.             <input type="text" class="form-control" id="login_User" name="login_User" ng-model="login_User"  
  13. placeholder="User Name" autofocus="" />  
  14.         </div>  
  15.     </div>  
  16.     <div class="form-group">  
  17.         <label class="col-sm-2 control-label">  
  18. Password:</label>  
  19.         <div class="col-sm-2">  
  20.             <input type="password" class="form-control" id="login_Pass" name="login_Pass" ng-model="login_Pass"  
  21. placeholder="Password" />  
  22.         </div>  
  23.     </div>  
  24.     <button type="button" class="btn btn-primary" ng-click="Login()" style="margin-left: 200px;">  
  25.         <span class="glyphicon glyphicon-log-in"></span>Sign In  
  26.   
  27.     </button>  
  28.     <button type="button" class="btn btn-danger" ng-click="cancel()">  
  29.         <span class="glyphicon glyphicon-cancel"></span>Cancel  
  30.   
  31.     </button>  
  32.     <br />  
  33.     <a href="" style="font-size: 20px; color: Red; margin-left: 135px; margin-top: 20px"  
  34. ng-click="UserR()">If you are not Registered Then click here </a>  
  35.     <br />  
  36.     <p style="font-size: 20px; color: Blue; margin-left: 180px; margin-top: 10px">  
  37. One account is all you need  
  38. </p>  
  39.     <p style="font-size: 16px; color: Black; margin-left: 90px;">  
  40. A single username and password gets you into everything Google.  
  41. </p>  
  42.     <img style="margin-left: 75px" src="Images/logo_strip_sign_up_2x.png" height="50px"  
  43. width="350px" />  
  44. </div>  
Asp.net Code for Login

Fatch data from database using webmethod and match with the enterd data.
  1. < Services.WebMethod() > Public Shared Function UserLogin() As StrategicAlliance2.UserRegistrationObject()  
  2. Dim Users As New StrategicAlliance2.User3  
  3. Dim details As New List(Of StrategicAlliance2.UserRegistrationObject)  
  4. For Each dtrow As DataRow In Users.GetTableOfUserDetails.Rows  
  5. Dim user As New StrategicAlliance2.UserRegistrationObject  
  6. user.Username = dtrow("Username").ToString()  
  7. user.Password = dtrow("password").ToString()  
  8. details.Add(user)  
  9. Next  
  10. Return details.ToArray()  
  11. End Function  
Js Code for Login

In this code in login button and cancel button
  1. $scope.Login = function()   
  2. {  
  3.     strErrorMsg = "";  
  4.     notEmpty(document.getElementById('login_User'), '-Enter your UserName.');  
  5.     notEmpty(document.getElementById('login_Pass'), '-Enter your Password');  
  6.     if (strErrorMsg == '')   
  7.     {  
  8.         $.ajax({  
  9.             type: "POST",  
  10.             contentType: "application/json; charset=utf-8",  
  11.             url: "UserLogin.aspx/UserLogin",  
  12.             data: "{}",  
  13.             dataType: "json",  
  14.             success: function(data)   
  15.             {  
  16.                 for (var i = 0; i < data.d.length; i++)   
  17.                 {  
  18.                     User = data.d[i].Username;  
  19.                     Password = data.d[i].Password;  
  20.                     a = (User);  
  21.                     b = (Password);  
  22.                     if ($scope.login_User == a && $scope.login_Pass == b) {  
  23.                         window.location.href = "Default.aspx";  
  24.                     }  
  25.                 }  
  26.                 if ($scope.login_Pass != b)   
  27.                 {  
  28.                     alert("Enter Valid ID And Password");  
  29.                     $scope.login_User = '';  
  30.                     $scope.login_Pass = '';  
  31.                     $scope.$apply();  
  32.                 }  
  33.             }  
  34.         });  
  35.     }  
  36.     if (strErrorMsg != '')  
  37.     {  
  38.         alert('\n' + strErrorMsg);  
  39.     } else   
  40.     {  
  41.     }  
  42. };  
  43. $scope.cancel = function()   
  44. {  
  45.     $scope.login_User = '';  
  46.     $scope.login_Pass = '';  
  47. };  
Enjoy code

Thank You
Next Recommended Reading Ternary Operator Use In AngularJS