Setup popup for login

Tried setting up ui theme but getting strange results.

diff --git a/models/front/registrations/index.php b/models/front/registrations/index.php
index 1a6cf98..df15033 100644 (file)
--- a/models/front/registrations/index.php
+++ b/models/front/registrations/index.php
@@ -79,8 +79,15 @@ class GlmMembersFront_registrations_index
      */
     public function modelAction($actionData = false)
     {
-
+        global $wp_scripts;
         $page = false;
+        $ui = $wp_scripts->query('jquery-ui-core');
+        wp_enqueue_style(
+            'jquery-ui-smoothness',
+            "//ajax.googleapis.com/ajax/libs/jqueryui/{$ui->ver}/themes/smoothness/jquery-ui.min.css",
+            false,
+            null
+        );
 
         // Check for valid page - if not valid default to "list"
         $page = (isset($actionData['request']['page']) ? $actionData['request']['page']: false);

diff --git a/views/front/registrations/accountHeader.html b/views/front/registrations/accountHeader.html
index a360b6c..8e1b246 100644 (file)
--- a/views/front/registrations/accountHeader.html
+++ b/views/front/registrations/accountHeader.html
@@ -1,5 +1,5 @@
 <div id="accountHeader" class="glm-row">
-    
+
     <div id="accountHeader-left" class="accountHeader-section small-12 medium-12 medium-centered large-4 large-uncentered columns">
         <a id="accountHeader-list-link"href="{$regUrl}" class="button glm-reg-header-btn">
             <span>Event Registration List</span>
@@ -68,7 +68,7 @@
         </a>
         <span class="button glm-reg-header-btn" style="cursor: default;"> Logged in as {$loggedIn.fname} {$loggedIn.lname} </span>
     {else}
-        <a id="appLogin" class="button glm-reg-header-btn" href="{$regUrl}?page=login">
+        <a id="appLogin" class="button tiny glm-reg-header-btn" href="#">
             <span>Login</span>
         </a>
 <!--        <div id="appLogin" class="button glm-reg-header-btn hidden" href="#">
@@ -80,10 +80,22 @@
         <a id="register" class="" href="{$regUrl}?page=register">
             <span>Create an Account?</span>
         </a>
-        
+
     {/if}
     </div>
 
+    <div id="glm-login-form" title="Login">
+        <p class="glm-required">All Fields Required</p>
+        <form action="{$regUrl}?page=login" method="post">
+            <input type="hidden" name="option" value="submit">
+            <input type="hidden" name="page" value="login">
+            <label>Email Address</label>
+            <input type="email" name="username" class="login-email text ui-widget-content ui-corner-all">
+            <label>Password</label>
+            <input type="password" name="password" class="login-password text ui-widget-content ui-corner-all">
+        </form>
+    </div>
+
 </div>
 <script type="text/javascript">
 var glmWidget = {
@@ -117,8 +129,57 @@ jQuery(document).ready(function($) {
             }
         });
     });
-    loginBox = $("appLogin-box").click(function () {
-       this.toggleClass("hidden");
+    var dialog, loginForm,
+        email = $('.login-email'),
+        password = $('.login-password'),
+        allFields = $( [] ).add( email ).add( password );
+    $("#appLogin").click(function(){
+        dialog.dialog( 'open' );
     });
+    function checkEmail(email){
+        var regex = {literal}/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/{/literal};
+        if( !regex.test(email.val().trim()) ) {
+            email.addClass( 'ui-state-error' );
+            return false;
+        } else {
+            return true;
+        }
+    };
+    function checkLength( o, n, min, max ) {
+      if ( o.val().length > max || o.val().length < min ) {
+        o.addClass( "ui-state-error" );
+        updateTips( "Length of " + n + " must be between " +
+          min + " and " + max + "." );
+        return false;
+      } else {
+        return true;
+      }
+    }
+    dialog = $("#glm-login-form").dialog({
+        autoOpen: false,
+        resizable: false,
+        modal: true,
+        width: 350,
+        height: 330,
+        closeText: "cancel",
+        buttons: {
+            "Login": function(){
+                var valid = true;
+
+                valid = valid && checkEmail( email );
+                valid = valid && checkLength( email, 'username', 6, 80 );
+                valid = valid && checkLength( password, 'password', 5, 16 );
+
+                console.log( email );
+                console.log( password );
+                console.log( valid );
+                return false;
+            },
+            "Cancel": function(){
+                $(this).dialog('close');
+            },
+        },
+    });
+
 });
 </script>