Login at Community Support for OpenDocMan (Deprecated)

Olivier · 02-22-2012, 02:22 AM

Hello,
I think opendocman can be a very good opensource. But, I do not understand why all web pages are not in smarty template. The advantage of smarty is that all user can define his template, if he know HTML. I start to modify the index.php to put the login page in the smarty concept. I make a quickly example.
The first think is to extract the php code of the login page, initialize the requiered variables and create a login.tpl file.
For exemple, I modify the lines of index.php (107-153) to put :

if(isset($_REQUEST['redirection']))
{
$GLOBALS['smarty']->assign('redirection', $_REQUEST['redirection']);
}
else
{
$GLOBALS['smarty']->assign('redirection', false);
}
$GLOBALS['smarty']->assign('allow_password_reset',$GLOBALS['CONFIG']['allow_password_reset']);
$GLOBALS['smarty']->assign('allow_signup',$GLOBALS['CONFIG']['allow_signup']);
$GLOBALS['smarty']->display('logon.tpl');

I created an logon.tpl file :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 8 - <a class="postlink" href="http://www.wysiwygwebbuilder.com">http://www.wysiwygwebbuilder.com</a>">
<link rel="stylesheet" type="text/css" href="addon/css/login_style.css" />
<script src="addon/js/validform.js" type="text/javascript"></script>
</head>
<body>
<div id="wb_Image2" style="position:absolute;left:32px;top:7px;width:226px;height:151px;z-index:12;padding:0;">
<img src="images/altimirambitecnia.jpg" id="Image2" alt="" border="0" style="width:226px;height:151px;"></div>
<div id="wb_Text4" style="position:absolute;left:146px;top:167px;width:737px;height:62px;z-index:13;">
<span style="color:#00008B;font-family:Arial;font-size:53px;"><strong>AccÃ¨s al vostre espai client</strong></span></div>
<div id="wb_Form1" style="position:absolute;left:261px;top:259px;width:387px;height:209px;z-index:10;">
<form name="Form1" method="post" action="index.php" id="Form1" onsubmit="return ValidateForm1(this)">
<input type="text" id="Editbox1" style="position:absolute;left:153px;top:94px;width:221px;height:19px;line-height:19px;z-index:0;" name="frmuser" value="">
<input type="password" id="Editbox2" style="position:absolute;left:153px;top:119px;width:221px;height:19px;line-height:19px;z-index:1;" name="frmpass" value="">
<div id="wb_Text1" style="position:absolute;left:21px;top:101px;width:50px;height:16px;z-index:2;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Usuari</span></div>
<div id="wb_Text2" style="position:absolute;left:21px;top:122px;width:82px;height:16px;z-index:3;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Mot clau</span></div>
<div id="wb_Image1" style="position:absolute;left:14px;top:5px;width:88px;height:87px;z-index:4;padding:0;">
<img src="images/login.jpg" id="Image1" alt="" border="0" style="width:88px;height:87px;"></div>
<div id="wb_Text3" style="position:absolute;left:112px;top:11px;width:260px;height:34px;z-index:5;">
<span style="color:#00008B;font-family:Arial;font-size:29px;"><strong>Altimir</strong></span><span style="color:#000000;font-family:Arial;font-size:29px;"><strong> </strong></span><span style="color:#00008B;font-family:Arial;font-size:29px;"><strong>Ambi</strong></span><span style="color:#005500;font-family:Arial;font-size:29px;"><strong>tÃ¨cnia</strong></span></div>
<input type="submit" id="Button1" name="login" value="Submit" style="position:absolute;left:275px;top:170px;width:96px;height:25px;z-index:6;">
{if $redirection}
<input type="hidden" id="Editbox3" style="position:absolute;left:154px;top:68px;width:94px;height:19px;line-height:19px;z-index:7;" ame="redirection" value="{$redirection}">
{/if}
{if $allow_password_reset == 'True' }
<div id="wb_Text5" style="position:absolute;left:20px;top:154px;width:250px;height:16px;z-index:8;">
<a href="$g_base_url/forgot_password.php">"$g_lang_forgotpassword"</a>
{/if}
{if $allow_signup == 'True'}
<div id="wb_Text6" style="position:absolute;left:20px;top:173px;width:250px;height:16px;z-index:9;">
<a href="$g_base_url/signup.php">$g_lang_signup}</a>;
{/if}
</form>
</div>

And it is all.
Now I will modify my logon.tpl to put css style.
See you early.
Bye

Olivier · 02-22-2012, 04:45 AM

Hello,
The next step is define a structured template. First I make a new folder adddon on the root directory with the subfolders images js css
I created the tpl file :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="addon/css/login_style.css" />
<script src="addon/js/validform.js" type="text/javascript"></script>
</head>
<body>
<div id="header_page">
<div id="header_logo">
<img src="addon/images/altimirambitecnia.png" alt="Iso Altimir ambitecnia"/>
</div>
<div id="header_text">
<h1><span class="blau_alti">Altimir </span><span class="blau">Ambitè</span><span class="vert">cnia</span></h1>
</div>
<div id="header_time">
<iframe src="http://free.timeanddate.com/clock/i2zpgj1q/tlfr2/fn12/fs42/fcfff/tct/pc090/ftb/bls0/brs0/bts4/btc00b/bbs4/bbc00b/th1" frameborder="0" width="211" height="52" allowTransparency="true"></iframe>
</div>
</div>
<form name="Form1" id="form_page" method="post" action="index.php" id="Form1" onsubmit="return ValidateForm1(this)">
<img src="addon/images/login.jpg" id="Image1" alt=""/>
<table>
<tbody>
<tr align="Left">
<td width=45%><span class="label">{$g_lang_username}</span></td>
<td colspan="2"><input type="text" id="Editbox1" name="frmuser" value=""></td>
</tr>
<tr align="Left">
<td width=45%><span class="label">{$g_lang_password}</span></td>
<td colspan="2"><input type="password" id="Editbox2" name="frmpass" value=""></td>
</tr>
</tbody>
</table>
<input type="submit" id="Button1" name="login" value="Submit">
{if $redirection}
<input type="hidden" id="Editbox3" ame="redirection" value="{$redirection}">
{/if}
{if $allow_password_reset == 'True' }
<div class="link">
<a href="$g_base_url/forgot_password.php">{$g_lang_forgotpassword}</a>
</div>
{/if}
{if $allow_signup == 'True'}
<div class="link">
<a href="$g_base_url/signup.php">{$g_lang_signup}</a>;
</div>
{/if}
</form>
</body>
</html>

the css file (login_style.css)

body
{
background-color: #FFFFFF;
color: #000000;
}

/*---------------------------------------------------------*/
/* Header definition */
/*---------------------------------------------------------*/
#header_page
{
width: 90%;
height:151px;
margin-left: auto;
margin-bottom:30px;
background:#FFFFFF;
}
#header_logo
{
display: inline-block;
width: 20%;
height:151px;
vertical-align: top;
background:none;
}
#header_logo img
{
display: inline-block;
height:151px;
width:auto;
vertical-align: top;
}
#header_text
{
display: inline-block;
width: 40%;
height:151px;
vertical-align: top;
background:none;
text-align:center;
}
#header_text h1
{
font-size: 3.5em;
font-family: 'Trebuchet MS', serif;
}
#header_time
{
display: inline-block;
width: 30%;
height:151px;
background:none;
vertical-align: top;
margin-top:45px;
margin-left:70px;
}
.vert
{
color:#26ec06;
}
.blau
{
color:#2c05f3;
}
.blau_alti
{
color:#064975;
}
/*---------------------------------------------------------*/
/* form definition */
/*---------------------------------------------------------*/
#form_page
{
width: 410px;
height:300px;
margin-left: 30%;
margin-bottom:30px;
background:none;
border: 4px solid orange;
opacity:0.7;
filter:alpha(opacity=70);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
box-shadow: 8px 8px 0px #aaa;
filter:progid Big Grin

XImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
zoom: 1;

}
#form_page img
{
display: inline-block;
width:88px;
height:87px;
vertical-align: top;
margin-top:20px;
margin-left:15px;
}
#Editbox1, #Editbox2
{
display: inline-block;
border: 1px #000000 solid;
background-color: #E6E6FA;
color :#000000;
font-family: Arial;
font-size: 18px;
text-align: left;
vertical-align: middle;
width:200px;
height:25px;
}
#Editbox1:focus, #Editbox2:focus{
border: 1px red solid;
}
#Button1
{
margin-left:295px;
margin-top:10px;
width:80px;
height:30px;
}
.label
{
margin-left:20px;
font-family: Arial;
font-size: 18px;
}
.link
{
margin-left:20px;
margin-top:10px;
}
.link a
{
font-family: Arial;
font-size: 12px;
color:blue;
}

And a litle js for the form validation:

function ValidateForm1(theForm)
{
var regexp;
if (theForm.Editbox1.value == "")
{
alert("Please enter a value for the \"frmuser\" field.");
theForm.Editbox1.focus();
return false;
}
return true;
}

The index.php file must have the previous post modificacions.
And the result is:

Olivier · 02-22-2012, 05:33 AM

Hello,
If we have an login error, the best way is to restart the lgin page.
To do this we can modify the error.php file and modify at the top, to display the login page if we are not connected, and not display the menu and the error status bar. :

if (!isset($_SESSION['uid']))
{
draw_login();
}
else
{
draw_header('Error');
draw_menu($_SESSION['uid']);
@draw_status_bar('Error', $_REQUEST['last_message']);
}

And modiy at the bottom to not display the foter if noboddy is connected.

if (isset($_SESSION['uid']))
{
draw_footer();
}

Stephen · 02-22-2012, 05:35 PM

Hello Olivier,

We will be moving all of the HTML over to smarty soon. It is important for us to separate the logic from the design, but we have had other important issues we have had to deal with.

Are you using 1.2.5.7? If so, 1.2.6 has some of the smarty templates created.

Steve

Olivier · 02-23-2012, 02:14 AM

Hello,
I use the 1.2.6
Yes it is important to separe all HTML from the php files. Actualy I modify the users pages. If you want the source I send you all files when it work fine.
I put css horizontal menus to access directly at all functions, and I look why the datatables does not look like the jquery datatables samples.
Best regard,
Olivier

Olivier · 02-23-2012, 09:16 AM

Hello,
I send you the first version for the user managment and the css menu. I use the user2.php source to have a copy of oficial version. I modified the admin.php to call to the user2.php. I added function in the user class to seek user informations to fill the form.
Best regard,
Olivier

Olivier · 02-23-2012, 02:19 PM

Hello,
I put new files with css menu and list user with direct access to update/delete/view buttons.
Best regard,
Olivier
[attachment=0]

Olivier · 02-23-2012, 02:23 PM

Hello,
I put screens with the modifications.
Best regard,
Olivier

ilmkidunya1 · 03-07-2012, 10:56 PM

Can i create my own theme

Stephen · 03-08-2012, 09:34 AM

I am currently working on moving all the HTML over to smarty template files. This will make it much easier to create/use custom templates.

Steve