Customize Login Form

FlyingMachine · March 22, 2015

Good morning all

im trying to customize login form make separated login area for the pilots,

i need some help about the login forms info, i created this form, i will put the link not for adversting issue only for help

http://pilotcenter.royalairmarocvirtual.com

it's a clean html, what php codes i should to integrate in this page to work perfectly,

looking forward,

freshJet · March 22, 2015

I can't remember exactly, but it's easy. Look at the login form code on the main site and copy it. Just make sure the pilot ID input is named 'email' and password 'password'. Make sure to include the hidden input fields.

FlyingMachine · March 22, 2015

thank your itroob i did, unfortunately the form doesn't work this is the code

looking for your helo

<head>
<?php
/* This should be the first thing you place after a <body> tag
This is also required by phpVMS */
echo $page_htmlreq;
?>
<?php
/* This is required, so phpVMS can output the necessary libraries it needs */
echo $page_htmlhead;
?>	    <title>PilotCenter - Login Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="description" content="Expand, contract, animate forms with jQuery wihtout leaving the page" />
    <meta name="keywords" content="expand, form, css3, jquery, animate, width, height, adapt, unobtrusive javascript"/>
 <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
 <script src="js/cufon-yui.js" type="text/javascript"></script>
 <script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
 <script type="text/javascript">
  Cufon.replace('h1',{ textShadow: '1px 1px #fff'});
  Cufon.replace('h2',{ textShadow: '1px 1px #fff'});
  Cufon.replace('h3',{ textShadow: '1px 1px #000'});
  Cufon.replace('.back');
 </script>
   </head>
   <body>
 <div class="wrapper">
 <center> <img src="images/logo-login.png" /></center>
  <div class="content">
   <div id="form_wrapper" class="form_wrapper">
 <form class="login active">
  <h3><center>Pilot Center Access</center></h3>
  <div>
   <label>Pilot ID:</label>
   <input type="text" name="email" />
   <span class="error">This is an error</span>
  </div>
  <div>
	  <label>Password:</label>
   <input type="password" name="password" />

   <center><a href="forgot_password.html" rel="forgot_password" class="forgot linkform">Forgot your password?</a></center>
   <span class="error">This is an error</span>
  </div>
  <div class="bottom">
   <div class="remember"><input type="checkbox" name="remember" /><span>Keep me logged in</span></div>
  <input type="hidden" name="remember" value="on" />
  <input type="hidden" name="redir" value="index.php/profile" />
  <input type="hidden" name="action" value="login" />
  <input type="submit" name="submit" value="Log In" />
   <div class="clear"></div>
  </div>
 </form>
 <form class="forgot_password">
  <h3>Forgot Password</h3>
  <div>
   <label>Username or Email:</label>
   <input type="text" />
   <span class="error">This is an error</span>
  </div>
  <div class="bottom">
   <input type="submit" value="Send reminder"></input>
   <a href="index.html" rel="login" class="linkform">Suddenly remebered ? Log in here</a>
   <div class="clear"></div>
  </div>
 </form>
    <form name="loginform" action="<?php echo url('/login'); ?>" method="post">
   Sign-in with your pilot id or email, or <a href="<?php echo url('/registration'); ?>">register</a><br />
  <input type="text" name="email" value="" onclick="this.value=''" />
  <input type="password" name="password" value="" />
  <input type="hidden" name="remember" value="on" />
  <input type="hidden" name="redir" value="index.php/profile" />
  <input type="hidden" name="action" value="login" />
  <input type="submit" name="submit" value="Log In" />
  </form>
   </div>
   <div class="clear"></div>
  </div>
 </div>

 <!-- The Javascript -->
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript">
  $(function() {
 //the form wrapper (includes all forms)
   var $form_wrapper = $('#form_wrapper'),
 //the current form is the one with class active
 $currentForm = $form_wrapper.children('form.active'),
 //the change form links
 $linkform  = $form_wrapper.find('.linkform');

   //get width and height of each form and store them for later	 
   $form_wrapper.children('form').each(function(i){
 var $theForm = $(this);
 //solve the inline display none problem when using fadeIn fadeOut
 if(!$theForm.hasClass('active'))
  $theForm.hide();
 $theForm.data({
  width : $theForm.width(),
  height : $theForm.height()
 });
   });

   //set width and height of wrapper (same of current form)
   setWrapperWidth();

   /*
   clicking a link (change form event) in the form
   makes the current form hide.
   The wrapper animates its width and height to the
   width and height of the new current form.
   After the animation, the new form is shown
   */
   $linkform.bind('click',function(e){
 var $link = $(this);
 var target = $link.attr('rel');
 $currentForm.fadeOut(400,function(){
  //remove class active from current form
  $currentForm.removeClass('active');
  //new current form
  $currentForm= $form_wrapper.children('form.'+target);
  //animate the wrapper
  $form_wrapper.stop()
	  .animate({
	  width : $currentForm.data('width') + 'px',
	  height : $currentForm.data('height') + 'px'
	  },500,function(){
	  //new form gets class active
	  $currentForm.addClass('active');
	  //show the new form
	  $currentForm.fadeIn(400);
	  });
 });
 e.preventDefault();
   });

   function setWrapperWidth(){
 $form_wrapper.css({
  width : $currentForm.data('width') + 'px',
  height : $currentForm.data('height') + 'px'
 });
   }

   /*
   for the demo we disabled the submit buttons
   if you submit the form, you need to check the
   which form was submited, and give the class active
   to the form you want to show
   */
   $form_wrapper.find('input[type="submit"]')
    .click(function(e){
    e.preventDefault();
    });
  });
    </script>
   </body>

FlyingMachine · March 22, 2015

i have resolved the problem by changin this code

<?php echo url('/login'); ?>

by simple url, the question how i can make this page know and discover the abbreviation of phpvms such echo url...and make the exception if the user already

logged in it will show the pilot center without login form

thanks in advance

freshJet · March 22, 2015

include('../core/codon.config.php');

Make that the very first line. Make sure the path is correct as well.

FlyingMachine · April 5, 2015

Hello after some developing

finally i got the login form correctly working

<html>
<head>
<?php
/* This should be the first thing you place after a <body> tag
This is also required by phpVMS */
echo $page_htmlreq;
include('../core/codon.config.php');
?>
<?php
/* This is required, so phpVMS can output the necessary libraries it needs */
echo $page_htmlhead;
?> 
  <title>PilotCenter - Login Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
 <script src="js/cufon-yui.js" type="text/javascript"></script>
 <script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
 <script type="text/javascript">
  Cufon.replace('h1',{ textShadow: '1px 1px #fff'});
  Cufon.replace('h2',{ textShadow: '1px 1px #fff'});
  Cufon.replace('h3',{ textShadow: '1px 1px #000'});
  Cufon.replace('.back');
 </script>

   </head>
   <body>

<!-------- Loging Form --------------->
 <div class="wrapper">
 <center> <img src="phpvms/images/logo.png" /></center>
  <div class="content">
   <div id="form_wrapper" class="form_wrapper">
 <form class="login active" name="loginform" action="/home/index.php/login" method="post">
  <h3><center>Pilot Center Access</center></h3>
  <div>
   <label>Pilot ID:</label>
   <input type="text" name="email" />
   <span class="error">This is an error</span>
  </div>
  <div>
	  <label>Password:</label>
   <input type="password" name="password" />

   <center><a href="forgot_password.php" rel="forgot_password" class="forgot linkform">Forgot your password?</a></center>
   <span class="error">This is an error</span>
  </div>
  <div class="bottom">
   <div class="remember"><input type="checkbox" name="remember" /><span>Keep me logged in</span></div>
  <input type="hidden" name="redir" value="index.php/profile" />
  <input type="hidden" name="action" value="login" />
  <input type="submit" name="submit" value="Log In" />
   <div class="clear"></div>
  </div>
 </form>

  <form name="loginform" action="<?php echo url('/login'); ?>" method="post">
  <input type="text" name="email" value="" onclick="this.value=''" />
  <input type="password" name="password" value="" />
  <input type="hidden" name="remember" value="on" />
  <input type="hidden" name="redir" value="index.php/profile" />
  <input type="hidden" name="action" value="login" />
  <input type="submit" name="submit" value="Log In" />
  </form>
   </div>
   <div class="clear"></div>
  </div>
 </div>
<!-------- Loging Form --------------->  



   </body>
</html>

Please let me know how i can this page know the user is already loged in or not

for example this is html page

situated on pilotcenter.domaine.com and the phpvms folder is pilotcenter.domain.com/phpvms

so how i can make the page index.php on pilotcenter discover the user is already logged-in phpvms or not

if the user is logged in the page must to redirect to pilotcenter.domain.com/phpvms if not the user has to loggin

looking forward,

sorry for this question again

FlyingMachine · April 6, 2015

lookig forward an answer

t_bergman · April 6, 2015

You could do a php if statement.

If logged in { http meta refresh

}

else { your code

}

FlyingMachine · April 6, 2015

unfortunately doesn't work

t_bergman · April 6, 2015

Let me find the code and I will reply back to this thread, I accidentally deleted mine (just found out) and my host is recovering the file from a backup.

FlyingMachine · April 6, 2015

thank you dear appreciate your help for me each time

simpilot · April 7, 2015

After:

include('../core/codon.config.php');

use:

<?php
if(Auth::LoggedIn())   {
  //do stuff if they are logged in...
}
else	 {
 //do stuff because they are not logged in
}
?>

FlyingMachine · April 7, 2015

Thank you sir but this the code i have submited but doesn't work

if the user logged in

redirect to the /home/index.php the folder of phpvms is pilotcenter.domaine.com/home

else

show the index.php in this folder

pilotcenter.domaine.com/index.php (index.php) this is the login page

<html>
<head>
<?php
include('home/core/codon.config.php');
?>
<?php
/* This should be the first thing you place after a <body> tag
This is also required by phpVMS */
echo $page_htmlreq;
?>
<?php
/* This is required, so phpVMS can output the necessary libraries it needs */
echo $page_htmlhead;
?> 
  <title>PilotCenter - Login Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
 <script src="js/cufon-yui.js" type="text/javascript"></script>
 <script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
 <script type="text/javascript">
  Cufon.replace('h1',{ textShadow: '1px 1px #fff'});
  Cufon.replace('h2',{ textShadow: '1px 1px #fff'});
  Cufon.replace('h3',{ textShadow: '1px 1px #000'});
  Cufon.replace('.back');
 </script>

   </head>
   <body>
<?php
if(Auth::LoggedIn())   {
	  //do stuff if they are logged in...
  echo <meta http-equiv='refresh' content='0;url=home/index.php'>;

}
else	 {
	 //do stuff because they are not logged in
  <!-------- Loging Form --------------->

echo <div class="wrapper">
 <center> <img src="http://royalairmarocvirtual.com/phpvms/images/logo.png" /></center>
  <div class="content">
   <div id="form_wrapper" class="form_wrapper">
 <form class="login active" name="loginform" action="/home/index.php/login" method="post">
  <h3><center>Pilot Center Access</center></h3>
  <div>
   <label>Pilot ID:</label>
   <input type="text" name="email" />
   <span class="error">This is an error</span>
  </div>
  <div>
	  <label>Password:</label>
   <input type="password" name="password" />

   <center><a href="forgot_password.php" rel="forgot_password" class="forgot linkform">Forgot your password?</a></center>
   <span class="error">This is an error</span>
  </div>
  <div class="bottom">
   <div class="remember"><input type="checkbox" name="remember" /><span>Keep me logged in</span></div>
  <input type="hidden" name="redir" value="index.php/profile" />
  <input type="hidden" name="action" value="login" />
  <input type="submit" name="submit" value="Log In" />
   <div class="clear"></div>
  </div>
 </form>

  <form name="loginform" action="<?php echo url('/login'); ?>" method="post">
  <input type="text" name="email" value="" onclick="this.value=''" />
  <input type="password" name="password" value="" />
  <input type="hidden" name="remember" value="on" />
  <input type="hidden" name="redir" value="index.php/profile" />
  <input type="hidden" name="action" value="login" />
  <input type="submit" name="submit" value="Log In" />
  </form>
   </div>
   <div class="clear"></div>
  </div>
 </div>
<!-------- Loging Form --------------->  
;
}
?>



   </body>
</html>

any comment ?

t_bergman · April 7, 2015

You cannot mix html and php.

So

<?php
if(Auth::LoggedIn())   {
	  //do stuff if they are logged in...
?>
HTML GOES HERE
<?php
}
else	 {
	 //do stuff because they are not logged in
?>
HTML GOES HERE
<?php
}
?>

FlyingMachine · April 7, 2015

I'm so happy everything cool with you sirs, thank you again login page done, im working now on pilot center

i will back for you with final result

Sign In

Customize Login Form

Recommended Posts

FlyingMachine

freshJet

FlyingMachine

FlyingMachine

freshJet

FlyingMachine

FlyingMachine

t_bergman

FlyingMachine

t_bergman

FlyingMachine

simpilot

FlyingMachine

t_bergman

FlyingMachine

Join the conversation