add raw file editing to configuration page in webfront

SharedLibraryCore/Configuration/ApplicationConfiguration.cs

@@ -135,6 +135,7 @@ namespace SharedLibraryCore.Configuration
             TimeSpan.FromDays(30)
         };
 
+        [ConfigurationIgnore]
         [LocalizedDisplayName("WEBFRONT_CONFIGURATION_PRESET_BAN_REASONS")]
         public Dictionary<string, string> PresetPenaltyReasons { get; set; } = new Dictionary<string, string>
             {{"afk", "Away from keyboard"}, {"ci", "Connection interrupted. Reconnect"}};
@@ -150,6 +151,7 @@ namespace SharedLibraryCore.Configuration
         [ConfigurationIgnore] 
         public TimeSpan ServerDataCollectionInterval { get; set; } = TimeSpan.FromMinutes(5);
         
+        [ConfigurationIgnore]
         public Dictionary<Permission, string> OverridePermissionLevelNames { get; set; } = Enum
             .GetValues(typeof(Permission))
             .Cast<Permission>()

WebfrontCore/Controllers/ConfigurationController.cs

@@ -1,4 +1,6 @@
-using Microsoft.AspNetCore.Authorization;
+using System;
+using System.IO;
+using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
 using SharedLibraryCore;
 using SharedLibraryCore.Configuration;
@@ -7,7 +9,11 @@ using SharedLibraryCore.Configuration.Validation;
 using SharedLibraryCore.Interfaces;
 using System.Linq;
 using System.Reflection;
+using System.Text;
 using System.Threading.Tasks;
+using Microsoft.AspNetCore.Http;
+using Newtonsoft.Json;
+using Newtonsoft.Json.Linq;
 using WebfrontCore.ViewModels;
 
 namespace WebfrontCore.Controllers
@@ -36,6 +42,84 @@ namespace WebfrontCore.Controllers
             return View("Index", Manager.GetApplicationSettings().Configuration());
         }
 
+        public async Task<IActionResult> Files()
+        {
+            if (Client.Level < SharedLibraryCore.Database.Models.EFClient.Permission.Owner)
+            {
+                return Unauthorized();
+            }
+
+            try
+            {
+                // todo: move this into a service a some point
+                var model = await Task.WhenAll(System.IO.Directory
+                    .GetFiles(System.IO.Path.Join(Utilities.OperatingDirectory, "Configuration"))
+                    .Where(file => file.EndsWith(".json", StringComparison.InvariantCultureIgnoreCase))
+                    .Select(async fileName => new ConfigurationFileInfo
+                    {
+                        FileName = fileName.Split(System.IO.Path.DirectorySeparatorChar).Last(),
+                        FileContent = await System.IO.File.ReadAllTextAsync(fileName)
+                    }));
+
+                return View(model);
+            }
+            catch (Exception ex)
+            {
+                return Problem(ex.Message, statusCode: StatusCodes.Status500InternalServerError);
+            }
+        }
+
+        [HttpPatch("{Controller}/File/{fileName}")]
+        public async Task<IActionResult> PatchFiles([FromRoute] string fileName)
+        {
+            if (Client.Level < SharedLibraryCore.Database.Models.EFClient.Permission.Owner)
+            {
+                return Unauthorized();
+            }
+
+            if (!fileName.EndsWith(".json"))
+            {
+                return BadRequest("File must be of json format.");
+            }
+
+            using var reader = new StreamReader(Request.Body, Encoding.UTF8);
+            var content = await reader.ReadToEndAsync();
+
+            if (string.IsNullOrEmpty(content))
+            {
+                return BadRequest("File content cannot be empty");
+            }
+
+            try
+            {
+                var file = JObject.Parse(content);
+            }
+            catch (JsonReaderException ex)
+            {
+                return BadRequest($"{fileName}: {ex.Message}");
+            }
+
+            var path = System.IO.Path.Join(Utilities.OperatingDirectory, "Configuration",
+                fileName.Replace($"{System.IO.Path.DirectorySeparatorChar}", ""));
+
+            // todo: move into a service at some point
+            if (!System.IO.File.Exists(path))
+            {
+                return BadRequest($"{fileName} does not exist");
+            }
+
+            try
+            {
+                await System.IO.File.WriteAllTextAsync(path, content);
+            }
+            catch (Exception ex)
+            {
+                return Problem(ex.Message, statusCode: StatusCodes.Status500InternalServerError);
+            }
+
+            return NoContent();
+        }
+
         /// <summary>
         /// Endpoint for the save action
         /// </summary>
@@ -58,12 +142,19 @@ namespace WebfrontCore.Controllers
                 var currentConfiguration = Manager.GetApplicationSettings().Configuration();
                 CopyConfiguration(newConfiguration, currentConfiguration);
                 await Manager.GetApplicationSettings().Save();
-                return Ok(new { message = new[] { Utilities.CurrentLocalization.LocalizationIndex["WEBFRONT_CONFIGURATION_SAVED"] } });
+                return Ok(new
+                {
+                    message = new[] {Utilities.CurrentLocalization.LocalizationIndex["WEBFRONT_CONFIGURATION_SAVED"]}
+                });
             }
 
             else
             {
-                return BadRequest(new { message = Utilities.CurrentLocalization.LocalizationIndex["WEBFRONT_CONFIGURATION_SAVE_FAILED"], errors = new[] { validationResult.Errors.Select(_error => _error.ErrorMessage) } });
+                return BadRequest(new
+                {
+                    message = Utilities.CurrentLocalization.LocalizationIndex["WEBFRONT_CONFIGURATION_SAVE_FAILED"],
+                    errors = new[] {validationResult.Errors.Select(_error => _error.ErrorMessage)}
+                });
             }
         }
 
@@ -106,7 +197,8 @@ namespace WebfrontCore.Controllers
         /// </summary>
         /// <param name="newConfiguration">Source config</param>
         /// <param name="oldConfiguration">Destination config</param>
-        private void CopyConfiguration(ApplicationConfiguration newConfiguration, ApplicationConfiguration oldConfiguration)
+        private void CopyConfiguration(ApplicationConfiguration newConfiguration,
+            ApplicationConfiguration oldConfiguration)
         {
             foreach (var property in newConfiguration.GetType()
                 .GetProperties().Where(_prop => _prop.CanWrite))

WebfrontCore/ViewModels/ConfigurationFileInfo.cs

@@ -0,0 +1,8 @@
+namespace WebfrontCore.ViewModels
+{
+    public class ConfigurationFileInfo
+    { 
+        public string FileName { get; set; }
+        public string FileContent { get; set; }
+    }
+}

WebfrontCore/Views/Configuration/Files.cshtml

@@ -0,0 +1,58 @@
+@model IEnumerable<WebfrontCore.ViewModels.ConfigurationFileInfo>
+@{
+    ViewData["Title"] = Utilities.CurrentLocalization.LocalizationIndex["WEBFRONT_CONFIGURATION_TITLE"];
+    var noticeText = Utilities.CurrentLocalization.LocalizationIndex["WEBFRONT_CONFIGURATION_SAVING_CHANGES"];
+    static string FormatHtmlId(string value) => value?.Replace(".", "").Replace(" ", "_");
+}
+
+@section styles
+{
+    <link rel="stylesheet"
+          href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/atom-one-dark.min.css">
+
+}
+
+<div class="row">
+    <div class="col-12 text-white-50 ">
+        <h3 class="text-white">@ViewData["Title"]</h3>
+        <h5 class="mb-4">@noticeText</h5>
+
+        <ul class="nav nav-tabs border-bottom-dark">
+            <li class="nav-item">
+                <a class="nav-link" asp-action="Edit">@ViewBag.Localization["WEBFRONT_CONFIGURATION_GUI"]</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link active" data-toggle="tab" href="#files">@ViewBag.Localization["WEBFRONT_CONFIGURATION_FILES"]</a>
+            </li>
+        </ul>
+
+        <div class="tab-content">
+            <div class="tab-pane" id="editor">
+            </div>
+            <div class="tab-pane active" id="files">
+                @foreach (var file in Model)
+                {
+                    <div class="bg-primary mb-0 pl-3 pr-3 p-2 text-white d-flex border-bottom-dark">
+                        <span class="oi oi-expand-down align-self-center mr-2 expand-file-icon" data-editor-id="#edit_file_@FormatHtmlId(file.FileName)" title="Toggle Expand"></span>
+                        <span>@file.FileName</span>
+                    </div>
+                    <div class="edit-file bg-dark d-none" id="edit_file_@FormatHtmlId(file.FileName)" data-file-name="@file.FileName">
+                        <pre class="mb-0 mr-auto" spellcheck="false"><code class="language-json bg-dark editable" contenteditable="true" id="edit_file_code_@FormatHtmlId(file.FileName)">@file.FileContent</code></pre>
+                        <button type="button" class="btn btn-primary align-self-end m-3 file-save-button" data-file-name="@file.FileName">Save</button>
+                    </div>
+                }
+            </div>
+        </div>
+
+    </div>
+
+    @section scripts
+    {
+        <!-- I don't want to include the entire highlight js into the bundle for this 1 page -->
+        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
+        
+        <environment include="Development">
+            <script type="text/javascript" src="~/js/configuration.js"></script>
+        </environment>
+    }
+</div>

WebfrontCore/Views/Configuration/Index.cshtml

@@ -40,6 +40,18 @@
     <div class="col-12 text-white-50 ">
         <h3 class="text-white">@ViewData["Title"]</h3>
         <h5 class="mb-4">@noticeText</h5>
+
+        <ul class="nav nav-tabs border-bottom-dark">
+            <li class="nav-item">
+                <a class="nav-link active" data-toggle="tab" href="#editor">GUI Editor</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" asp-action="Files">Files</a>
+            </li>
+        </ul>
+
+        <div class="tab-content">
+            <div class="tab-pane active" id="editor">
                 <form id="configurationForm" asp-controller="Configuration" asp-action="Save" method="post">
                     @foreach (var property in properties)
                     {
@@ -68,7 +80,8 @@
                                 <div id="@($"{property.Name}_content")" class="pl-3 pr-3 pt-2 pb-3 bg-dark">
                                     @for (int i = 0; i < Model.Servers.Length; i++)
                                     {
-                                @Html.EditorFor(model => model.Servers[i]);
+                                        @Html.EditorFor(model => model.Servers[i])
+                                        ;
                                     }
                                     <a asp-controller="Configuration" asp-action="GetNewListItem" asp-route-propertyName="@property.Name" class="btn btn-primary configuration-server-add-new">@addServerText</a>
                                 </div>
@@ -119,9 +132,12 @@
                 </form>
             </div>
         </div>
+
+    </div>
+</div>
+
 @section scripts {
     <environment include="Development">
         <script type="text/javascript" src="~/js/configuration.js"></script>
     </environment>
 }
-

WebfrontCore/Views/Shared/_Layout.cshtml

@@ -23,6 +23,7 @@
     <environment include="Production">
         <link rel="stylesheet" href="~/dynamic/css/global.min.css?version=@ViewBag.Version" />
     </environment>
+    @await RenderSectionAsync("styles", false)
 </head>
 <body>
     <header>

WebfrontCore/wwwroot/css/src/main.scss

@@ -37,6 +37,10 @@ a.nav-link {
     border-bottom: 1px solid $primary !important;
 }
 
+.border-bottom-dark {
+    border-bottom: 1px solid $body-bg !important;
+}
+
 .server-history {
     background-color: $big-dark;
 }

WebfrontCore/wwwroot/js/configuration.js

@@ -73,4 +73,49 @@
 
         return false;
     });
+
+    hljs.highlightAll();
+    $('.edit-file' ).on('keydown .editable', function(e){
+        if(e.keyCode === 9) {
+            document.execCommand ( 'styleWithCSS', true, null )
+            document.execCommand ( 'insertText', true, '  ' )
+            e.preventDefault()
+        }
     });
+
+    $('.expand-file-icon').click((e) => {
+        const selector = $(e.target).data('editor-id');
+        $(selector).toggleClass('d-none').toggleClass('d-flex');
+        $(e.target).toggleClass('oi-expand-up', 'oi-expand-down');
+    });
+
+    $('.file-save-button').click(e => {
+        const id = $(e.target).prev().find('.editable').attr('id');
+        const content = document.getElementById(id).textContent;
+        const file = $(e.target).data('file-name');
+
+        $.ajax({
+            data: content,
+            type: 'PATCH',
+            url: 'File/' + file,
+            contentType: 'text/plain',
+            complete: function(response) {
+                if (response.status !== 204) {
+                    $('#actionModal').modal();
+                    $('#actionModal .modal-message').text(response.responseText);
+                    $('#actionModal .modal-message').addClass('text-danger');
+                    $('#actionModal .modal-message').fadeIn('fast');
+                    $(e.target).toggleClass('btn-danger');
+                    return;
+                }
+
+                $(e.target).removeClass('btn-danger')
+                $(e.target).toggleClass('btn-success')
+                window.setTimeout(function() {
+                    $(e.target).toggleClass('btn-success');
+                }, 500);
+            }
+        });
+    });
+});
+