password encryption

The sample code gives you a way of encrypting sensitive data like passwords in c#.

There are many ways of encrypting data, many algorithms, the code i am providing here is one of them. There may be many other ways of encryption which are much stronger and secure than this, but yeah this works for me. I am yet to find a way of decrypting back the original string. But then you don’t really need decryption in normal scenarios. Anyway so here’s what i use to encrypt passwords and all.

public class Encryption
    {
        private string _password;
        private int _salt;

        public Encryption()
        {
            _salt = your_secret_number;
        }

        public string EncryptPassword(string password_to_encrypt)
        {
            _password = password_to_encrypt;
            try
            {
                // Create Byte array of password string
                ASCIIEncoding encoder = new ASCIIEncoding();
                Byte[] _secretBytes = encoder.GetBytes(_password);

                // Create a new salt
                Byte[] _saltBytes = new Byte[4];
                _saltBytes[0] = (byte)(_salt >> 24);
                _saltBytes[1] = (byte)(_salt >> 16);
                _saltBytes[2] = (byte)(_salt >> 8);
                _saltBytes[3] = (byte)(_salt);

                // append the two arrays
                Byte[] toHash = new Byte[_secretBytes.Length + _saltBytes.Length];
                Array.Copy(_secretBytes, 0, toHash, 0, _secretBytes.Length);
                Array.Copy(_saltBytes, 0, toHash, _secretBytes.Length, _saltBytes.Length);

                SHA1 sha1 = SHA1.Create();
                Byte[] computedHash = sha1.ComputeHash(toHash);

                return encoder.GetString(computedHash);
            }
            catch (Exception ex)
            {
                throw;
            }
        }
    }

The code uses .net’s inbuilt cryptography classes to achieve the encrption. You can see that i’ve hardcoded the ‘salt’ value. Thats’ important, there must be one and only one salt value throughout the project, coz once you change it there’s no way of getting the previously encrypted strings’ original value.

Hope you find it useful.

textbox watermark text effect

What is it

click on the textboxes below:



Add watermark text effect to your textbox and textarea controls. Texboxes will show default text to begin with. When the textbox gains focus, the default text goes off, user types in his own text and that persists. If user doesn’t type in anything and moves on to other parts of your web page, your textbox again show the default text.

How to achieve that

I’ve written this small javascript which renders the said effect to textboxes and textareas. To set things up all you need to do is:

  1. give the textboxes/textareas an additional class of ‘js_watermark’. eg:
  2. Add the following javascript somewhere
    $(document).ready(function(){
    /*---watermark functions ------------*/
    		$(".js_watermark").each(function(){
    			$(this).after("");
    		});
    		$(".js_watermark").focus(function(){
    			var wm_text = $(this).next('.js_watermar_text').html();
    
    			if($(this).val()==wm_text){$(this).val('');}
    		});
    		$(".js_watermark").blur(function(){
    			var wm_text = $(this).next('.js_watermar_text').html();
    			if($.trim($(this).val())==""){$(this).val(wm_text);}
    		});
    		/*--------------------------------------*/
    });

The approach is simple:
once the html is loaded the javscript adds a hidden <span> tag next to each textboxes/textareas which have the class js_watermark and ‘stores’ the default values of textboxes in those spans. When you click on any textbox (gain focus event) its text is deleted. When textbox loses focus the script check if its text is blank (after trimming blank spaces), if yes it fetches the default value from the hidden span next to the textbox and sets the textboxes value with the default value again.

Hope you find it useful.

cpanel xmlapi create email accounts through your code

Came across with something interesting and felt like sharing it..
I was doing this networking website for one of my client and one of the requirement was that whenever a new user registers on the website, his/her email id username@networkingwebsite.com should be created automatically.
I started R&D if that’s possible in the first place. Google is my friend and i came across with cpanel api.

cpanel is a linux hosting application and thus wont support .net, so its not for .net developers. I am yet to find something equivalent on any windows hosting application

What is it

If you have a hosting account which has cpanel interface (most of the linux hosting providers have cpanel only i guess), you can write your own php code to access your hosting service and perform actions like adding/deleting email accounts, ftp accounts, adding sub-domains etc..

Through the hard-to-navigate-through documentation i found my way to xmlapi class which provides helper functions to make things easier for you. You can download the xmlapi class along with examples from github

Changes

The examples provided with the download uses WHM root user’s credentials (lets not go into details, coz i have no clue at all 🙂 ). I’ll take my example, i have a linux hosting account(not reseller) and i have cpanel access, obviously i have limited autorization to perform actions on the server, i dont have administrative priviledges equal to the root user of the server. So i had to change few things to suit my needs.

An example code to create email accounts on your server would be:


<?php 
include_once "xmlapi.php" ;/*the file donwloaded from github*/

$ip = 'your.servers.ip.address';
$root_pass = 'your_cpanels_login_password';

$account = "your_cpanels_login_name";

$email_user = "wdw";
$email_password = "pass123";
$email_domain = "your_domain.com";/*this will create 'wdw@your_domain.com'*/
$email_quota = '10';

$xmlapi = new xmlapi($ip);
$xmlapi->set_port(2083);/* the ssl port for cpanel */
$xmlapi->password_auth($account,$root_pass);
$xmlapi->set_output('json');

$xmlapi->set_debug(1);
print $xmlapi->api1_query($account, "Email", "addpop", array($email_user, $email_password, $email_quota, $email_domain) );

?>

So if your login creadentials are correct the above code will create wdw@your_domain.com which you can see listed under all email accounts when you login to your cpanel.

So yea.. that’s it.. I found it pretty cool, can definitely think of using the api in many ways.

text effects – giving random size and color

link for the demo is available at the end of the artile

Text effects – random size and color

What is it

This little demo show how to give random size and colors to the words . Lets say i have a <div> or <p> tag and i want all the words inside it to acquire random size and color. At the same time i also want a choice among those colors so that it suits my websites background and all. Check the demo page (link provided at the end of the article)

The setup

Give any <div> or <p> tag a class of js_typografy

<p class='js_typografy'>

Next Add the following javascript to your page

function typografy() {
            var minSize = 15;
            var maxSize = 80;
            var colorise = true;
            var colorArray = ['#369', '#000', '#aaa'];
            $(".js_typografy").each(function () {
                var retHTML = "";
                //get the text
                var allText = $(this).text().trim().split(' ');

                //now add each word one by one
                for (i = 0; i < allText.length - 1; i++) {
                    var size = getRandomInt(minSize, maxSize);
                    size = Math.ceil(size / 10) * 10;
                    if (colorise == true) {
                        var j = getRandomInt(0, colorArray.length - 1);
                        if (j < 0) { j = 0; }
                        retHTML += " " + allText[i] + "";
                    }
                    else
                    { retHTML += " " + allText[i] + ""; }
                }
                $(this).text('');
                $(this).html(retHTML);
                
            });
        }
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        $(document).ready(function () {
            typografy();
        });

you need to change the following according to your needs

var minSize = 15;//the minimum size of font - in pixels
var maxSize = 80;//the maximum size of font - in pixels
var colorise = true;//whether you want to give random colors or not
var colorArray = ['#369', '#000', '#aaa'];//the set of colors to choose from

What it does

Basically it finds all the elements with the class ‘js_typografy’, captures there text, wraps around each word in a span tag with style attribute having randomly generated size and color.

check the demo and refresh the demo page to see the random behaviour…


text with moving background

link for the demo is available at the end of the artile

Transparent text with moving image in background

First things first.. no fooling around, the text is not transparent, we are rather achieving that effect through an image.

The purpose

check the demo page (link provided at the end of the article) . What i want is to have my text on the html page and there should be some background image added behind the text in such a way that my text appears transparent and background image is visible. Furthermore i want to animate that background image.

The setup

I created a transparent image wherein all other parts of the image are opaque except the part where I’ve written my text (‘Logo’) so that my text part of the image is transparent.
Then i put that image on my html page inside a div. I set the div’s background with the background image of my choice. so now the background is visible through the transparent text part of my image.

The movement

Now jquery comes into play and animates the static background image. Basically a random number between 1 to 4 is genrated to decide the direction of movement of background image. and then background images position is set accordingly making the background image look like its moving. This happens in a loop resulting in a continuous movement of the background image in all different directions randomly.