Working on the register form
authorSteve Sutton <steve@gaslightmedia.com>
Fri, 29 Sep 2017 20:50:44 +0000 (16:50 -0400)
committerSteve Sutton <steve@gaslightmedia.com>
Fri, 29 Sep 2017 20:50:44 +0000 (16:50 -0400)
Currently looking at way to display the errors once they leave the email
field to show it's not a valid email address.

css/front.css
js/frontRegApp.js
js/models/front/regClass.js
js/models/front/regEvent.js
js/models/front/register.js
js/views/front/app.js
js/views/front/login.js
js/views/front/register.js
models/admin/ajax/account.php
models/front/registrations/registration.php
views/front/registrations/registration.html

index 061ddd9..c9fa998 100644 (file)
@@ -130,6 +130,7 @@ div.glm-reg-register {
     position: absolute;
     top: 10vh;
     left: 10vw;
+    z-index: 999;
 }
 div.glm-reg-register div {
     clear: both;
@@ -139,6 +140,9 @@ div.glm-reg-register input {
     margin-right: 5px;
     float: left;
 }
+div.glm-reg-register input.error {
+    border: 2px solid red !important;
+}
 .reg-class-detail {
     /* display: none; */
 }
@@ -163,7 +167,7 @@ div.glm-reg-register input {
     padding: 2rem;
     position: absolute;
     left: 1rem;
-    top: 3rem;
+    top: 0;
     width: 30rem;
 }
 .new-reg .reg_fname, .new-reg .reg_lname {
index 2bb8115..e264821 100644 (file)
@@ -135,7 +135,6 @@ app.Models.Front.RegClass = Backbone.Model.extend({
         name: 'regClass',
         id: 0,
         reg_event: 0,
-        name: '',
         descr: '',
         reg_rate_id: 0,
         reg_rate_name: '',
@@ -176,7 +175,7 @@ app.Models.Front.RegEvent = Backbone.Model.extend({
 
     initialize: function(){
         // for setting up classes
-        this.classes = new app.Collections.Front.RegClasses;
+        this.classes = new app.Collections.Front.RegClasses();
     },
 
     setClasses: function( regClasses ){
@@ -277,6 +276,7 @@ app.Models.Front.Register = Backbone.Model.extend({
         validEmail: false,
         name: 'register',
         email: '',
+        emailError: '',
         password: '',
         fname: '',
         lname: '',
@@ -550,6 +550,9 @@ app.Views.Front.App = Backbone.View.extend({
                 this.loginModel.destroy();
                 this.loginView.remove();
                 this.render();
+                // this.event.model.classes.map(function(item){
+                //     item.trigger( 'change' );
+                // });
             } else {
                 console.log( 'Login failed' );
                 this.loginModel.set({ message: 'Failed login!' });
@@ -643,7 +646,7 @@ app.Views.Front.Login = Backbone.View.extend({
 
     events: {
         'click #loginCancel': 'closeLoginForm',
-        'keydown': 'keyAction',
+        //'keydown': 'keyAction',
     },
 
     initialize: function(){
@@ -969,10 +972,12 @@ app.Views.Front.Register = Backbone.View.extend({
 
     events: {
         'click #registerCancel': 'closeForm',
-        'keydown': 'keyAction',
+        'focusout .account_email': 'checkEmail',
+        'focusout .account_password': 'checkPassword',
     },
 
     initialize: function(){
+        this.listenTo( this.model, 'change', this.render );
     },
 
     render: function(){
@@ -986,40 +991,84 @@ app.Views.Front.Register = Backbone.View.extend({
         return;
     },
 
-    keyAction: function(e){
-        if ( e.which === 13 ) {
-            console.log( 'Enter key used' );
-        } else if ( e.which === 9 ) {
-            console.log( 'Tab key used' );
-            // if they entered email then test for existing email
-            if ( this.model.get( 'validEmail' ) === true ){
-                return;
+    addErrorMsg: function( error ){
+        var errors = this.model.get( 'errors' );
+        console.log( 'in addErrorMsg' );
+        errors.push( error );
+        console.log( errors );
+    },
+
+    checkEmail: function(){
+        console.log( 'focusout for email' );
+        this.$('.account_email').removeClass('error');
+        // if they entered email then test for existing email
+        if ( this.model.get( 'validEmail' ) === true ){
+            return;
+        }
+        var cEmail = this.$('.account_email').val().trim();
+        if ( cEmail === undefined || cEmail === '' ) {
+            return;
+        }
+        console.log( cEmail );
+        jQuery.ajax({
+            context: this,
+            url: ajaxUrl + '&glm_action=account&option=checkEmail',
+            dataType: 'json',
+            data:{
+                email: cEmail,
             }
-            var email = this.$('.account_email').val().trim();
-            console.log( email );
-            jQuery.ajax({
-                context: this,
-                url: ajaxUrl + '&glm_action=account&option=checkEmail',
-                dataType: 'json',
-                data: 'email=' + email
-            })
-            .done(function(account){
-                if ( account.validEmail !== true ) {
-                    alert('Must be a valid email address!');
-                    jQuery('.account_email').focus();
-                } else if ( account.id !== undefined && account.email !== undefined ) {
-                    alert('There is an account already with that email address.\nPlease use another one!');
-                    jQuery('.account_email').val('');
-                    jQuery('.account_email').focus();
-                } else {
-                    // email is not existing account and valid
-                    this.model.set({ validEmail: true });
-                }
-            })
-            .fail(function(msg){
-                console.log('Fail: ' + msg);
-            });
+        })
+        .done(function(account){
+            if ( account.validEmail !== true ) {
+                this.$('.account_email').addClass('error');
+                //this.model.errors.push('Must be a valid email address!');
+                //this.addErrorMsg( 'Must be a valid email address!' );
+                //alert('Must be a valid email address!');
+                //jQuery('.account_email').focus();
+                this.model.set({ emailError: 'Must be a valid email address!' });
+            } else if ( account.id !== undefined && account.email !== undefined ) {
+                alert('There is an account already with that email address.\nPlease use another one!');
+                jQuery('.account_email').val('');
+                //jQuery('.account_email').focus();
+            } else {
+                // email is not existing account and valid
+                this.model.set({ validEmail: true });
+                this.$('.account_email').removeClass('error');
+            }
+        })
+        .fail(function(msg){
+            console.log('Fail: ' + msg);
+        });
+    },
+
+    checkPassword: function(){
+        console.log( 'focusout for password' );
+        this.$('.account_password').removeClass('error');
+        // only check if there's something in the field
+        var tPass = this.$('.account_password').val().trim();
+        if ( tPass === '' ) {
+            return;
         }
+        jQuery.ajax({
+            context: this,
+            url: ajaxUrl + '&glm_action=account&option=checkPassword',
+            dataType: 'json',
+            data: {
+                password: this.$('.account_password').val().trim()
+            }
+        })
+        .done(function(data){
+            console.log( data );
+            if ( data.msg ) {
+                this.$('.account_password').addClass('error');
+                alert( 'Password Error: \n' + data.msg );
+            } else {
+                this.$('.account_password').removeClass('error');
+            }
+        })
+        .fail(function(msg){
+            console.log( 'Fail: ' + msg );
+        });
     },
 
 });
index b9a2649..1198e82 100644 (file)
@@ -8,7 +8,6 @@ app.Models.Front.RegClass = Backbone.Model.extend({
         name: 'regClass',
         id: 0,
         reg_event: 0,
-        name: '',
         descr: '',
         reg_rate_id: 0,
         reg_rate_name: '',
index 5b0a393..5045dab 100644 (file)
@@ -19,7 +19,7 @@ app.Models.Front.RegEvent = Backbone.Model.extend({
 
     initialize: function(){
         // for setting up classes
-        this.classes = new app.Collections.Front.RegClasses;
+        this.classes = new app.Collections.Front.RegClasses();
     },
 
     setClasses: function( regClasses ){
index 3612c74..b3fbe53 100644 (file)
@@ -3,6 +3,7 @@ app.Models.Front.Register = Backbone.Model.extend({
         validEmail: false,
         name: 'register',
         email: '',
+        emailError: '',
         password: '',
         fname: '',
         lname: '',
index fcca729..6cec340 100644 (file)
@@ -90,6 +90,9 @@ app.Views.Front.App = Backbone.View.extend({
                 this.loginModel.destroy();
                 this.loginView.remove();
                 this.render();
+                // this.event.model.classes.map(function(item){
+                //     item.trigger( 'change' );
+                // });
             } else {
                 console.log( 'Login failed' );
                 this.loginModel.set({ message: 'Failed login!' });
index a3d0be3..3e748b6 100644 (file)
@@ -10,7 +10,7 @@ app.Views.Front.Login = Backbone.View.extend({
 
     events: {
         'click #loginCancel': 'closeLoginForm',
-        'keydown': 'keyAction',
+        //'keydown': 'keyAction',
     },
 
     initialize: function(){
index 9c9909b..4097e4f 100644 (file)
@@ -7,10 +7,12 @@ app.Views.Front.Register = Backbone.View.extend({
 
     events: {
         'click #registerCancel': 'closeForm',
-        'keydown': 'keyAction',
+        'focusout .account_email': 'checkEmail',
+        'focusout .account_password': 'checkPassword',
     },
 
     initialize: function(){
+        this.listenTo( this.model, 'change', this.render );
     },
 
     render: function(){
@@ -24,40 +26,84 @@ app.Views.Front.Register = Backbone.View.extend({
         return;
     },
 
-    keyAction: function(e){
-        if ( e.which === 13 ) {
-            console.log( 'Enter key used' );
-        } else if ( e.which === 9 ) {
-            console.log( 'Tab key used' );
-            // if they entered email then test for existing email
-            if ( this.model.get( 'validEmail' ) === true ){
-                return;
+    addErrorMsg: function( error ){
+        var errors = this.model.get( 'errors' );
+        console.log( 'in addErrorMsg' );
+        errors.push( error );
+        console.log( errors );
+    },
+
+    checkEmail: function(){
+        console.log( 'focusout for email' );
+        this.$('.account_email').removeClass('error');
+        // if they entered email then test for existing email
+        if ( this.model.get( 'validEmail' ) === true ){
+            return;
+        }
+        var cEmail = this.$('.account_email').val().trim();
+        if ( cEmail === undefined || cEmail === '' ) {
+            return;
+        }
+        console.log( cEmail );
+        jQuery.ajax({
+            context: this,
+            url: ajaxUrl + '&glm_action=account&option=checkEmail',
+            dataType: 'json',
+            data:{
+                email: cEmail,
+            }
+        })
+        .done(function(account){
+            if ( account.validEmail !== true ) {
+                this.$('.account_email').addClass('error');
+                //this.model.errors.push('Must be a valid email address!');
+                //this.addErrorMsg( 'Must be a valid email address!' );
+                //alert('Must be a valid email address!');
+                //jQuery('.account_email').focus();
+                this.model.set({ emailError: 'Must be a valid email address!' });
+            } else if ( account.id !== undefined && account.email !== undefined ) {
+                alert('There is an account already with that email address.\nPlease use another one!');
+                jQuery('.account_email').val('');
+                //jQuery('.account_email').focus();
+            } else {
+                // email is not existing account and valid
+                this.model.set({ validEmail: true });
+                this.$('.account_email').removeClass('error');
             }
-            var email = this.$('.account_email').val().trim();
-            console.log( email );
-            jQuery.ajax({
-                context: this,
-                url: ajaxUrl + '&glm_action=account&option=checkEmail',
-                dataType: 'json',
-                data: 'email=' + email
-            })
-            .done(function(account){
-                if ( account.validEmail !== true ) {
-                    alert('Must be a valid email address!');
-                    jQuery('.account_email').focus();
-                } else if ( account.id !== undefined && account.email !== undefined ) {
-                    alert('There is an account already with that email address.\nPlease use another one!');
-                    jQuery('.account_email').val('');
-                    jQuery('.account_email').focus();
-                } else {
-                    // email is not existing account and valid
-                    this.model.set({ validEmail: true });
-                }
-            })
-            .fail(function(msg){
-                console.log('Fail: ' + msg);
-            });
+        })
+        .fail(function(msg){
+            console.log('Fail: ' + msg);
+        });
+    },
+
+    checkPassword: function(){
+        console.log( 'focusout for password' );
+        this.$('.account_password').removeClass('error');
+        // only check if there's something in the field
+        var tPass = this.$('.account_password').val().trim();
+        if ( tPass === '' ) {
+            return;
         }
+        jQuery.ajax({
+            context: this,
+            url: ajaxUrl + '&glm_action=account&option=checkPassword',
+            dataType: 'json',
+            data: {
+                password: this.$('.account_password').val().trim()
+            }
+        })
+        .done(function(data){
+            console.log( data );
+            if ( data.msg ) {
+                this.$('.account_password').addClass('error');
+                alert( 'Password Error: \n' + data.msg );
+            } else {
+                this.$('.account_password').removeClass('error');
+            }
+        })
+        .fail(function(msg){
+            console.log( 'Fail: ' + msg );
+        });
     },
 
 });
index 5cbcb79..a0621e9 100644 (file)
@@ -94,6 +94,7 @@ class GlmMembersAdmin_ajax_account extends GlmDataRegistrationsAccount
         $return = false;
 
         $option = filter_var( $_REQUEST['option'], FILTER_SANITIZE_STRING );
+        trigger_error(print_r($_REQUEST,E_USER_NOTICE));
 
         switch ( $option ) {
         case 'register':
@@ -129,20 +130,42 @@ class GlmMembersAdmin_ajax_account extends GlmDataRegistrationsAccount
                 $_POST = $_REQUEST;
                 // Note: When using insertEntry() it is not setting the
                 // password. Not sure why!
-                $account = $this->insertEntry();
-                trigger_error(print_r($account,E_USER_NOTICE));
-                IF ( $account['status'] ) {
+                //$account = $this->insertEntry();
+                // trigger_error(print_r($account,true), E_USER_NOTICE);
+                $this->wpdb->insert(
+                    GLM_MEMBERS_REGISTRATIONS_PLUGIN_DB_PREFIX . 'account',
+                    array(
+                        'date_created' => date('Y-m-d'),
+                        'active'       => 1,
+                        'email'        => $email,
+                        'password'     => crypt( $password ),
+                        'fname'        => $fname,
+                        'lname'        => $lname,
+                        'addr1'        => $addr1,
+                        'addr2'        => $addr2,
+                        'city'         => $city,
+                        'state'        => $state,
+                        'zip'          => $zip,
+                        'country'      => $country,
+                    ),
+                    '%s'
+                );
+                $accountId = $this->wpdb->insert_id;
+
+                IF ( $accountId ) {
                     $return = array(
-                        'id'       => $account['fieldData']['id'],
+                        'valid'    => true,
+                        'id'       => $accountId,
                         'email'    => $email,
                         'fname'    => $fname,
                         'lname'    => $lname,
-                        'addr1'    => $addr1,
-                        'addr2'    => $addr2,
-                        'city'     => $city,
-                        'state'    => $state,
-                        'zip'      => $zip,
-                        'country'  => $country,
+                    );
+                    // Add the user to the php session
+                    $_SESSION['LoginAccount'] = array(
+                        'id'    => $accountId,
+                        'email' => $email,
+                        'fname' => $fname,
+                        'lname' => $lname,
                     );
                 } else {
                     $return = array(
@@ -230,6 +253,33 @@ class GlmMembersAdmin_ajax_account extends GlmDataRegistrationsAccount
                 );
             }
             break;
+
+        case 'checkPassword':
+            $password       = filter_var( $_REQUEST['password'], FILTER_SANITIZE_STRING );
+            $isGoodPassword = false;
+            $reason         = array();
+            // Check length
+            if ( strlen( $password ) < 8 ) {
+                $reason[] = 'Needs to be at least 8 characters long!';
+            }
+            // Check for at least one number.
+            if ( !preg_match( '%[0-9]+%', $password ) ) {
+                $reason[] = 'Needs to have at least one number!';
+            }
+            // Check for at least one letter.
+            if ( !preg_match( '%[A-Za-z]+%', $password ) ) {
+                $reason[] = 'Needs to have at least one letter!';
+            }
+            // Check for at least one char.
+            if ( !preg_match( '%[\#\.\-\_\,\$\%\&\!]%', $password ) ) {
+                $reason[] = 'Needs to include special character!';
+            }
+
+            $return = array(
+                'valid' => ( empty( $reason ) ) ? true: false,
+                'msg'   => implode( "\n", $reason ),
+            );
+            break;
         }
         header('Content-type:application/json;charset=utf-8', true);
         echo json_encode( $return );
index 8cda31b..3c521c6 100644 (file)
 
     public function modelAction($actionData = false)
     {
-        
+
         $loginAccount   = '';
         $cartId         = false;
 
+        var_dump( $_SESSION );
         // Have Backbone.js loaded
         $scripts = array(
             //'backbone-local' => 'js/lib/backbone.localStorage.min.js',
@@ -90,7 +91,7 @@
         // Load cart support class
         include GLM_MEMBERS_REGISTRATIONS_PLUGIN_CLASS_PATH . '/regCartSupport.php';
         $RegCart = new GlmRegCartSupport( $this->wpdb, $this->config );
-        
+
         // Check if there's a current session
         if ( isset( $_SESSION['glm_reg_cart_id'] ) ) {
             $cartId = $_SESSION['glm_reg_cart_id'];
             }
         }
 
-        //echo '<pre>$registrants: ' . print_r( $registrants, true ) . '</pre>';
+        echo '<pre>$registrants: ' . print_r( $registrants, true ) . '</pre>';
 
         // Compile template data
         $templateData = array(
index 7dd3c61..292ad81 100644 (file)
@@ -28,6 +28,9 @@
     </div>
     <div>
         <input class="account_email" placeholder="*Email Address">
+        <% if ( emailError ) { %>
+            <span class="error"><%= emailError %></span>
+        <% } %>
         <input class="account_password" placeholder="*Password">
     </div>
     <div>