From b5e67b4293397a666a31b0d89ad65cc22bc60e71 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 3 Apr 2025 16:43:56 -0700
Subject: [PATCH] refactor: update feedback script for improved readability and
 maintainability by standardizing PHP tags, restructuring CSS classes, and
 enhancing layout organization

---
 emhttp/plugins/dynamix/scripts/feedback | 181 +++++++++++++++++-------
 1 file changed, 126 insertions(+), 55 deletions(-)

diff --git a/emhttp/plugins/dynamix/scripts/feedback b/emhttp/plugins/dynamix/scripts/feedback
index 094e731c6..c824dd79e 100755
--- a/emhttp/plugins/dynamix/scripts/feedback
+++ b/emhttp/plugins/dynamix/scripts/feedback
@@ -1,5 +1,5 @@
 #!/usr/bin/php -q
-<?PHP
+<?php
 /* Copyright 2005-2024, Lime Technology
  * Copyright 2012-2024, Bergware International.
  *
@@ -13,7 +13,7 @@
 
 $docroot ??= ($_SERVER['DOCUMENT_ROOT'] ?: '/usr/local/emhttp');
 require_once "$docroot/webGui/include/Helpers.php";
-extract(parse_plugin_cfg('dynamix',true));
+extract(parse_plugin_cfg('dynamix', true));
 
 // add translations
 $_SERVER['REQUEST_URI'] = '';
@@ -22,8 +22,8 @@ require_once "$docroot/webGui/include/Translations.php";
 
 $var = parse_ini_file('state/var.ini');
 $unraid = parse_ini_file('/etc/unraid-version');
-$keyfile = !empty(_var($var,'regFILE')) ? trim(base64_encode(@file_get_contents($var['regFILE']))) : '';
-$width = in_array($display['theme'], ['azure','gray']) ? '98.8%' : '100%';
+$keyfile = !empty(_var($var, 'regFILE')) ? trim(base64_encode(@file_get_contents($var['regFILE']))) : '';
+// $width = in_array($display['theme'], ['azure','gray']) ? '98.8%' : '100%';
 $feedback = '/webGui/images/feedback_';
 
 $diagn = _('Unable to generate system diagnostics');
@@ -31,61 +31,132 @@ $sorry = _('Sorry, an error occurred');
 $again = _('Please try again later');
 ?>
 <style>
-div.spinner.fixed{z-index:100000}
-div#control_panel{position:absolute;left:0;right:0;top:0;padding-top:8px;line-height:24px;white-space:nowrap}
-div.divide{text-align:center;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
-div.divide label{margin-right:30px}
-div.allpanels{display:none;position:absolute;left:0;right:0;top:40px;bottom:0;overflow:auto}
-div#footer_panel{position:absolute;left:0;right:0;bottom:0;text-align:right}
-textarea.feedback{width:<?=$width?>;height:530px;margin:0;resize:none}
-@media(max-width:960px){textarea.feedback{height:330px}}
-@media(max-height:768px){textarea.feedback{height:330px}}
-input#email{float:left;padding-left:4px}
-p.note,label.note{font-size:1.1rem!important}
-span.spacer{margin:0 4px}
-img{display:inline-block;margin-bottom:30px}
-.center{text-align:center!important}
-.green-text{color:#4f8a10!important}
-.red-text{color:#f0000c!important}
+div.spinner.fixed {
+    z-index: 100000;
+}
+.feedback-control-panel {
+    padding-top: 8px;
+    line-height: 24px;
+    white-space: nowrap;
+    text-align: center;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+
+    label {
+        margin-right: 30px;
+    }
+}
+.feedback-panel {
+    display: none;
+}
+.feedback-panel-textarea {
+    width: 100%;
+    height: 530px;
+    margin: 0;
+    resize: none;
+    box-sizing: border-box;
+}
+@media (max-width: 960px) {
+    .feedback-panel-textarea {
+        height: 330px;
+    }
+}
+@media (max-height: 768px) {
+    .feedback-panel-textarea {
+        height: 330px;
+    }
+}
+.feedback-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1rem;
+  gap: 1rem;
+}
+.feedback-footer-nav {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.feedback-email-input {
+    padding-left: 4px;
+}
+.note {
+    font-size: 1.1rem !important;
+}
+img {
+    display: inline-block;
+    margin-bottom: 30px;
+}
+.center {
+    text-align: center !important;
+}
+.green-text {
+    color: var(--green-800) !important;
+}
+.red-text {
+    color: var(--red-600) !important;
+}
 </style>
 
 <div>
-<div id="control_panel" class="divide">
-<label for="opt_featurerequest"><input type="radio" name="mode" id="opt_featurerequest" value="featurerequest" checked="checked"><?=_('Product Suggestion')?></label>
-<label for="opt_bugreport"><input type="radio" name="mode" id="opt_bugreport" value="bugreport"><?=_('Bug Report')?></label>
-<label for="opt_troubleshoot"><input type="radio" name="mode" id="opt_troubleshoot" value="troubleshoot"><?=_('Troubleshoot')?></label>
-<label for="opt_comment"><input type="radio" name="mode" id="opt_comment" value="comment"><?=_('Other Comment')?></label>
-<hr>
-</div>
+  <div class="feedback-control-panel">
+    <label for="opt_featurerequest">
+      <input type="radio" name="mode" id="opt_featurerequest" value="featurerequest" checked="checked">
+      <?=_('Product Suggestion')?>
+    </label>
+    <label for="opt_bugreport">
+      <input type="radio" name="mode" id="opt_bugreport" value="bugreport">
+      <?=_('Bug Report')?>
+    </label>
+    <label for="opt_troubleshoot">
+      <input type="radio" name="mode" id="opt_troubleshoot" value="troubleshoot">
+      <?=_('Troubleshoot')?>
+    </label>
+    <label for="opt_comment">
+      <input type="radio" name="mode" id="opt_comment" value="comment">
+      <?=_('Other Comment')?>
+    </label>
+    <hr>
+  </div>
 
-<div id="result_panel" class="allpanels"></div>
+  <div id="result_panel" class="feedback-panel"></div>
 
-<div id="featurerequest_panel" class="allpanels">
-<textarea id="featurerequest" class="feedback"></textarea>
-</div>
+  <div id="featurerequest_panel" class="feedback-panel">
+    <textarea id="featurerequest" class="feedback-panel-textarea"></textarea>
+  </div>
 
-<div id="bugreport_panel" class="allpanels">
-<textarea id="bugreport" class="feedback"></textarea>
-<label class="note" for="anonymize_bugreport"><input type="checkbox" id="anonymize_bugreport" class="anonymize" value="1"> <?=_('Anonymize diagnostics (may make troubleshooting more difficult)')?></label>
-<p class="note"><b><?=_('NOTE')?>:</b> <i><?=_('Submission of this bug report will automatically send your system diagnostics to Lime Technology')?>.</i></p>
-</div>
+  <div id="bugreport_panel" class="feedback-panel">
+    <textarea id="bugreport" class="feedback-panel-textarea"></textarea>
+    <label class="note" for="anonymize_bugreport">
+      <input type="checkbox" id="anonymize_bugreport" class="anonymize" value="1">
+      <?=_('Anonymize diagnostics (may make troubleshooting more difficult)')?>
+    </label>
+    <p class="note"><b><?=_('NOTE')?>:</b> <i><?=_('Submission of this bug report will automatically send your system diagnostics to Lime Technology')?>.</i></p>
+  </div>
 
-<div id="troubleshoot_panel" class="allpanels">
-<textarea id="troubleshoot" class="feedback"></textarea>
-<label class="note" for="anonymize_troubleshoot"><input type="checkbox" id="anonymize_troubleshoot" class="anonymize" value="1"><?=_('Anonymize diagnostics (may make troubleshooting more difficult)')?></label>
-<p class="note"><b><?=_('NOTE')?>:</b> <i><?=_('Submission of this troubleshooting request will automatically send your system diagnostics to Lime Technology')?>.</i></p>
-</div>
+  <div id="troubleshoot_panel" class="feedback-panel">
+    <textarea id="troubleshoot" class="feedback-panel-textarea"></textarea>
+    <label class="note" for="anonymize_troubleshoot">
+      <input type="checkbox" id="anonymize_troubleshoot" class="anonymize" value="1">
+      <?=_('Anonymize diagnostics (may make troubleshooting more difficult)')?>
+    </label>
+    <p class="note"><b><?=_('NOTE')?>:</b> <i><?=_('Submission of this troubleshooting request will automatically send your system diagnostics to Lime Technology')?>.</i></p>
+  </div>
 
-<div id="comment_panel" class="allpanels">
-<textarea id="comment" class="feedback"></textarea>
-</div>
+  <div id="comment_panel" class="feedback-panel">
+    <textarea id="comment" class="feedback-panel-textarea"></textarea>
+  </div>
 
-<div id="footer_panel">
-<input type="email" id="email" autocomplete="off" spellcheck="false">
-<a href="https://unraid.net" target="_blank"><?=_('Website')?></a><span class="spacer blue-text">|</span>
-<a href="https://forums.unraid.net" target="_blank"><?=_('Forum')?></a><span class="spacer blue-text">|</span>
-<a href="https://docs.unraid.net/" target="_blank"><?=_('Docs')?></a>
-</div>
+  <div class="feedback-footer">
+    <input class="feedback-email-input" type="email" autocomplete="off" spellcheck="false">
+    <nav class="feedback-footer-nav">
+      <a href="https://unraid.net" target="_blank"><?=_('Website')?></a>
+      <a href="https://forums.unraid.net" target="_blank"><?=_('Forum')?></a>
+      <a href="https://docs.unraid.net/" target="_blank"><?=_('Docs')?></a>
+    </nav>
+  </div>
 </div>
 
 <script>
@@ -136,7 +207,7 @@ String.prototype.md5 = function(){
 
 function validInput(input) {
   var validRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-  var email = $('input#email');
+  var email = $('.feedback-email-input');
   return input.val().md5() == md5[input.prop('id')] || !(email.prop('required')===false || email.val().match(validRegex));
 }
 
@@ -173,7 +244,7 @@ function form_submit(url, params, tab, diagnostics) {
     return;
   }
   params.description = $(tab).val();
-  params.email = $('input#email').val();
+  params.email = $('.feedback-email-input').val();
   params.timestamp = "<?=time()?>";
   params.osversion = "<?=$unraid['version']?>";
   params.keyfile = "<?=$keyfile?>";
@@ -209,9 +280,9 @@ $(function(){
     var panel = tab+'_panel';
     var enter = ['#troubleshoot'].includes(tab);
     var email = "<?=_('Contact Email Address')?> ("+"<?=_('required')?>"+")";
-    $('input#email').prop('placeholder',email).prop('required','true');
+    $('.feedback-email-input').prop('placeholder',email).prop('required','true');
     $('#submit_button').prop('disabled',validInput($(tab)));
-    $('.allpanels').not(panel).fadeOut('fast');
+    $('.feedback-panel').not(panel).fadeOut('fast');
     $(panel).fadeIn('fast');
   });
 
@@ -219,7 +290,7 @@ $(function(){
     $('#submit_button').prop('disabled',validInput($(this)));
   });
 
-  $('input#email').on('input change',function(){
+  $('.feedback-email-input').on('input change',function(){
     var tab = '#'+$('input[name=mode]:checked').val();
     $('#submit_button').prop('disabled',validInput($(tab)));
   });