inlog

application/views/pages/login/login_view.php

@@ -33,8 +33,9 @@
     <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,300italic'>
 </head>
 <body class="animsition page-login-v3 layout-full">
+<?php $this->load->view('specials/notify_modal'); ?>
 <!-- Page -->
-<div class="page vertical-align text-center" data-animsition-in="fade-in" data-animsition-out="fade-out">>
+<div class="page vertical-align text-center" data-animsition-in="fade-in" data-animsition-out="fade-out">
     <div class="page-content vertical-align-middle animation-slide-top animation-duration-1">
         <div class="panel">
             <div class="panel-body">
@@ -42,16 +43,16 @@
                     <img class="brand-img" src="css/images/logo_dbo.png" alt="...">
                     <h2 class="brand-text font-size-18">projectbeheer</h2>
                 </div>
-                <form method="post" action="#">
+                <form method="post" action="#" id="login-form">
                     <div class="form-group form-material floating" data-plugin="formMaterial">
-                        <input type="text" class="form-control" name="email" />
+                        <input type="text" class="form-control" name="username" />
                         <label class="floating-label">gebruikersnaam</label>
                     </div>
                     <div class="form-group form-material floating" data-plugin="formMaterial">
                         <input type="password" class="form-control" name="password" />
                         <label class="floating-label">wachtwoord</label>
                     </div>
-                    <button type="submit" class="btn btn-primary btn-block btn-lg mt-40">Log in</button>
+                    <button type="button" class="btn btn-primary btn-block btn-lg mt-40" data-bind="click:login">Log in</button>
                 </form>
             </div>
         </div>
@@ -102,5 +103,8 @@
 <script src="js/vendor/Plugin/switchery.js"></script>
 <script src="js/vendor/Plugin/jquery-placeholder.js"></script>
 <script src="js/vendor/Plugin/material.js"></script>
+<script src="js/vendor/Knockout.min.js"></script>
+<script src="js/lib/modules/login/loginModule.js"></script>
+<script src="js/lib/modules/specials/notifyModule.js"></script>
 </body>
 </html>

application/views/specials/notify_modal.php

@@ -0,0 +1,37 @@
+<div class="modal fade" tabindex="-1" role="dialog" id="notify-me" data-bind="css:modalClass">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <!-- ko if:alert -->
+                <button type="button"
+                        class="close"
+                        data-dismiss="modal"
+                        aria-label="Close"
+                        data-bind="click:close">
+                    <span aria-hidden="true">&times;</span></button>
+                <!-- /ko -->
+                <h4 class="modal-title" data-bind="text:title"></h4>
+            </div>
+            <div class="modal-body">
+                <p data-bind="text:message"></p>
+            </div>
+            <div class="modal-footer">
+                <!-- ko if: notify -->
+                <button type="button"
+                        class="btn btn-default"
+                        data-dismiss="modal"
+                        data-bind="click:closeNo; text:noText"></button>
+                <button type="button"
+                        class="btn btn-primary"
+                        datya-bind="click:closeYes"></button>
+                <!-- /ko -->
+                <!-- ko if:alert -->
+                <button type="button"
+                        class="btn btn-primary"
+                        data-dismiss="modal"
+                        data-bind="click:closeOk, text:closeText"></button>
+                <!-- /ko -->
+            </div>
+        </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->

public/js/lib/modules/login/loginModule.js

@@ -4,29 +4,29 @@
  * Date: 05/12/2017
  * Time: 11:17
  */
-var pp = {};
+var dbo = {};
 $( function () {
 
-    pp.loginModel = {
+    dbo.loginModel = {
 
         username: ko.observable( '' ),
         password: ko.observable( '' ),
 
         login: function () {
-            pp.loginService.login();
+            dbo.loginService.login();
         }
     }
 
-    ko.applyBindings( pp.loginModel, document.getElementById( "login-user" ) );
+    ko.applyBindings( dbo.loginModel, document.getElementById( "login-form" ) );
 
 } );
 
-pp.loginService = {
+dbo.loginService = {
 
     login: function () {
-        var ds = pp.loginDataservice;
+        var ds = dbo.loginDataservice;
-        var self = pp.loginService;
+        var self = dbo.loginService;
-        var vm = pp.loginModel;
+        var vm = dbo.loginModel;
 
         self.validateInput( function ( data ) {
             if ( !data ) return self.notifyWrongPassword();
@@ -39,7 +39,7 @@ pp.loginService = {
     },
 
     validateInput: function ( callback ) {
-        var vm = pp.loginModel;
+        var vm = dbo.loginModel;
 
         if ( vm.username().length < 2 ) return callback( false );
         if ( vm.password().length < 6 ) return callback( false );
@@ -62,7 +62,7 @@ pp.loginService = {
 };
 
 
-pp.loginDataservice = {
+dbo.loginDataservice = {
 
     login: function ( submitDATA, callback ) {
         $.post( 'index.php/login/', submitDATA, function ( data ) {

public/js/lib/modules/specials/notifyModule.js

@@ -6,10 +6,10 @@
  */
 
 var notifyMe = function ( options, callback ) {
-    pp.notifyModel.init( options, callback );
+    dbo.notifyModel.init( options, callback );
 }
 
-pp.notifyModel = {
+dbo.notifyModel = {
 
     title    : ko.observable( null ),
     message  : ko.observable( null ),
@@ -21,7 +21,7 @@ pp.notifyModel = {
     callback : null,
 
     init: function ( options, callback ) {
-        var vm = pp.notifyModel;
+        var vm = dbo.notifyModel;
 
         vm.callback = callback;
 
@@ -31,7 +31,7 @@ pp.notifyModel = {
     },
 
     setOptions: function ( options ) {
-        var vm = pp.notifyModel;
+        var vm = dbo.notifyModel;
 
         vm.title( options.title || '' );
         vm.message( options.message || '' );
@@ -40,27 +40,28 @@ pp.notifyModel = {
         vm.noText( options.noText || 'Nee' );
         vm.yesText( options.yesText || 'Ja' );
         vm.closeText( options.closeText || 'ok' );
+        vm.modalClass( options.modalClass || 'modal-primary');
     },
 
     closeNo: function () {
-        if ( typeof( pp.notifyModel.callback ) == 'function' ) callback( false );
+        if ( typeof( dbo.notifyModel.callback ) == 'function' ) callback( false );
     },
 
     closeYes: function () {
-        if ( typeof( pp.notifyModel.callback ) == 'function' ) callback( true );
+        if ( typeof( dbo.notifyModel.callback ) == 'function' ) callback( true );
     },
 
     closeOk: function () {
-        if ( typeof( pp.notifyModel.callback ) == 'function' ) callback();
+        if ( typeof( dbo.notifyModel.callback ) == 'function' ) callback();
     },
 
     close: function () {
-        if ( typeof( pp.notifyModel.callback ) == 'function' ) callback();
+        if ( typeof( dbo.notifyModel.callback ) == 'function' ) callback();
     }
 
 
 }
 
-ko.applyBindings( pp.notifyModel, document.getElementById( "notify-me" ) );
+ko.applyBindings( dbo.notifyModel, document.getElementById( "notify-me" ) );