Creating Login Form For Users With Image Uploading For Password Recall

Introduction

This article is all about making your login form more fun and thinking out of the box. We usually have a hint question which we would have selected at the beginning of creating a login and typing the answer for that question, which will help us remember our password at times when we tend to forget them. Here, I have added a concept of adding an image so that you can retrieve it later for remembering your password. 

Prerequisites

• Visual Studio 2015 
• SQL 2012 Management Studio

Let's directly dig into the designing and coding part with the following steps.

Step1

Open Visual Studio 2015 for designing the front-end for this application. By selecting File --> New --> Project, you will enter the template area with a new window for options available. 

 

Step2

The template area will provide you with various developing options in Visual Studio in which we are about to choose Windows Form Application using C# coding. After selecting the developing area, look below for the name field in which you will type the desired name to save the application. After typing the name, click on OK button to enter the main developing area.



Step 3

I have used some of the commonly used controls from ToolBox option and designed them according to my usage. I have used Label (5 nos), TextBox (5 nos), PictureBox (1), and Button (3 nos). The design is given below in which I have used the controls into user interactive controls through which any user can type the information against the given fields.



Step 4

Since this form is designed for storing images as hints for remembering the password, I need a control which could open the local disk storage from where the user can give his/her personal images as a password hint. The control name is called OpenFileDialog, which does the work in coding as well as during run time. 



Step 5

During the design time, as you can see, the controls which are imported from ToolBox can directly be placed inside the form. But our special control OpenFileDialog, when brought from ToolBox, will not get placed inside the design form; instead, it stays outside the form and does the work for us. This is visible in the below-given picture.



Step 6

After the design part is over, now, it's time for us to open up the database section and create a repository in which the data from the users will be stored accordingly. For this, we need SQL 2012 Database Management Studio. Since I have already installed it on my computer, I am directly opening it. The opening window looks like the below picture. Here, you have to look for Server name and Authentication (Windows Authentication is to be the default one). After this basic step, click Connect.

Step 7

The next step for you is to create a database. On the left side of the window in Object Explorer, you have the option called Databases on which you can right-click and select New Database. On doing this, a window appears where you have to enter the Database name and click the OK button to enter the next window.



Step 8

After completing the above step, you will be shown Object Explorer again where you can find the database name you typed. Drop down the database name and select the option Tables, right-click over that to display the option New Table. By selecting the New Table option, it will open up the Grid View of your repository where you can fill in the desired fields.



Step 9

The grid option gives space to feed with the desired fields which will be interacting with the user in Windows Form and collecting them in our created database. I have named the fields as name, designation, username, and password all of which will be using the datatype varchar (50). The last field is named as password_pic which will be using the datatype image. This option lets you store bit map image of any type stored in the database.



Step 10

After creating the desired fields, right-click over the tab of the table which gives you with the option to Save Table_1 with user defined name.


Step 11

I have saved the table with my desired name. This will get added in your display zone which could be found under the Tables option. Now, to see the completed process, I can get inside the empty environment by right-clicking the table name I just created and selecting the option "Edit Top 200 Rows".



Step 12

The below table shows us that no table entries are made against the fields that we have created. This is because we are using our designed Windows Form to get the data from the user and store it in the database. The empty environment with no data looks like the below picture.

 

Step 13

Now, getting back to our front-end design part, we saw the count of the controls we have brought into designing. One thing about our control TextBox is we have used it under the PictureBox which will be a small display of the current directory path which contains the image which brings inside during the run time. You could see the use of the textbox in the below-given picture with arrow mark against it.


Step 14

Now, the major part of coding starts. I have named all the controls with respective names so that they can be remembered in the coding part. The below code gives you the login form.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using System.Data.SqlClient;
namespace login_passwordimage {
    public partial class Form1: Form {
        public Form1() {
            InitializeComponent();
        }
        private void btn_save_Click(object sender, EventArgs e) {
            SqlConnection scn = new SqlConnection();
            scn.ConnectionString = @ "Data Source=DESKTOP-QTMTID2\SQLEXPRESS;Initial Catalog=tbl_imgpasslogin;database=imagepasslogin;integrated security=SSPI";
            scn.Open();
            SqlCommand scmd = scn.CreateCommand();
            scmd.CommandType = CommandType.Text;
            scmd.CommandText = "insert into tbl_imgpasslogin values('" + txt_name.Text + "','" + txt_desg.Text + "','" + txt_username.Text + "','" + txt_password.Text + "','" + picbox_imgdisp.Image + "')";
            scmd.ExecuteNonQuery();
            MessageBox.Show("User Name and Password with Image Stored Successfully");
            txt_name.Clear();
            txt_desg.Clear();
            txt_username.Clear();
            txt_password.Clear();
            txt_locdisp.Clear();
            picbox_imgdisp.Image = null;
            scn.Close();
        }
        private void btn_exit_Click(object sender, EventArgs e) {
            this.Close();
        }
        private void openFileDialog1_FileOk(object sender, CancelEventArgs e) {
            openFileDialog1.InitialDirectory = @ "C:\";
            openFileDialog1.RestoreDirectory = true;
            openFileDialog1.Title = "Browse Image Files";
            openFileDialog1.CheckFileExists = true;
            openFileDialog1.CheckPathExists = true;
            openFileDialog1.DefaultExt = "jpg";
        }
        private void btn_browse_Click(object sender, EventArgs e) {
            OpenFileDialog openFileDialog1 = new OpenFileDialog();
            openFileDialog1.Filter = "JPG Files(*.jpg)|*.jpg|jpg Files (*.jpg)|*.jpg";
            if (openFileDialog1.ShowDialog() == DialogResult.OK) {
                string picloc = openFileDialog1.FileName.ToString();
                txt_locdisp.Text = picloc;
                picbox_imgdisp.ImageLocation = picloc;
            }
        }
    }
}

Step 15

After the coding part, with no errors in it, if we run the program, the output screen looks something like this and since I have already entered the data and clicked the Browse button to select the image which I will be using as a password hint when I tend to forget it, the OpenFileDialog control opens the local disk directory where I will have saved the image.

 

Step 16

After selecting the folder using the control, I open it and select my specific image which will help me remember the password. Below the selection area, the user can specifically select the type of images he wants to select. For time being, I have added just two types (jpg and jpg) of images. You can specifically select the types by dropping down the list and searching for the right type. The below picture demonstrates it.

 

Step 17

After selecting any image of your choice, click on Save button for the data to get saved in the database that we have created.

Step 18

The filled in database against the corresponding fields looks like the below picture. I have run the application many times and the data is the test data filled by me in the form and that data gets stored up in the back-end database. As you can see, the last field password_pic which is holding our image from the user is not displayed because it gets converted into binary value. That would have been represented as <Binary data>. 

 
Conclusion

The above design is just an idea of taking the login form into another dimension from the usual way of storing the password with a hint of a question which you have to answer. When you forget the password and click the option Forgot Password? link, it will again display text, whereas this form will fetch the image you have stored which gives you a visual look at the picture and makes you think even faster to remember your password.  I am working on the second half of this application which will actually retrieve the image and bring in the form when you have the option "Forgot Password?" clicked.