How To Create Login Page in TypeScript

Note: This program will work only on Internet Explorer.

In this article I explain the best way to implement a simple login form to check the account information details of a user within a database. If the user details can be found in the database then we should instead redirect user to welcome page otherwise we should instead display "Invalid Username/Password". This is very common for all your websites before accessing it.

First I create a database named "EmpDetail". Then I create a table in this database. 

Query Code

CREATE TABLE [dbo].[LoginDetail](

      [Username] [varchar](50) NULL,

      [Passwrd] [varchar](50) NULL

) ON [PRIMARY]

Now insert some data in the LoginDetail table.

The following procedure is used for that.

Step 1

Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.

 application-name.jpg

Give the name of your application as "Login_page" and then click "Ok".

Step 2

The project will then have been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file and css file and aspx page.

 solution-explorere.jpg

Code

loginpage.ts

class Login_Page

{

    Login()

    {

        var a = 0;

        var txtuname = (<HTMLTextAreaElement>(document.getElementById('txtusername'))).value;

        var txtpwd = (<HTMLTextAreaElement>(document.getElementById('txtpasswrd'))).value;

 

        if (txtuname.length != 0 && txtpwd.length != 0) {

            var connection = new ActiveXObject("ADODB.Connection");

            var connectionstring = "Data Source=MCNDESKTOP20;Initial Catalog=EmpDetail;uid=sa;pwd=******;Provider=SQLOLEDB";

            connection.Open(connectionstring);

            var rs = new ActiveXObject("ADODB.Recordset");

            rs.Open("select * from LoginDetail where Username='" + txtuname + "' and Passwrd='" + txtpwd + "'", connection);

            while (!rs.eof) {

                alert("Welcome to " + txtuname + "\n you are successfully login");

                a = 1;

                rs.MoveNext();

            }

            if (a == 0) {

                alert("Invalid UserName and Password");

            }

 

            rs.close();

            connection.close();

        }

        else {

            alert("Please Enter Values in Textbox ");

        }

    }

    Cancel() {

        document.getElementById('txtusername').innerText = "";

        document.getElementById('txtpasswrd').innerText = "";

    }

}

window.onload = () =>

{

    var bttnLogin = document.getElementById('login');

    var bttnCancel = document.getElementById('cancel');

    var obj = new Login_Page();

    bttnLogin.onclick = function ()

    {

        obj.Login();

    }

    bttnCancel.onclick = function ()

    {

        obj.Cancel();

    }  

};

 

Login_Page.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login_Page.aspx.cs" Inherits="Login_Page.Login_Page" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="loginpage.js"></script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

     <fieldset style="font-size: medium; color: #000000;">

        <legend style="background-color:#CCCCFF; font-size: larger;font-weight:bold">Login Page in TypeScript</legend>

        <br />

        <b>UserName</b>

        <input id="txtusername" type="text" /><br />

        <br />

        <b>Password</b>&nbsp;&nbsp;

           <input id="txtpasswrd" type="password"  /><br />

        <br />

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <input id="login" type="button" value="Login" />&nbsp;&nbsp;&nbsp;&nbsp;

            <input id="cancel" type="button" value="Cancel" />

    </fieldset>

    </div>

    </form>

</body>

</html>
 

loginpage.js

var Login_Page = (function () {

    function Login_Page() { }

    Login_Page.prototype.Login = function () {

        var a = 0;

        var txtuname = ((document.getElementById('txtusername'))).value;

        var txtpwd = ((document.getElementById('txtpasswrd'))).value;

        if(txtuname.length != 0 && txtpwd.length != 0) {

            var connection = new ActiveXObject("ADODB.Connection");

            var connectionstring = "Data Source=MCNDESKTOP20;Initial Catalog=EmpDetail;uid=sa;pwd=password@123;Provider=SQLOLEDB";

            connection.Open(connectionstring);

            var rs = new ActiveXObject("ADODB.Recordset");

            rs.Open("select * from LoginDetail where Username='" + txtuname + "' and Passwrd='" + txtpwd + "'", connection);

            while(!rs.eof) {

                alert("Welcome to " + txtuname + "\n you are successfully login");

                a = 1;

                rs.MoveNext();

            }

            if(a == 0) {

                alert("Invalid UserName and Password");

            }

            rs.close();

            connection.close();

        } else {

            alert("Please Enter Values in Textbox ");

        }

    };

    Login_Page.prototype.Cancel = function () {

        document.getElementById('txtusername').innerText = "";

        document.getElementById('txtpasswrd').innerText = "";

    };

    return Login_Page;

})();

window.onload = function () {

    var bttnLogin = document.getElementById('login');

    var bttnCancel = document.getElementById('cancel');

    var obj = new Login_Page();

    bttnLogin.onclick = function () {

        obj.Login();

    };

    bttnCancel.onclick = function () {

        obj.Cancel();

    };

};

//@ sourceMappingURL=loginpage.js.map

 

Output 1

Enter username and password:

 enter-username-pwd.jpg

Click on the Login button:

 wlcome-msg.jpg


Output 2

If we click on the Login button without entering a value in the TextBox then:

 blank-msg.jpg

Output 3

If we enter an incorrect UserName or Password then:

 enter-wrong-pwd-uname.jpg


Output 4

If you enter a valid UserName and Password and then click on the Cancel button then:

 enter-username-pwd.jpg

After clicking on the Cancel button:
 

cancel-click.jpg


For more information, download the attached sample application.