#459 is almost done

PlexRequests.Api.Interfaces/IPlexApi.cs

@@ -26,7 +26,6 @@
 #endregion
 using System;
 
-using PlexRequests.Api.Models;
 using PlexRequests.Api.Models.Plex;
 
 namespace PlexRequests.Api.Interfaces
@@ -43,5 +42,6 @@ namespace PlexRequests.Api.Interfaces
         PlexMetadata GetMetadata(string authToken, Uri plexFullHost, string itemId);
         PlexEpisodeMetadata GetEpisodeMetaData(string authToken, Uri host, string ratingKey);
         PlexSearch GetAllEpisodes(string authToken, Uri host, string section, int startPage, int returnCount);
+        PlexServer GetServer(string authToken);
     }
 }

PlexRequests.Api.Models/Plex/PlexServer.cs

@@ -0,0 +1,85 @@
+#region Copyright
+// /************************************************************************
+//    Copyright (c) 2016 Jamie Rees
+//    File: PlexServer.cs
+//    Created By: Jamie Rees
+//   
+//    Permission is hereby granted, free of charge, to any person obtaining
+//    a copy of this software and associated documentation files (the
+//    "Software"), to deal in the Software without restriction, including
+//    without limitation the rights to use, copy, modify, merge, publish,
+//    distribute, sublicense, and/or sell copies of the Software, and to
+//    permit persons to whom the Software is furnished to do so, subject to
+//    the following conditions:
+//   
+//    The above copyright notice and this permission notice shall be
+//    included in all copies or substantial portions of the Software.
+//   
+//    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+//    EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+//    MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+//    NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+//    LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+//    OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+//    WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+//  ************************************************************************/
+#endregion
+using System.Collections.Generic;
+using System.Xml.Serialization;
+
+namespace PlexRequests.Api.Models.Plex
+{
+    [XmlRoot(ElementName = "Server")]
+    public class ServerInfo
+    {
+        [XmlAttribute(AttributeName = "accessToken")]
+        public string AccessToken { get; set; }
+        [XmlAttribute(AttributeName = "name")]
+        public string Name { get; set; }
+        [XmlAttribute(AttributeName = "address")]
+        public string Address { get; set; }
+        [XmlAttribute(AttributeName = "port")]
+        public string Port { get; set; }
+        [XmlAttribute(AttributeName = "version")]
+        public string Version { get; set; }
+        [XmlAttribute(AttributeName = "scheme")]
+        public string Scheme { get; set; }
+        [XmlAttribute(AttributeName = "host")]
+        public string Host { get; set; }
+        [XmlAttribute(AttributeName = "localAddresses")]
+        public string LocalAddresses { get; set; }
+        [XmlAttribute(AttributeName = "machineIdentifier")]
+        public string MachineIdentifier { get; set; }
+        [XmlAttribute(AttributeName = "createdAt")]
+        public string CreatedAt { get; set; }
+        [XmlAttribute(AttributeName = "updatedAt")]
+        public string UpdatedAt { get; set; }
+        [XmlAttribute(AttributeName = "owned")]
+        public string Owned { get; set; }
+        [XmlAttribute(AttributeName = "synced")]
+        public string Synced { get; set; }
+        [XmlAttribute(AttributeName = "sourceTitle")]
+        public string SourceTitle { get; set; }
+        [XmlAttribute(AttributeName = "ownerId")]
+        public string OwnerId { get; set; }
+        [XmlAttribute(AttributeName = "home")]
+        public string Home { get; set; }
+    }
+
+    [XmlRoot(ElementName = "MediaContainer")]
+    public class PlexServer
+    {
+        [XmlElement(ElementName = "Server")]
+        public List<ServerInfo> Server { get; set; }
+        [XmlAttribute(AttributeName = "friendlyName")]
+        public string FriendlyName { get; set; }
+        [XmlAttribute(AttributeName = "identifier")]
+        public string Identifier { get; set; }
+        [XmlAttribute(AttributeName = "machineIdentifier")]
+        public string MachineIdentifier { get; set; }
+        [XmlAttribute(AttributeName = "size")]
+        public string Size { get; set; }
+    }
+
+
+}

PlexRequests.Api.Models/PlexRequests.Api.Models.csproj

@@ -69,6 +69,7 @@
     <Compile Include="Plex\PlexLibraries.cs" />
     <Compile Include="Plex\PlexMetadata.cs" />
     <Compile Include="Plex\PlexSearch.cs" />
+    <Compile Include="Plex\PlexServer.cs" />
     <Compile Include="Plex\PlexStatus.cs" />
     <Compile Include="Plex\PlexMediaType.cs" />
     <Compile Include="Plex\PlexUserRequest.cs" />

PlexRequests.Api/PlexApi.cs

@@ -56,6 +56,7 @@ namespace PlexRequests.Api
 		private const string SignInUri = "https://plex.tv/users/sign_in.json";
 		private const string FriendsUri = "https://plex.tv/pms/friends/all";
 		private const string GetAccountUri = "https://plex.tv/users/account";
+        private const string ServerUri = "https://plex.tv/pms/servers.xml";
 
         private static Logger Log = LogManager.GetCurrentClassLogger();
         private static string Version { get; }
@@ -300,6 +301,22 @@ namespace PlexRequests.Api
             }
         }
 
+        public PlexServer GetServer(string authToken)
+        {
+            var request = new RestRequest
+            {
+                Method = Method.GET,
+            };
+
+            AddHeaders(ref request, authToken);
+
+            var servers = RetryHandler.Execute(() => Api.ExecuteXml<PlexServer>(request, new Uri(ServerUri)),
+                (exception, timespan) => Log.Error(exception, "Exception when calling GetServer for Plex, Retrying {0}", timespan));
+
+
+            return servers;
+        }
+
         private void AddHeaders(ref RestRequest request, string authToken)
         {
             request.AddHeader("X-Plex-Token", authToken);

PlexRequests.UI/Content/wizard.js

@@ -0,0 +1,140 @@
+$(function () {
+
+    // Step 1
+    $('#firstNext')
+        .click(function () {
+            loadArea("plexAuthArea");
+        });
+
+    // Step 2 - Get the auth token
+    $('#contentBody').on('click', '#requestToken', function (e) {
+        e.preventDefault();
+
+        var $form = $("#plexAuthForm");
+        $.post($form.prop("action"), $form.serialize(), function (response) {
+            if (response.result === true) {
+                loadArea("plexArea");
+
+                if (response.port) {
+                    $('#portNumber').val(response.port);
+                }
+                if (response.ip) {
+                    $('#Ip').val(response.ip);
+                }
+                if (response.scheme) {
+                    response.scheme === "http" ? $('#Ssl').prop('checked', false) : $('#Ssl').prop('checked', true);
+                }
+            } else {
+                generateNotify(response.message, "warning");
+            }
+        });
+    });
+
+    // Step 3 - Submit the Plex Details
+    $('#contentBody').on('click', '#submitPlex', function (e) {
+        e.preventDefault();
+        var $form = $("#plexForm");
+        $.ajax({
+            type: $form.prop("method"),
+            url: $form.prop("action"),
+            data: $form.serialize(),
+            dataType: "json",
+            success: function (response) {
+                if (response.result === true) {
+                    //Next
+                    loadArea("plexRequestArea");
+                } else {
+                    generateNotify(response.message, "warning");
+                }
+            },
+            error: function (e) {
+                console.log(e);
+            }
+        });
+    });
+
+    // Step 4 - Submit the Plex Request Settings
+    $('#contentBody').on('click', '#submitPlexRequest', function (e) {
+        e.preventDefault();
+        var $form = $("#plexRequestForm");
+        $.ajax({
+            type: $form.prop("method"),
+            url: $form.prop("action"),
+            data: $form.serialize(),
+            dataType: "json",
+            success: function (response) {
+                if (response.result === true) {
+                    //Next
+                    loadArea("authArea");
+                    $('.userAuthTooltip').tooltipster({
+                        theme: 'borderless'
+                    });
+                    $('.passwordAuthTooltip').tooltipster({
+                        theme: 'borderless'
+                    });
+                } else {
+                    generateNotify(response.message, "warning");
+                }
+            },
+            error: function (e) {
+                console.log(e);
+            }
+        });
+    });
+
+    // Step 5 - Plex Requests Authentication Settings
+    $('#contentBody').on('click', '#submitAuth', function (e) {
+        e.preventDefault();
+        var $form = $("#authForm");
+        $.ajax({
+            type: $form.prop("method"),
+            url: $form.prop("action"),
+            data: $form.serialize(),
+            dataType: "json",
+            success: function (response) {
+                if (response.result === true) {
+                    //Next
+                    loadArea("createAdminArea");
+                } else {
+                    generateNotify(response.message, "warning");
+                }
+            },
+            error: function (e) {
+                console.log(e);
+            }
+        });
+    });
+
+    $('#contentBody').on('click', '#SearchForMovies', function () {
+        var checked = this.checked;
+        changeDisabledStatus($('#RequireMovieApproval'), checked, $('#RequireMovieApprovalLabel'));
+    });
+
+    $('#contentBody').on('click', '#SearchForTvShows', function () {
+        var checked = this.checked;
+        changeDisabledStatus($('#RequireTvShowApproval'), checked, $('#RequireTvShowApprovalLabel'));
+    });
+
+    $('#contentBody').on('click', '#SearchForMusic', function () {
+        var checked = this.checked;
+        changeDisabledStatus($('#RequireMusicApproval'), checked, $('#RequireMusicApprovalLabel'));
+    });
+
+    function changeDisabledStatus($element, checked, $label) {
+        if (checked) {
+            $element.removeAttr("disabled");
+            $label.css("color","");
+        } else {
+            $element.attr("disabled","disabled");
+            $label.css("color", "grey");
+        }
+    }
+
+    function loadArea(templateId) {
+        var $body = $('#contentBody');
+
+        var templateSource = $("#" + templateId).html();
+        // Do some sliding?
+        $body.html(templateSource);
+    }
+});

PlexRequests.UI/Helpers/BaseUrlHelper.cs

@@ -91,7 +91,7 @@ namespace PlexRequests.UI.Helpers
             var scriptAssets = new List<string>
             {
                 $"<script src=\"{startUrl}/jquery-2.2.1.min.js\"></script>",
-                $"<script src=\"{startUrl}/app/app.js\"></script>",
+                //$"<script src=\"{startUrl}/app/app.js\"></script>",
                 $"<script src=\"{startUrl}/handlebars.min.js\"></script>",
                 $"<script src=\"{startUrl}/bootstrap.min.js\"></script>",
                 $"<script src=\"{startUrl}/bootstrap-notify.min.js\"></script>",
@@ -154,6 +154,18 @@ namespace PlexRequests.UI.Helpers
             return helper.Raw(sb.ToString());
         }
 
+        public static IHtmlString LoadWizardAssets(this HtmlHelpers helper)
+        {
+            var sb = new StringBuilder();
+            var assetLocation = GetBaseUrl();
+
+            var content = GetContentUrl(assetLocation);
+            
+            sb.AppendLine($"<script src=\"{content}/Content/wizard.js\" type=\"text/javascript\"></script>");
+
+            return helper.Raw(sb.ToString());
+        }
+
         public static IHtmlString LoadIssueDetailsAssets(this HtmlHelpers helper)
         {
             var assetLocation = GetBaseUrl();

PlexRequests.UI/Models/SessionKeys.cs

@@ -30,5 +30,6 @@ namespace PlexRequests.UI.Models
     {
         public const string UsernameKey = "Username";
         public const string ClientDateTimeOffsetKey = "ClientDateTimeOffset";
+        public const string UserWizardPlexAuth = nameof(UserWizardPlexAuth);
     }
 }

PlexRequests.UI/Modules/UserWizardModule.cs

@@ -0,0 +1,145 @@
+#region Copyright
+// /************************************************************************
+//    Copyright (c) 2016 Jamie Rees
+//    File: UserWizardModule.cs
+//    Created By: Jamie Rees
+//   
+//    Permission is hereby granted, free of charge, to any person obtaining
+//    a copy of this software and associated documentation files (the
+//    "Software"), to deal in the Software without restriction, including
+//    without limitation the rights to use, copy, modify, merge, publish,
+//    distribute, sublicense, and/or sell copies of the Software, and to
+//    permit persons to whom the Software is furnished to do so, subject to
+//    the following conditions:
+//   
+//    The above copyright notice and this permission notice shall be
+//    included in all copies or substantial portions of the Software.
+//   
+//    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+//    EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+//    MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+//    NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+//    LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+//    OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+//    WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+//  ************************************************************************/
+#endregion
+using System.Linq;
+using System.Threading.Tasks;
+
+using Nancy;
+using Nancy.ModelBinding;
+using Nancy.Responses.Negotiation;
+using Nancy.Validation;
+
+using PlexRequests.Api.Interfaces;
+using PlexRequests.Core;
+using PlexRequests.Core.SettingModels;
+using PlexRequests.UI.Helpers;
+using PlexRequests.UI.Models;
+
+namespace PlexRequests.UI.Modules
+{
+    public class UserWizardModule : BaseModule
+    {
+        public UserWizardModule(ISettingsService<PlexRequestSettings> pr, ISettingsService<PlexSettings> plex, IPlexApi plexApi,
+            ISettingsService<AuthenticationSettings> auth) : base("wizard", pr)
+        {
+            PlexSettings = plex;
+            PlexApi = plexApi;
+            PlexRequestSettings = pr;
+            Auth = auth;
+
+            Get["/"] = x => Index();
+            Post["/plexAuth"] = x => PlexAuth();
+            Post["/plex", true] = async (x,ct) => await Plex();
+            Post["/plexrequest", true] = async (x,ct) => await PlexRequest();
+            Post["/auth", true] = async (x,ct) => await Authentication();
+        }
+
+        private ISettingsService<PlexSettings> PlexSettings { get; }
+        private IPlexApi PlexApi { get; }
+        private ISettingsService<PlexRequestSettings> PlexRequestSettings { get; }
+        private ISettingsService<AuthenticationSettings> Auth { get; }
+
+        private Negotiator Index()
+        {
+            return View["Index"];
+        }
+
+
+
+
+        private Response PlexAuth()
+        {
+            var user = this.Bind<PlexAuth>();
+
+            if (string.IsNullOrEmpty(user.username) || string.IsNullOrEmpty(user.password))
+            {
+                return Response.AsJson(new JsonResponseModel { Result = false, Message = "Please provide a valid username and password" });
+            }
+
+            var model = PlexApi.SignIn(user.username, user.password);
+
+            if (model?.user == null)
+            {
+                return Response.AsJson(new JsonResponseModel { Result = false, Message = "Incorrect username or password!" });
+            }
+
+            // Set the auth token in the session so we can use it in the next form
+            Session[SessionKeys.UserWizardPlexAuth] = model.user.authentication_token;
+
+            var servers = PlexApi.GetServer(model.user.authentication_token);
+            var firstServer = servers.Server.FirstOrDefault();
+            return Response.AsJson(new { Result = true, firstServer?.Port, Ip = firstServer?.LocalAddresses, firstServer?.Scheme });
+        }
+
+        private async Task<Response> Plex()
+        {
+            var form = this.Bind<PlexSettings>();
+            var valid = this.Validate(form);
+            if (!valid.IsValid)
+            {
+                return Response.AsJson(valid.SendJsonError());
+            }
+            form.PlexAuthToken = Session[SessionKeys.UserWizardPlexAuth].ToString(); // Set the auth token from the previous form
+
+            var result = await PlexSettings.SaveSettingsAsync(form);
+            if (result)
+            {
+                return Response.AsJson(new JsonResponseModel { Result = true });
+            }
+            return Response.AsJson(new JsonResponseModel { Result = false, Message = "Could not save the settings to the database, please try again." });
+        }
+
+        private async Task<Response> PlexRequest()
+        {
+            var form = this.Bind<PlexRequestSettings>();
+            var valid = this.Validate(form);
+            if (!valid.IsValid)
+            {
+                return Response.AsJson(valid.SendJsonError());
+            }
+
+            var result = await PlexRequestSettings.SaveSettingsAsync(form);
+            if (result)
+            {
+                return Response.AsJson(new { Result = true });
+            }
+
+            return Response.AsJson(new JsonResponseModel { Result = false, Message = "Could not save the settings to the database, please try again." });
+        }
+
+        private async Task<Response> Authentication()
+        {
+            var form = this.Bind<AuthenticationSettings>();
+
+            var result = await Auth.SaveSettingsAsync(form);
+            if (result)
+            {
+                return Response.AsJson(new JsonResponseModel { Result = true });
+            }
+            return Response.AsJson(new JsonResponseModel { Result = false, Message = "Could not save the settings to the database, please try again." });
+        }
+    }
+}

PlexRequests.UI/PlexRequests.UI.csproj

@@ -251,6 +251,7 @@
     <Compile Include="Modules\IssuesModule.cs" />
     <Compile Include="Modules\LandingPageModule.cs" />
     <Compile Include="Modules\UpdateCheckerModule.cs" />
+    <Compile Include="Modules\UserWizardModule.cs" />
     <Compile Include="NinjectModules\ApiModule.cs" />
     <Compile Include="NinjectModules\ConfigurationModule.cs" />
     <Compile Include="NinjectModules\DependancyResolver.cs" />
@@ -327,6 +328,9 @@
     <Content Include="Content\analytics.js">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="Content\wizard.js">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
     <Content Include="Content\issues.js">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
@@ -690,6 +694,9 @@
     <Content Include="Views\Shared\_AngularLayout.cshtml">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>
+    <Content Include="Views\UserWizard\Index.cshtml">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
     <None Include="Web.Debug.config">
       <DependentUpon>web.config</DependentUpon>
     </None>

PlexRequests.UI/Views/Admin/Authentication.cshtml

@@ -65,7 +65,7 @@
 
             <p class="form-group">A comma separated list of users that you do not want to login.</p>
             <div class="form-group">
-                <label for="deniedUsers" class="control-label">Denied Users</label>
+                <label for="DeniedUsers" class="control-label">Denied Users</label>
                 <div >
                     <input type="text" class="form-control-custom form-control " id="DeniedUsers" name="DeniedUsers" placeholder="e.g. John, Bobby" value="@Model.DeniedUsers">
                 </div>

PlexRequests.UI/Views/UserWizard/Index.cshtml

@@ -0,0 +1,152 @@
+
+@using PlexRequests.UI.Helpers
+@inherits PlexRequests.UI.Helpers.EmptyViewBase<PlexRequests.UI.Models.LandingPageViewModel>
+@{
+    var baseUrl = Html.GetBaseUrl();
+    var formAction = string.Empty;
+    if (!string.IsNullOrEmpty(baseUrl.ToHtmlString()))
+    {
+        formAction = "/" + baseUrl.ToHtmlString();
+    }
+}
+@Html.LoadWizardAssets()
+
+<img class="landing-header" src="@formAction/Content/images/logo.png" width="300" />
+<div id="area" class="landing-block">
+
+
+    <div class="media">
+        <div id="contentBody" class="media-body">
+            <h4 class="media-heading landing-title" id="statusTitle">Welcome to Plex Requests</h4>
+            <div class="form-group">
+                <small>we are just going to run though the initial Plex Requests setup!</small>
+
+                <div style="text-align: center; margin-top: 20px">
+                    <a href="#" id="firstNext" class="btn btn-primary-outline">Next</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+<script id="plexAuthArea" type="text/html">
+    <form method="post" action="plexAuth" id="plexAuthForm">
+        <h4 class="media-heading landing-title">Plex Authentication</h4>
+        <div class="form-group">
+            <label for="username" class="control-label">Username and Password</label>
+            <div>
+                <input type="text" class="form-control form-control-custom" id="username" name="Username" placeholder="Username">
+            </div>
+            <br />
+            <div>
+                <input type="password" class="form-control form-control-custom" id="password" name="Password" placeholder="Password">
+            </div>
+        </div>
+        <small>Please note we do not store this information, we only store your Plex Authorization Token that will allow Plex Requests to view your media and friends</small>
+        <div class="form-group">
+            <div style="text-align: center; margin-top: 20px">
+                <button href="#" id="requestToken" class="btn btn-primary-outline">Request Token <i class="fa fa-key"></i></button>
+            </div>
+        </div>
+    </form>
+</script>
+
+
+<script id="plexArea" type="text/html">
+    <form method="post" action="plex" id="plexForm">
+        <h4 class="media-heading landing-title">Plex Settings</h4>
+        <div class="form-group">
+            <label for="Ip" class="control-label">Plex Hostname or IP Address</label>
+            <div>
+                <input type="text" class="form-control form-control-custom " id="Ip" name="Ip" placeholder="192.168.1.1">
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label for="portNumber" class="control-label">Port</label>
+
+            <div>
+                <input type="text" class="form-control form-control-custom " id="portNumber" name="Port" placeholder="32400">
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="checkbox">
+                <input type="checkbox" id="Ssl" name="Ssl"><label for="Ssl">SSL</label>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <div style="text-align: center; margin-top: 20px">
+                <a href="#" id="submitPlex" class="btn btn-primary-outline">Next</a>
+            </div>
+        </div>
+    </form>
+</script>
+
+<script id="plexRequestArea" type="text/html">
+    <form method="post" action="plexrequest" id="plexRequestForm">
+        <div class="form-group">
+            <div class="checkbox">
+                <input type="checkbox" id="SearchForMovies" name="SearchForMovies"><label id="SearchForMoviesLabel" for="SearchForMovies">Allow searching for Movies</label>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <div class="checkbox">
+                <input type="checkbox" id="SearchForTvShows" name="SearchForTvShows"><label id="SearchForTvShowsLabel" for="SearchForTvShows">Allow searching for TV Shows</label>
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="checkbox">
+                <input type="checkbox" id="SearchForMusic" name="SearchForMusic"><label id="SearchForMusicLabel" for="SearchForMusic">Allow searching for Music</label>
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="checkbox">
+                <input type="checkbox" disabled="disabled" id="RequireMovieApproval" name="RequireMovieApproval"><label style="color:grey" id="RequireMovieApprovalLabel" for="RequireMovieApproval">Require approval of all Movie requests</label>
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="checkbox">
+                <input type="checkbox" disabled="disabled" id="RequireTvShowApproval" name="RequireTvShowApproval"><label style="color:grey" id="RequireTvShowApprovalLabel" for="RequireTvShowApproval">Require approval of all TV show requests</label>
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="checkbox">
+                <input type="checkbox" disabled="disabled" id="RequireMusicApproval" name="RequireMusicApproval"><label style="color:grey" id="RequireMusicApprovalLabel" for="RequireMusicApproval">Require approval of all Music requests</label>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <div style="text-align: center; margin-top: 20px">
+                <a href="#" id="submitPlexRequest" class="btn btn-primary-outline">Next</a>
+            </div>
+        </div>
+    </form>
+</script>
+
+<script id="authArea" type="text/html">
+    <form method="post" action="auth" id="authForm">
+        <div class="form-group">
+            <div class="checkbox userAuthTooltip" title="This will only allow the users that are your friends on Plex to log into Plex Requests. Note: They only need to enter their username, unless the below option is selected.">
+                <input type="checkbox" id="userAuth" name="UserAuthentication">
+                <label for="userAuth">Enable User Authentication</label>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <div class="checkbox passwordAuthTooltip" title="When a user logs in, they are required to enter their Plex.tv username and Plex.tv password to authenticate. Note: They still need to be in your Plex Friends">
+                <input type="checkbox" id="UsePassword" name="UsePassword">
+                <label for="UsePassword">Require users to login with their passwords</label>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <div style="text-align: center; margin-top: 20px">
+                <a href="#" id="submitAuth" class="btn btn-primary-outline">Next</a>
+            </div>
+        </div>
+    </form>
+</script>