Merged conflict

6 files changed, 250 insertions, 60 deletions

diff --git a/assets/css/user_profile.css b/assets/css/user_profile.css
index 042d842..fb35bb0 100644
--- a/assets/css/user_profile.css
+++ b/assets/css/user_profile.css
@@ -11,7 +11,6 @@
     box-shadow: 2px 4px 5px 0 rgba(0,0,0,0.1);
     text-align: left;
     font-family: 'Roboto', sans-serif;
-
 }
 
 .u-title h1{
@@ -134,10 +133,7 @@ nav .nav-o:hover .nav-o-container{
     color: #737373;
 }
 
-
 /* Inbox */
-
-
 .u-table-row {
     display:table-row;
     cursor: pointer;
@@ -146,5 +142,19 @@ nav .nav-o:hover .nav-o-container{
     background-color: #ededed;
 }
 
+/* Inbox Popups */
+.u-main .modal-content{
+    padding: 0 20px 0 20px;
+}
+
+/* Inbox paging */
+.u-pagination{
+    text-align: center;
+}
+
+.u-change-page{
+    display: inline;
+    cursor: pointer;
+}
 
 /*** USER PROFILE PAGE END ***/
\ No newline at end of file
diff --git a/assets/js/script.js b/assets/js/script.js
index a49ff45..237a990 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -50,6 +50,5 @@ function main(){
 
     $('.table-row').trigger('create');
 
-
 }
 $(document).ready(main);
\ No newline at end of file
diff --git a/assets/js/user_profile.js b/assets/js/user_profile.js
index c26299b..c28cb8d 100644
--- a/assets/js/user_profile.js
+++ b/assets/js/user_profile.js
@@ -1,4 +1,8 @@
 function main(){
+    //Constants and Globals
+    var MESSAGE_COUNT = 8; // Number of message per page in inbox
+    var CURRENT_INBOX_PAGE = 1;
+
     // User-profile dynamic paging
     var items = [
         $("#profile-general"),
@@ -6,12 +10,153 @@ function main(){
         $("#profile-comments"),
         $("#profile-inbox")];
 
+    // Helper functions
     function hidePages(){
         items.forEach(function(item){
             item.hide();
         });
     }
 
+    function generatePager(mailCount){
+        var pageCount = Math.ceil(mailCount/MESSAGE_COUNT);
+        if(pageCount > 1){
+
+            // State current page
+            $('#u-pageNumber').empty().append(CURRENT_INBOX_PAGE + ' of ' + pageCount)
+                .addClass('u-pagination');
+
+
+            var $uPager = $("#u-pager");
+            $uPager.empty();
+
+            var $pager = $('<div>').addClass('u-pagination');
+            $uPager.append($pager);
+
+            var $previous = $("<h5>").append('< Previous')
+                .attr('id', 'u-previous')
+                .addClass('u-change-page');
+            var $next = $("<h5>").append('Next >')
+                .attr('id', 'u-next')
+                .addClass('u-change-page');
+
+            if(CURRENT_INBOX_PAGE == 1){
+                $pager.append($next);
+            }else if(CURRENT_INBOX_PAGE == pageCount){
+                $pager.append($previous);
+            }else{
+                $pager.append($previous);
+                $pager.append(' | ');
+                $pager.append($next);
+
+            }
+        }
+    }
+
+    function generateInbox(pageNum){
+        $.ajax({
+            dataType: "json",
+            url: '/user/user_profile/inbox/' + MESSAGE_COUNT + '/' + pageNum,
+            success: function(mailbox){
+
+
+                var inbox = mailbox.mail;
+                var mailCount = mailbox.mailCount;
+                var uInboxCount =  $('#u-inbox-count');
+
+                uInboxCount.empty().append('You have ' + mailCount
+                    + ' messages in your inbox.');
+
+                // For inbox table body
+                var $InboxBody = $('#u-inbox-body');
+
+                // For table modal op up windows
+                var $InboxContainer = $('#u-inbox-container');
+
+                $InboxBody.empty();
+
+                var windowCounter = 0;
+                inbox.forEach(function(message){
+
+                    //create row
+                    var $row = $('<tr>');
+                    $row.addClass('u-table-row');
+                    $row.attr('data-toggle', 'modal');
+                    $row.attr('data-target', '#popup' + windowCounter);
+                    $row.attr('type', 'button');
+
+                    //create cells in row
+                    var $date = $('<td>').text(message.date);
+                    var $subject = $('<td>').text(message.subject);
+                    var $sender = $('<td>').text(message.sender);
+
+                    //append cells to row
+                    $row.append($date);
+                    $row.append($subject);
+                    $row.append($sender);
+
+
+                    //append row to body
+                    $InboxBody.append($row);
+
+                    //Create modal pop up
+                    var $modalFade = $('<article>')
+                        .addClass('modal')
+                        .addClass('fade')
+                        .attr('id', 'popup' + String(windowCounter));
+                    var $modalDialog = $('<div>').addClass('modal-dialog');
+                    var $modalContent = $('<div>').addClass('modal-content');
+                    var $modalHeader = $('<section>').addClass('modal-header');
+                    var $modalButton = $('<button>')
+                        .addClass('close')
+                        .attr('type', 'button')
+                        .attr('data-dismiss', 'modal');
+
+
+                    var $modalTitle = $('<h4>')
+                        .addClass('modal-title');
+                    var $emphasisSubject = $('<em>').text('Subject: ');
+
+                    var $headerFrom = $('<h5>');
+                    var $emphasisFrom = $('<em>').text('From: ');
+                    var $emphasisDate = $('<em>').text('Date: ');
+
+                    var $modalBody = $('<section>');
+                    var $modalFooter = $('<div>').addClass('modal-footer');
+
+                    $InboxContainer.append($modalFade);
+                    $modalFade.append($modalDialog);
+                    $modalDialog.append($modalContent);
+                    $modalContent.append($modalHeader);
+                    $modalContent.append($modalBody);
+                    $modalContent.append($modalFooter);
+
+                    $modalButton.append('&times;');
+
+                    $modalTitle.append($emphasisSubject);
+                    $modalTitle.append(message.subject);
+
+                    $headerFrom.append($emphasisFrom);
+                    $headerFrom.append(message.sender);
+
+                    $emphasisDate.text('Date: ');
+
+                    $modalHeader.append($modalButton);
+                    $modalHeader.append($modalTitle);
+                    $modalHeader.append($headerFrom);
+                    $modalHeader.append($emphasisDate);
+                    $modalHeader.append(message.date);
+
+                    $modalBody.append(message.message);
+
+                    windowCounter++;
+                });
+
+                // Generate Pager
+                generatePager(mailCount);
+            }
+        });
+    }
+
     // Hide all pages at load
     hidePages();
 
@@ -38,17 +183,32 @@ function main(){
                 break;
             case "nav-inbox":
                 $("#profile-inbox").show();
+                generateInbox(1); // generate inbox messages for page 1
                 break;
             default:
                 console.log("Error: User page not found");
         }
     });
 
+    // Inbox Pager (Located at bottom of inbox in html)
+    $('.u-main').on('click', 'h5.u-change-page', function(){
+        console.log('clicked');
+        var direction = $(this).attr('id');
 
-
+        switch(direction){
+            case 'u-previous':
+                CURRENT_INBOX_PAGE--;
+                generateInbox(CURRENT_INBOX_PAGE);
+                break;
+            case 'u-next':
+                CURRENT_INBOX_PAGE++;
+                generateInbox(CURRENT_INBOX_PAGE);
+                break;
+            default:
+                console.log('Direction not found');
+        }
+    });
 
 }
 
-
-
 $(document).ready(main);
\ No newline at end of file
diff --git a/node_simple.js b/node_simple.js
index c2e3564..2f49360 100644
--- a/node_simple.js
+++ b/node_simple.js
@@ -1366,7 +1366,6 @@ exports.removeToken = function(token, callback) {
 };
 
 
-
 /**
  * Check if the user with the given username has mail.
  * If the user does, then send the mail that falls within the specified page range.
diff --git a/routes/user.js b/routes/user.js
index 5463503..b771418 100644
--- a/routes/user.js
+++ b/routes/user.js
@@ -205,37 +205,91 @@ var returnRouter = function(io) {
             var index = (pageNum - 1) * messageCount;
             var indexMax = index + messageCount;
             var inboxLength = inbox.length;
-            var count = 0;
 
-            /* Testing Purposes
-             var notification = "index = " + index + "\n" +
-             "indexMax = " + indexMax + "\n" +
-             "inboxLength = " + inbox.length + "\n";
-             console.log(notification); */
+            // Consider a more efficient alternative to sorting mail
+            inbox.sort(function(b,a){
+                return new Date(a.date).getTime() - new Date(b.date).getTime()
+            });
 
             // Find the 10 messages situated at page num in inbox, store in mail
-            if (index >= inboxLength) {
+            if(index >= inboxLength){
                 res.writeHead(400, {"Content-Type": "application/json"});
                 console.log("Specified index is out of bounds");
-            } else if (inboxLength <= messageCount) {
+            }else if (inboxLength <= messageCount) {
                 res.writeHead(200, {"Content-Type": "application/json"});
                 mail = inbox;
-            } else {
+            }else {
                 res.writeHead(200, {"Content-Type": "application/json"});
-                while ((index < inboxLength) && (index < indexMax)) {
+                while((index < inboxLength) && (index < indexMax)){
                     mail.push(inbox[index]);
                     index++;
-                    count++;
-                    console.log("in while: " + count);
                 }
             }
 
             // return mail JSON object ::  JSON.stringify({json});
-            var mailJSON = JSON.stringify(mail);
-            res.end(mailJSON);
+            var mailbox = {
+                mailCount : inboxLength,
+                mail : mail
+            };
+            var mailboxJSON = JSON.stringify(mailbox);
+
+            res.end(mailboxJSON);
         });
     });
 
+    router.get('/resetPassword', loggedOut, function(req, res, next) {
+        res.render('reset_password', {csrfToken: req.csrfToken(), success: req.session.success, errors: req.session.errors});
+        req.session.errors = null;
+    });
+
+    router.post('/sendReset', loggedOut, function(req, res, next){
+
+        req.check('email', 'Enter a valid Email address').notEmpty().withMessage('Email required').isEmail();
+
+        var errors = req.validationErrors();
+        if (errors) {
+            req.session.errors = errors;
+            req.session.success = false;
+            res.redirect('/user/resetPassword');
+        } else {
+            dbFile.find_user(req.body.email, function (found) {
+                if (!found) {
+                    res.render('reset_password', {error: "This email does not exist in our database."});
+                } else {
+                    var token = crypto.randomBytes(32).toString('hex');
+                    var userToken = crypto.randomBytes(8).toString('hex');
+
+                    /* Testing Purposes
+                     var notification = "index = " + index + "\n" +
+                     "indexMax = " + indexMax + "\n" +
+                     "inboxLength = " + inbox.length + "\n";
+                     console.log(notification); */
+
+                    // Find the 10 messages situated at page num in inbox, store in mail
+                    if (index >= inboxLength) {
+                        res.writeHead(400, {"Content-Type": "application/json"});
+                        console.log("Specified index is out of bounds");
+                    } else if (inboxLength <= messageCount) {
+                        res.writeHead(200, {"Content-Type": "application/json"});
+                        mail = inbox;
+                    } else {
+                        res.writeHead(200, {"Content-Type": "application/json"});
+                        while ((index < inboxLength) && (index < indexMax)) {
+                            mail.push(inbox[index]);
+                            index++;
+                            count++;
+                            console.log("in while: " + count);
+                        }
+                    }
+
+                    // return mail JSON object ::  JSON.stringify({json});
+                    var mailJSON = JSON.stringify(mail);
+                    res.end(mailJSON);
+                }
+            });
+        }
+    });
+
     router.get('/resetPassword', loggedOut, function (req, res, next) {
         res.render('reset_password', {
             csrfToken: req.csrfToken(),
diff --git a/views/user_profile_alt.hbs b/views/user_profile_alt.hbs
index 8cc45b8..f04d094 100644
--- a/views/user_profile_alt.hbs
+++ b/views/user_profile_alt.hbs
@@ -125,10 +125,10 @@
                 <!-- Inbox page -->
                 <section class="u-profile" id="profile-inbox">
                     <h4>Inbox </h4>
-
                     <hr>
+                    <h5 id="u-inbox-count"></h5>
                     {{# if inbox }}
-                        <div class="col-sm-12">
+                        <div class="col-sm-12" id="u-inbox-container">
                             <table class="table table-striped u-table">
                                 <thead>
                                 <tr>
@@ -137,47 +137,15 @@
                                     <th>Sender</th>
                                 </tr>
                                 </thead>
-                                <tbody>
-                                {{# each inbox }}
-                                <tr class="u-table-row" data-toggle="modal"  data-target=".{{ this.class }}">
-                                    <td>{{ this.date }}</td>
-                                    <td>{{ this.subject }}</td>
-                                    <td>{{ this.sender }}</td>
-                                </tr>
-                                {{/each}}
+                                <tbody id="u-inbox-body">
                                 </tbody>
                             </table>
-
-
-
-                            {{# each inbox}}
-                                <article class="modal fade {{this.class}}">
-                                    <div class="modal-dialog">
-                                        <div class="modal-content">
-
-                                            <section class="modal-header">
-                                                <button type="button" class="close" data-dismiss="modal">&times;</button>
-                                                <h4 class="modal-title"><em>Subject: </em>{{ this.subject }}</h4>
-                                                <h5><em>From: </em>{{ this.sender }}</h5>
-                                                <em>Date: </em> {{this.date}}
-                                            </section>
-
-                                            <section class="modal-body">
-                                                {{ this.message }}
-                                            </section>
-
-                                            <div class="modal-footer">
-
-                                            </div>
-
-                                        </div>
-                                    </div>
-                                </article>
-                            {{/each}}
                         </div>
                     {{ else }}
                         <h3>No Messages.</h3>
                     {{/if}}
+                    <div id="u-pageNumber"></div>
+                    <div id="u-pager"></div>
                 </section>