I have created a login form. Is there any way to evaluate the form credentials with the help of data readily available in database. I have two input boxes; one is the username and the other one is password with a login button attached to it. Whenever the user enters their username and password, they must be definitely clicking on the login button. After clicking it, the credentials must be checked with the sql server database, if available, it must take the user to the next page like "Welcome username" (or) "Login successful" and if not, it must put up an error message like "Not a user, create now". This must be done using .aspx web forms in angularjs.
I have also attached my code here.
login.css :
- .register {
-
- margin-top: 5%;
- padding: 3%;
- }
- .login-panel {
- width: 50%;
- min-width: 300px;
- margin: 0 auto;
- padding: 20px;
- background: #f8f9fa;
- border-radius: 10px;
-
-
- }
- .login-panel1 input {
- border: 1px solid #1143a6;
- border-radius: 1.5rem;
- padding: 1%;
- width: 60%;
- background: #f8f9fa;
- font-weight: bold;
- color: #383d41;
- margin-top: 3%;
- margin-bottom: 3%;
- cursor: pointer;
- }
- .login-heading {
- text-align: center;
- color: #1143a6;
- padding-bottom: 10px;
- }
login.aspx :
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- <link rel="stylesheet" media="screen" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' />
- <!-- jQuery library -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- <!-- Latest compiled JavaScript -->
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
- <link rel="stylesheet" href="login.css">
- <style>
- body {
- background: -webkit-linear-gradient(left, #1143a6, #00c6ff);
-
-
-
-
-
-
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- </style>
- <script>
- var LoginApp = angular.module('LoginApp', []);
- LoginApp.controller('LoginController', ['$scope', '$http', '$window', function ($scope, $http, $window) {
- $scope.submit = function () {
- var UserData = { username: $scope.Username, password: $scope.Password }
- $http.post('login.aspx/ValidateUser', UserData)
- .success(function (data, status, headers, config) {
- if (data.d != "") {
- $scope.message = data.d;
- } else {
- $window.location.href = 'success.aspx';
- }
- }).error(function (data, status, headers, config) {
- $scope.message = data.d;
- });
- }
- }]);
- </script>
- </head>
- <body>
- <section class="container ">
- <div class="main_cont register">
- <div class="login-panel">
- <h3 class="login-heading"></h3>
- <div class="row">
- <div class="col-md-12 col-sm-12">
- <div class="form-group">
- <input type="text" class="form-control" ng-model="Username" name="Name" placeholder="Username" value="" autocomplete="off" required/>
- </div>
- <div class="form-group">
- <input type="password" class="form-control" ng-model="Password" name="Password" placeholder="Password" value="" autocomplete="off" required/>
- </div>
- <div class="float-right">
- <input type="submit" class="btn btn-primary" ng-click="submit()" value="Login" />
- </div>
- </div>
- </div>
- </div>
- </div>
- </section>
- </body>
- </html>
login.aspx.cs :
- using Newtonsoft.Json;
- using System;
- using System.Collections.Generic;
- using System.Data;
- using System.Data.SqlClient;
- using System.Linq;
- using System.Web;
- using System.Web.Services;
- using System.Web.UI;
- using System.Web.UI.WebControls;
- using System.Web.Security;
- using System.Configuration;
- public partial class login : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- }
- [WebMethod]
- public static string ValidateUser(string username, string password)
- {
- string status = "";
- int userId = 0;
- string constr = ConfigurationManager.ConnectionStrings["ERPConnectionString"].ConnectionString;
- using (SqlConnection con = new SqlConnection(constr))
- {
- using (SqlCommand cmd = new SqlCommand("Validate_User"))
- {
- cmd.CommandType = CommandType.StoredProcedure;
- cmd.Parameters.AddWithValue("@Username", username);
- cmd.Parameters.AddWithValue("@Password", password);
- cmd.Connection = con;
- con.Open();
- userId = Convert.ToInt32(cmd.ExecuteScalar());
- con.Close();
- }
- switch (userId)
- {
- case -1:
- status = "Username and/or password is incorrect.";
- break;
- case -2:
- status = "Account has not been activated.";
- break;
- default:
- break;
- }
- }
- return status;
- }
- }
success.aspx :
- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="success.aspx.cs" Inherits="View_success" %>
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
- <link rel="stylesheet" media="screen" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' />
- <link rel="stylesheet" href="login.css" />
- <title></title>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <h2>Login successful!</h2>
- </div>
- </form>
- </body>
- </html>
I don't know how to check the details with the database and process it to the next page.
Regards
Suresh Kumar P