Adding login form view and model.

Setting up model/view for the login form.

diff --git a/css/front.css b/css/front.css
index adb5ea6..bbb32bb 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -108,3 +108,15 @@
 label.registrant-label {
     width: 80%;
 }
+div.glm-reg-login {
+    background-color: grey;
+    border: solid 1px black;
+    padding: 2rem;
+    width: 30rem;
+    position: absolute;
+    top: 10vh;
+    left: 30vw;
+}
+div.glm-reg-login h4 {
+    color: white;
+}

diff --git a/js/models/login.js b/js/models/login.js
new file mode 100644 (file)
index 0000000..51b6931
--- /dev/null
+++ b/js/models/login.js
@@ -0,0 +1,27 @@
+// js/models/login.js
+var app = app || {};
+
+// Login Model
+app.Login = Backbone.Model.extend({
+
+    defaults:  {
+        username: '',
+        password: ''
+    },
+
+    initialize: function(){
+        this.on( 'invalid', function( model, error ){
+            console.log( error );
+        });
+    },
+
+    validate: function( attribs, options ){
+        if ( attribs.username === undefined || attribs.username === '' ){
+            return 'Username required!';
+        }
+        if ( attribs.password === undefined || attribs.password === '' ){
+            return 'Password required!';
+        }
+    },
+
+});

diff --git a/js/views/app.js b/js/views/app.js
index c75dd7a..4b1d0cd 100644 (file)
--- a/js/views/app.js
+++ b/js/views/app.js
@@ -17,6 +17,18 @@ app.AppView = Backbone.View.extend({
     },
 
     events: {
+        'click #appLogin': 'login'
+    },
+
+    login: function(){
+        console.log('login called');
+        view = new app.LoginView({ model: new app.Login() });
+        this.$el.append( view.render().el );
+    },
+
+    start: function( bootstrap ){
+        app.regEvent  = new app.RegEvent( bootstrap.revEvent );
+        app.regEvent.setClasses( bootstrap.regEventClasses );
     },
 
 });

diff --git a/js/views/login.js b/js/views/login.js
new file mode 100644 (file)
index 0000000..8f5ace5
--- /dev/null
+++ b/js/views/login.js
@@ -0,0 +1,33 @@
+// js/views/login.js
+var app = app || {};
+
+// Login View
+app.LoginView = Backbone.View.extend({
+    tagName: 'div',
+
+    className: 'glm-reg-login',
+
+    template: _.template( $('#eventReg-account-login').html() ),
+
+    events: {
+        'click .accountLogin': 'loginToAccount'
+    },
+
+    initialize: function(){
+        return this;
+    },
+
+    loginToAccount: function(){
+        console.log( 'user: ' + this.$userInput.val().trim() );
+        console.log( 'password: ' + this.$pwdInput.val().trim() );
+        // Send data to login ajax and verify user login
+    },
+
+    render: function(){
+        this.$el.html( this.template( this.model.toJSON() ) );
+        this.$userInput = this.$('.login');
+        this.$pwdInput = this.$('.password');
+        return this;
+    },
+
+});

diff --git a/models/front/registrations/registration.php b/models/front/registrations/registration.php
index 72eb924..a5c411b 100644 (file)
--- a/models/front/registrations/registration.php
+++ b/models/front/registrations/registration.php
@@ -38,18 +38,20 @@
     public function modelAction($actionData = false)
     {
         $scripts = array(
-            'backbone-local'=> 'js/lib/backbone.localStorage.min.js',
-            'account'       => 'js/models/account.js',
-            'regClass'      => 'js/models/regClass.js',
-            'regEvent'      => 'js/models/regEvent.js',
-            'regRate'       => 'js/models/regRate.js',
-            'accounts'      => 'js/collections/accounts.js',
-            'regClasses'    => 'js/collections/regClasses.js',
-            'regRates'      => 'js/collections/regRates.js',
-            'registrantView'=> 'js/views/account.js',
-            'regEventView'  => 'js/views/regEvent.js',
-            'regClassView'  => 'js/views/regClass.js',
-            'appView'       => 'js/views/app.js',
+            'backbone-local' => 'js/lib/backbone.localStorage.min.js',
+            'account'        => 'js/models/account.js',
+            'regClass'       => 'js/models/regClass.js',
+            'regEvent'       => 'js/models/regEvent.js',
+            'regRate'        => 'js/models/regRate.js',
+            'login'          => 'js/models/login.js',
+            'accounts'       => 'js/collections/accounts.js',
+            'regClasses'     => 'js/collections/regClasses.js',
+            'regRates'       => 'js/collections/regRates.js',
+            'registrantView' => 'js/views/account.js',
+            'regEventView'   => 'js/views/regEvent.js',
+            'regClassView'   => 'js/views/regClass.js',
+            'regLoginView'   => 'js/views/login.js',
+            'appView'        => 'js/views/app.js',
         );
         foreach ( $scripts as $scriptName => $scriptPath ) {
             wp_register_script(

diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html
index 164e15e..01775e0 100644 (file)
--- a/views/front/registrations/registration.html
+++ b/views/front/registrations/registration.html
@@ -1,6 +1,3 @@
-<div class="glm-reg-account">
-    <a class="glm-reg-account-login">Login</a>
-</div>
 {* Event Registration App - Backbone.js *}
 <div id="eventapp"></div>
 {* Underscore Templates for the Event Registration App *}
@@ -44,20 +41,23 @@
     </div>
 </script>
 <script type="text/template" id="eventReg-account-login">
-    <input class="email">
+    <h4>Login</h4>
+    <input class="login">
     <input class="password">
     <input type="submit" class="accountLogin" value="Login">
 </script>
 {/literal}
 <div class="glm-reg-event-list" id="regApp">
-
+    <div class="glm-reg-account">
+        <a class="glm-reg-account-login" id="appLogin">Login</a>
+    </div>
 </div>
 {* Bootstrap the models needed on page load *}
 {* Need to have RegEvent model created *}
 {* And create the RegClasses collection *}
 <script>
 var app = app || {};
-jQuery(document).ready(function($){
+jQuery(function($){
     app.regEvent = new app.RegEvent;
     app.regEvent.set( {$regEventJSON} );
     app.regEvent.setClasses( {$regClassesJSON} );