TypeScript

Login Page in TypeScript

Introduction

 
This article explains the best way to implement a simple login form to check account information and authenticate a user. If the user details exist in the database then the user is redirected to a welcome page, otherwise, we should instead display "Invalid Username/Password".
 
First I created a database EmpDetail and now I created a table in this database.
 
Query Code
  1. create table Login_Info  
  2.  (  
  3.   Emp_Name varchar(50),  
  4.   Passwrd varchar(50)  
  5.  )   
Now Insert some Data in LoginDetail table.
  1. insert into Login_Info values('Sharad','sharad')  
  2. insert into Login_Info values('Manish','manish')  
Select * from Login_Info  
 
 sql-image.jpg
 
Now the following procedure is used.
 
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" and then click "Ok".
 
Step 2
After this session the project has 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. 
 
 solution-ex.jpg
 
Coding
 
Login_Page.ts
  1. class Login_Page {  
  2.  login() {  
  3.   var a = 0;  
  4.   var txtuname = ( < HTMLTextAreaElement > (document.getElementById('txtuname'))).value;  
  5.   var txtpwd = ( < HTMLTextAreaElement > (document.getElementById('Pwd'))).value;  
  6.   if (txtuname.length != 0 && txtpwd.length != 0) {  
  7.    var connection = new ActiveXObject("ADODB.Connection");  
  8.    var connectionstring = "Data Source=MCNDESKTOP20;Initial Catalog=EmpDetail;uid=sa;pwd=password@123;Provider=SQLOLEDB";  
  9.    connection.Open(connectionstring);  
  10.    var rs = new ActiveXObject("ADODB.Recordset");  
  11.    rs.Open("select * from Login_Info where Emp_Name='" + txtuname + "' and Passwrd='" + txtpwd + "'", connection);  
  12.    while (!rs.eof) {  
  13.     window.location.assign('WelcomePage.html');  
  14.     a = 1;  
  15.     rs.MoveNext();  
  16.    }  
  17.    if (a == 0) {  
  18.     alert("Invalid UserName and Password");  
  19.    }  
  20.    rs.close();  
  21.    connection.close();  
  22.   } else {  
  23.    alert("Please Enter Values in Textbox ");  
  24.   }  
  25.  }  
  26.  cancelLogin() {  
  27.   document.getElementById('txtuname').innerText = "";  
  28.   document.getElementById('Pwd').innerText = "";  
  29.  }  
  30. }  
  31. window.onload = () => {  
  32.  var bttn = document.getElementById("login");  
  33.  var obj = new Login_Page();  
  34.  bttn.onclick = function() {  
  35.   obj.login();  
  36.  }  
  37.  var bttncancel = document.getElementById("cancel");  
  38.  bttncancel.onclick = function() {  
  39.   obj.cancelLogin();  
  40.  }  
  41. };   
Default.html
  1. < !DOCTYPE html >  
  2.  <  
  3.  html lang = "en"  
  4. xmlns = "http://www.w3.org/1999/xhtml" >  
  5.  <  
  6.  head >  
  7.  <  
  8.  meta charset = "utf-8" / >  
  9.  <  
  10.  title > TypeScript HTML App < /title>   <  
  11.  link rel = "stylesheet"  
  12. href = "app.css"  
  13. type = "text/css" / >  
  14.  <  
  15.  script src = "Login_Page.js" > < /script>   <  
  16.  /head>   <  
  17.  body >  
  18.  <  
  19.  fieldset style = " width: 356px;" >  
  20.  <  
  21.  legend style = "background-color: #99CCFF; font-size:larger" > User Login < /legend>   <  
  22.  br / >  
  23.  <  
  24.  b > UserName < /b>   <  
  25.  input id = "txtuname"  
  26. type = "text" / > < br / >  
  27.  <  
  28.  br / >  
  29.  <  
  30.  b > Password < /b>     <  
  31.  input id = "Pwd"  
  32. type = "password" / > < br / >  
  33.  <  
  34.  br / >  
  35.  <  
  36.  input id = "login"  
  37. type = "button"  
  38. value = "Login" / >  
  39.  <  
  40.  input id = "cancel"  
  41. type = "button"  
  42. value = "Cancel" / >  
  43.  <  
  44.  /fieldset>   <  
  45.  /body>   <  
  46.  /html>    
Login_Page.js
  1. var Login_Page = (function() {  
  2.  function Login_Page() {}  
  3.  Login_Page.prototype.login = function() {  
  4.   var a = 0;  
  5.   var txtuname = ((document.getElementById('txtuname'))).value;  
  6.   var txtpwd = ((document.getElementById('Pwd'))).value;  
  7.   if (txtuname.length != 0 && txtpwd.length != 0) {  
  8.    var connection = new ActiveXObject("ADODB.Connection");  
  9.    var connectionstring = "Data Source=MCNDESKTOP20;Initial Catalog=EmpDetail;uid=sa;pwd=password@123;Provider=SQLOLEDB";  
  10.    connection.Open(connectionstring);  
  11.    var rs = new ActiveXObject("ADODB.Recordset");  
  12.    rs.Open("select * from Login_Info where Emp_Name='" + txtuname + "' and Passwrd='" + txtpwd + "'", connection);  
  13.    while (!rs.eof) {  
  14.     window.location.assign('WelcomePage.html');  
  15.     a = 1;  
  16.     rs.MoveNext();  
  17.    }  
  18.    if (a == 0) {  
  19.     alert("Invalid UserName and Password");  
  20.    }  
  21.    rs.close();  
  22.    connection.close();  
  23.   } else {  
  24.    alert("Please Enter Values in Textbox ");  
  25.   }  
  26.  };  
  27.  Login_Page.prototype.cancelLogin = function() {  
  28.   document.getElementById('txtuname').innerText = "";  
  29.   document.getElementById('Pwd').innerText = "";  
  30.  };  
  31.  return Login_Page;  
  32. })();  
  33. window.onload = function() {  
  34.  var bttn = document.getElementById("login");  
  35.  var obj = new Login_Page();  
  36.  bttn.onclick = function() {  
  37.   obj.login();  
  38.  };  
  39.  var bttncancel = document.getElementById("cancel");  
  40.  bttncancel.onclick = function() {  
  41.   obj.cancelLogin();  
  42.  };  
  43. };  
  44. //@ sourceMappingURL=Login_Page.js.map    
Output 1
 
 login-img.jpg
 
Enter the username and password and then click on the Login button.
 
The user is redirected to the "WelcomPage.html" page.
 
welcome-page.jpg
 
Output 2
 
If we enter the wrong UserName or Password then:
 
wrong-pwd.jpg
 
Output 4
 
If you enter a UserName and Password and then click on the "Cancel" button:
 
enter-detail.jpg  
 
After clicking on the "Cancel" button:
 
cancel.jpg 
 
For more information, download the attached sample application.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found