Web Account Manager

• Download source files - 4 Kb

Introduction

Why we need this?
Our mind is not only for remembering a lot serials of passwords,
and for security reasons, password grows not only longer but also difficult to remember.

Background

All web login forms have something in common
1. an input box for user name
2. an input box for a password
3. a check box to indicate whether to remember the password for future access

However, something differs.
1. the field name for input values, as we know, the application running on servers get value through field name, field names are different for applications are different.
2. the address where to send our login info to.

Because html file is in text format, then how to keep my passwords safe?
I've turned out a simple idea: encode the password;
use which method: how about base64?
Someone may ask, can base64 be used to encode a password, everyone knowns how to decode them.
To increase the difficulty of cracking our password,the most simple idea: change the base64 char map.:)
Even your password is encoded, it is not safe, don't lose your Account file, store in ntfs and encrypt.

Programming

Now let's go into the program.
OOP programming is applied to this program.
We have 3 objects: FormCollection,AccountForm and Account

Object Account stores account informations,an Account belongs to a AccountForm

function Account 
(user,pass,rem,form)
{
 this.Username=user;
 this.Password=pass;
 this.RemLogin=rem;
 this.Form=form;//form holding this account

 this.Login=function(){
  if(this.Form!=null)
  {
   this.Form.GenForm();//show form

   document.getElementById("username").value=this.Username;
   document.getElementById("password").value=Base64Encode(this.Password);
   if(this.RemLogin!=null)
     document.getElementById("rempass").checked=this.RemLogin;
//   document.getElementById("LoginForm").submit();//uncomment this to auto submit

  }
 }
}

Object AccountForm stores login form,the method GenForm put html out to html object oLoginForm

function AccountForm 
(name,oU,oP,oR,url,att)
{
 this.Name=name;
 this.UserObj=oU;
 this.PassObj=oP;
 this.RemLoginObj=oR;
 this.Action=url;
 this.Attach=att;//attached form items

 this.Accounts=new Array();
 this.GenForm=function(){
  var fm="<form id=LoginForm method=post action="+this.Action+">";
  fm+="<table border=0><tr bgcolor=gray><td colspan=2 align=center style=color:white;font-weight:bolder>"
+this.Name+"</td></tr>";
  fm+="<tr><td>Username:</td><td><input id=username type=text name="+this.UserObj+"></td></tr>";
  fm+="<tr><td>Password:</td><td><input id=password type=password name="+this.PassObj+"></td></tr>";
  if(this.RemLoginObj!=null)
   fm+="<tr bgcolor=silver><td colspan=2 align=center><input id=rempass type=checkbox name="
+this.RemLoginObj+"><label for=rempass>Remember Me</label></td></tr>";
  fm+="<tr bgcolor=gray><td colspan=2 align=center><input type=submit value=Login></td></tr></table>";
  if(this.Attach!=null)
   fm+=this.Attach;
  fm+="</form>";
  document.getElementById("oLoginForm").innerHTML=fm;
 }
 this.AddAccount=function(user,pass,rem){
  var ac=new Account(user,pass,rem,this);
  this.Accounts[user]=ac;
 }
}

Object FormCollection is a collection of login forms,it help us organize forms.the method UseAccount fill form with specified account.

function FormCollection ()
{
 this.Forms=new Array();
 this.AddForm=function(name,oU,oP,oR,url,att){
  var x=new AccountForm(name,oU,oP,oR,url,att);
  this.Forms[x.Name]=x;
  return x;
 }
 this.UseAccount=function(name){
  var x=name.split(":");//account path is analysed and loaded

  if(x.length==2)
  {
   var ac=this.Forms[x[0]].Accounts[x[1]];
   ac.Login();
  }
 }
 this.GenButtons=function(){
  for(var i in this.Forms)
  {
   var x=this.Forms[i];
   document.write("<ol>"+x.Name);
   for(var j in x.Accounts)
   {
    var y=x.Accounts[j];
    document.write("<li><input type=button onclick=myforms.UseAccount(this.value) 
value="+x.Name+":"+y.Username+"></li>");
   }
   document.write("</ol>");
  }
 }
}

Using the code

var myforms=new FormCollection();
//google loginform

var 
x=myforms.AddForm("Google","Email","Passwd","PersistentCookie","https://www.google.com/accounts/ServiceLoginAuth");
x.AddAccount("vmlinuxx@gmail.com","it is a secret",true);
//codeproject 

loginform
x=myforms.AddForm("Codeproject","Email","Password","cookie","http://www.codeproject.com/script/profile/process_logon.asp");
x.AddAccount("vmlinuxx@hotmail.com","it is also a secret",true);
//gmail 

loginform
x=myforms.AddForm("Gmail","Email","Passwd","PersistentCookie","https://www.google.com/accounts/ServiceLoginAuth","<INPUT 
type=hidden value=https://gmail.google.com/gmail name=continue><INPUT 
type=hidden value=mail name=service>");
x.AddAccount("vmlinuxx@gmail.com","it is a secret as well",true);
//mywallop 

loginform
x=myforms.AddForm("MyWallop","EmailAddress","Password","UseCookies","http://mywallop.com/Login.aspx?ReturnUrl=%2fdefault.aspx");
x.AddAccount("a@b.c","password",true);

myforms.GenButtons();//generate account buttons

FAQ

1. how to add a new login form?
   Yes,we have to known how to analyse a form
2. how to add a new account?
   Use the AddAccount method of AccountForm object, fill in account name,encoded password and whether to remember login status.
3. how to get encoded password?
   I provide you MyPassword.htm to encode your password,remember to change Base64Chars(switching position is suggested) in MyBase64.js before encoding