Styling for #27

PlexRequests.UI/Content/awesome-bootstrap-checkbox.css

@@ -0,0 +1,266 @@
+@charset "UTF-8";
+.abc-checkbox {
+  padding-left: 20px; }
+.abc-checkbox label {
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  padding-left: 5px; }
+.abc-checkbox label::before {
+  cursor: pointer;
+  content: "";
+  display: inline-block;
+  position: absolute;
+  width: 17px;
+  height: 17px;
+  left: 0;
+  margin-left: -20px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  background-color: #fff; }
+.abc-checkbox label::after {
+  cursor: pointer;
+  display: inline-block;
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 0;
+  top: 0;
+  margin-left: -20px;
+  padding-left: 3px;
+  padding-top: 1px;
+  font-size: 11px;
+  color: #55595c; }
+.abc-checkbox input[type="checkbox"],
+.abc-checkbox input[type="radio"] {
+  cursor: pointer;
+  opacity: 0;
+  z-index: 1; }
+.abc-checkbox input[type="checkbox"]:focus + label::before,
+.abc-checkbox input[type="radio"]:focus + label::before {
+  outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px; }
+.abc-checkbox input[type="checkbox"]:checked + label::after,
+.abc-checkbox input[type="radio"]:checked + label::after {
+  font-family: "FontAwesome";
+  content: ""; }
+.abc-checkbox input[type="checkbox"]:indeterminate + label::after,
+.abc-checkbox input[type="radio"]:indeterminate + label::after {
+  display: block;
+  content: "";
+  width: 10px;
+  height: 3px;
+  background-color: #555555;
+  border-radius: 2px;
+  margin-left: -16.5px;
+  margin-top: 7px; }
+.abc-checkbox input[type="checkbox"]:disabled + label,
+.abc-checkbox input[type="radio"]:disabled + label {
+  opacity: 0.65; }
+.abc-checkbox input[type="checkbox"]:disabled + label::before,
+.abc-checkbox input[type="radio"]:disabled + label::before {
+  background-color: #eceeef;
+  cursor: not-allowed; }
+.abc-checkbox.abc-checkbox-circle label::before {
+  border-radius: 50%; }
+.abc-checkbox.checkbox-inline {
+  margin-top: 0; }
+
+.abc-checkbox-primary input[type="checkbox"]:checked + label::before,
+.abc-checkbox-primary input[type="radio"]:checked + label::before {
+  background-color: #0275d8;
+  border-color: #0275d8; }
+
+.abc-checkbox-primary input[type="checkbox"]:checked + label::after,
+.abc-checkbox-primary input[type="radio"]:checked + label::after {
+  color: #fff; }
+
+.abc-checkbox-danger input[type="checkbox"]:checked + label::before,
+.abc-checkbox-danger input[type="radio"]:checked + label::before {
+  background-color: #d9534f;
+  border-color: #d9534f; }
+
+.abc-checkbox-danger input[type="checkbox"]:checked + label::after,
+.abc-checkbox-danger input[type="radio"]:checked + label::after {
+  color: #fff; }
+
+.abc-checkbox-info input[type="checkbox"]:checked + label::before,
+.abc-checkbox-info input[type="radio"]:checked + label::before {
+  background-color: #5bc0de;
+  border-color: #5bc0de; }
+
+.abc-checkbox-info input[type="checkbox"]:checked + label::after,
+.abc-checkbox-info input[type="radio"]:checked + label::after {
+  color: #fff; }
+
+.abc-checkbox-warning input[type="checkbox"]:checked + label::before,
+.abc-checkbox-warning input[type="radio"]:checked + label::before {
+  background-color: #f0ad4e;
+  border-color: #f0ad4e; }
+
+.abc-checkbox-warning input[type="checkbox"]:checked + label::after,
+.abc-checkbox-warning input[type="radio"]:checked + label::after {
+  color: #fff; }
+
+.abc-checkbox-success input[type="checkbox"]:checked + label::before,
+.abc-checkbox-success input[type="radio"]:checked + label::before {
+  background-color: #5cb85c;
+  border-color: #5cb85c; }
+
+.abc-checkbox-success input[type="checkbox"]:checked + label::after,
+.abc-checkbox-success input[type="radio"]:checked + label::after {
+  color: #fff; }
+
+.abc-checkbox-primary input[type="checkbox"]:indeterminate + label::before,
+.abc-checkbox-primary input[type="radio"]:indeterminate + label::before {
+  background-color: #0275d8;
+  border-color: #0275d8; }
+
+.abc-checkbox-primary input[type="checkbox"]:indeterminate + label::after,
+.abc-checkbox-primary input[type="radio"]:indeterminate + label::after {
+  background-color: #fff; }
+
+.abc-checkbox-danger input[type="checkbox"]:indeterminate + label::before,
+.abc-checkbox-danger input[type="radio"]:indeterminate + label::before {
+  background-color: #d9534f;
+  border-color: #d9534f; }
+
+.abc-checkbox-danger input[type="checkbox"]:indeterminate + label::after,
+.abc-checkbox-danger input[type="radio"]:indeterminate + label::after {
+  background-color: #fff; }
+
+.abc-checkbox-info input[type="checkbox"]:indeterminate + label::before,
+.abc-checkbox-info input[type="radio"]:indeterminate + label::before {
+  background-color: #5bc0de;
+  border-color: #5bc0de; }
+
+.abc-checkbox-info input[type="checkbox"]:indeterminate + label::after,
+.abc-checkbox-info input[type="radio"]:indeterminate + label::after {
+  background-color: #fff; }
+
+.abc-checkbox-warning input[type="checkbox"]:indeterminate + label::before,
+.abc-checkbox-warning input[type="radio"]:indeterminate + label::before {
+  background-color: #f0ad4e;
+  border-color: #f0ad4e; }
+
+.abc-checkbox-warning input[type="checkbox"]:indeterminate + label::after,
+.abc-checkbox-warning input[type="radio"]:indeterminate + label::after {
+  background-color: #fff; }
+
+.abc-checkbox-success input[type="checkbox"]:indeterminate + label::before,
+.abc-checkbox-success input[type="radio"]:indeterminate + label::before {
+  background-color: #5cb85c;
+  border-color: #5cb85c; }
+
+.abc-checkbox-success input[type="checkbox"]:indeterminate + label::after,
+.abc-checkbox-success input[type="radio"]:indeterminate + label::after {
+  background-color: #fff; }
+
+.abc-radio {
+  padding-left: 20px; }
+.abc-radio label {
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  padding-left: 5px; }
+.abc-radio label::before {
+  content: "";
+  cursor: pointer;
+  display: inline-block;
+  position: absolute;
+  width: 17px;
+  height: 17px;
+  left: 0;
+  margin-left: -20px;
+  border: 1px solid #ccc;
+  border-radius: 50%;
+  background-color: #fff; }
+.abc-radio label::after {
+  cursor: pointer;
+  display: inline-block;
+  position: absolute;
+  content: " ";
+  width: 11px;
+  height: 11px;
+  left: 3px;
+  top: 3px;
+  margin-left: -20px;
+  border-radius: 50%;
+  background-color: #55595c;
+  transform: scale(0, 0);
+  transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
+.abc-radio input[type="radio"] {
+  cursor: pointer;
+  opacity: 0;
+  z-index: 1; }
+.abc-radio input[type="radio"]:focus + label::before {
+  outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px; }
+.abc-radio input[type="radio"]:checked + label::after {
+  transform: scale(1, 1); }
+.abc-radio input[type="radio"]:disabled + label {
+  opacity: 0.65; }
+.abc-radio input[type="radio"]:disabled + label::before {
+  cursor: not-allowed; }
+.abc-radio.radio-inline {
+  margin-top: 0; }
+
+.abc-radio-primary input[type="radio"] + label::after {
+  background-color: #0275d8; }
+
+.abc-radio-primary input[type="radio"]:checked + label::before {
+  border-color: #0275d8; }
+
+.abc-radio-primary input[type="radio"]:checked + label::after {
+  background-color: #0275d8; }
+
+.abc-radio-danger input[type="radio"] + label::after {
+  background-color: #d9534f; }
+
+.abc-radio-danger input[type="radio"]:checked + label::before {
+  border-color: #d9534f; }
+
+.abc-radio-danger input[type="radio"]:checked + label::after {
+  background-color: #d9534f; }
+
+.abc-radio-info input[type="radio"] + label::after {
+  background-color: #5bc0de; }
+
+.abc-radio-info input[type="radio"]:checked + label::before {
+  border-color: #5bc0de; }
+
+.abc-radio-info input[type="radio"]:checked + label::after {
+  background-color: #5bc0de; }
+
+.abc-radio-warning input[type="radio"] + label::after {
+  background-color: #f0ad4e; }
+
+.abc-radio-warning input[type="radio"]:checked + label::before {
+  border-color: #f0ad4e; }
+
+.abc-radio-warning input[type="radio"]:checked + label::after {
+  background-color: #f0ad4e; }
+
+.abc-radio-success input[type="radio"] + label::after {
+  background-color: #5cb85c; }
+
+.abc-radio-success input[type="radio"]:checked + label::before {
+  border-color: #5cb85c; }
+
+.abc-radio-success input[type="radio"]:checked + label::after {
+  background-color: #5cb85c; }
+
+input[type="checkbox"].styled:checked + label:after,
+input[type="radio"].styled:checked + label:after {
+  font-family: "FontAwesome";
+  content: ""; }
+
+input[type="checkbox"] .styled:checked + label::before,
+input[type="radio"] .styled:checked + label::before {
+  color: #fff; }
+
+input[type="checkbox"] .styled:checked + label::after,
+input[type="radio"] .styled:checked + label::after {
+  color: #fff; }

PlexRequests.UI/Content/awesome-bootstrap-checkbox.scss

@@ -0,0 +1,250 @@
+
+//
+// Checkboxes
+// --------------------------------------------------
+
+
+$font-family-icon: 'FontAwesome' !default;
+$fa-var-check: "\f00c" !default;
+$check-icon: $fa-var-check !default;
+
+@mixin checkbox-variant($parent, $color) {
+  #{$parent} input[type="checkbox"]:checked + label,
+  #{$parent} input[type="radio"]:checked + label {
+    &::before {
+      background-color: $color;
+      border-color: $color;
+    }
+    &::after{
+      color: #fff;
+    }
+  }
+}
+
+@mixin checkbox-variant-indeterminate($parent, $color) {
+  #{$parent} input[type="checkbox"]:indeterminate + label,
+  #{$parent} input[type="radio"]:indeterminate + label {
+    &::before {
+      background-color: $color;
+      border-color: $color;
+    }
+    &::after{
+      background-color: #fff;
+    }
+  }
+}
+
+.abc-checkbox{
+  padding-left: 20px;
+
+  label{
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    padding-left: 5px;
+
+    &::before{
+      cursor: pointer;
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 17px;
+      height: 17px;
+      left: 0;
+      margin-left: -20px;
+      border: 1px solid $input-border-color;
+      border-radius: 3px;
+      background-color: #fff;
+      @include transition(border 0.15s ease-in-out, color 0.15s ease-in-out);
+    }
+
+    &::after{
+      cursor: pointer;
+      display: inline-block;
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      left: 0;
+      top: 0;
+      margin-left: -20px;
+      padding-left: 3px;
+      padding-top: 1px;
+      font-size: 11px;
+      color: $input-color;
+    }
+  }
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    cursor: pointer;
+    opacity: 0;
+    z-index: 1;
+
+    &:focus + label::before{
+      @include tab-focus();
+    }
+
+    &:checked + label::after{
+      font-family: $font-family-icon;
+      content: $check-icon;
+    }
+
+    &:indeterminate + label::after{
+      display: block;
+      content: "";
+      width: 10px;
+      height: 3px;
+      background-color: #555555;
+      border-radius: 2px;
+      margin-left: -16.5px;
+      margin-top: 7px;
+    }
+
+    &:disabled + label{
+      opacity: 0.65;
+
+      &::before{
+        background-color: $input-bg-disabled;
+        cursor: not-allowed;
+      }
+    }
+
+  }
+
+  &.abc-checkbox-circle label::before{
+    border-radius: 50%;
+  }
+
+  &.checkbox-inline{
+    margin-top: 0;
+  }
+}
+
+@include checkbox-variant('.abc-checkbox-primary', $brand-primary);
+@include checkbox-variant('.abc-checkbox-danger', $brand-danger);
+@include checkbox-variant('.abc-checkbox-info', $brand-info);
+@include checkbox-variant('.abc-checkbox-warning', $brand-warning);
+@include checkbox-variant('.abc-checkbox-success', $brand-success);
+
+
+@include checkbox-variant-indeterminate('.abc-checkbox-primary', $brand-primary);
+@include checkbox-variant-indeterminate('.abc-checkbox-danger', $brand-danger);
+@include checkbox-variant-indeterminate('.abc-checkbox-info', $brand-info);
+@include checkbox-variant-indeterminate('.abc-checkbox-warning', $brand-warning);
+@include checkbox-variant-indeterminate('.abc-checkbox-success', $brand-success);
+
+//
+// Radios
+// --------------------------------------------------
+
+@mixin radio-variant($parent, $color) {
+  #{$parent} input[type="radio"]{
+    + label{
+      &::after{
+        background-color: $color;
+      }
+    }
+    &:checked + label{
+      &::before {
+        border-color: $color;
+      }
+      &::after{
+        background-color: $color;
+      }
+    }
+  }
+}
+
+.abc-radio{
+  padding-left: 20px;
+
+  label{
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    padding-left: 5px;
+
+    &::before{
+      cursor: pointer;
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 17px;
+      height: 17px;
+      left: 0;
+      margin-left: -20px;
+      border: 1px solid $input-border-color;
+      border-radius: 50%;
+      background-color: #fff;
+      @include transition(border 0.15s ease-in-out);
+    }
+
+    &::after{
+      cursor: pointer;
+      display: inline-block;
+      position: absolute;
+      content: " ";
+      width: 11px;
+      height: 11px;
+      left: 3px;
+      top: 3px;
+      margin-left: -20px;
+      border-radius: 50%;
+      background-color: $input-color;
+      transform: scale(0, 0);
+
+      transition: transform .1s cubic-bezier(.8,-0.33,.2,1.33);
+      //curve - http://cubic-bezier.com/#.8,-0.33,.2,1.33
+    }
+  }
+
+  input[type="radio"]{
+    cursor: pointer;
+    opacity: 0;
+    z-index: 1;
+
+    &:focus + label::before{
+      @include tab-focus();
+    }
+
+    &:checked + label::after{
+      transform: scale(1, 1);
+    }
+
+    &:disabled + label{
+      opacity: 0.65;
+
+      &::before{
+        cursor: not-allowed;
+      }
+    }
+
+  }
+
+  &.radio-inline{
+    margin-top: 0;
+  }
+}
+
+@include radio-variant('.abc-radio-primary', $brand-primary);
+@include radio-variant('.abc-radio-danger', $brand-danger);
+@include radio-variant('.abc-radio-info', $brand-info);
+@include radio-variant('.abc-radio-warning', $brand-warning);
+@include radio-variant('.abc-radio-success', $brand-success);
+
+
+input[type="checkbox"],
+input[type="radio"] {
+  &.styled:checked + label:after {
+    font-family: $font-family-icon;
+    content: $check-icon;
+  }
+  .styled:checked + label {
+    &::before {
+      color: #fff;
+    }
+    &::after {
+      color: #fff;
+    }
+  }
+}

PlexRequests.UI/Content/custom.css

@@ -42,11 +42,28 @@ label {
   margin-bottom: 0.5rem !important;
   font-size: 16px !important; }
 
+.nav-tabs > li {
+  font-size: 13px;
+  line-height: 21px; }
+
 .nav-tabs > li.active > a,
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
   background: #4e5d6c; }
 
+.nav-tabs > li > a > .fa {
+  padding: 3px 5px 3px 3px; }
+
+.nav-tabs > li.nav-tab-right {
+  float: right; }
+
+.nav-tabs > li.nav-tab-right a {
+  margin-right: 0;
+  margin-left: 2px; }
+
+.nav-tabs > li.nav-tab-icononly .fa {
+  padding: 3px; }
+
 .navbar .nav a .fa,
 .dropdown-menu a .fa {
   font-size: 130%;
@@ -225,3 +242,42 @@ label {
   text-align: center;
   font-size: 15px; }
 
+.checkbox label {
+  display: inline-block;
+  cursor: pointer;
+  position: relative;
+  padding-left: 25px;
+  margin-right: 15px;
+  font-size: 13px;
+  margin-bottom: 10px; }
+
+.checkbox label:before {
+  content: "";
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  margin-right: 10px;
+  position: absolute;
+  left: 0;
+  bottom: 1px;
+  border: 2px solid #eee;
+  border-radius: 3px; }
+
+.checkbox input[type=checkbox] {
+  display: none; }
+
+.checkbox input[type=checkbox]:checked + label:before {
+  content: "\2713";
+  font-size: 13px;
+  color: #fafafa;
+  text-align: center;
+  line-height: 13px; }
+
+.input-group-sm {
+  padding-top: 2px;
+  padding-bottom: 2px; }
+
+.tab-pane .form-horizontal .form-group {
+  margin-right: 15px;
+  margin-left: 15px; }
+

PlexRequests.UI/Content/custom.scss

@@ -69,12 +69,34 @@ label {
     font-size: 16px $i;
 }
 
+.nav-tabs > li {
+    font-size: 13px;
+    line-height: 21px;
+}
+
 .nav-tabs > li.active > a,
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
     background: #4e5d6c;
 }
 
+.nav-tabs > li > a > .fa {
+    padding: 3px 5px 3px 3px;
+}
+
+.nav-tabs > li.nav-tab-right {
+    float: right;
+}
+
+.nav-tabs > li.nav-tab-right a {
+    margin-right: 0;
+    margin-left: 2px;
+}
+
+.nav-tabs > li.nav-tab-icononly .fa {
+    padding: 3px;
+}
+
 .navbar .nav a .fa,
 .dropdown-menu a .fa {
     font-size: 130%;
@@ -284,4 +306,44 @@ $border-radius: 10px;
     background-color:  rgb(255, 164, 0);
     text-align: center;
     font-size: 15px;
-}
+}
+
+.checkbox label {
+   display: inline-block;
+   cursor: pointer;
+   position: relative;
+   padding-left: 25px;
+   margin-right: 15px;
+   font-size: 13px;
+   margin-bottom: 10px; }
+ 
+ .checkbox label:before {
+   content: "";
+   display: inline-block;
+   width: 18px;
+   height: 18px;
+   margin-right: 10px;
+   position: absolute;
+   left: 0;
+   bottom: 1px;
+   border: 2px solid #eee;
+   border-radius: 3px; }
+ 
+ .checkbox input[type=checkbox] {
+   display: none; }
+ 
+ .checkbox input[type=checkbox]:checked + label:before {
+   content: "\2713";
+   font-size: 13px;
+   color: #fafafa;
+   text-align: center;
+   line-height: 13px; }
+
+.input-group-sm{
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+.tab-pane .form-horizontal .form-group {
+  margin-right: 15px;
+  margin-left: 15px; }

PlexRequests.UI/Helpers/BaseUrlHelper.cs

@@ -57,6 +57,7 @@ namespace PlexRequests.UI.Helpers
             sb.AppendLine($"<link rel=\"stylesheet\" href=\"{content}/Content/custom.min.css\" type=\"text/css\" />");
             sb.AppendLine($"<link rel=\"stylesheet\" href=\"{content}/Content/font-awesome.css\" type=\"text/css\"/>");
             sb.AppendLine($"<link rel=\"stylesheet\" href=\"{content}/Content/pace.min.css\" type=\"text/css\"/>");
+            sb.AppendLine($"<link rel=\"stylesheet\" href=\"{content}/Content/awesome-bootstrap-checkbox.css\" type=\"text/css\"/>");
 
             sb.AppendLine($"<script src=\"{content}/Content/jquery-2.2.1.min.js\"></script>");
             sb.AppendLine($"<script src=\"{content}/Content/handlebars.min.js\"></script>");

PlexRequests.UI/Modules/AdminModule.cs

@@ -278,7 +278,7 @@ namespace PlexRequests.UI.Modules
             var token = settings?.PlexAuthToken;
             if (token == null)
             {
-                return Response.AsJson(string.Empty);
+                return Response.AsJson(new { Result = true, Users = string.Empty });
             }
 
 			try {

PlexRequests.UI/PlexRequests.UI.csproj

@@ -196,6 +196,9 @@
     <Compile Include="Validators\RequestedModelValidator.cs" />
     <Compile Include="Validators\SickRageValidator.cs" />
     <Compile Include="Validators\SonarrValidator.cs" />
+    <Content Include="Content\awesome-bootstrap-checkbox.css">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
     <Content Include="Content\bootstrap-notify.min.js">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
@@ -363,6 +366,9 @@
     <None Include="compilerconfig.json.defaults">
       <DependentUpon>compilerconfig.json</DependentUpon>
     </None>
+    <None Include="Content\awesome-bootstrap-checkbox.scss">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </None>
     <None Include="Content\custom.scss" />
     <Content Include="Content\pace.min.js">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>

PlexRequests.UI/Views/Admin/Authentication.cshtml

@@ -16,35 +16,35 @@
 
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+             
                         @if (Model.UserAuthentication)
                         {
                             <input type="checkbox" id="userAuth" name="UserAuthentication" checked="checked">
-                            <text>Enable User Authentication</text>
+                            <label for="userAuth">Enable User Authentication</label>
                         }
                         else
                         {
                             <input type="checkbox" id="userAuth" name="UserAuthentication">
-                            <text>Enable User Authentication</text>
+                            <label for="userAuth">Enable User Authentication</label>
                         }
-                    </label>
+          
                 </div>
             </div>
 
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+       
                         @if (Model.UsePassword)
                         {
                             <input type="checkbox" id="UsePassword" name="UsePassword" checked="checked">
-                            <text>Require users to login with their passwords</text>
+                            <label for="UsePassword">Require users to login with their passwords</label>
                         }
                         else
                         {
                             <input type="checkbox" id="UsePassword" name="UsePassword">
-                            <text>Require users to login with their passwords</text>
+                            <label for="UsePassword">Require users to login with their passwords</label>
                         }
-                    </label>
+            
                 </div>
             </div>
 

PlexRequests.UI/Views/Admin/CouchPotato.cshtml

@@ -17,16 +17,16 @@
             <legend>CouchPotato Settings</legend>
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+                   
                         @if (Model.Enabled)
                         {
-                            <input type="checkbox" id="Enabled" name="Enabled" checked="checked"><text>Enabled</text>
+                            <input type="checkbox" id="Enabled" name="Enabled" checked="checked"><label for="Enabled">Enabled</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="Enabled" name="Enabled"><text>Enabled</text>
+                            <input type="checkbox" id="Enabled" name="Enabled"><label for="Enabled">Enabled</label>
                         }
-                    </label>
+                 
                 </div>
             </div>
             <div class="form-group">
@@ -53,16 +53,16 @@
             </div>
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+      
                         @if (Model.Ssl)
                         {
-                            <input type="checkbox" id="Ssl" name="Ssl" checked="checked"><text>SSL</text>
+                            <input type="checkbox" id="Ssl" name="Ssl" checked="checked"><label for="Ssl">SSL</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="Ssl" name="Ssl"><text>SSL</text>
+                            <input type="checkbox" id="Ssl" name="Ssl"><label for="Ssl">SSL</label>
                         }
-                    </label>
+        
                 </div>
             </div>
             <div class="form-group">

PlexRequests.UI/Views/Admin/EmailNotifications.cshtml

@@ -18,44 +18,44 @@
 
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+                    
                         @if (Model.Enabled)
                         {
-                            <input type="checkbox" id="Enabled" name="Enabled" checked="checked"><text>Enabled</text>
+                            <input type="checkbox" id="Enabled" name="Enabled" checked="checked"><label for="Enabled">Enabled</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="Enabled" name="Enabled"><text>Enabled</text>
+                            <input type="checkbox" id="Enabled" name="Enabled"><label for="Enabled">Enabled</label>
                         }
-                    </label>
+                
                 </div>
             </div>
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+                   
                         @if (Model.Ssl)
                         {
-                            <input type="checkbox" id="Ssl" name="Ssl" checked="checked"><text>SSL Enabled</text>
+                            <input type="checkbox" id="Ssl" name="Ssl" checked="checked"><label for="Ssl">SSL Enabled</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="Ssl" name="Ssl"><text>SSL Enabled</text>
+                            <input type="checkbox" id="Ssl" name="Ssl"><label for="Ssl">SSL Enabled</label>
                         }
-                    </label>
+            
                 </div>
             </div>
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+
                         @if (Model.EnableUserEmailNotifications)
                         {
-                            <input type="checkbox" id="EnableUserEmailNotifications" name="EnableUserEmailNotifications" checked="checked"><text>Enable user email notifications</text>
+                            <input type="checkbox" id="EnableUserEmailNotifications" name="EnableUserEmailNotifications" checked="checked"><label for="EnableUserEmailNotifications">Enable user email notifications</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="EnableUserEmailNotifications" name="EnableUserEmailNotifications"><text>Enable user email notifications</text>
+                            <input type="checkbox" id="EnableUserEmailNotifications" name="EnableUserEmailNotifications"><label for="EnableUserEmailNotifications">Enable user email notifications</label>
                         }
-                    </label>
+         
                 </div>
             </div>
             <small>Please note that if user notifications is enabled, the email will get sent with the SMTP set-up below.</small>

PlexRequests.UI/Views/Admin/Headphones.cshtml

@@ -17,30 +17,30 @@
             <legend>Headphones Settings</legend>
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+                    
                         @if (Model.Enabled)
                         {
-                            <input type="checkbox" id="Enabled" name="Enabled" checked="checked"><text>Enabled</text>
+                            <input type="checkbox" id="Enabled" name="Enabled" checked="checked"><label for="Enabled">Enabled</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="Enabled" name="Enabled"><text>Enabled</text>
+                            <input type="checkbox" id="Enabled" name="Enabled"><label for="Enabled">Enabled</label>
                         }
-                    </label>
+         
                 </div>
             </div>
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+                   
                         @if (Model.Ssl)
                         {
-                            <input type="checkbox" id="Ssl" name="Ssl" checked="checked"><text>SSL</text>
+                            <input type="checkbox" id="Ssl" name="Ssl" checked="checked"><label for="Ssl">SSL</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="Ssl" name="Ssl"><text>SSL</text>
+                            <input type="checkbox" id="Ssl" name="Ssl"><label for="Ssl">SSL</label>
                         }
-                    </label>
+                    
                 </div>
             </div>
             <div class="form-group">

PlexRequests.UI/Views/Admin/Plex.cshtml

@@ -32,16 +32,16 @@
             </div>
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+                
                         @if (Model.Ssl)
                         {
-                            <input type="checkbox" id="Ssl" name="Ssl" checked="checked"><text>SSL</text>
+                            <input type="checkbox" id="Ssl" name="Ssl" checked="checked"><label for="Ssl">SSL</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="Ssl" name="Ssl"><text>SSL</text>
+                            <input type="checkbox" id="Ssl" name="Ssl"><label for="Ssl">SSL</label>
                         }
-                    </label>
+                   
                 </div>
             </div>
             <div class="form-group">

PlexRequests.UI/Views/Admin/PushbulletNotifications.cshtml

@@ -8,16 +8,16 @@
 
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+                    
                         @if (Model.Enabled)
                         {
-                            <input type="checkbox" id="Enabled" name="Enabled" checked="checked"><text>Enabled</text>
+                            <input type="checkbox" id="Enabled" name="Enabled" checked="checked"><label for="Enabled">Enabled</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="Enabled" name="Enabled"><text>Enabled</text>
+                            <input type="checkbox" id="Enabled" name="Enabled"><label for="Enabled">Enabled</label>
                         }
-                    </label>
+          
                 </div>
             </div>
             

PlexRequests.UI/Views/Admin/PushoverNotifications.cshtml

@@ -8,16 +8,16 @@
 
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+             
                         @if (Model.Enabled)
                         {
-                            <input type="checkbox" id="Enabled" name="Enabled" checked="checked"><text>Enabled</text>
+                            <input type="checkbox" id="Enabled" name="Enabled" checked="checked"><label for="Enabled">Enabled</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="Enabled" name="Enabled"><text>Enabled</text>
+                            <input type="checkbox" id="Enabled" name="Enabled"><label for="Enabled">Enabled</label>
                         }
-                    </label>
+                   
                 </div>
             </div>
             

PlexRequests.UI/Views/Admin/Settings.cshtml

@@ -23,7 +23,7 @@
 <div class="col-sm-8 col-sm-push-1">
     <form class="form-horizontal" method="POST" id="mainForm">
         <fieldset>
-            <legend>Request Plex Settings</legend>
+            <legend>Plex Request Settings</legend>
             <div class="form-group">
                 <label for="portNumber" class="control-label">Port</label>
 
@@ -42,138 +42,137 @@
             </div>
             <small class="control-label">You will have to restart after changing the url base.</small>
 
-              <div class="form-group">
+            <div class="form-group">
                 <label for="ApiKey" class="control-label">Api Key</label>
                 <div class="input-group">
-                      <input type="text" disabled="disabled" class="form-control form-control-custom" id="apiKey" name="ApiKey" value="@Model.ApiKey">
+                    <input type="text" disabled="disabled" class="form-control form-control-custom" id="apiKey" name="ApiKey" value="@Model.ApiKey">
-              
+
                     <div class="input-group-addon">
                         <div id="refreshKey" class="fa fa-refresh" title="Reset API Key"></div>
                     </div>
-                    </div>
+                </div>
             </div>
 
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+   
                         @if (Model.SearchForMovies)
                         {
-                            <input type="checkbox" id="SearchForMovies" name="SearchForMovies" checked="checked"><text>Search for Movies</text>
+                            <input type="checkbox" id="SearchForMovies" name="SearchForMovies" checked="checked"><label for="SearchForMovies">Search for Movies</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="SearchForMovies" name="SearchForMovies"><text>Search for Movies</text>
+                            <input type="checkbox" id="SearchForMovies" name="SearchForMovies"><label for="SearchForMovies">Search for Movies</label>
                         }
-                    </label>
+   
                 </div>
             </div>
 
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+
                         @if (Model.SearchForTvShows)
                         {
-                            <input type="checkbox" id="SearchForTvShows" name="SearchForTvShows" checked="checked"><text>Search for TV Shows</text>
+                            <input type="checkbox" id="SearchForTvShows" name="SearchForTvShows" checked="checked"><label for="SearchForTvShows">Search for TV Shows</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="SearchForTvShows" name="SearchForTvShows"><text>Search for TV Shows</text>
+                            <input type="checkbox" id="SearchForTvShows" name="SearchForTvShows"><label for="SearchForTvShows">Search for TV Shows</label>
                         }
-                    </label>
+     
                 </div>
             </div>
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+             
                         @if (Model.SearchForMusic)
                         {
-                            <input type="checkbox" id="SearchForMusic" name="SearchForMusic" checked="checked"><text>Search for Music</text>
+                            <input type="checkbox" id="SearchForMusic" name="SearchForMusic" checked="checked"><label for="SearchForMusic">Search for Music</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="SearchForMusic" name="SearchForMusic"><text>Search for Music</text>
+                            <input type="checkbox" id="SearchForMusic" name="SearchForMusic"><label for="SearchForMusic">Search for Music</label>
                         }
-                    </label>
+        
                 </div>
             </div>
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+      
                         @if (Model.RequireMovieApproval)
                         {
-                            <input type="checkbox" id="RequireMovieApproval" name="RequireMovieApproval" checked="checked"><text>Require approval of Movie requests</text>
+                            <input type="checkbox" id="RequireMovieApproval" name="RequireMovieApproval" checked="checked"><label for="RequireMovieApproval">Require approval of Movie requests</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="RequireMovieApproval" name="RequireMovieApproval"><text>Require approval of Movie requests</text>
+                            <input type="checkbox" id="RequireMovieApproval" name="RequireMovieApproval"><label for="RequireMovieApproval">Require approval of Movie requests</label>
                         }
-                    </label>
+    </div>
-
-                </div>
             </div>
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+           
                         @if (Model.RequireTvShowApproval)
                         {
-                            <input type="checkbox" id="RequireTvShowApproval" name="RequireTvShowApproval" checked="checked"><text>Require approval of TV show requests</text>
+                            <input type="checkbox" id="RequireTvShowApproval" name="RequireTvShowApproval" checked="checked"><label for="RequireTvShowApproval">Require approval of TV show requests</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="RequireTvShowApproval" name="RequireTvShowApproval"><text>Require approval of TV show requests</text>
+                            <input type="checkbox" id="RequireTvShowApproval" name="RequireTvShowApproval"><label for="RequireTvShowApproval">Require approval of TV show requests</label>
                         }
-                    </label>
+                  
 
                 </div>
             </div>
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+       
                         @if (Model.RequireMusicApproval)
                         {
-                            <input type="checkbox" id="RequireMusicApproval" name="RequireMusicApproval" checked="checked"><text>Require approval of Music requests</text>
+                            <input type="checkbox" id="RequireMusicApproval" name="RequireMusicApproval" checked="checked"><label for="RequireMusicApproval">Require approval of Music requests</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="RequireMusicApproval" name="RequireMusicApproval"><text>Require approval of Music requests</text>
+                            <input type="checkbox" id="RequireMusicApproval" name="RequireMusicApproval"><label for="RequireMusicApproval">Require approval of Music requests</label>
                         }
-                    </label>
+           
+
+                </div>
+            </div>
+
+            <div class="form-group">
+                <div class="checkbox">
+
+                        @if (Model.UsersCanViewOnlyOwnRequests)
+                        {
+                            <input type="checkbox" id="UsersCanViewOnlyOwnRequests" name="UsersCanViewOnlyOwnRequests" checked="checked">
+                            <label for="UsersCanViewOnlyOwnRequests">Users can view their own requests only</label>
+                        }
+                        else
+                        {
+                            <input type="checkbox" id="UsersCanViewOnlyOwnRequests" name="UsersCanViewOnlyOwnRequests"><label for="UsersCanViewOnlyOwnRequests">Users can view their own requests only</label>
+                        }
+          
 
                 </div>
             </div>
 
             <p class="form-group">A comma separated list of users whose requests do not require approval.</p>
             <div class="form-group">
-                <label for="noApprovalUsers" class="control-label">Users</label>
+                <label for="noApprovalUsers" class="control-label">Approval White listed Users</label>
                 <div>
                     <input type="text" class="form-control-custom form-control " id="NoApprovalUsers" name="NoApprovalUsers" placeholder="e.g. John, Bobby" value="@Model.NoApprovalUsers">
                 </div>
             </div>
 
-            <div class="form-group">
-                <div class="checkbox">
-                    <label>
-                        @if (Model.UsersCanViewOnlyOwnRequests)
-                        {
-                            <input type="checkbox" id="UsersCanViewOnlyOwnRequests" name="UsersCanViewOnlyOwnRequests" checked="checked"><text>Users can view their own requests only</text>
-                        }
-                        else
-                        {
-                            <input type="checkbox" id="UsersCanViewOnlyOwnRequests" name="UsersCanViewOnlyOwnRequests"><text>Users can view their own requests only</text>
-                        }
-                    </label>
-
-                </div>
-            </div>
-
             @*<div class="form-group">
-                    <label for="WeeklyRequestLimit" class="control-label">Weekly Request Limit</label>
+                <label for="WeeklyRequestLimit" class="control-label">Weekly Request Limit</label>
-                    <div>
+                <div>
-                        <label>
+                    <label>
-                            <input type="number" id="WeeklyRequestLimit" name="WeeklyRequestLimit" class="form-control form-control-custom " value="@Model.WeeklyRequestLimit">
+                        <input type="number" id="WeeklyRequestLimit" name="WeeklyRequestLimit" class="form-control form-control-custom " value="@Model.WeeklyRequestLimit">
-                        </label>
+                    </label>
-                    </div>
+                </div>
-                </div> //TODO: Need to implement this*@
+            </div> //TODO: Need to implement this*@
 
             <div>
             </div>

PlexRequests.UI/Views/Admin/Sickrage.cshtml

@@ -17,16 +17,14 @@
             <legend>SickRage Settings</legend>
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
                         @if (Model.Enabled)
                         {
-                            <input type="checkbox" id="Enabled" name="Enabled" checked="checked"><text>Enabled</text>
+                            <input type="checkbox" id="Enabled" name="Enabled" checked="checked"><label for="Enabled">Enabled</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="Enabled" name="Enabled"><text>Enabled</text>
+                            <input type="checkbox" id="Enabled" name="Enabled"><label for="Enabled">Enabled</label>
                         }
-                    </label>
                 </div>
             </div>
             <div class="form-group">
@@ -53,16 +51,15 @@
             </div>
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+               
                         @if (Model.Ssl)
                         {
-                            <input type="checkbox" id="Ssl" name="Ssl" checked="checked"><text>SSL</text>
+                            <input type="checkbox" id="Ssl" name="Ssl" checked="checked"><label for="Ssl">SSL</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="Ssl" name="Ssl"><text>SSL</text>
+                            <input type="checkbox" id="Ssl" name="Ssl"><label for="Ssl">SSL</label>
                         }
-                    </label>
                 </div>
             </div>
 

PlexRequests.UI/Views/Admin/Sonarr.cshtml

@@ -17,16 +17,14 @@
             <legend>Sonarr Settings</legend>
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
                         @if (Model.Enabled)
                         {
-                            <input type="checkbox" id="Enabled" name="Enabled" checked="checked"><text>Enabled</text>
+                            <input type="checkbox" id="Enabled" name="Enabled" checked="checked"><label for="Enabled">Enabled</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="Enabled" name="Enabled"><text>Enabled</text>
+                            <input type="checkbox" id="Enabled" name="Enabled"><label for="Enabled">Enabled</label>
                         }
-                    </label>
                 </div>
             </div>
             <div class="form-group">
@@ -53,16 +51,14 @@
             </div>
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
                         @if (Model.Ssl)
                         {
-                            <input type="checkbox" id="Ssl" name="Ssl" checked="checked"><text>SSL</text>
+                            <input type="checkbox" id="Ssl" name="Ssl" checked="checked"><label for="Ssl">SSL</label>
                         }
                         else
                         {
-                            <input type="checkbox" id="Ssl" name="Ssl"><text>SSL</text>
+                            <input type="checkbox" id="Ssl" name="Ssl"><label for="Ssl">SSL</label>
                         }
-                    </label>
                 </div>
             </div>
             <div class="form-group">
@@ -93,7 +89,7 @@
 
             <div class="form-group">
                 <div class="checkbox">
-                    <label>
+
                         @if (Model.SeasonFolders)
                         {
                             <input type="checkbox" id="SeasonFolders" name="SeasonFolders" checked="checked">
@@ -103,9 +99,9 @@
                             <input type="checkbox" id="SeasonFolders" name="SeasonFolders">
                         }
                         <label>Enable season folders</label>
-                        <label>Enabled Season Folders to organize seasons into individual folders within a show.</label>
+
-                    </label>
                 </div>
+                <label>Enabled Season Folders to organize seasons into individual folders within a show.</label>
             </div>
             <div class="form-group">
                 <div>

PlexRequests.UI/Views/Login/Index.cshtml

@@ -8,15 +8,16 @@
     }
 }
 <form method="POST">
-    Username <input class="form-control form-control-custom" type="text" name="Username"/>
+    Username <input class="form-control form-control-custom" type="text" name="Username" />
-    <br/>
+    <br />
-    Password <input class="form-control form-control-custom" name="Password" type="password"/>
+    Password <input class="form-control form-control-custom" name="Password" type="password" />
-    <br/>
+    <div class="checkbox">
-    Remember Me <input name="RememberMe" type="checkbox" value="True"/>
+        <input name="RememberMe" id="RememberMe" type="checkbox" checked="checked" />
-    <br/><br/>
+        <label for="RememberMe">Remember Me</label>
-    <input class="btn btn-success-outline" type="submit" value="Login"/>
+    </div>
+    <input class="btn btn-success-outline" type="submit" value="Login" />
     <input type="hidden" id="DateTimeOffset" name="DateTimeOffset" />
-    <input type="hidden" id="redirect" name="redirect" value="@Model.Redirect"/>
+    <input type="hidden" id="redirect" name="redirect" value="@Model.Redirect" />
 </form>
 @if (!Model.AdminExists)
 {

PlexRequests.UI/Views/Search/Index.cshtml

@@ -12,28 +12,35 @@
     <h4>Want to watch something that is not currently on Plex?! No problem! Just search for it below and request it!</h4>
     <br />
     <!-- Nav tabs -->
-    <div class="form-group">
+
-        <div class="checkbox">
-            <label>
-                <input type="checkbox" id="notifyUser" name="Notify">Notify
-            </label>
-        </div>
-    </div>
 
     <ul id="nav-tabs" class="nav nav-tabs" role="tablist">
         @if (Model.SearchForMovies)
         {
-            <li role="presentation" class="active"><a href="#MoviesTab" aria-controls="home" role="tab" data-toggle="tab">Movies</a></li>
+            <li role="presentation" class="active">
+                <a href="#MoviesTab" aria-controls="home" role="tab" data-toggle="tab"><i class="fa fa-film"></i> Movies</a>
+
+            </li>
         }
         @if (Model.SearchForTvShows)
         {
-            <li role="presentation"><a href="#TvShowTab" aria-controls="profile" role="tab" data-toggle="tab">TV Shows</a></li>
+            <li role="presentation">
+                <a href="#TvShowTab" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-television"></i> TV Shows</a>
+
+            </li>
         }
         @if (Model.SearchForMusic)
         {
-            <li role="presentation"><a href="#MusicTab" aria-controls="profile" role="tab" data-toggle="tab">Albums</a></li>
+            <li role="presentation">
+                <a href="#MusicTab" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-music"></i>Albums</a>
+            </li>
         }
 
+        <li role="presentation" class="nav-tab-right nav-tab-icononly">
+            <a href="#NotificationsTab" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-bell"></i></a>
+
+        </li>
+
     </ul>
 
     <!-- Tab panes -->
@@ -102,9 +109,32 @@
                 </div>
             </div>
         }
+
+        <!-- Notification tab -->
+        <div role="tabpanel" class="tab-pane" id="NotificationsTab">
+            <div class="input-group">
+                <div class="input-group-addon input-group-sm"></div>
+            </div>
+            <br/>
+
+            <!-- Notifications content -->
+            <form class="form-horizontal" method="POST" id="notificationsForm">
+                <fieldset>
+                    <div class="form-group">
+                        <div class="checkbox">
+                            <input type="checkbox" id="notifyUser" name="Notify">
+                            <label for="notifyUser">Send me a notification when items I have requested have been added</label>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div>
+                            <button id="saveNotificationSettings" type="submit" class="btn btn-primary-outline">Save</button>
+                        </div>
+                    </div>
+                </fieldset>
+            </form>
+        </div>
     </div>
-
-
 </div>
 
 <!-- Movie and TV Results template -->

PlexRequests.UI/Views/UserLogin/Index.cshtml

@@ -24,11 +24,12 @@
                     <label> Password </label>
                 </div>
                 <div>
-                    <input class="form-control form-control-custom" style="width: 50%" name="Password" type="password" placeholder="Password" />
+                    <input class="form-control form-control-custom" style="width: 50%" name="Password" type="password" placeholder="Password"/>
                 </div>
             </div>
+            <br />
         }
-        <br />
+
         <button id="loginBtn" class="btn btn-success-outline" type="submit"><i class="fa fa-user fa-fw"></i> Sign In</button>
     </form>
 </div>

PlexRequests.Updater/Updater.cs

@@ -95,7 +95,7 @@ namespace PlexRequests.Updater
                             fullname = entry.FullName.Replace("Release/", string.Empty);
                         }
 
-                        var fullPath = Path.Combine(Path.Combine(Path.GetDirectoryName(Application.ExecutablePath)), fullname);
+                        var fullPath = Path.Combine(Path.GetDirectoryName(Application.ExecutablePath), fullname);
 
                         if (string.IsNullOrEmpty(entry.Name))
                         {