From 0cfb6c8b1e0cda3597293cff823df330e7c5c8fd Mon Sep 17 00:00:00 2001
From: tidusjar <jamierees@outlook.com>
Date: Mon, 25 Jul 2016 14:05:44 +0100
Subject: [PATCH] Finished the auth stuff

---
 PlexRequests.UI/Content/Themes/plex.css       |   3 +
 PlexRequests.UI/Content/Themes/plex.min.css   |   2 +-
 PlexRequests.UI/Content/Themes/plex.scss      |   5 +
 PlexRequests.UI/Modules/AdminModule.cs        |   7 +
 .../Views/Admin/EmailNotifications.cshtml     | 164 ++++++++++--------
 5 files changed, 104 insertions(+), 77 deletions(-)

diff --git a/PlexRequests.UI/Content/Themes/plex.css b/PlexRequests.UI/Content/Themes/plex.css
index dcb015580..9b77b1b44 100644
--- a/PlexRequests.UI/Content/Themes/plex.css
+++ b/PlexRequests.UI/Content/Themes/plex.css
@@ -1,6 +1,9 @@
 .form-control-custom {
   background-color: #333333 !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 {
diff --git a/PlexRequests.UI/Content/Themes/plex.min.css b/PlexRequests.UI/Content/Themes/plex.min.css
index 6f1189790..adf9bbd5f 100644
--- a/PlexRequests.UI/Content/Themes/plex.min.css
+++ b/PlexRequests.UI/Content/Themes/plex.min.css
@@ -1 +1 @@
-.form-control-custom{background-color:#333 !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;}
\ No newline at end of file
+.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;}
\ No newline at end of file
diff --git a/PlexRequests.UI/Content/Themes/plex.scss b/PlexRequests.UI/Content/Themes/plex.scss
index f5cf256ca..2a8c11a60 100644
--- a/PlexRequests.UI/Content/Themes/plex.scss
+++ b/PlexRequests.UI/Content/Themes/plex.scss
@@ -1,12 +1,17 @@
 $primary-colour: #df691a;
 $primary-colour-outline: #ff761b;
 $bg-colour: #333333;
+$bg-colour-disabled: #252424;
 $i: !important;
 
 .form-control-custom {
     background-color: $bg-colour $i;
 }
 
+.form-control-custom-disabled {
+    background-color: $bg-colour-disabled $i;
+}
+
 .nav-tabs > li.active > a,
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
diff --git a/PlexRequests.UI/Modules/AdminModule.cs b/PlexRequests.UI/Modules/AdminModule.cs
index 69cdb5b9d..75cfcae12 100644
--- a/PlexRequests.UI/Modules/AdminModule.cs
+++ b/PlexRequests.UI/Modules/AdminModule.cs
@@ -512,6 +512,13 @@ private Response SaveEmailNotifications()
             {
                 return Response.AsJson(valid.SendJsonError());
             }
+            if (settings.Authentication)
+            {
+                if (string.IsNullOrEmpty(settings.EmailUsername) || string.IsNullOrEmpty(settings.EmailPassword))
+                {
+                    return Response.AsJson(new JsonResponseModel {Result = false, Message = "SMTP Authentication is enabled, please specify a username and password"});
+                }
+            }
 
             var result = EmailService.SaveSettings(settings);
 
diff --git a/PlexRequests.UI/Views/Admin/EmailNotifications.cshtml b/PlexRequests.UI/Views/Admin/EmailNotifications.cshtml
index a73a46951..2a7f788b7 100644
--- a/PlexRequests.UI/Views/Admin/EmailNotifications.cshtml
+++ b/PlexRequests.UI/Views/Admin/EmailNotifications.cshtml
@@ -18,7 +18,6 @@
     <form class="form-horizontal" method="POST" id="mainForm">
         <fieldset>
             <legend>Email Notifications</legend>
- 
             <div class="form-group">
                 <div class="checkbox">
 
@@ -33,35 +32,35 @@
 
                 </div>
             </div>
-          <div class="form-group">
-            <div class="checkbox">
-
-              @if (Model.EnableUserEmailNotifications)
-              {
-                <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"><label for="EnableUserEmailNotifications">Enable user email notifications</label>
-              }
+            <div class="form-group">
+                <div class="checkbox">
+
+                    @if (Model.EnableUserEmailNotifications)
+                    {
+                        <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"><label for="EnableUserEmailNotifications">Enable user email notifications</label>
+                    }
 
+                </div>
             </div>
-          </div>
-          <div class="form-group">
-            <div class="checkbox">
-
-              @if (Model.Authentication)
-              {
-                <input type="checkbox" id="Authentication" name="Authentication" checked="checked"><label for="Authentication">Enable SMTP Authentication</label>
-              }
-              else
-              {
-                <input type="checkbox" id="Authentication" name="Authentication"><label for="Authentication">Enable SMTP Authentication</label>
-              }
+            <div class="form-group">
+                <div class="checkbox">
 
+                    @if (Model.Authentication)
+                    {
+                        <input type="checkbox" id="Authentication" name="Authentication" checked="checked"><label for="Authentication">Enable SMTP Authentication</label>
+                    }
+                    else
+                    {
+                        <input type="checkbox" id="Authentication" name="Authentication"><label for="Authentication">Enable SMTP Authentication</label>
+                    }
+
+                </div>
             </div>
-          </div>
-          <small>Please note that if user notifications is enabled, the email will get sent with the SMTP set-up below.</small>
+            <small>Please note that if user notifications is enabled, the email will get sent with the SMTP set-up below.</small>
             <div class="form-group">
                 <label for="EmailHost" class="control-label">SMTP Host name or IP</label>
                 <div class="">
@@ -107,37 +106,37 @@
                 </div>
             </div>
 
-           @* <!--Accordion Item-->
-    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
-        @for (var i = 0; i < Model.Message.Count; i++)
-        {
-        <div class="panel panel-default">
-            <div class="panel-heading" role="tab" id="@(i)headingOne">
-                <h4 class="panel-title">
-                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#@(i)collapseOne" aria-controls="@(i)collapseOne">
-                        @Model.Message[i].NotificationType.ToString()
-                    </a>
-                </h4>
-            </div>
-            <div id="@(i)collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="@(i)headingOne">
-                <div class="panel-body">
-                    <div class="form-group">
-                        <label for="@(Model.Message[i])" class="control-label"> @Model.Message[i].NotificationType.ToString() Subject</label>
-                        <div>
-                            <input type="text" class="form-control form-control-custom " id="@(Model.Message[i].Subject)" name="Message[@(i)].Subject" value="@(Model.Message[i].Subject)">
+            @* <!--Accordion Item-->
+                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+                    @for (var i = 0; i < Model.Message.Count; i++)
+                    {
+                    <div class="panel panel-default">
+                        <div class="panel-heading" role="tab" id="@(i)headingOne">
+                            <h4 class="panel-title">
+                                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#@(i)collapseOne" aria-controls="@(i)collapseOne">
+                                    @Model.Message[i].NotificationType.ToString()
+                                </a>
+                            </h4>
                         </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="@(Model.Message[i].Body)" class="control-label">@Model.Message[i].NotificationType.ToString() Body</label>
-                        <div>
-                            <input type="text" class="form-control form-control-custom " id="@(Model.Message[i].Body)" name="Message[@(i)].Body" value="@(Model.Message[i].Body)">
+                        <div id="@(i)collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="@(i)headingOne">
+                            <div class="panel-body">
+                                <div class="form-group">
+                                    <label for="@(Model.Message[i])" class="control-label"> @Model.Message[i].NotificationType.ToString() Subject</label>
+                                    <div>
+                                        <input type="text" class="form-control form-control-custom " id="@(Model.Message[i].Subject)" name="Message[@(i)].Subject" value="@(Model.Message[i].Subject)">
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label for="@(Model.Message[i].Body)" class="control-label">@Model.Message[i].NotificationType.ToString() Body</label>
+                                    <div>
+                                        <input type="text" class="form-control form-control-custom " id="@(Model.Message[i].Body)" name="Message[@(i)].Body" value="@(Model.Message[i].Body)">
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </div>
-        </div>
-        }
-    </div>*@
+                    }
+                </div>*@
 
             <div class="form-group">
                 <div>
@@ -158,14 +157,15 @@
 <script>
     $(function () {
 
-      var auth = $('#Authentication').prop('checked');
-      ChangeUsernameAndPassword(auth);
+        var auth = $('#Authentication').prop('checked');
+        changeUsernameAndPassword(auth);
 
 
-      $("#Authentication")
-        .change(function(e) {
-           ChangeUsernameAndPassword(auth);
-        });
+        $("#Authentication")
+          .change(function () {
+              auth = $('#Authentication').prop('checked');
+              changeUsernameAndPassword(auth);
+          });
 
         var base = '@Html.GetBaseUrl()';
         $('#save').click(function (e) {
@@ -198,8 +198,8 @@
             });
         });
 
-	        $('#testEmail').click(function (e) {
-	         	$('#spinner').attr("class", "fa fa-spinner fa-spin");
+        $('#testEmail').click(function (e) {
+            $('#spinner').attr("class", "fa fa-spinner fa-spin");
 
             var url = createBaseUrl(base, '/admin/testemailnotification');
             e.preventDefault();
@@ -216,31 +216,43 @@
                 dataType: "json",
                 success: function (response) {
                     if (response.result === true) {
-        				$('#spinner').attr("class", "fa fa-check");
+                        $('#spinner').attr("class", "fa fa-check");
                         generateNotify(response.message, "success");
                     } else {
-        				$('#spinner').attr("class", "fa fa-times");
+                        $('#spinner').attr("class", "fa fa-times");
                         generateNotify(response.message, "warning");
                     }
                 },
                 error: function (e) {
                     console.log(e);
-        				$('#spinner').attr("class", "fa fa-times");
+                    $('#spinner').attr("class", "fa fa-times");
                     generateNotify("Something went wrong!", "danger");
                 }
             });
         });
-function ChangeUsernameAndPassword(checked) {
-      var $userName = $('#EmailUsername');
-      var $password = $('#EmailPassword');
-      if (!checked) {
-        $userName.attr('disabled', 'disabled');
-        $password.attr('disabled', 'disabled');
-      } else {
-        $userName.removeAttr('disabled', 'disabled');
-        $password.removeAttr('disabled', 'disabled');
-      }
-};
+        function changeUsernameAndPassword(checked) {
+            var $userName = $('#EmailUsername');
+            var $password = $('#EmailPassword');
+            if (!checked) {
+                disableElement($userName);
+                disableElement($password);
+            } else {
+                enableElement($userName);
+                enableElement($password);
+            }
+        };
+
+        function disableElement(element) {
+            element.attr('disabled', 'disabled');
+            element.removeClass('form-control-custom');
+            element.addClass('form-control-custom-disabled');
+        }
+
+        function enableElement(element) {
+            element.removeAttr('disabled', 'disabled');
+            element.addClass('form-control-custom');
+            element.removeClass('form-control-custom-disabled');
+        }
 
 
     });