I was a bit amazed in the WordPress Admin Login Form that shake if the inputted login information is wrong or if the user is not registered, so I decided to create one with the same functionality and I will share you how easy to make this with CSS3 and jQuery.
We know that the Admin Login in WordPress is coded with Ajax to send inputted data to the server without refreshing page but in this tutorial I only use a very simple way to validate inputted data using PHP and shake the login box usingjQuery shake effect.
Okay let’s start.
Javascript
Add this code in the header of
index.php file.
JavaScript
1
2
|
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js”></script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js”></script>
|
Note
Use both script for the shake effect to work
index.php
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<h2 class=”title”>Wordpress Admin like Login Form with CSS3 and jQuery</h2>
<div class=”login”>
<?php
//add a condition if stat variable is already set
if(isset($_SESSION['stat']) == 1) : ?>
<form method=”post” action=”logout.php”><fieldset>
<p><?php echo ‘Welcome <strong>’ . $_SESSION['username'] .’</strong>’; ?></p>
<input type=”submit” class=”submit-button” value=”Logout” />
<input type=”hidden” name=”task” value=”logout” />
</fieldset></form>
<?php else : ?>
<div class=”message”>
//this display error and success message
<?php if($errs != “”) { echo ‘<p>’.$errs.’</p>’; } ?>
<?php if($success != “”) { echo ‘<p>’.$success.’</p>’; } ?>
//this get the query log variable if is set or not.
<?php if(isset($_GET['log']) != “”) { echo ‘<p>You are now logged out.</p>’; } ?>
</div>
<form method=”post” action=”index.php”>
<p>
<label for=”username”>Username<br />
<input type=”text” id=”username” name=”username” class=”input” value=”<?php echo (isset($_POST['username']) ? $_POST['username'] : ”) ?>” size=”20″ tabindex=”10″ /></label>
</p>
<p>
<label for=”password”>Password<br />
<input type=”password” id=”password” name=”password” class=”input” value=”<?php echo (isset($_POST['password']) ? $_POST['password'] : ”) ?>” size=”20″ tabindex=”20″ /></label>
</p>
<p class=”submit”>
<input type=”submit” name=”submit” id=”submit” class=”submit-button” value=”Log In” tabindex=”100″ />
<input type=”hidden” name=”task” value=”login” />
</p>
</form>
<?php endif; ?>
</div>
|
PHP
This php script read if the form is being submitted and add jQuery code to shake the login form if one of the fields is not filled in or user is not registered.
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<?php
$errs = ”;
$success = ”;
if(isset($_POST['task']) && $_POST['task']==’login’)
{
$username = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string($_POST['password']);
if( $username == “” || $password == “”) {
$errs = ‘Fields are required.’;
//add jquery effect to shake our login form ?>
<script type=”text/javascript”>
$(document).ready(function() {
$(“.login form”).effect(“shake”, { times: 3 }, 64);
});
</script>
<?php
} else {
if( $username == “demo” && $password == “demo” ) {
$_SESSION['username'] = “Demo”;
$_SESSION['password'] = “demo”;
$_SESSION['stat'] = 1; //set status to 1
$success = ‘You\re successfully login.’;
} else {
$errs = ‘Invalid Username or Password.’;
//add jquery effect to shake our login form ?>
<script type=”text/javascript”>
$(document).ready(function() {
$(“.login form”).effect(“shake”, { times: 3 }, 64);
});
</script>
<?php
}
}
}
?>
|
CSS
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
.login * {
margin: 0;
padding: 0;
}
.title{
font: italic 26px Georgia;
margin-bottom: 20px;
margin: auto;
}
.login{
width: 320px;
padding: 20px 0 0;
margin: auto;
}
.login label {
color: #777;
font-size: 14px;
cursor: pointer;
}
.login form {
margin-left: 8px;
padding: 24px 20px 46px;
font-weight: normal;
background: white;
border: 1px solid #E5E5E5;
/* add login box shadow */
-moz-box-shadow: rgba(200,200,200,0.7) 0 4px 10px -1px; /*for Mozilla*/
-webkit-box-shadow: rgba(200,200,200,0.7) 0 4px 10px -1px; /*for Chrome and Safari*/
box-shadow: rgba(200,200,200,0.7) 0 4px 10px -1px;
}
.login form .input {
font-weight: 200;
font-size: 24px;
line-height: 1;
width: 100%;
padding: 3px;
margin-top: 2px;
margin-right: 6px;
margin-bottom: 16px;
border: 1px solid #E5E5E5;
background: #FBFBFB;
outline: none;
/* add input box a inset shadow */
-moz-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2); /*for Mozilla*/
-webkit-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2); /*for Chrome and Safari*/
box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
}
input.submit-button {
float: right;
border: 1px solid #298CBA;
font-weight: bold;
color: white;
background: #21759B;
text-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0;
padding: 3px 10px;
cursor: pointer;
/* add submit button a rounded corner */
-o-border-radius: 10em; /*for opera*/
-khtml-border-radius: 10em;
-webkit-border-radius: 10em;
border-radius: 10em;
/* add background gradient effet */
/*for Chrome and Safari*/
background: -webkit-gradient(linear, left top, left bottom, from(#298CBA), to(#217096));
/*for Mozilla*/
background: -moz-linear-gradient(top, #298CBA, #217096);
/*for IE*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#298CBA’, endColorstr=’#217096′);
}
input.submit-button:hover { border: 1px solid #000; }
|
0 comments:
Post a Comment