Click here to Skip to main content
15,867,568 members
Articles / Web Development / HTML
Article

Web Account Manager

Rate me:
Please Sign up or sign in to vote.
1.16/5 (10 votes)
21 Apr 20052 min read 36.1K   416   13   2
manage all your web accounts in a single html

Sample Image - webaccount.gif

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

JavaScript
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
  }
 }
}<P></P>

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

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

JavaScript
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

JavaScript
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);<P></P>
<P>myforms.GenButtons();//generate account buttons</P>

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

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
China China
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionHuh? Pin
Paul Lyons25-Apr-05 10:18
Paul Lyons25-Apr-05 10:18 
AnswerRe: Huh? Pin
vmlinuxx25-Apr-05 14:57
vmlinuxx25-Apr-05 14:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.