Username/Password in One Field

neverforget98 · January 3, 2013

Hello and thanks in advance for helping me.

As some of you may know I run an antibullying organization called Operation Unfriend Bullying and we have a volunteers system as our backend called "Integrated Services". Right now we use the generic Username/Password field. BUT, what I want to do is have the username and password fields become ONE field.

So, this is my example:

The persons name is Henry Adam Taylor, so his username would be TaylorHA and lets say his password will be password. Right now what he would put it is TaylorHA in the Username field and password in the Password field.

What I want to happen is there is one big long field, and he would put in TaylorHA-password. The - being the "common character" for all of the team members. So everyone would put their username-password.

The problem is, I don't know how I would get the script to recognize the common character and seperate the two upon authentication.

Can any of you help me? I am using an HTML form, PHP script and MySQL as the database. I have included my login script below.

<?php
session_start();
require("inc/mysql.php");
require("inc/Membership.class.php");
$Member = new Membership($DBH);
require("inc/membership.php");
//test user permissions
if(!$Member->test_perms(0))
{
//No perms, echo error or forward or something
die("You do not have permissions to view this page!");
}
if(isset($_POST['submit']))
{
//User is loggin in
$data = $_POST;
if($data['username'] == "" || $data['password'] == "")
{
   header( 'Location: inc/invalidcredentials.php' ) ;
}

if(!$Member->login($data['username'], ($data['password'])))
{
 header( 'Location: inc/invalidcredentials.php' ) ;
}else{
 die("<script type='text/javascript'>window.location='inc/login2.php'; </script>");
}
}
header("./index2.htm");
echo "<br />";
if(!$_SESSION['user']['loggedIn'])
{
}?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login | OUB's Integrated Services</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="login">
<form method="post" action="">
 <h2>Login <small>enter your credentials</small></h2>
    <p>
	 <label for="name">Username: </label>
	    <input type="text" name="username" />
    </p>

    <p>
	 <label for="pwd">Password: </label>
	    <input type="password" name="password" />
    </p>

    <p>
	 <input type="submit" id="submit" value="Login" name="submit" />
    </p>
   </form>
   <?php if(isset($response)) echo "<h4 class='alert'>" . $response . "</h4>"; ?>
</div><!--end login-->
</body>
</html>

NomadicJosh · January 3, 2013

Take a look at explode: http://php.net/manual/en/function.explode.php

Pikachu2000 · January 3, 2013

explode it into two array elements. Of course, neither the username nor password will be able to contain a hyphen . . .

neverforget98 · January 3, 2013

explode it into two array elements. Of course, neither the username nor password will be able to contain a hyphen . . .

Haha, wasn't planning on that I've had many troubles with hypens throughout the system, lol. Guess it happens!

neverforget98 · January 3, 2013

Okay...I took a look at the explode() feature but I don't know how I could incorporate this into the script. I understand that I need to use something like this:

<?php

$str = "$userpass";

print_r (explode("-",$str));

?>

But I don't know where, and how could I use this to go to the

if($data['username'] == "" || $data['password'] == "")

section of my login script?

Pikachu2000 · January 3, 2013

$array = explode( '-', $_POST['combined_uname_pass_field']); then the username would be in $array[0] and the pass in $array[1]

Pikachu2000 · January 3, 2013

Or you could use list with it to minimize other editing: list( $data['username'], $data['password'] ) = explode( '-', $str); That would keep the same structure in the $data array. They still need to be sanitized/escaped of course.

neverforget98 · January 3, 2013

This is what I have and it's not working, it's just redirecting me to the invalid credentials page, HELP! :/

<?php
session_start();
require("inc/mysql.php");
require("inc/Membership.class.php");
$Member = new Membership($DBH);
require("inc/membership.php");
//test user permissions
if(!$Member->test_perms(0))
{
//No perms, echo error or forward or something
die("You do not have permissions to view this page!");
}
if(isset($_POST['submit']))
$array = explode( '-', $_POST['combined_uname_pass_field']);
{
//User is loggin in
$data = $_POST;
if($data['$array[0]'] == "" || $data['$array[0]'] == "")
{
   header( 'Location: inc/invalidcredentials.php' ) ;
}

if(!$Member->login($data['username'], ($data['password'])))
{
 header( 'Location: inc/invalidcredentials.php' ) ;
}else{
 die("<script type='text/javascript'>window.location='inc/login2.php'; </script>");
}
}
header("./index2.htm");
echo "<br />";
if(!$_SESSION['user']['loggedIn'])
{
}?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login | OUB's Integrated Services</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="login">
<form method="post" action="">
 <h2>Login <small>enter your credentials</small></h2>

    <p>
	 <label for="pwd">Enter your username and password: <br /><br /></label>
	    <input type="password" name="userpass" />
    </p>

    <p>
	 <input type="submit" id="submit" value="Login" name="submit" />
    </p>
   </form>
   <?php if(isset($response)) echo "<h4 class='alert'>" . $response . "</h4>"; ?>
</div><!--end login-->
</body>
</html>

Pikachu2000 · January 3, 2013

Um, yeah. It wasn't really meant to be plug and play . . .

What is the name= attribute of the form field you're using for the new combined field?

neverforget98 · January 3, 2013

Sorry...I think I'm good at this stuff but I'm really not. /: LOL.

I called it "userpass".

Pikachu2000 · January 3, 2013

It should be more like this:

//No perms, echo error or forward or something
die("You do not have permissions to view this page!");
}
if(isset($_POST['submit'])) {
//User is loggin in
$data = array_map( 'trim', $_POST ); // assuming you don't have a multidimensional $_POST array, otherwise need recursive function
list( $data['username'], $data['password'] ) = explode( '-', $_POST['userpass']);
if($data['username'] == "" || $data['password'] == "") {
        header( 'Location: inc/invalidcredentials.php' ) ;
}

Christian F. · January 3, 2013

To be honest I don't think this is a good idea. Password input fields in HTML are labelled specifically so for a reason, and that is to hide the password from anyone who happen to be looking at the screen while the user is typing it in. By combining them to one field, you either have to use a password input for the entire string or have the password being shown in clear text.

The first will make it a lot harder for your users to know whether their username, password or both are wrong, and the latter I've already mentioned.

That's why I strongly recommend that you follow the norm, and have two input fields in your login form. Just like every other site out there.

That's not to say that you can't use CSS to make them look like one field, but even that should be really thought through. Otherwise you might end up creating a lot of confusion amongst your users, when they can't find the password field. (Very few knows about/uses TAB to navigate input fields, after all.)

neverforget98 · January 3, 2013

To be honest I don't think this is a good idea. Password input fields in HTML are labelled specifically so for a reason, and that is to hide the password from anyone who happen to be looking at the screen while the user is typing it in. By combining them to one field, you either have to use a password input for the entire string or have the password being shown in clear text.

The first will make it a lot harder for your users to know whether their username, password or both are wrong, and the latter I've already mentioned.

That's why I strongly recommend that you follow the norm, and have two input fields in your login form. Just like every other site out there.

That's not to say that you can't use CSS to make them look like one field, but even that should be really thought through. Otherwise you might end up creating a lot of confusion amongst your users, when they can't find the password field. (Very few knows about/uses TAB to navigate input fields, after all.)

The field is treated as a password field and it isn't a website that is open to the general public, only our list of maximum 20 volunteers...

neverforget98 · January 3, 2013

It should be more like this:

//No perms, echo error or forward or something
die("You do not have permissions to view this page!");
}
if(isset($_POST['submit'])) {
//User is loggin in
$data = array_map( 'trim', $_POST ); // assuming you don't have a multidimensional $_POST array, otherwise need recursive function
list( $data['username'], $data['password'] ) = explode( '-', $_POST['userpass']);
if($data['username'] == "" || $data['password'] == "") {
 header( 'Location: inc/invalidcredentials.php' ) ;
}

It worked, thanks so much!

KevinM1 · January 3, 2013

The field is treated as a password field and it isn't a website that is open to the general public, only our list of maximum 20 volunteers...

The design question should be "Why change from the norm?" Virtually every site that has some form of user login splits the username/email and password into two different fields. What are you trying to gain from a one field setup, aside from novelty?

Sign In

Username/Password in One Field

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information