User management styling

PlexRequests.UI/Content/Themes/plex.css

@@ -179,3 +179,6 @@ button.list-group-item:focus {
 .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
   border-bottom: 6px solid #333333 !important; }
 
+#sidebar-wrapper {
+  background: #252424; }
+

PlexRequests.UI/Content/Themes/plex.min.css

@@ -1 +1 @@
-.form-control-custom{background-color:#333 !important;}.form-control-custom-disabled{background-color:#252424 !important;}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{background:#df691a;}.scroll-top-wrapper{background-color:#333;}.scroll-top-wrapper:hover{background-color:#df691a;}body{font-family:Open Sans Regular,Helvetica Neue,Helvetica,Arial,sans-serif;color:#eee;background-color:#1f1f1f;}.table-striped>tbody>tr:nth-of-type(odd){background-color:#333;}.table-hover>tbody>tr:hover{background-color:#282828;}fieldset{padding:15px;}legend{border-bottom:1px solid #333;}.form-control{color:#fefefe;background-color:#333;}.radio input[type="radio"],.radio-inline input[type="radio"],.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"]{margin-left:-0;}.form-horizontal .radio,.form-horizontal .checkbox,.form-horizontal .radio-inline,.form-horizontal .checkbox-inline{margin-top:-15px;}.dropdown-menu{background-color:#282828;}.dropdown-menu .divider{background-color:#333;}.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{background-color:#333;}.input-group-addon{background-color:#333;}.nav>li>a:hover,.nav>li>a:focus{background-color:#df691a;}.nav-tabs>li>a:hover{border-color:#df691a #df691a transparent;}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{background-color:#df691a;border:1px solid #df691a;}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border:1px solid #df691a;}.navbar-default{background-color:#0a0a0a;}.navbar-default .navbar-brand{color:#df691a;}.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{color:#f0ad4e;background-color:#282828;}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{background-color:#282828;}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a:focus{background-color:#df691a;color:#fff;}.pagination>li>a,.pagination>li>span{background-color:#282828;}.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus{background-color:#333;}.pagination>.disabled>span,.pagination>.disabled>span:hover,.pagination>.disabled>span:focus,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus{color:#fefefe;background-color:#333;}.list-group-item{background-color:#282828;}a.list-group-item:hover,button.list-group-item:hover,a.list-group-item:focus,button.list-group-item:focus{background-color:#333;}.input-addon,.input-group-addon{color:#df691a;}.modal-header,.modal-footer{background-color:#282828;}.modal-content{position:relative;background-color:#282828;border:1px solid transparent;border-radius:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;outline:0;}.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;font-weight:300;color:#ebebeb;line-height:1;vertical-align:middle;white-space:nowrap;text-align:center;background-color:#333;border-radius:10px;}.bootstrap-datetimepicker-widget.dropdown-menu{background-color:#333;}.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after{border-bottom:6px solid #333 !important;}
+.form-control-custom{background-color:#333 !important;}.form-control-custom-disabled{background-color:#252424 !important;}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{background:#df691a;}.scroll-top-wrapper{background-color:#333;}.scroll-top-wrapper:hover{background-color:#df691a;}body{font-family:Open Sans Regular,Helvetica Neue,Helvetica,Arial,sans-serif;color:#eee;background-color:#1f1f1f;}.table-striped>tbody>tr:nth-of-type(odd){background-color:#333;}.table-hover>tbody>tr:hover{background-color:#282828;}fieldset{padding:15px;}legend{border-bottom:1px solid #333;}.form-control{color:#fefefe;background-color:#333;}.radio input[type="radio"],.radio-inline input[type="radio"],.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"]{margin-left:-0;}.form-horizontal .radio,.form-horizontal .checkbox,.form-horizontal .radio-inline,.form-horizontal .checkbox-inline{margin-top:-15px;}.dropdown-menu{background-color:#282828;}.dropdown-menu .divider{background-color:#333;}.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{background-color:#333;}.input-group-addon{background-color:#333;}.nav>li>a:hover,.nav>li>a:focus{background-color:#df691a;}.nav-tabs>li>a:hover{border-color:#df691a #df691a transparent;}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{background-color:#df691a;border:1px solid #df691a;}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border:1px solid #df691a;}.navbar-default{background-color:#0a0a0a;}.navbar-default .navbar-brand{color:#df691a;}.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{color:#f0ad4e;background-color:#282828;}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{background-color:#282828;}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a:focus{background-color:#df691a;color:#fff;}.pagination>li>a,.pagination>li>span{background-color:#282828;}.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus{background-color:#333;}.pagination>.disabled>span,.pagination>.disabled>span:hover,.pagination>.disabled>span:focus,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus{color:#fefefe;background-color:#333;}.list-group-item{background-color:#282828;}a.list-group-item:hover,button.list-group-item:hover,a.list-group-item:focus,button.list-group-item:focus{background-color:#333;}.input-addon,.input-group-addon{color:#df691a;}.modal-header,.modal-footer{background-color:#282828;}.modal-content{position:relative;background-color:#282828;border:1px solid transparent;border-radius:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;outline:0;}.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;font-weight:300;color:#ebebeb;line-height:1;vertical-align:middle;white-space:nowrap;text-align:center;background-color:#333;border-radius:10px;}.bootstrap-datetimepicker-widget.dropdown-menu{background-color:#333;}.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after{border-bottom:6px solid #333 !important;}#sidebar-wrapper{background:#252424;}

PlexRequests.UI/Content/Themes/plex.scss

@@ -2,7 +2,9 @@
 $primary-colour-outline: #ff761b;
 $bg-colour: #333333;
 $bg-colour-disabled: #252424;
-$i: !important;
+$i:
+!important
+;
 
 .form-control-custom {
     background-color: $bg-colour $i;
@@ -201,18 +203,18 @@ button.list-group-item:focus {
 }
 
 .badge {
-  display: inline-block;
+    display: inline-block;
-  min-width: 10px;
+    min-width: 10px;
-  padding: 3px 7px;
+    padding: 3px 7px;
-  font-size: 12px;
+    font-size: 12px;
-  font-weight: 300;
+    font-weight: 300;
-  color: #ebebeb;
+    color: #ebebeb;
-  line-height: 1;
+    line-height: 1;
-  vertical-align: middle;
+    vertical-align: middle;
-  white-space: nowrap;
+    white-space: nowrap;
-  text-align: center;
+    text-align: center;
-  background-color: $bg-colour;
+    background-color: $bg-colour;
-  border-radius: 10px;
+    border-radius: 10px;
 }
 
 .bootstrap-datetimepicker-widget.dropdown-menu {
@@ -221,4 +223,8 @@ button.list-group-item:focus {
 
 .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
     border-bottom: 6px solid $bg-colour $i;
-}
+}
+
+#sidebar-wrapper {
+    background: $bg-colour-disabled;
+}

PlexRequests.UI/Content/app/app.js

@@ -1,3 +1,4 @@
 (function() {
     module = angular.module('PlexRequests', []);
+    module.constant("moment", moment);
 }());

PlexRequests.UI/Content/app/userManagement/userManagementController.js

@@ -1,6 +1,6 @@
 (function () {
 
-    var controller = function ($scope, userManagementService) {
+    var controller = function ($scope, userManagementService, moment) {
 
         $scope.user = {}; // The local user
         $scope.users = []; // list of users
@@ -9,6 +9,7 @@
         $scope.selectedUser = {}; // User on the right side
         $scope.selectedClaims = {};
 
+        $scope.minDate = "0001-01-01T00:00:00.0000000+00:00";
 
         $scope.sortType = "username";
         $scope.sortReverse = false;
@@ -20,12 +21,19 @@
             errorMessage: ""
         };
 
+        var open = false;
+
         // Select a user to populate on the right side
         $scope.selectUser = function (id) {
             var user = $scope.users.filter(function (item) {
                 return item.id === id;
             });
             $scope.selectedUser = user[0];
+
+            if (!open) {
+                $("#wrapper").toggleClass("toggled");
+                open = true;
+            }
         }
 
         // Get all users in the system
@@ -122,6 +130,10 @@
             return $('#baseUrl').val();
         }
 
+        $scope.formatDate = function (utcDate) {
+            return moment.utc(utcDate).local().format('lll');
+        }
+
 
         // On page load
         $scope.init = function () {
@@ -144,5 +156,6 @@
         generateNotify(message, type);
     };
 
-    angular.module('PlexRequests').controller('userManagementController', ["$scope", "userManagementService", controller]);
+
+    angular.module('PlexRequests').controller('userManagementController', ["$scope", "userManagementService","moment", controller]);
 }());

PlexRequests.UI/Content/base.css

@@ -344,11 +344,95 @@ label {
 .img-circle {
   border-radius: 50%; }
 
-.user-management-menu {
+#wrapper {
-  border-style: ridge;
+  padding-left: 0;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  transition: all 0.5s ease; }
+
+#wrapper.toggled {
+  padding-right: 250px; }
+
+#sidebar-wrapper {
+  z-index: 1000;
+  position: fixed;
+  right: 250px;
+  width: 0;
   height: 100%;
-  left: 60%;
+  margin-right: -250px;
+  overflow-y: auto;
+  background: #4e5d6c;
+  padding-left: 15px;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  transition: all 0.5s ease; }
+
+#wrapper.toggled #sidebar-wrapper {
+  width: 500px; }
+
+#page-content-wrapper {
+  width: 100%;
+  position: absolute;
+  padding: 15px; }
+
+#wrapper.toggled #page-content-wrapper {
+  position: absolute;
+  margin-left: -250px; }
+
+/* Sidebar Styles */
+.sidebar-nav {
   position: absolute;
-  width: 40%;
+  top: 0;
-  top: 7%; }
+  width: 500px;
+  margin: 0;
+  padding-left: 0;
+  list-style: none; }
+
+.sidebar-nav li {
+  text-indent: 20px;
+  line-height: 40px; }
+
+.sidebar-nav li a {
+  display: block;
+  text-decoration: none;
+  color: #999999; }
+
+.sidebar-nav li a:hover {
+  text-decoration: none;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2); }
+
+.sidebar-nav li a:active,
+.sidebar-nav li a:focus {
+  text-decoration: none; }
+
+.sidebar-nav > .sidebar-brand {
+  height: 65px;
+  font-size: 18px;
+  line-height: 60px; }
+
+.sidebar-nav > .sidebar-brand a {
+  color: #999999; }
+
+.sidebar-nav > .sidebar-brand a:hover {
+  color: #fff;
+  background: none; }
+
+@media (min-width: 768px) {
+  #wrapper {
+    padding-right: 250px; }
+  #wrapper.toggled {
+    padding-right: 0; }
+  #sidebar-wrapper {
+    width: 500px; }
+  #wrapper.toggled #sidebar-wrapper {
+    width: 0; }
+  #page-content-wrapper {
+    padding: 20px;
+    position: relative; }
+  #wrapper.toggled #page-content-wrapper {
+    position: relative;
+    margin-right: 0; } }
 

PlexRequests.UI/Content/base.scss

@@ -434,11 +434,121 @@ $border-radius: 10px;
     border-radius: 50%;
 }
 
-.user-management-menu {
+#wrapper {
-    border-style: ridge;
+    padding-left: 0;
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    -o-transition: all 0.5s ease;
+    transition: all 0.5s ease;
+}
+
+#wrapper.toggled {
+    padding-right: 250px;
+}
+
+#sidebar-wrapper {
+    z-index: 1000;
+    position: fixed;
+    right: 250px;
+    width: 0;
     height: 100%;
-    left: 60%;
+    margin-right: -250px;
+    overflow-y: auto;
+    background: #4e5d6c;
+    padding-left:15px;
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    -o-transition: all 0.5s ease;
+    transition: all 0.5s ease;
+}
+
+#wrapper.toggled #sidebar-wrapper {
+    width: 500px;
+}
+
+#page-content-wrapper {
+    width: 100%;
+    position: absolute;
+    padding: 15px;
+}
+
+#wrapper.toggled #page-content-wrapper {
     position: absolute;
-    width: 40%;
+    margin-left: -250px;
-    top: 7%;
+}
+
+/* Sidebar Styles */
+
+.sidebar-nav {
+    position: absolute;
+    top: 0;
+    width: 500px;
+    margin: 0;
+    padding-left: 0;
+    list-style: none;
+}
+
+.sidebar-nav li {
+    text-indent: 20px;
+    line-height: 40px;
+}
+
+.sidebar-nav li a {
+    display: block;
+    text-decoration: none;
+    color: #999999;
+}
+
+.sidebar-nav li a:hover {
+    text-decoration: none;
+    color: #fff;
+    background: rgba(255,255,255,0.2);
+}
+
+.sidebar-nav li a:active,
+.sidebar-nav li a:focus {
+    text-decoration: none;
+}
+
+.sidebar-nav > .sidebar-brand {
+    height: 65px;
+    font-size: 18px;
+    line-height: 60px;
+}
+
+.sidebar-nav > .sidebar-brand a {
+    color: #999999;
+}
+
+.sidebar-nav > .sidebar-brand a:hover {
+    color: #fff;
+    background: none;
+}
+
+@media(min-width:768px) {
+    #wrapper {
+        padding-right: 250px;
+    }
+
+    #wrapper.toggled {
+        padding-right: 0;
+    }
+
+    #sidebar-wrapper {
+        width: 500px;
+    }
+
+    #wrapper.toggled #sidebar-wrapper {
+        width: 0;
+    }
+
+    #page-content-wrapper {
+        padding: 20px;
+        position: relative;
+    }
+
+    #wrapper.toggled #page-content-wrapper {
+        position: relative;
+        margin-right: 0;
+    }
 }

PlexRequests.UI/Helpers/BaseUrlHelper.cs

@@ -218,12 +218,14 @@ namespace PlexRequests.UI.Helpers
         {
             var assetLocation = GetBaseUrl();
             var content = GetContentUrl(assetLocation);
+            var sb = new StringBuilder();
 
-            var controller = $"<script src=\"{content}/Content/app/userManagement/userManagementController.js?v={Assembly}\" type=\"text/javascript\"></script>";
+            sb.Append($"<script src=\"{content}/Content/app/userManagement/userManagementController.js?v={Assembly}\" type=\"text/javascript\"></script>");
-            controller += $"<script src=\"{content}/Content/app/userManagement/userManagementService.js?v={Assembly}\" type=\"text/javascript\"></script>";
+            sb.Append($"<script src=\"{content}/Content/app/userManagement/userManagementService.js?v={Assembly}\" type=\"text/javascript\"></script>");
+            sb.Append($"<script src=\"{content}/Content/moment.min.js\"></script>");
 
 
-            return helper.Raw(controller);
+            return helper.Raw(sb.ToString());
         }
 
 

PlexRequests.UI/Views/Shared/_AngularLayout.cshtml

@@ -7,14 +7,14 @@
 
     @Html.Partial("Shared/Partial/_Navbar")
 
-    <div class="container">
+<div class="container">
-        @RenderBody()
+    @RenderBody()
-    </div>
+</div>
-    <div class="scroll-top-wrapper ">
+        <div class="scroll-top-wrapper ">
-        <span class="scroll-top-inner">
+            <span class="scroll-top-inner">
-            <i class="fa fa-2x fa-arrow-circle-up"></i>
+                <i class="fa fa-2x fa-arrow-circle-up"></i>
-        </span>
+            </span>
-    </div>
+        </div>
 </body>
 
 @Html.GetInformationalVersion()

PlexRequests.UI/Views/UserManagement/Index.cshtml

@@ -2,121 +2,9 @@
 @inherits PlexRequests.UI.Helpers.AngularViewBase
 
 @Html.LoadUserManagementAssets()
-<div ng-controller="userManagementController" ng-init="init()">
+<div id="wrapper" class="toggled" ng-controller="userManagementController" ng-init="init()" ng-cloak>
-
+    <!--Sidebar-->
-    <br />
+    <div id="sidebar-wrapper" class="shadow">
-    <br />
-    <br />
-    <div class="col-md-7">
-        <br>
-        <br>
-        <div ng-show="error.error" ng-bind="error.errorMessage"></div>
-        <form name="userform" ng-submit="addUser()" novalidate>
-            <div class="form-group">
-                <input id="username" type="text" placeholder="user" ng-model="user.username" class="form-control form-control-custom" />
-            </div>
-            <div class="form-group">
-                <input id="password" type="password" placeholder="password" ng-model="user.password" class="form-control form-control-custom" />
-            </div>
-            <div class="form-group">
-                <input id="email" type="email" placeholder="email address" ng-model="user.email" class="form-control form-control-custom" />
-            </div>
-
-            <div class="checkbox" ng-repeat="claim in claims">
-                <input id="claimCheckbox_{{$id}}" class="checkbox-custom" name="selectedClaims[]"
-                       ng-checked="claim.selected" ng-model="claim.selected" type="checkbox" value="claim" />
-                <label for="claimCheckbox_{{$id}}">{{claim.name}}</label>
-            </div>
-
-            <input type="submit" class="btn btn-success-outline" value="Add" />
-        </form>
-
-        <form>
-            <div class="form-group">
-                <div class="input-group">
-                    <div class="input-group-addon">
-                        <i class="fa fa-search"></i>
-                    </div>
-
-                    <input type="text" class="form-control" placeholder="Search" ng-model="searchTerm">
-
-                </div>
-            </div>
-        </form>
-
-        <table class="table table-striped table-hover table-responsive table-condensed">
-            <thead>
-                <tr>
-                    <th>
-                        <a href="#" ng-click="sortType = 'username'; sortReverse = !sortReverse">
-                            Username
-                            <span ng-show="sortType == 'username' && !sortReverse" class="fa fa-caret-down"></span>
-                            <span ng-show="sortType == 'username' && sortReverse" class="fa fa-caret-up"></span>
-                        </a>
-                    </th>
-                    <th>
-                        <a href="#" ng-click="sortType = 'alias'; sortReverse = !sortReverse">
-                            Alias
-                            <span ng-show="sortType == 'alias' && !sortReverse" class="fa fa-caret-down"></span>
-                            <span ng-show="sortType == 'alias' && sortReverse" class="fa fa-caret-up"></span>
-                        </a>
-                    </th>
-                    <th>
-                        <a href="#" ng-click="sortType = 'emailAddress'; sortReverse = !sortReverse">
-                            Email
-                            <span ng-show="sortType == 'emailAddress' && !sortReverse" class="fa fa-caret-down"></span>
-                            <span ng-show="sortType == 'emailAddress' && sortReverse" class="fa fa-caret-up"></span>
-                        </a>
-                    </th>
-                    <th>
-                        Roles
-                    </th>
-                    <th>
-                        <a href="#" ng-click="sortType = 'type'; sortReverse = !sortReverse">
-                            User Type
-                            <span ng-show="sortType == 'type' && !sortReverse" class="fa fa-caret-down"></span>
-                            <span ng-show="sortType == 'type' && sortReverse" class="fa fa-caret-up"></span>
-                        </a>
-                    </th>
-                    
-                    <th>
-                        <a href="#" ng-click="sortType = 'lastLoggedIn'; sortReverse = !sortReverse">
-                            Last Logged In
-                            <span ng-show="sortType == 'lastLoggedIn' && !sortReverse" class="fa fa-caret-down"></span>
-                            <span ng-show="sortType == 'lastLoggedIn' && sortReverse" class="fa fa-caret-up"></span>
-                        </a>
-                    </th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr ng-repeat="u in users | orderBy:sortType:sortReverse | filter:searchTerm">
-                    <td>
-                        {{u.username}}
-                    </td>
-                    <td>
-                        {{u.alias}}
-                    </td>
-                    <td>
-                        {{u.emailAddress}}
-                    </td>
-                    <td>
-                        {{u.claims}}
-                    </td>
-                    <td>
-                        {{u.type === 1 ? 'Local User' : 'Plex User'}}
-                    </td>
-                    <td>
-                        {{u.lastLoggedIn}}
-                    </td>
-                    <td>
-                        <a href="#" ng-click="selectUser(u.id)" class="btn btn-sm btn-info-outline">Details/Edit</a>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-
-    <div class="col-md-5 col-md-push-1 user-management-menu" ng-show="selectedUser.username">
         <br />
         <br />
         <img ng-show="selectedUser.plexInfo.thumb" class="col-md-pull-1 img-circle" style="position: absolute" ng-src="{{selectedUser.plexInfo.thumb}}" />
@@ -160,8 +48,123 @@
             <button ng-click="deleteUser()" class="btn btn-danger-outline">Delete</button>
         </div>
 
+    </div>
+    <!--SideBar End-->
+
+    <div>
+        <div class="container-fluid">
+            <div>
+                <br />
+                <br />
+                <br />
+                <div class="col-md-12">
+                    <br>
+                    <br>
+                    <div ng-show="error.error" ng-bind="error.errorMessage"></div>
+                    <form name="userform" ng-submit="addUser()" novalidate>
+                        <div class="form-group">
+                            <input id="username" type="text" placeholder="user" ng-model="user.username" class="form-control form-control-custom" />
+                        </div>
+                        <div class="form-group">
+                            <input id="password" type="password" placeholder="password" ng-model="user.password" class="form-control form-control-custom" />
+                        </div>
+                        <div class="form-group">
+                            <input id="email" type="email" placeholder="email address" ng-model="user.email" class="form-control form-control-custom" />
+                        </div>
+
+                        <div class="checkbox" ng-repeat="claim in claims">
+                            <input id="claimCheckbox_{{$id}}" class="checkbox-custom" name="selectedClaims[]"
+                                   ng-checked="claim.selected" ng-model="claim.selected" type="checkbox" value="claim" />
+                            <label for="claimCheckbox_{{$id}}">{{claim.name}}</label>
+                        </div>
+
+                        <input type="submit" class="btn btn-success-outline" value="Add" />
+                    </form>
+
+                    <form>
+                        <div class="form-group">
+                            <div class="input-group">
+                                <div class="input-group-addon">
+                                    <i class="fa fa-search"></i>
+                                </div>
+
+                                <input type="text" class="form-control" placeholder="Search" ng-model="searchTerm">
+
+                            </div>
+                        </div>
+                    </form>
+
+                    <table class="table table-striped table-hover table-responsive table-condensed">
+                        <thead>
+                            <tr>
+                                <th>
+                                    <a href="#" ng-click="sortType = 'username'; sortReverse = !sortReverse">
+                                        Username
+                                        <span ng-show="sortType == 'username' && !sortReverse" class="fa fa-caret-down"></span>
+                                        <span ng-show="sortType == 'username' && sortReverse" class="fa fa-caret-up"></span>
+                                    </a>
+                                </th>
+                                <th>
+                                    <a href="#" ng-click="sortType = 'alias'; sortReverse = !sortReverse">
+                                        Alias
+                                        <span ng-show="sortType == 'alias' && !sortReverse" class="fa fa-caret-down"></span>
+                                        <span ng-show="sortType == 'alias' && sortReverse" class="fa fa-caret-up"></span>
+                                    </a>
+                                </th>
+                                <th>
+                                    <a href="#" ng-click="sortType = 'emailAddress'; sortReverse = !sortReverse">
+                                        Email
+                                        <span ng-show="sortType == 'emailAddress' && !sortReverse" class="fa fa-caret-down"></span>
+                                        <span ng-show="sortType == 'emailAddress' && sortReverse" class="fa fa-caret-up"></span>
+                                    </a>
+                                </th>
+                                <th>
+                                    Roles
+                                </th>
+                                <th>
+                                    <a href="#" ng-click="sortType = 'type'; sortReverse = !sortReverse">
+                                        User Type
+                                        <span ng-show="sortType == 'type' && !sortReverse" class="fa fa-caret-down"></span>
+                                        <span ng-show="sortType == 'type' && sortReverse" class="fa fa-caret-up"></span>
+                                    </a>
+                                </th>
+
+                                <th>
+                                    <a href="#" ng-click="sortType = 'lastLoggedIn'; sortReverse = !sortReverse">
+                                        Last Logged In
+                                        <span ng-show="sortType == 'lastLoggedIn' && !sortReverse" class="fa fa-caret-down"></span>
+                                        <span ng-show="sortType == 'lastLoggedIn' && sortReverse" class="fa fa-caret-up"></span>
+                                    </a>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr ng-repeat="u in users | orderBy:sortType:sortReverse | filter:searchTerm">
+                                <td>
+                                    {{u.username}}
+                                </td>
+                                <td>
+                                    {{u.alias}}
+                                </td>
+                                <td>
+                                    {{u.emailAddress}}
+                                </td>
+                                <td>
+                                    {{u.claims}}
+                                </td>
+                                <td>
+                                    {{u.type === 1 ? 'Local User' : 'Plex User'}}
+                                </td>
+                                <td ng-bind="u.lastLoggedIn === minDate ? 'Never' : formatDate(u.lastLoggedIn)"></td>
+                                <td>
+                                    <a href="#" ng-click="selectUser(u.id)" class="btn btn-sm btn-info-outline detailsBtn">Details/Edit</a>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
 
-    </div> <!-- End of user side menu -->
-
-
-</div>