Responsive Bootstrap Login Form with Database Connection using AngularJS in ASP.Net

Last Reply 11 months ago By dharmendr

Posted 11 months ago

I'm designing a login form and some bootstrap is added to make it look attractive.

When an user enter their username and password, it must go to the database and check whether the username is available or not.

If available, it must redirect to the next page showing all the user credentials like username and if it's not available in the database , it must display a popup error message. The database connection should be made through c# code.

login.css :

.register {
    /* background: -webkit-linear-gradient(left,  #1143a6, #00c6ff); */
    margin-top: 5%;
    padding: 3%;
}

.login-panel {
    width: 50%;
    min-width: 300px;
    margin: 0 auto;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    /* border-top-left-radius: 15% 50%;
    border-bottom-left-radius: 15% 50%; */
}

.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 :

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>

Regards

skp

This question does not have replies that have been liked.