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.