How To Create Login Page in TypeScript

Nitin Bhardwaj
12y
18.7k
0
0

Article

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

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.

Code

loginpage.ts

class Login_Page

{

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>

</head>

<body>

<div>

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

<br />

<b>UserName</b>

<br />

<b>Password</b>  

<br />

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

Click on the Login button:

Output 2

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

Output 3

If we enter an incorrect UserName or Password then:

Output 4

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

After clicking on the Cancel button:

For more information, download the attached sample application.