From 5334b2564dbe3342d7949189c77be073783de973 Mon Sep 17 00:00:00 2001 From: Steve Sutton Date: Fri, 29 Sep 2017 16:50:44 -0400 Subject: [PATCH] Working on the register form 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 | 6 +- js/frontRegApp.js | 121 ++++++++++++++------ js/models/front/regClass.js | 1 - js/models/front/regEvent.js | 2 +- js/models/front/register.js | 1 + js/views/front/app.js | 3 + js/views/front/login.js | 2 +- js/views/front/register.js | 112 ++++++++++++------ models/admin/ajax/account.php | 70 +++++++++-- models/front/registrations/registration.php | 7 +- views/front/registrations/registration.html | 3 + 11 files changed, 242 insertions(+), 86 deletions(-) diff --git a/css/front.css b/css/front.css index 061ddd9..c9fa998 100644 --- a/css/front.css +++ b/css/front.css @@ -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 { diff --git a/js/frontRegApp.js b/js/frontRegApp.js index 2bb8115..e264821 100644 --- a/js/frontRegApp.js +++ b/js/frontRegApp.js @@ -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 ); + }); }, }); diff --git a/js/models/front/regClass.js b/js/models/front/regClass.js index b9a2649..1198e82 100644 --- a/js/models/front/regClass.js +++ b/js/models/front/regClass.js @@ -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: '', diff --git a/js/models/front/regEvent.js b/js/models/front/regEvent.js index 5b0a393..5045dab 100644 --- a/js/models/front/regEvent.js +++ b/js/models/front/regEvent.js @@ -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 ){ diff --git a/js/models/front/register.js b/js/models/front/register.js index 3612c74..b3fbe53 100644 --- a/js/models/front/register.js +++ b/js/models/front/register.js @@ -3,6 +3,7 @@ app.Models.Front.Register = Backbone.Model.extend({ validEmail: false, name: 'register', email: '', + emailError: '', password: '', fname: '', lname: '', diff --git a/js/views/front/app.js b/js/views/front/app.js index fcca729..6cec340 100644 --- a/js/views/front/app.js +++ b/js/views/front/app.js @@ -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!' }); diff --git a/js/views/front/login.js b/js/views/front/login.js index a3d0be3..3e748b6 100644 --- a/js/views/front/login.js +++ b/js/views/front/login.js @@ -10,7 +10,7 @@ app.Views.Front.Login = Backbone.View.extend({ events: { 'click #loginCancel': 'closeLoginForm', - 'keydown': 'keyAction', + //'keydown': 'keyAction', }, initialize: function(){ diff --git a/js/views/front/register.js b/js/views/front/register.js index 9c9909b..4097e4f 100644 --- a/js/views/front/register.js +++ b/js/views/front/register.js @@ -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 ); + }); }, }); diff --git a/models/admin/ajax/account.php b/models/admin/ajax/account.php index 5cbcb79..a0621e9 100644 --- a/models/admin/ajax/account.php +++ b/models/admin/ajax/account.php @@ -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 ); diff --git a/models/front/registrations/registration.php b/models/front/registrations/registration.php index 8cda31b..3c521c6 100644 --- a/models/front/registrations/registration.php +++ b/models/front/registrations/registration.php @@ -37,10 +37,11 @@ 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']; @@ -241,7 +242,7 @@ } } - //echo '
$registrants: ' . print_r( $registrants, true ) . '
'; + echo '
$registrants: ' . print_r( $registrants, true ) . '
'; // Compile template data $templateData = array( diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html index 7dd3c61..292ad81 100644 --- a/views/front/registrations/registration.html +++ b/views/front/registrations/registration.html @@ -28,6 +28,9 @@
+ <% if ( emailError ) { %> + <%= emailError %> + <% } %>
-- 2.17.1