From 6c909a5fe7f616fccbc9fef9535f5b50a592d258 Mon Sep 17 00:00:00 2001
From: david <darranz@rodax-software.com>
Date: Tue, 18 Sep 2012 14:01:29 +0000
Subject: [PATCH] Cambio de los formularios de entrada y registro (en paralelo)
 (sin terminar)

git-svn-id: https://192.168.0.254/svn/Proyectos.Incam_PROFIND_Aterrizaje/trunk@3 db07b8d6-80f3-1c4e-84de-227a4fed3af2
---
 src/css/style.css |  70 +++++++++++++++++
 src/index.html    | 189 +++++++++++++++++++++++++---------------------
 2 files changed, 171 insertions(+), 88 deletions(-)

diff --git a/src/css/style.css b/src/css/style.css
index 3226522..e263cbb 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -211,6 +211,14 @@ p {
     border-top: 1px dashed #ccc;
     display: inline-block;
 }
+.divider-vertical {
+    width: 100%;
+    margin: 0 10px;
+    border-left: 1px dashed #ccc;
+    display: inline-block;
+    height: 100%;
+}
+
 .spacer-30px {
     width: 100%;
     height: 30px;
@@ -327,6 +335,25 @@ p {
     line-height: 2.2em;
     margin-bottom: 10px;
 }
+/*boxed features - style 1 and style2*/
+.feature-box1, .feature-box2 {
+	background: #f4f4f4; /* for non-css3 browsers */
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f4f4f4'); /* for IE */
+	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f4f4f4)); /* for webkit browsers */
+	background: -moz-linear-gradient(top, #ffffff, #f4f4f4); /* for firefox 3.6+ */
+	background:  -o-linear-gradient(top, #ffffff, #f4f4f4);
+	border: 1px solid #efefef;
+	padding: 20px;
+	float: left;
+}
+.feature-box1 img {
+	float: right;
+}
+.feature-box2 img {
+	margin: 40px 20px 40px 0px;
+	float: left;
+}
+
 
 .feature-list li {
     margin-bottom: 15px;
@@ -341,6 +368,45 @@ p {
     float: left;
 }
 
+.form-box {
+    border: 1px solid #ddd;
+    background: #f4f4f4;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f4f4f4');
+    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f4f4f4));
+    background: -moz-linear-gradient(top, #ffffff, #f4f4f4);
+    background:  -o-linear-gradient(top, #ffffff, #f4f4f4);    
+    position: relative;
+}
+
+.form-box h4 {
+    width: auto;
+    padding: 20px;
+    margin-top: 0;
+    font-family: Arial,Helvetica,sans-serif;
+    font-size: 20px;
+    font-weight: normal;
+    color: #fff;
+}
+
+.form-box form {
+    min-height: 280px;
+}
+
+.form-box .form-actions {
+    background: #f6f6f6; /* for non-css3 browsers */
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6'); /* for IE */
+    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f6f6f6)); /* for webkit browsers */
+    background: -moz-linear-gradient(top, #ffffff, #f6f6f6); /* for firefox 3.6+ */
+    background:  -o-linear-gradient(top, #ffffff, #f6f6f6);
+    border-top: 1px solid #e4e4e4;
+    margin-bottom: 0;
+    margin-top: 0;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
 /*----------------------------------------*/
 .pricing {
     border: 1px solid #e4e4e4;
@@ -414,6 +480,10 @@ label, input, button, select, textarea {
 select {
     border-radius: 3px;
 }
+.controls label {
+    line-height: 1.3em;
+}
+
 label {
     font-family: "Droid Sans",Arial,Helvetica,Geneva,sans-serif;
     color: #222222;
diff --git a/src/index.html b/src/index.html
index 734a9c3..f4d1bb7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,6 +9,7 @@
 
         <link rel="shortcut icon" href="favicon.ico">
         <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
+        <link rel="stylesheet" media="screen" href="css/bootstrap.min.css"/>
         <link rel="stylesheet" media="screen" href="css/style.css"/>
         <script src="js/jquery-1.8.1.min.js" type="text/javascript"></script>
     </head>
@@ -45,93 +46,79 @@
 
         <div class="container">    
             <div class="row">
-                <div class="span12">
-                    <div class="nav pagination-centered">
-                        <a href="#entrar" data-toggle="tab" id="btn-entrar" class="btn btn-primary btn-big"><i class="icon-white icon-user"></i> Entrar (socios)</a>
-                        <a href="#registro" data-toggle="tab" id="btn-registros" class="btn btn-success btn-big"><i class="icon-white icon-edit"></i> ¿Quiere crear una cuenta?</a>
+                <div class="span6">
+                    <div id="entrar" class="form-box">
+                        <h4 class="btn-primary"><i class="icon-white icon-user"></i> Entrada para socios</h4>
+                        <form class="form-horizontal" id="entrarForm" method='post' action='/usuarios/index.php?r=site/login'>
+                            <fieldset>
+                                <div class="control-group">
+                                    <label class="control-label" for="FormularioLogin_email">Email:</label>
+                                    <div class="controls">
+                                        <input type="text" class="input-large" id="FormularioLogin_email" name="FormularioLogin_email" placeholder="">
+                                    </div>
+                                </div>
+                                <div class="control-group">
+                                    <label class="control-label" for="FormularioLogin_password">Crear password:</label>
+                                    <div class="controls">
+                                        <input type="password" class="input-large" id="FormularioLogin_password" name="FormularioLogin_password" placeholder="">
+                                    </div>
+                                </div>
+                                <div class="control-group">
+                                    <div class="controls">
+                                        <p>Olvidé mi password: <a href="">Solicitar</a></p>
+                                    </div>
+                                </div>
+                                <div class="form-actions">
+                                    <button title="Entrar a mi cuenta" class="btn btn-primary btn-large" type="submit">Entrar</button>
+                                </div>
+                            </fieldset>
+                        </form>
+                        <div id="resultado"></div>
+                    </div>   
+                </div>
+                <div class="span6">
+                    <div id="registro" class="form-box">
+                        <h4 class="btn-success"><i class="icon-white icon-edit"></i> ¿Quiere crear una cuenta? (gratis)</h4>
+                        <form class="form-horizontal" id="registroForm" method='post' action=''>
+                            <fieldset>
+                                <div class="control-group">
+                                    <label class="control-label" for="registroEmail">Email:</label>
+                                    <div class="controls">
+                                        <input type="text" class="input-large" id="registroEmail" name="registroEmail" placeholder="">
+                                    </div>
+                                </div>
+                                <div class="control-group">
+                                    <label class="control-label" for="registroPassword">Crear password:</label>
+                                    <div class="controls">
+                                        <input type="password" class="input-large" id="registroPassword" name="registroPassword" placeholder="">
+                                    </div>
+                                </div>
+                                <div class="control-group">
+                                    <label class="control-label" for="registroConfirmPassword">Confirmar password:</label>
+                                    <div class="controls">
+                                        <input type="password" class="input-large" id="registroConfirmPassword" name="registroConfirmPassword" placeholder="">
+                                    </div>
+                                </div>                                        
+                                <div class="control-group">
+                                    <div class="controls">
+                                        <label for="registroAcepto" class="checkbox">
+                                            <input type="checkbox" id="registroAcepto" name="registroAcepto" value="0"> Acepto los <a target="_blank" href="terminos-uso.html">términos de uso</a> y la <a target="_blank" href="politica-privacidad.html">política de privacidad</a>.
+                                        </label>                                                                                               
+                                    </div>
+                                </div>
+                                <div class="form-actions">
+                                    <button title="Crear mi cuenta" class="btn btn-success btn-large" type="submit">Pulsa aquí</button>
+                                </div>
+                            </fieldset>
+                        </form>
                     </div>                    
-                    <div class="tabbable">
-                        <div class="tab-content">
-                            <div id="entrar" class="tab-pane hide well">
-                                <h4>Entrada para socios</h4>
-                                <form class="form-horizontal" id="entrarForm" method='post' action=''>
-                                    <fieldset>
-                                        <div class="control-group">
-                                            <label class="control-label" for="entrarEmail">Email:</label>
-                                            <div class="controls">
-                                                <input type="text" class="input-xlarge" id="entrarEmail" name="entrarEmail" placeholder="">
-                                            </div>
-                                        </div>
-                                        <div class="control-group">
-                                            <label class="control-label" for="entrarPassword">Crear password:</label>
-                                            <div class="controls">
-                                                <input type="password" class="input-xlarge" id="entrarPassword" name="entrarPassword" placeholder="">
-                                            </div>
-                                        </div>
-                                        <div class="control-group">
-                                            <div class="controls">
-                                                <p>Olvidé mi password: <a href="">Solicitar</a></p>
-                                                <button title="Entrar a mi cuenta" class="btn btn-primary" type="submit">Entrar</button>
-                                            </div>
-                                        </div>
-                                    </fieldset>
-                                </form>
-                            </div>
-                            <div id="registro" class="tab-pane hide well">
-                                <h4>Crear una cuenta</h4>
-                                <form class="form-horizontal" id="registroForm" method='post' action=''>
-                                    <fieldset>
-                                        <div class="control-group">
-                                            <label class="control-label" for="registroEmail">Email:</label>
-                                            <div class="controls">
-                                                <input type="text" class="input-xlarge" id="registroEmail" name="registroEmail" placeholder="">
-                                            </div>
-                                        </div>
-                                        <div class="control-group">
-                                            <label class="control-label" for="registroPassword">Crear password:</label>
-                                            <div class="controls">
-                                                <input type="password" class="input-xlarge" id="registroPassword" name="registroPassword" placeholder="">
-                                            </div>
-                                        </div>
-                                        <div class="control-group">
-                                            <label class="control-label" for="registroConfirmPassword">Confirmar password:</label>
-                                            <div class="controls">
-                                                <input type="password" class="input-xlarge" id="registroConfirmPassword" name="registroConfirmPassword" placeholder="">
-                                            </div>
-                                        </div>                                        
-                                        <div class="control-group">
-                                            <label for="registroTipoCuenta" class="control-label">Tipo de cuenta</label>
-                                            <div class="controls">
-                                                <select id="registroTipoCuenta" name="registroTipoCuenta" class="input-xlarge">
-                                                    <option value="personal">Cuenta personal</option>
-                                                    <option value="grupo">Cuenta de grupo</option>
-                                                </select>
-                                            </div>
-                                        </div>                                        
-                                        <div class="control-group">
-                                            <div class="controls">
-                                                <label for="registroAcepto" class="checkbox">
-                                                    <input type="checkbox" id="registroAcepto" name="registroAcepto" value="0"> Acepto los <a target="_blank" href="terminos-uso.html">términos de uso</a> y la <a target="_blank" href="politica-privacidad.html">política de privacidad</a>.
-                                                </label>                                                                                               
-                                            </div>
-                                        </div>
-                                        <div class="control-group">
-                                            <div class="controls">
-                                                <button title="Crear mi cuenta" class="btn btn-success" type="submit">Pulsa aquí</button>
-                                            </div>
-                                        </div>
-                                    </fieldset>
-                                </form>
-                            </div>
-                        </div>
-                    </div>
                 </div>
             </div>
         </div>
 
         <div class="container clearfix">            
             <div class="row pagination-centered">
-                <div class="divider-10px"></div>
+                <div class="divider"></div>
                 <div class="span12">
                     <h3>PROFIND tiene aplicación en las siguientes situaciones</h3>
                 </div>
@@ -195,22 +182,49 @@
 
         <script type="text/javascript">
             $(document).ready(function(){
+                var enviar_login = function() {
+                    var $form = $("#entrarForm");
+                    $.ajax({
+                        url: $form.attr('action'),
+                        dataType: 'json',
+                        type: 'POST',
+                        data : $form.serialize()+'&ajax=login-form',
+                        success: function(data, textStatus, XMLHttpRequest) {
+                            console.log("data => " + data);
+                            console.log(textStatus);
+                            console.log(XMLHttpRequest);
+							
+                            if (data != null && typeof data == 'object') {
+                                $('#resultado').val('');
+                                $.each(data, function(key, value){
+                                    $('#resultado').append(key + ' => ' + value);
+                                });
+ 
+                            }
+                        },
+                        error: function(XMLHttpRequest, textStatus, errorThrown) {
+                            $('#resultado').append('Error de comunicación con el servidor');
+                        }
+                    });
+                    return false;							
+                };
+                
                 $("#entrarForm").validate({
                     rules:{
-                        entrarEmail:{
+                        FormularioLogin_email:{
                             required:true,
                             email: true
                         },
-                        entrarPassword:{
+                        FormularioLogin_password:{
                             required:true
                         }
                     },
                     messages:{
-                        entrarEmail:{
+                        FormularioLogin_email:{
                             required:"Introduzca su e-mail",
                             email:"Indique un e-mail válido"
                         },
-                        entrarPassword:{
+                        FormularioLogin_password:{
                             required:"Indique su contraseña",
                         }
                     },
@@ -221,10 +235,9 @@
                     },
                     unhighlight: function(element, errorClass, validClass) {
                         $(element).parents('.control-group').removeClass('error');
-                        $(element).parents('.control-group').addClass('success');
-                    }
-                });
-                
+                    },
+                    submitHandler: enviar_login
+                });				
                 
                 $("#registroForm").validate({
                     rules:{