Jump to content

Customize Login Form

FlyingMachine

By FlyingMachine
in Support Forum

 Share

Recommended Posts

FlyingMachine Newbie

FlyingMachine

Posted
Posted

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,

Link to comment
Share on other sites
FlyingMachine Newbie

FlyingMachine

Posted
  • Author
Posted

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>

Link to comment
Share on other sites
  • 2 weeks later...
FlyingMachine Newbie

FlyingMachine

Posted
  • Author
Posted

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

Link to comment
Share on other sites
FlyingMachine Newbie

FlyingMachine

Posted
  • Author
Posted

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 ?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing
×
×
  • Create New...