From 31dc3c06e19092396bbb88f5e8cbd5b9b7158665 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Wed, 22 Jun 2016 00:39:47 -0400
Subject: [PATCH] continue jquery removal

---
 dashboard-ui/css/librarymenu.css              |  16 +-
 dashboard-ui/css/nowplayingbar.css            |   2 +-
 dashboard-ui/livetv.html                      |   9 +-
 dashboard-ui/myprofile.html                   |  20 +-
 dashboard-ui/scripts/librarymenu.js           |  14 +-
 dashboard-ui/scripts/livetvrecordings.js      |   6 +-
 dashboard-ui/scripts/livetvseriestimers.js    |  27 +-
 dashboard-ui/scripts/myprofile.js             | 338 +++---------------
 dashboard-ui/scripts/site.js                  |  10 +-
 dashboard-ui/scripts/sync.js                  |   2 +-
 dashboard-ui/scripts/userpasswordpage.js      | 226 ++++++++++++
 dashboard-ui/shared.html                      |   5 +-
 .../thirdparty/paper-button-style.css         |  26 +-
 dashboard-ui/userpassword.html                |  26 +-
 14 files changed, 352 insertions(+), 375 deletions(-)
 create mode 100644 dashboard-ui/scripts/userpasswordpage.js

diff --git a/dashboard-ui/css/librarymenu.css b/dashboard-ui/css/librarymenu.css
index 54c5c85c53..8d2c49760d 100644
--- a/dashboard-ui/css/librarymenu.css
+++ b/dashboard-ui/css/librarymenu.css
@@ -219,7 +219,7 @@
 }
 
 .viewMenuBar, .libraryViewNav {
-    background-color: #282828;
+    background-color: #2a2a2a;
     color: #fff;
 }
 
@@ -499,6 +499,10 @@ body:not(.dashboardDocument) .headerAppsButton {
         bottom: 0;
         left: 270px;
     }
+
+    .dashboardDocument .adminDrawerLogo {
+        display: none;
+    }
 }
 
 .adminDrawer .sidebarLink {
@@ -537,13 +541,9 @@ body:not(.dashboardDocument) .headerAppsButton {
     display: block;
 }
 
-.dashboardDocument.mainDrawerOpen .adminDrawerLogo {
-    display: none;
-}
-
-.adminDrawerLogo img {
-    height: 30px;
-}
+    .adminDrawerLogo img {
+        height: 30px;
+    }
 
 @media all and (max-width: 640px) {
 
diff --git a/dashboard-ui/css/nowplayingbar.css b/dashboard-ui/css/nowplayingbar.css
index dd6c4122ef..c13caddd15 100644
--- a/dashboard-ui/css/nowplayingbar.css
+++ b/dashboard-ui/css/nowplayingbar.css
@@ -59,7 +59,7 @@
     /* Above everything, except for the video player and popup overlays */
     z-index: 1097;
     color: #fff;
-    background-color: #282828;
+    background-color: #2a2a2a;
     text-align: center;
     display: flex;
     flex-direction: row;
diff --git a/dashboard-ui/livetv.html b/dashboard-ui/livetv.html
index 4fcf6fa9d4..a28d21bcd8 100644
--- a/dashboard-ui/livetv.html
+++ b/dashboard-ui/livetv.html
@@ -5,7 +5,7 @@
         <button class="pageTabButton" data-index="1">${TabGuide}</button>
         <button class="pageTabButton" data-index="2">${TabChannels}</button>
         <button class="pageTabButton" data-index="3">${TabRecordings}</button>
-        <button  class="pageTabButton" data-index="4">${TabSeries}</button>
+        <button class="pageTabButton" data-index="4">${TabSeries}</button>
     </div>
     <div class="is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
         <div id="activePrograms" class="homePageSection">
@@ -74,9 +74,10 @@
             <br />
         </div>
         <div id="recordingGroups" class="hide homePageSection">
-            <h1 class="listHeader">
-                <a href="livetvrecordinglist.html">${HeaderAllRecordings}<img src="css/images/rightarrow.png" class="headerArrowImage" /></a>
-            </h1>
+            <div>
+                <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderAllRecordings}</h1>
+                <a href="livetvrecordinglist.html" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><button is="emby-button" type="button" class="raised more mini noIcon">${ButtonMoreItems}</button></a>
+            </div>
             <div id="recordingGroupItems"></div>
         </div>
     </div>
diff --git a/dashboard-ui/myprofile.html b/dashboard-ui/myprofile.html
index 84b45de575..ce3d24effe 100644
--- a/dashboard-ui/myprofile.html
+++ b/dashboard-ui/myprofile.html
@@ -1,4 +1,4 @@
-<div id="userImagePage" data-role="page" class="page libraryPage userPreferencesPage userPasswordPage noSecondaryNavPage" data-title="${HeaderProfile}" data-require="emby-collapsible,scripts/myprofile,emby-checkbox,emby-input,emby-button" data-backbutton="true" data-menubutton="false">
+<div id="userImagePage" data-role="page" class="page libraryPage userPreferencesPage userPasswordPage noSecondaryNavPage" data-title="${HeaderProfile}" data-backbutton="true" data-menubutton="false">
 
     <div data-role="content">
         <br />
@@ -12,12 +12,12 @@
             </div>
         </div>
 
-        <div class="connectMessage readOnlyContent" style="display:none;margin: 0 auto; padding: 0 1em; text-align:center;">
+        <div class="connectMessage readOnlyContent hide" style="margin: 0 auto; padding: 0 1em; text-align:center;">
             <p>${MessageProfileInfoSynced}</p>
             <div style="margin-top: .75em;"><a href="http://emby.media/connect" target="_blank">${ButtonLearnMoreAboutEmbyConnect}</a></div>
         </div>
 
-        <form class="newImageForm userProfileSettingsForm" style="display:none;margin: 1em auto 0;">
+        <form class="newImageForm userProfileSettingsForm hide" style="margin: 1em auto 0;">
 
             <emby-collapsible title="${HeaderUploadNewImage}">
                 <div id="fldNewImage">
@@ -30,7 +30,7 @@
                     </div>
                 </div>
                 <div id="fldNewImagePreview"></div>
-                <div id="fldUpload" style="display: none;">
+                <div id="fldUpload" class="hide">
                     <button type="submit" data-icon="check" data-theme="a">${ButtonUpload}</button>
                 </div>
             </emby-collapsible>
@@ -39,14 +39,14 @@
 
         <br />
 
-        <form class="updatePasswordForm passwordSection userProfileSettingsForm" style="display:none;margin: 0 auto 2em;">
+        <form class="updatePasswordForm passwordSection userProfileSettingsForm hide" style="margin: 0 auto 2em;">
 
             <div class="detailSection">
                 <h1>
                     ${HeaderPassword}
                 </h1>
                 <br />
-                <div id="fldCurrentPassword" style="display: none;" class="inputContainer">
+                <div id="fldCurrentPassword" class="inputContainer hide">
                     <input is="emby-input" type="password" id="txtCurrentPassword" label="${LabelCurrentPassword}" autocomplete="off" />
                 </div>
                 <div class="inputContainer">
@@ -57,13 +57,11 @@
                 </div>
                 <div>
                     <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
-                    <div id="btnResetPassword" style="display: none;">
-                        <button is="emby-button" type="button" class="raised cancel block" onclick="UpdatePasswordPage.resetPassword();"><iron-icon icon="lock"></iron-icon><span>${ButtonResetPassword}</span></button>
-                    </div>
+                    <button is="emby-button" type="button" id="btnResetPassword" class="raised cancel block hide"><iron-icon icon="lock"></iron-icon><span>${ButtonResetPassword}</span></button>
                 </div>
             </div>
         </form>
-        <form class="localAccessForm localAccessSection userProfileSettingsForm" style="margin: 0 auto;display:none;">
+        <form class="localAccessForm localAccessSection userProfileSettingsForm hide" style="margin: 0 auto;">
             <div class="detailSection">
                 <h1>
                     ${HeaderEasyPinCode}
@@ -83,7 +81,7 @@
                 </div>
                 <div>
                     <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
-                    <button is="emby-button" type="button" id="btnResetEasyPassword" class="raised cancel block hide" onclick="UpdatePasswordPage.resetEasyPassword();"><iron-icon icon="lock"></iron-icon><span>${ButtonResetEasyPassword}</span></button>
+                    <button is="emby-button" type="button" id="btnResetEasyPassword" class="raised cancel block hide"><iron-icon icon="lock"></iron-icon><span>${ButtonResetEasyPassword}</span></button>
                 </div>
             </div>
         </form>
diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js
index 3e2470d14d..34dd4dc57a 100644
--- a/dashboard-ui/scripts/librarymenu.js
+++ b/dashboard-ui/scripts/librarymenu.js
@@ -617,6 +617,11 @@
         return getParameterByName('topParentId') || null;
     }
 
+    function getNavigateDelay() {
+        // On mobile devices don't navigate until after the closing animation has completed or it may stutter
+        return browserInfo.mobile ? 320 : 200;;
+    }
+
     window.LibraryMenu = {
         getTopParentId: getTopParentId,
 
@@ -632,8 +637,6 @@
                 setTimeout(function () {
                     closeMainDrawer();
 
-                    // On mobile devices don't navigate until after the closing animation has completed or it may stutter
-                    var delay = browserInfo.mobile ? 350 : 200;
 
                     setTimeout(function () {
                         if (action) {
@@ -641,7 +644,7 @@
                         } else {
                             Dashboard.navigate(link.href);
                         }
-                    }, delay);
+                    }, getNavigateDelay());
 
                 }, 50);
             }
@@ -657,12 +660,9 @@
 
                 closeMainDrawer();
 
-                // On mobile devices don't navigate until after the closing animation has completed or it may stutter
-                var delay = browserInfo.mobile ? 350 : 200;
-
                 setTimeout(function () {
                     Dashboard.logout();
-                }, delay);
+                }, getNavigateDelay());
             }
 
             return false;
diff --git a/dashboard-ui/scripts/livetvrecordings.js b/dashboard-ui/scripts/livetvrecordings.js
index e0d709843f..1789fec867 100644
--- a/dashboard-ui/scripts/livetvrecordings.js
+++ b/dashboard-ui/scripts/livetvrecordings.js
@@ -1,4 +1,4 @@
-define(['scripts/livetvcomponents'], function () {
+define(['scripts/livetvcomponents', 'emby-button'], function () {
 
     function getRecordingGroupHtml(group) {
 
@@ -6,7 +6,7 @@
 
         html += '<paper-icon-item>';
 
-        html += '<paper-fab mini class="blue" icon="live-tv" item-icon></paper-fab>';
+        html += '<button type="button" is="emby-button" class="fab mini autoSize blue" item-icon><i class="md-icon">live_tv</i></button>';
 
         html += '<paper-item-body two-line>';
         html += '<a href="livetvrecordinglist.html?groupid=' + group.Id + '" class="clearLink">';
@@ -177,7 +177,7 @@
 
         }).then(function (result) {
 
-            require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () {
+            require(['paper-item-body', 'paper-icon-item'], function () {
                 renderRecordingGroups(context, result.Items);
             });
         });
diff --git a/dashboard-ui/scripts/livetvseriestimers.js b/dashboard-ui/scripts/livetvseriestimers.js
index 52306a44e1..4b2572ebca 100644
--- a/dashboard-ui/scripts/livetvseriestimers.js
+++ b/dashboard-ui/scripts/livetvseriestimers.js
@@ -1,4 +1,4 @@
-define(['datetime', 'paper-icon-button-light'], function (datetime) {
+define(['datetime', 'paper-icon-button-light', 'emby-button', 'listViewStyle'], function (datetime) {
 
     var query = {
 
@@ -38,18 +38,17 @@
 
             var timer = timers[i];
 
-            html += '<paper-icon-item>';
+            html += '<div class="listItem">';
 
-            html += '<paper-fab mini icon="live-tv" item-icon></paper-fab>';
+            html += '<button type="button" is="emby-button" class="fab mini autoSize blue" item-icon><i class="md-icon">live_tv</i></button>';
 
-            html += '<paper-item-body three-line>';
+            html += '<div class="listItemBody">';
             html += '<a class="clearLink" href="livetvseriestimer.html?id=' + timer.Id + '">';
-
-            html += '<div>';
+            html += '<h3>';
             html += timer.Name;
-            html += '</div>';
+            html += '</h3>';
 
-            html += '<div secondary>';
+            html += '<div class="secondary">';
             if (timer.DayPattern) {
                 html += timer.DayPattern;
             }
@@ -67,7 +66,7 @@
             }
             html += '</div>';
 
-            html += '<div secondary>';
+            html += '<div class="secondary">';
             if (timer.RecordAnyChannel) {
                 html += Globalize.translate('LabelAllChannels');
             }
@@ -75,13 +74,13 @@
                 html += timer.ChannelName;
             }
             html += '</div>';
-            html += '</a>';
 
-            html += '</paper-item-body>';
+            html += '</a>';
+            html += '</div>';
 
             html += '<button type="button" is="paper-icon-button-light" data-seriestimerid="' + timer.Id + '" title="' + Globalize.translate('ButtonCancelSeries') + '" class="btnCancelSeries autoSize"><i class="md-icon">cancel</i></button>';
 
-            html += '</paper-icon-item>';
+            html += '</div>';
         }
 
         if (timers.length) {
@@ -123,9 +122,7 @@
 
         ApiClient.getLiveTvSeriesTimers(query).then(function (result) {
 
-            require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () {
-                renderTimers(context, result.Items);
-            });
+            renderTimers(context, result.Items);
         });
     }
 
diff --git a/dashboard-ui/scripts/myprofile.js b/dashboard-ui/scripts/myprofile.js
index bb20f0457c..fc56600e49 100644
--- a/dashboard-ui/scripts/myprofile.js
+++ b/dashboard-ui/scripts/myprofile.js
@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define(['scripts/userpasswordpage'], function (Userpasswordpage) {
 
     var currentFile;
 
@@ -10,8 +10,10 @@
 
         ApiClient.getUser(userId).then(function (user) {
 
-            $('.username', page).html(user.Name);
-            $('#uploadUserImage', page).val('').trigger('change');
+            page.querySelector('.username').innerHTML = user.Name;
+            var uploadUserImage = page.querySelector('#uploadUserImage');
+            uploadUserImage.value = '';
+            uploadUserImage.dispatchEvent(new CustomEvent('change', {}));
 
             Dashboard.setPageTitle(user.Name);
 
@@ -29,34 +31,34 @@
                 imageUrl = "css/images/logindefault.png";
             }
 
-            $('#fldImage', page).show().html('').html("<img width='140px' src='" + imageUrl + "' />");
+            var fldImage = page.querySelector('#fldImage');
+            fldImage.classList.remove('hide');
+            fldImage.innerHTML = "<img width='140px' src='" + imageUrl + "' />";
 
             var showImageEditing = false;
 
             if (user.ConnectLinkType == 'Guest') {
 
-                $('.connectMessage', page).show();
+                page.querySelector('.connectMessage').classList.remove('hide');
             }
             else if (user.PrimaryImageTag) {
 
-                $('#headerUploadNewImage', page).show();
                 showImageEditing = true;
-                $('.connectMessage', page).hide();
+                page.querySelector('.connectMessage').classList.add('hide');
 
             } else {
                 showImageEditing = true;
-                $('#headerUploadNewImage', page).show();
-                $('.connectMessage', page).hide();
+                page.querySelector('.connectMessage').classList.add('hide');
             }
 
             Dashboard.getCurrentUser().then(function (loggedInUser) {
 
                 if (showImageEditing && AppInfo.supportsFileInput && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
-                    $('.newImageForm', page).show();
-                    $('#btnDeleteImage', page).removeClass('hide');
+                    page.querySelector('.newImageForm').classList.remove('hide');
+                    page.querySelector('#btnDeleteImage').classList.remove('hide');
                 } else {
-                    $('.newImageForm', page).hide();
-                    $('#btnDeleteImage', page).addClass('hide');
+                    page.querySelector('.newImageForm').classList.add('hide');
+                    page.querySelector('#btnDeleteImage').classList.add('hide');
                 }
             });
 
@@ -105,8 +107,8 @@
         var file = files[0];
 
         if (!file || !file.type.match('image.*')) {
-            $('#userImageOutput', page).html('');
-            $('#fldUpload', page).hide();
+            page.querySelector('#userImageOutput').innerHTML = '';
+            page.querySelector('#fldUpload').classList.add('hide');
             currentFile = null;
             return;
         }
@@ -117,7 +119,7 @@
 
         reader.onerror = onFileReaderError;
         reader.onloadstart = function () {
-            $('#fldUpload', page).hide();
+            page.querySelector('#fldUpload').classList.add('hide');
         };
         reader.onabort = onFileReaderAbort;
 
@@ -127,8 +129,8 @@
             // Render thumbnail.
             var html = ['<img style="max-width:500px;max-height:200px;" src="', e.target.result, '" title="', escape(file.name), '"/>'].join('');
 
-            $('#userImageOutput', page).html(html);
-            $('#fldUpload', page).show();
+            page.querySelector('#userImageOutput').innerHTML = html;
+            page.querySelector('#fldUpload').classList.remove('hide');
         };
 
         // Read in the image file as a data URL.
@@ -144,22 +146,24 @@
         return false;
     }
 
-    $(document).on('pageinit', "#userImagePage", function () {
+    return function (view, params) {
 
-        var page = this;
+        reloadUser(view);
 
-        reloadUser(page);
+        var userpasswordpage = new Userpasswordpage(view, params);
 
-        $("#userImageDropZone", page).on('dragover', onImageDragOver).on('drop', function (e) {
+        var userImageDropZone = view.querySelector('#userImageDropZone');
+        userImageDropZone.addEventListener('dragOver', onImageDragOver);
+        userImageDropZone.addEventListener('drop', function (e) {
 
             e.preventDefault();
 
-            setFiles(page, e.originalEvent.dataTransfer.files);
+            setFiles(view, e.originalEvent.dataTransfer.files);
 
             return false;
         });
 
-        $('#btnDeleteImage', page).on('click', function () {
+        view.querySelector('#btnDeleteImage').addEventListener('click', function () {
 
             require(['confirm'], function (confirm) {
 
@@ -173,285 +177,41 @@
 
                         Dashboard.hideLoadingMsg();
 
-                        reloadUser(page);
+                        reloadUser(view);
                     });
                 });
             });
         });
 
-        $('.newImageForm').on('submit', function () {
+        view.querySelector('.newImageForm').addEventListener('submit', function (e) {
 
-            var self = this;
-
-            self.onImageSubmit = function () {
-
-                var file = currentFile;
-
-                if (!file) {
-                    return false;
-                }
-
-                if (file.type != "image/png" && file.type != "image/jpeg" && file.type != "image/jpeg") {
-                    return false;
-                }
-
-                Dashboard.showLoadingMsg();
-
-                var userId = getParameterByName("userId");
-
-                ApiClient.uploadUserImage(userId, 'Primary', file).then(function () {
-
-                    Dashboard.hideLoadingMsg();
-
-                    reloadUser(page);
-                });
+            var file = currentFile;
 
+            if (!file) {
                 return false;
-            };
-        });
-
-        page.querySelector('#uploadUserImage').addEventListener('change', function (e) {
-            setFiles(page, e.target.files);
-        });
-    });
-
-    function loadUser(page) {
-
-        var userid = getParameterByName("userId");
-
-        ApiClient.getUser(userid).then(function (user) {
-
-            Dashboard.getCurrentUser().then(function (loggedInUser) {
-
-                Dashboard.setPageTitle(user.Name);
-
-                var showPasswordSection = true;
-                var showLocalAccessSection = false;
-                if (user.ConnectLinkType == 'Guest') {
-                    $('.localAccessSection', page).hide();
-                    showPasswordSection = false;
-                }
-                else if (user.HasConfiguredPassword) {
-                    $('#btnResetPassword', page).show();
-                    $('#fldCurrentPassword', page).show();
-                    showLocalAccessSection = true;
-                } else {
-                    $('#btnResetPassword', page).hide();
-                    $('#fldCurrentPassword', page).hide();
-                }
-
-                if (showPasswordSection && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
-                    $('.passwordSection', page).show();
-                } else {
-                    $('.passwordSection', page).hide();
-                }
-
-                if (showLocalAccessSection && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
-                    $('.localAccessSection', page).show();
-                } else {
-                    $('.localAccessSection', page).hide();
-                }
-
-                if (user.HasConfiguredEasyPassword) {
-                    $('#txtEasyPassword', page).val('').attr('placeholder', '******');
-                    $('#btnResetEasyPassword', page).removeClass('hide');
-                } else {
-                    $('#txtEasyPassword', page).val('').attr('placeholder', '');
-                    $('#btnResetEasyPassword', page).addClass('hide');
-                }
-
-                page.querySelector('.chkEnableLocalEasyPassword').checked = user.Configuration.EnableLocalPassword;
-            });
-        });
-
-        $('#txtCurrentPassword', page).val('');
-        $('#txtNewPassword', page).val('');
-        $('#txtNewPasswordConfirm', page).val('');
-    }
-
-    function saveEasyPassword(page) {
-
-        var userId = getParameterByName("userId");
-
-        var easyPassword = $('#txtEasyPassword', page).val();
-
-        if (easyPassword) {
-
-            ApiClient.updateEasyPassword(userId, easyPassword).then(function () {
-
-                onEasyPasswordSaved(page, userId);
-
-            });
-
-        } else {
-            onEasyPasswordSaved(page, userId);
-        }
-    }
-
-    function onEasyPasswordSaved(page, userId) {
-
-        ApiClient.getUser(userId).then(function (user) {
-
-            user.Configuration.EnableLocalPassword = page.querySelector('.chkEnableLocalEasyPassword').checked;
-
-            ApiClient.updateUserConfiguration(user.Id, user.Configuration).then(function () {
-
-                Dashboard.hideLoadingMsg();
-
-                require(['toast'], function (toast) {
-                    toast(Globalize.translate('MessageSettingsSaved'));
-                });
-                loadUser(page);
-            });
-        });
-    }
-
-    function savePassword(page) {
-
-        var userId = getParameterByName("userId");
-
-        var currentPassword = page.querySelector('#txtCurrentPassword').value;
-        var newPassword = page.querySelector('#txtNewPassword').value;
-
-        ApiClient.updateUserPassword(userId, currentPassword, newPassword).then(function () {
-
-            Dashboard.hideLoadingMsg();
-
-            require(['toast'], function (toast) {
-                toast(Globalize.translate('PasswordSaved'));
-            });
-            loadUser(page);
-
-        }, function () {
-
-            Dashboard.hideLoadingMsg();
-
-            Dashboard.alert({
-                title: Globalize.translate('HeaderLoginFailure'),
-                message: Globalize.translate('MessageInvalidUser')
-            });
-
-        });
-
-    }
-
-    function updatePasswordPage() {
-
-        var self = this;
-
-        self.onSubmit = function () {
-
-            var form = this;
-            var page = $(form).parents('.page')[0];
-
-            if (page.querySelector('#txtNewPassword').value != page.querySelector('#txtNewPasswordConfirm').value) {
-
-                require(['toast'], function (toast) {
-                    toast(Globalize.translate('PasswordMatchError'));
-                });
-            } else {
-
-                Dashboard.showLoadingMsg();
-                savePassword(page);
             }
 
-
-            // Disable default form submission
-            return false;
-
-        };
-
-        self.onLocalAccessSubmit = function () {
-
-            var form = this;
-            var page = $(form).parents('.page')[0];
+            if (file.type != "image/png" && file.type != "image/jpeg" && file.type != "image/jpeg") {
+                return false;
+            }
 
             Dashboard.showLoadingMsg();
 
-            saveEasyPassword(page);
+            var userId = getParameterByName("userId");
 
-            // Disable default form submission
+            ApiClient.uploadUserImage(userId, 'Primary', file).then(function () {
+
+                Dashboard.hideLoadingMsg();
+
+                reloadUser(view);
+            });
+
+            e.preventDefault();
             return false;
+        });
 
-        };
-
-        self.resetPassword = function () {
-
-            var msg = Globalize.translate('PasswordResetConfirmation');
-
-            var page = $($.mobile.activePage)[0];
-
-            require(['confirm'], function (confirm) {
-
-                confirm(msg, Globalize.translate('PasswordResetHeader')).then(function () {
-
-                    var userId = getParameterByName("userId");
-
-                    Dashboard.showLoadingMsg();
-
-                    ApiClient.resetUserPassword(userId).then(function () {
-
-                        Dashboard.hideLoadingMsg();
-
-                        Dashboard.alert({
-                            message: Globalize.translate('PasswordResetComplete'),
-                            title: Globalize.translate('PasswordResetHeader')
-                        });
-
-                        loadUser(page);
-
-                    });
-                });
-            });
-
-        };
-
-        self.resetEasyPassword = function () {
-
-            var msg = Globalize.translate('PinCodeResetConfirmation');
-
-            var page = $($.mobile.activePage)[0];
-
-            require(['confirm'], function (confirm) {
-
-                confirm(msg, Globalize.translate('HeaderPinCodeReset')).then(function () {
-
-                    var userId = getParameterByName("userId");
-
-                    Dashboard.showLoadingMsg();
-
-                    ApiClient.resetEasyPassword(userId).then(function () {
-
-                        Dashboard.hideLoadingMsg();
-
-                        Dashboard.alert({
-                            message: Globalize.translate('PinCodeResetComplete'),
-                            title: Globalize.translate('HeaderPinCodeReset')
-                        });
-
-                        loadUser(page);
-
-                    });
-                });
-            });
-        };
-    }
-
-    window.UpdatePasswordPage = new updatePasswordPage();
-
-    $(document).on('pageinit', ".userPasswordPage", function () {
-
-        var page = this;
-
-        $('.updatePasswordForm').off('submit', UpdatePasswordPage.onSubmit).on('submit', UpdatePasswordPage.onSubmit);
-        $('.localAccessForm').off('submit', UpdatePasswordPage.onLocalAccessSubmit).on('submit', UpdatePasswordPage.onLocalAccessSubmit);
-
-    }).on('pageshow', ".userPasswordPage", function () {
-
-        var page = this;
-
-        loadUser(page);
-
-    });
-
+        view.querySelector('#uploadUserImage').addEventListener('change', function (e) {
+            setFiles(view, e.target.files);
+        });
+    };
 });
\ No newline at end of file
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index 7515f70201..c913f01001 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -2771,9 +2771,10 @@ var AppInfo = {};
 
         defineRoute({
             path: '/myprofile.html',
-            dependencies: ['emby-button'],
+            dependencies: ['emby-button', 'emby-collapsible', 'emby-checkbox', 'emby-input'],
             autoFocus: false,
-            transition: 'fade'
+            transition: 'fade',
+            controller: 'scripts/myprofile'
         });
 
         defineRoute({
@@ -2998,8 +2999,9 @@ var AppInfo = {};
 
         defineRoute({
             path: '/userpassword.html',
-            dependencies: [],
-            autoFocus: false
+            dependencies: ['emby-input', 'emby-button', 'emby-checkbox'],
+            autoFocus: false,
+            controller: 'scripts/userpasswordpage'
         });
 
         defineRoute({
diff --git a/dashboard-ui/scripts/sync.js b/dashboard-ui/scripts/sync.js
index cfc8ad676b..a638e3f1fb 100644
--- a/dashboard-ui/scripts/sync.js
+++ b/dashboard-ui/scripts/sync.js
@@ -228,7 +228,7 @@
 
     function showSyncMenuInternal(options) {
 
-        require(['dialogHelper', 'paper-fab'], function (dialogHelper) {
+        require(['dialogHelper'], function (dialogHelper) {
 
             var userId = Dashboard.getCurrentUserId();
 
diff --git a/dashboard-ui/scripts/userpasswordpage.js b/dashboard-ui/scripts/userpasswordpage.js
new file mode 100644
index 0000000000..366b5838b1
--- /dev/null
+++ b/dashboard-ui/scripts/userpasswordpage.js
@@ -0,0 +1,226 @@
+define([], function () {
+
+    function loadUser(page, params) {
+
+        var userid = params.userId;
+
+        ApiClient.getUser(userid).then(function (user) {
+
+            Dashboard.getCurrentUser().then(function (loggedInUser) {
+
+                Dashboard.setPageTitle(user.Name);
+
+                var showPasswordSection = true;
+                var showLocalAccessSection = false;
+                if (user.ConnectLinkType == 'Guest') {
+                    page.querySelector('.localAccessSection').classList.add('hide');
+                    showPasswordSection = false;
+                }
+                else if (user.HasConfiguredPassword) {
+                    page.querySelector('#btnResetPassword').classList.remove('hide');
+                    page.querySelector('#fldCurrentPassword').classList.remove('hide');
+                    showLocalAccessSection = true;
+                } else {
+                    page.querySelector('#btnResetPassword').classList.add('hide');
+                    page.querySelector('#fldCurrentPassword').classList.add('hide');
+                }
+
+                if (showPasswordSection && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
+                    page.querySelector('.passwordSection').classList.remove('hide');
+                } else {
+                    page.querySelector('.passwordSection').classList.add('hide');
+                }
+
+                if (showLocalAccessSection && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
+                    page.querySelector('.localAccessSection').classList.remove('hide');
+                } else {
+                    page.querySelector('.localAccessSection').classList.add('hide');
+                }
+
+                var txtEasyPassword = page.querySelector('#txtEasyPassword');
+                txtEasyPassword.value = '';
+
+                if (user.HasConfiguredEasyPassword) {
+                    txtEasyPassword.placeholder = '******';
+                    page.querySelector('#btnResetEasyPassword').classList.remove('hide');
+                } else {
+                    txtEasyPassword.removeAttribute('placeholder');
+                    txtEasyPassword.placeholder = '';
+                    page.querySelector('#btnResetEasyPassword').classList.add('hide');
+                }
+
+                page.querySelector('.chkEnableLocalEasyPassword').checked = user.Configuration.EnableLocalPassword;
+            });
+        });
+
+        page.querySelector('#txtCurrentPassword').value = '';
+        page.querySelector('#txtNewPassword').value = '';
+        page.querySelector('#txtNewPasswordConfirm').value = '';
+    }
+
+    return function (view, params) {
+
+        function saveEasyPassword() {
+
+            var userId = params.userId;
+
+            var easyPassword = view.querySelector('#txtEasyPassword').value;
+
+            if (easyPassword) {
+
+                ApiClient.updateEasyPassword(userId, easyPassword).then(function () {
+
+                    onEasyPasswordSaved(userId);
+
+                });
+
+            } else {
+                onEasyPasswordSaved(userId);
+            }
+        }
+
+        function onEasyPasswordSaved(userId) {
+
+            ApiClient.getUser(userId).then(function (user) {
+
+                user.Configuration.EnableLocalPassword = view.querySelector('.chkEnableLocalEasyPassword').checked;
+
+                ApiClient.updateUserConfiguration(user.Id, user.Configuration).then(function () {
+
+                    Dashboard.hideLoadingMsg();
+
+                    require(['toast'], function (toast) {
+                        toast(Globalize.translate('MessageSettingsSaved'));
+                    });
+                    loadUser(view, params);
+                });
+            });
+        }
+
+        function savePassword() {
+
+            var userId = getParameterByName("userId");
+
+            var currentPassword = view.querySelector('#txtCurrentPassword').value;
+            var newPassword = view.querySelector('#txtNewPassword').value;
+
+            ApiClient.updateUserPassword(userId, currentPassword, newPassword).then(function () {
+
+                Dashboard.hideLoadingMsg();
+
+                require(['toast'], function (toast) {
+                    toast(Globalize.translate('PasswordSaved'));
+                });
+                loadUser(view, params);
+
+            }, function () {
+
+                Dashboard.hideLoadingMsg();
+
+                Dashboard.alert({
+                    title: Globalize.translate('HeaderLoginFailure'),
+                    message: Globalize.translate('MessageInvalidUser')
+                });
+
+            });
+
+        }
+
+        function onSubmit(e) {
+
+            var form = this;
+
+            if (form.querySelector('#txtNewPassword').value != form.querySelector('#txtNewPasswordConfirm').value) {
+
+                require(['toast'], function (toast) {
+                    toast(Globalize.translate('PasswordMatchError'));
+                });
+            } else {
+
+                Dashboard.showLoadingMsg();
+                savePassword();
+            }
+
+            // Disable default form submission
+            e.preventDefault();
+            return false;
+        }
+
+        function onLocalAccessSubmit(e) {
+
+            Dashboard.showLoadingMsg();
+
+            saveEasyPassword();
+
+            // Disable default form submission
+            e.preventDefault();
+            return false;
+        }
+
+        function resetPassword() {
+
+            var msg = Globalize.translate('PasswordResetConfirmation');
+
+            require(['confirm'], function (confirm) {
+
+                confirm(msg, Globalize.translate('PasswordResetHeader')).then(function () {
+
+                    var userId = getParameterByName("userId");
+
+                    Dashboard.showLoadingMsg();
+
+                    ApiClient.resetUserPassword(userId).then(function () {
+
+                        Dashboard.hideLoadingMsg();
+
+                        Dashboard.alert({
+                            message: Globalize.translate('PasswordResetComplete'),
+                            title: Globalize.translate('PasswordResetHeader')
+                        });
+
+                        loadUser(view, params);
+
+                    });
+                });
+            });
+        }
+
+        function resetEasyPassword() {
+
+            var msg = Globalize.translate('PinCodeResetConfirmation');
+
+            require(['confirm'], function (confirm) {
+
+                confirm(msg, Globalize.translate('HeaderPinCodeReset')).then(function () {
+
+                    var userId = getParameterByName("userId");
+
+                    Dashboard.showLoadingMsg();
+
+                    ApiClient.resetEasyPassword(userId).then(function () {
+
+                        Dashboard.hideLoadingMsg();
+
+                        Dashboard.alert({
+                            message: Globalize.translate('PinCodeResetComplete'),
+                            title: Globalize.translate('HeaderPinCodeReset')
+                        });
+
+                        loadUser(view, params);
+
+                    });
+                });
+            });
+        }
+
+        view.querySelector('.updatePasswordForm').addEventListener('submit', onSubmit);
+        view.querySelector('.localAccessForm').addEventListener('submit', onLocalAccessSubmit);
+
+        view.querySelector('#btnResetEasyPassword').addEventListener('click', resetEasyPassword);
+        view.querySelector('#btnResetPassword').addEventListener('click', resetPassword);
+
+        view.addEventListener('viewshow', function () {
+            loadUser(view, params);
+        });
+    };
+});
\ No newline at end of file
diff --git a/dashboard-ui/shared.html b/dashboard-ui/shared.html
index 14cf889771..6bcd1b4279 100644
--- a/dashboard-ui/shared.html
+++ b/dashboard-ui/shared.html
@@ -1,4 +1,4 @@
-<div id="publicSharedItemPage" data-role="page" class="page standalonePage noSecondaryNavPage" data-theme="b" data-require="scripts/shared,scripts/itemdetailpage,tileitemcss,scripts/livetvcomponents,paper-fab">
+<div id="publicSharedItemPage" data-role="page" class="page standalonePage noSecondaryNavPage" data-theme="b" data-require="scripts/shared,scripts/itemdetailpage,tileitemcss,scripts/livetvcomponents">
 
     <style>
         #publicSharedItemPage .header {
@@ -20,9 +20,6 @@
 
     <div class="detailPageContent" style="position:relative;">
 
-        <paper-fab class="btnPlay detailFloatingButton hide" icon="play-arrow" title="${ButtonPlay}"></paper-fab>
-        <paper-fab class="btnFloatingRecord detailFloatingButton hide" icon="videocam" title="${ButtonRecord}"></paper-fab>
-
         <div class="detailImageContainer">
         </div>
         <div class="primaryDetailsContainer">
diff --git a/dashboard-ui/thirdparty/paper-button-style.css b/dashboard-ui/thirdparty/paper-button-style.css
index b0baa86210..d464812972 100644
--- a/dashboard-ui/thirdparty/paper-button-style.css
+++ b/dashboard-ui/thirdparty/paper-button-style.css
@@ -1,11 +1,15 @@
-button[is="emby-button"].blue {
+button[is="emby-button"]:not(.fab).blue {
     color: #03a9f4;
 }
 
-    button[is="emby-button"].blue:hover {
+    button[is="emby-button"]:not(.fab).blue:hover {
         background: #e1f5f3;
     }
 
+button[is="emby-button"].fab.blue {
+    background: #03a9f4;
+}
+
 button[is="emby-button"].menuButton {
     color: #212121;
     text-align: left;
@@ -219,14 +223,6 @@ paper-fab.white {
         color: #fff;
     }
 
-paper-fab.blue {
-    background: #03a9f4;
-}
-
-    paper-fab.blue paper-material.keyboard-focus {
-        background: #01579b !important;
-    }
-
 paper-fab.square {
     border-radius: 5px;
 }
@@ -243,10 +239,6 @@ paper-fab.orange {
     background-color: #ffd54f;
 }
 
-paper-fab.blue {
-    background-color: #4fc3f7;
-}
-
 paper-fab.red {
     background-color: #e57373;
 }
@@ -420,7 +412,7 @@ div.dialogHeader {
 }
 
 .ui-body-a .dialogHeader a {
-    color: #fff!important;
+    color: #fff !important;
     text-transform: uppercase;
 }
 
@@ -463,3 +455,7 @@ paper-toggle-button paper-ripple {
 .formDialog.background-theme-b {
     background-color: #181818;
 }
+
+.ui-body-b .listItem .secondary {
+    color: #aaa;
+}
diff --git a/dashboard-ui/userpassword.html b/dashboard-ui/userpassword.html
index 87f2d5b544..4ebf177666 100644
--- a/dashboard-ui/userpassword.html
+++ b/dashboard-ui/userpassword.html
@@ -1,4 +1,4 @@
-<div id="userPasswordPage" data-role="page" class="page type-interior userProfilesPage userPasswordPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Users" data-require="scripts/myprofile,scripts/userpassword,paper-checkbox,emby-input,emby-button">
+<div id="userPasswordPage" data-role="page" class="page type-interior userProfilesPage userPasswordPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Users">
 
     <div data-role="content">
         <div class="content-primary">
@@ -11,15 +11,15 @@
 
             <div class="readOnlyContent">
 
-                <div class="connectMessage readOnlyContent" style="display:none;">
+                <div class="connectMessage readOnlyContent hide">
                     <p>${MessageProfileInfoSynced}</p>
                     <div style="margin-top: .75em;"><a href="http://emby.media/connect" target="_blank">${ButtonLearnMoreAboutEmbyConnect}</a></div>
                 </div>
 
-                <form class="adminUpdatePasswordForm passwordSection" style="display:none;margin: 0 auto 2em;">
+                <form class="updatePasswordForm passwordSection hide" style="margin: 0 auto 2em;">
 
                     <div class="detailSection">
-                        <div id="fldCurrentPassword" style="display: none;" class="inputContainer">
+                        <div id="fldCurrentPassword" class="inputContainer hide">
                             <input is="emby-input" type="password" id="txtCurrentPassword" label="${LabelCurrentPassword}" autocomplete="off" />
                         </div>
                         <div class="inputContainer">
@@ -31,14 +31,12 @@
                         <br />
                         <div>
                             <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
-                            <div id="btnResetPassword" style="display: none;">
-                                <button is="emby-button" type="button" class="raised cancel block" onclick="UpdatePasswordPage.resetPassword();"><iron-icon icon="lock"></iron-icon><span>${ButtonResetPassword}</span></button>
-                            </div>
+                            <button is="emby-button" type="button" id="btnResetPassword" class="raised cancel block hide"><iron-icon icon="lock"></iron-icon><span>${ButtonResetPassword}</span></button>
                         </div>
                     </div>
                 </form>
                 <br />
-                <form class="adminLocalAccessForm localAccessSection" style="margin: 0 auto;">
+                <form class="localAccessForm localAccessSection" style="margin: 0 auto;">
                     <div class="detailSection">
                         <div class="detailSectionHeader">
                             ${HeaderEasyPinCode}
@@ -50,14 +48,16 @@
                             <input is="emby-input" type="number" id="txtEasyPassword" label="${LabelEasyPinCode}" autocomplete="off" pattern="[0-9]*" step="1" maxlength="5" />
                         </div>
                         <br />
-                        <div>
-                            <paper-checkbox class="chkEnableLocalEasyPassword">${LabelInNetworkSignInWithEasyPassword}</paper-checkbox>
-                            <div class="fieldDescription paperCheckboxFieldDescription">${LabelInNetworkSignInWithEasyPasswordHelp}</div>
+                        <div class="checkboxContainer">
+                            <label>
+                                <input type="checkbox" is="emby-checkbox" class="chkEnableLocalEasyPassword" />
+                                <span>${LabelInNetworkSignInWithEasyPassword}</span>
+                            </label>
+                            <div class="fieldDescription checkboxFieldDescription">${LabelInNetworkSignInWithEasyPasswordHelp}</div>
                         </div>
-                        <br /><br />
                         <div>
                             <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
-                            <button is="emby-button" type="button" id="btnResetEasyPassword" class="raised cancel block hide" onclick="UpdatePasswordPage.resetEasyPassword();"><iron-icon icon="lock"></iron-icon><span>${ButtonResetEasyPassword}</span></button>
+                            <button is="emby-button" type="button" id="btnResetEasyPassword" class="raised cancel block hide"><iron-icon icon="lock"></iron-icon><span>${ButtonResetEasyPassword}</span></button>
                         </div>
                     </div>
                 </form>