Passwords Organizer For Windows

In the days of yore I was a call center agent. During those times I realized that working in a BPO requires you to use a number of tools to perform your job for the account that you represent. These tools would often always be password protected. Most of us would keep their credentials in the good old Notepad. The problem is, simply copying and pasting long lines of links / URLs kept in Notepad can be quite annoying.
So I decided creating improvised tools that can make my life at work easier, and this password organizer thingy came up.

The Password Era

Since the advent of modern computers, people has been dependent on passwords for protecting their valued electronic data and stuff. This all started in the 60s when a certain Fernando José "Corby" Corbató helped implement the first concepts for computer password when they were working on some sort of time-sharing operating systems. At least the credits on the first use of passwords for file access was credited to Corby.

Who The Heck Is Fernando Again?

Back then when super nerds from MIT were developing some MIT Compatible Time-Sharing System (CTSS), they were faced with the dilemma of how to manage file access on a large computer system without jeopardizing privacy. After quite a number of deliberation and exchange of ideas most probably - the concept of computer passwords was born, and it was the great Corby who came home with the credits. Then again he claimed that the concept of computer password security method has become unmanageable (Warnock, Eleanor; Pfanner, Eric (May 22, 2014). "Despite Data Thefts, The Password Endures". Wall Street Journal.).

Password Organizer Overview

Since it was Corby who claimed that their computer password concept idea has become unmanageable, we figured that it would be cool to create some sort of Password Organizer from scratch. Some kind of offline quick reference if you are the type of person who use a lot of applications and whatnot for your job. This would be cool in case you work for a Contact Center / Call Center. A quick glance of its Graphical User Interface is shown below.

Pretty simple and self-explanatory at one glance, right!? As shown, our quick tool will have some kind of headers:

Application:
The application names below its respective header will be clickable and should open a new internet browser. The internet browser it will launch will depend on which one is set as default on your PC.
UserID:
This portion contains your frequently used User IDs / credentials for your applications.
Password:
Passwords will be written in light gray or something more lighter to serve as a simple protection from onlookers or those who has the "eye of true sight".

Front-end And Back-end

This tool will have 2 components, the frontend and the backend. Frontend refers to what you see like the application's GUI (Graphical User Interface). It is where you click and copy the things you need for your work or purpose. Our front-end will be in HTA (HTML Application) format. HTAs are basically created using HTML and some scripting, and instead of naming it with HTML as its file extension - you name it with HTA.
The backend on the other hand is the part of the application that keeps the texts that show below the Application, UserID, and Password fields. Our back-end will be just a straightforward CSV file that you can create in Notepad, Notepad++, Microsoft Excel or whichever text editor you prefer.

Creating The Front-end

Enough with all those blabber and let's get to the point. We suggest that you set your windows folder to display file extensions. In Windows 10 you can do this by launching your document folder, clicking on the View Menu and checking the File name extensions check box. This way we are virtually aware of our filenames' extension.

Copy the whole code below.
<!DOCTYPE html><html><head><meta charset="UTF-8"><HTA:APPLICATION id="PasswordOrganizer" applicationName="PasswordOrganizer" border="thin" borderStyle="normal" caption="yes" maximizeButton="no" minimizeButton="yes" showInTaskbar="yes" windowState="normal" innerBorder="yes" navigable="yes" scroll="no" scrollFlat="no" singleInstance="yes" sysMenu="yes" contextMenu="yes" selection="yes" version="1.0" /><title>Passwords Organizer</title><style>.floatingHeader {position: fixed; top: 0; visibility: hidden;} *{margin: 0;} body {font: 14px Georgia, serif;} h1 {font: 32px Georgia, Serif; margin: 0 0 20px 0;} .spacer {height: 600px;} table {border: 1px;} th {background-color: black; color: white; width: 120px; text-align: left; font: 13px Arial, strong;} tr:nth-child(odd) {background: #eeeeee;} td {width: 120px; font: 13px Arial; border: 1px solid black;} </style><SCRIPT LANGUAGE="VBScript"> Sub Window_onLoad window.resizeTo 550,550 End Sub </SCRIPT></head> <body><div><table><tr><th> Site / Application </th><th> UserID </th><th> Password </th><th> Other Details </th></tr></table><div style="overflow: auto;height: 500px; width: 498px;"><table datasrc='#data'><tr><td valign="top"><a datafld='Site Link' target="_blank"><span datafld='Site'></span></a><br></td><td valign="top"><span datafld='UserID'></span></td><td valign="top"><font color="#eeeeee"><span datafld='Password'></span></font></td><td valign="top"><span datafld='Other Details'></span></td></tr></table></div><object ID=data classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"><param name="DataURL" value="passwords.csv"><param name="UseHeader" value="true"></object></div></body></html>
Simply paste it on your text editor and let's save it as "Password Organizer.hta". In Notepad++, you should be able to do this by choosing it to be saved as "Hypertext Markup Language file (*.html;*.htm;*.shtml;*.shtm;*.xhtml;*.xht;*.hta)".
At this point you should have the Password Organizer.hta file icon and should display the whole Graphical User Interface of your simple 550 by 550 password organizer.

Creating The Back-end

CSV files or Comma Separated Values file are simply text files that contain texts that are separated by commas. This type of file makes database storage easier to use and faster to load. Neat?

Create a new text file and rename it into "Passwords.csv".
Edit it using a text editor first and type these words and commas the way they're shown below:
Site,UserID,Password,Site Link,Other Details
Save the file.
Open the file in Microsoft Excel or other spreadsheet editors that supports CSV files like the ones included in Open Office Suite (https://www.openoffice.org/download/index.html) or LibreOffice (https://www.libreoffice.org/).
Just put in the necessary information you need once your CSV file is opened on your spreadsheet editor. Should look like the one below which is a bit self-explanatory.
Save your Passwords.csv file in the same folder where your Passwords Organizer.hta is located. Your improvised password organizer should now be ready to use. Just launch your Passwords Organizer.hta file and you should see the information that you stored in your CSV file displayed neatly.

You can modify this stuff anytime so it suits your preference. The codes are easy to understand. If you have a knack in pinpointing patterns, you won't need a basic background in basic HTML to make this work in no time.

Reference(s) / Test Environment(s):