Merge pull request #21 from femto-code/setup-page

All new setup page - supposed to simplify the installation and detection of errors in your configuration

Author: femto-code

.gitignore

@@ -4,3 +4,4 @@ img/chartjs-logo.svg
 img/intro.psd
 raminfo.php
 img/intro2.psd
+test.php

CHANGELOG.md

@@ -9,6 +9,7 @@ Open for your feature [requests](https://github.com/femto-code/Rasberry-Pi-Dashb
 
 ## [0.10] - 2021-03-18
 > Last release before a major 1.0.0
+
 ### Added
 - allow changing password from options modal 💯
 

README.md

@@ -10,7 +10,7 @@
 ## Features
 
 - Live surveillance of RPi hardware (CPU Temperature, frequency, loads etc.) with customizable warning thresholds
-- Detailed software/hardware information (web server, PHP, storage / partition workload, core voltage, plugged USB devices, kernel version, model specifications, OS, CPU)
+- Detailed software/hardware information (web server, PHP, storage / partition workload, core voltage, plugged USB devices, kernel version, model specifications, OS, CPU, network config)
 - Protected access with password login (default: root) ([configure password](https://github.com/femto-code/Rasberry-Pi-Dashboard#configure-password))
 - Power (shutdown/reboot) Raspberry Pi with schedule options ([setup instructions](https://github.com/femto-code/Rasberry-Pi-Dashboard#enabling-remote-shutdownreboot-optional))
 - Mobile WebApp integration
@@ -35,6 +35,29 @@
 
 - Running Web Server (e.g. Lighttpd or Apache) with PHP installed (>=v5.6)
 - Installed Git (comes preinstalled on Raspberry Pi OS / formerly Raspbian as well as other linux distros)
+- Valid permissions within /var/www/html
+
+#### Valid permissions
+
+> This setup ensures that your user as well as the `www-data` user are allowed to write files to web directory (the minimum need of permissions)
+
+The following configuration is the commonly recommended set-up for your web server folder:
+(Source: https://dev.to/phlash909/comment/ahf6)
+
+1. First, make sure `www-data` group exists and add your current login:
+_(if you are using another distro than Raspbian/Raspberry Pi OS the username of web server can differ)_
+`sudo groupadd www-data`
+`sudo usermod -a -G www-data www-data`
+`sudo usermod -a -G www-data <yourlogin>` (replace `<yourlogin>` with your username)
+
+2. Second, give the ownership of web folder to the `www-data` group and user. The following commands ensure that group members (including your own login) are able to write/edit files:
+`sudo chgrp -R www-data /var/www/html`
+`sudo chown -R www-data /var/www/html`
+`sudo chmod -R 775 /var/www/html`
+
+3. Reboot your RPi (for permission changes to take effect)
+
+> An erroneous permission typically results in the situation where the user responsible for web server (e.g. `www-data`) does not have rights to create/modify the local config file for saving your dashboard adjustments (your custom thresholds, password etc.). In this case, the dashboard won't work at all and throwing this error (see #22).
 
 ### Setup project
 
@@ -43,14 +66,14 @@
 - **DONE!** Open web browser with URL: `http://IP_OF_YOUR_RPI/{your_subfolder_name}`
 > Note: replace {your_subfolder_name} with your choice accordingly. You can also rename the base folder at any time afterwards.
 
-## Configuration
+## Configuration / Help
 
-#### Core voltage output is not shown
-- If you want to see this information on your dashboard instance:<br>run `sudo usermod -aG video www-data` in a terminal
+#### Core voltage (or other hardware info) output is not shown (optional)
+- If you want to see advanced hardware information (core voltage, model information) on your dashboard instance:<br>run `sudo usermod -aG video www-data` in a terminal
 >If you do not use Raspbian (or any other RasPi distro) like Ubuntu, you do have to install `libraspberrypi-bin` by running `sudo apt install libraspberrypi-bin`.
 
 - background: The `vcgencmd` command (specifically dedicated to RPi firmware) is a system command that requires certain hardware rights. Therefore one has to grant this particular right (to read hardware info) to e.g. `www-data` (under which web server is running). This is achived by adding this user to a system group called video, which the standard user pi is part of by default.
-- in case of problems: please comment on #12 (or new issue)
+- in case of problems: please comment on [#12](https://github.com/femto-code/Raspberry-Pi-Dashboard/issues/12) (or [new issue](https://github.com/femto-code/Raspberry-Pi-Dashboard/issues/new))
 
 #### Enable shutdown / reboot (optional)
 

backend/Config.php

@@ -3,45 +3,51 @@
 class Config{
 
   protected $data;
+  public $userconf;
+  public $defconf;
 
-  protected $default = null;
 
   protected $file;
 
   public function load($file, $defaultfile){
     if(!(file_exists($file))){
-      $myfile = fopen($file, "w") or die("Unable to open file!");
+      $myfile = fopen($file, "w") or die("Unable to open file! This error happens in the situation where the user responsible for web server (e.g. www-data) does not have rights to create/modify the local config file for saving your dashboard adjustments (your custom thresholds, password etc.). Please see installation instructions for setting correct permissions on your dashboard folder.");
       fwrite($myfile, "<?php\nreturn array();\n?>");
       fclose($myfile);
+      chmod($file, 0664);
     }
     $this->file=$file;
     $userconf=require $file;
     $defaults=require $defaultfile;
-    $this->data = array_merge($defaults, $userconf);
+    $this->data = array_replace_recursive($defaults, $userconf); // not array_merge($defaults, $userconf)! Use recursive replace!
+    $this->userconf = $userconf;
+    $this->defconf = $defaults;
     //echo "<pre>",print_r($this->data),"</pre>";
     //$this->save($this->data);
   }
 
-  public function get($key, $default = null){
-    $this->default = $default;
+  public function get($key, $source=false){
 
     $segments = explode(".", $key);
 
-    $data = $this->data;
+    $data = ($source!==false) ? $this->{$source} : $this->data;
 
     foreach ($segments as $segment){
       if (isset($data[$segment])){
         $data = $data[$segment];
       }else{
-        $data = $this->default;
+        $data = "";
         break;
       }
     }
     return $data;
   }
 
-  public function exists($key){
-    return $this->get($key) !== $this->default;
+  public function modified($key){
+    return $this->get($key, "userconf");
+  }
+  public function defaults($key){
+    return $this->get($key, "defconf");
   }
 
   public function save($dat){

css/darkmode.css

@@ -3,7 +3,7 @@ body, div.bg-light {
   background-color: #24292e!important;
 }
 
-footer, .card, .modal-header, .modal-body, .modal-footer, .close, #preload {
+footer, .card, .modal-header, .modal-body, .modal-footer, .close, #preload, .multisteps-form__panel {
   background-color: #2f363d!important;
   color: #fff!important;
 }
@@ -16,7 +16,7 @@ hr {
   color: #b1afaf!important;
 }
 
-label{
+label, .headline {
   color: #fff;
 }
 
@@ -28,4 +28,4 @@ label{
 }
 .modal-content{
   background-color: #4e4e4e;
-}
+}

defaults.php

@@ -10,7 +10,7 @@
   'general' =>
   array (
     'pass' => '63a9f0ea7bb98050796b649e85481845',
-    'initsetup' => '0',
+    'initialsetup' => '0',
   ),
 );
 ?>

index.php

@@ -8,10 +8,16 @@
 $config = new Config;
 $config->load("local.config", "defaults.php");
 
+if(!isset($_SESSION["setup"])){
+  if($config->get("general.initialsetup")=="0"){
+    header("Location: setup.php");
+  }
+}
+
 $path=$_SERVER['SCRIPT_FILENAME'];
 $fol=substr($path, 0, -9);
 
-$passVal = ($config->get("general.pass")!=='63a9f0ea7bb98050796b649e85481845') ? '***' : '';
+$passVal = ($config->get("general.pass")!=='63a9f0ea7bb98050796b649e85481845') ? "***notdefault***" : '';
 ?>
 <!doctype html>
 <html lang="en">
@@ -104,8 +110,12 @@
   $p = $df / $ds * 100;
   //
 
+  $permissionerr=false;
   $spannung=substr(exec("vcgencmd measure_volts core"),5);
-  if(strpos($spannung,"failed")!==false) $spannung=$spannung."<div class='alert alert-danger' role='alert'>Reading of core voltage failed. Please run<br><kbd>sudo usermod -aG video www-data</kbd><br>in a terminal to solve this problem.</div>";
+  if( (strpos($spannung,"failed")!==false) || (strlen($spannung)<2) ){
+    $spannung=$spannung."<div class='alert alert-danger' role='alert'>Reading of core voltage failed. Please run<br><kbd>sudo usermod -aG video www-data</kbd><br>in a terminal to solve this problem.</div>";
+    $permissionerr=true;
+  }
 }
 ?>
 
@@ -142,6 +152,15 @@
         <div class="card-body">
           <h5 id="sys1" class="card-title"><span id="overallstate"></span></h5>
           <p id="sys11" class="card-text"></p>
+          <?php
+          if(isset($_SESSION["setup"])){
+          ?>
+          <div class="alert alert-info alert-dismissible fade show" role="alert"><i class="bi bi-info-circle"></i>&nbsp;Setup finished! RPi Dashboard is ready.<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>
+          <?php
+          unset($_SESSION["setup"]);
+          }
+          ?>
+
           <p id="sys2" class="card-text"></p>
           <hr>
           <p><i class="bi bi-clock-history"></i><!--<img src="img/time-icon.png">-->&nbsp;Uptime: <b><span id="uptime"></span></b><?php if($auth){ ?>&nbsp;(started <?=$uptstr;?>)<?php } ?></p>
@@ -255,7 +274,7 @@
         <div class="card-header">Model</div>
         <div class="card-body">
           <samp><?php echo exec("cat /sys/firmware/devicetree/base/model");?></samp>
-          <samp><?php $ot=shell_exec("vcgencmd version");if(strpos($ot,"failed")!==false){echo "<div class='alert alert-danger' role='alert'>Execution of system command failed. Please run<br><kbd>sudo usermod -aG video www-data</kbd><br>in a terminal to solve this problem.</div>";}else{echo $ot;}?></samp>
+          <?php $ot=shell_exec("vcgencmd version");if($permissionerr){echo "<div class='alert alert-danger' role='alert'>Execution of system command failed. Please run<br><kbd>sudo usermod -aG video www-data</kbd><br>in a terminal to solve this problem.</div>";}else{echo '<samp>'.$ot.'</samp>';}?>
           <p class="card-text"><small class="text-muted">Updated <span><?php echo date("H:i:s");?> (at page load)</span></small></p>
         </div>
       </div>
@@ -433,24 +452,24 @@
             <form id="settingsForm">
               <div class="form-row">
                 <div class="col">
-                  <input type="number" id="warn_cpu_temp" class="form-control" placeholder="default: 60" aria-describedby="critCpuTempHelp" min="20" max="80" value="<?=$config->get("thresholds.warn_cpu_temp")?>">
+                  <input type="number" id="warn_cpu_temp" class="form-control" placeholder="default: 65" aria-describedby="critCpuTempHelp" min="20" max="80" value="<?=$config->modified("thresholds.warn_cpu_temp")?>">
                   <small id="critCpuTempHelp" class="form-text text-muted">CPU Temperature (°C) - default: 65°C</small>
                 </div>
                 <div class="col">
-                  <input type="number" id="warn_ram_space" class="form-control" placeholder="default: 80" aria-describedby="critRamSizeHelp" min="0" max="100" value="<?=$config->get("thresholds.warn_ram_space")?>">
+                  <input type="number" id="warn_ram_space" class="form-control" placeholder="default: 80" aria-describedby="critRamSizeHelp" min="0" max="100" value="<?=$config->modified("thresholds.warn_ram_space")?>">
                   <small id="critRamSizeHelp" class="form-text text-muted">RAM Load (%) - default: 80%</small>
                 </div>
               </div>
               <div class="form-row">
                 <div class="col-6">
-                  <input type="number" id="warn_loads_size" class="form-control" placeholder="default: 2" aria-describedby="critCpuLoadHelp" min="1" max="4" value="<?=$config->get("thresholds.warn_loads_size")?>">
+                  <input type="number" id="warn_loads_size" class="form-control" placeholder="default: 2" aria-describedby="critCpuLoadHelp" min="1" max="4" value="<?=$config->modified("thresholds.warn_loads_size")?>">
                   <small id="critCpuLoadHelp" class="form-text text-muted">CPU workload (last min) - default: 2</small>
                 </div>
               </div>
               <div class="form-row mb-2">
                 <label for="upd_time_interval" class="col-sm-6 col-form-label">Refresh rate (sec)</label>
                 <div class="col-sm-6">
-                  <input type="number" class="form-control" placeholder="default: 15" id="upd_time_interval" aria-describedby="dbRefreshHelp" min="5" max="600" value="<?=$config->get("thresholds.upd_time_interval")?>">
+                  <input type="number" class="form-control" placeholder="default: 15" id="upd_time_interval" aria-describedby="dbRefreshHelp" min="5" max="600" value="<?=$config->modified("thresholds.upd_time_interval")?>">
                 </div>
                 <small id="dbRefreshHelp" class="col form-text text-muted">Refresh interval of live data update section (recommended: 10 - 60 sec) - Pay attention: Do not set too low. - default: 15</small>
               </div>
@@ -571,7 +590,6 @@
 upd_time_interval = <?=$config->get("thresholds.upd_time_interval")?>;
 warn_loads_size = <?=$config->get("thresholds.warn_loads_size")?>;
 var settingsKeys=["warn_cpu_temp", "warn_ram_space", "warn_loads_size", "upd_time_interval", "pass"];
-var defaultSettings=[65, 80, 2, 15, "root"];
 console.log("Custom user options: warncputemp="+warn_cpu_temp+" | warn_ram_space="+warn_ram_space+" | upd_time_interval="+upd_time_interval+" | warn_loads_size="+warn_loads_size);
 </script>
 

js/main.js

@@ -86,13 +86,14 @@ function authorize() {
       console.log(data.responseText);
       if(data.responseText.indexOf("true") > -1){
         document.getElementById("currentState").innerHTML = "<div class='alert alert-success' role='alert'><i class='bi bi-check2-circle'></i>&nbsp;Authorization completed!</font>";
-        $("#confbtn").html("<i class='bi bi-check2-circle'></i>&nbsp;Saved");
         var res=JSON.parse(data.responseText.split("true_")[1]);
         if( (res.act=="") || (res.date==null) ){
-          if (confirm(("There was an error with shutdown. Please check that user www-data has necessary rights to perform this action.\nShow help?"))){
-            location.href='https://github.com/femto-code/Raspberry-Pi-Dashboard#enabling-remote-shutdownreboot-optional';
+          $("#confbtn").html("<i class='bi bi-x-circle'></i>&nbsp;Failed");
+          if (confirm(("There was an error with scheduling the shutdown. This error usually goes back to incorrect permissions.\nPlease check that user www-data has necessary rights to perform this action.\nShow help?"))){
+            location.href='https://github.com/femto-code/Raspberry-Pi-Dashboard#enable-shutdown--reboot-optional';
           }
         }else{
+          $("#confbtn").html("<i class='bi bi-check2-circle'></i>&nbsp;Saved");
           outputShutdown(res.date,res.act);
         }
         setTimeout(function(){
@@ -109,7 +110,7 @@ function authorize() {
         $("#inputPassword2").addClass("is-invalid");
         $("#confbtn").html("Confirm identity");
       }else if(data.responseText.indexOf("false") > -1){
-        alert('There was an error with shutdown: Parameter error. Please report an issue.');
+        alert('There was an error with shutdown: Parameter error. Please report this issue on Github!');
       }
     }, function () {
       alert("Connection error");
@@ -157,7 +158,7 @@ function cancelShutdown(force) {
     }else{
       checkShutdown(function(){
         if(shutdownCurrent){
-          alert('There was an error with shutdown cancel. Please report an issue.');
+          alert('There was an error with shutdown cancel. Please report this issue on Github!');
         }else{
           mdtoast('<i class="bi bi-check2-circle"></i>&nbsp;Power event was cancelled!', { type: 'success'});
         }
@@ -570,9 +571,9 @@ document.querySelector('#applyBtn').onclick = function (e) {
   for (var i = 0; i < settingsKeys.length; i++) {
     val=document.getElementById(settingsKeys[i]).value;
     if(val==""){
-      val=defaultSettings[i];
-      sFormData.append(settingsKeys[i], val);
-    }else if(val=="***"){
+      //val=defaultSettings[i];
+      //sFormData.append(settingsKeys[i], val);
+    }else if(val=="***notdefault***"){
       // NOTE: password is altered (not default) -> leave as is
     }else{
       if(settingsKeys[i]=="pass") {
@@ -592,6 +593,9 @@ document.querySelector('#applyBtn').onclick = function (e) {
     if(data.responseText=="1"){
       mdtoast('<i class="bi bi-check2-circle"></i>&nbsp;Settings were updated!', { type: 'success'});
       $("#sformFeedback").html('<div class="mt-2 alert alert-success alert-dismissible fade show" role="alert"><i class="bi bi-check2-circle"></i>&nbsp;Saved successfully! <a href="javascript:location.reload()" class="alert-link">Reload</a> the page for changes to take effect.<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
+    }else if(data.responseText=="nothing changed"){
+      mdtoast('<i class="bi bi-info-circle"></i>&nbsp;Nothing was changed!', { type: 'info'});
+      $("#sformFeedback").html('<div class="mt-2 alert alert-info alert-dismissible fade show" role="alert"><i class="bi bi-info-circle"></i>&nbsp;All set! You did not change anything.<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
     }else{
       mdtoast('<i class="bi bi-x-circle"></i>&nbsp;There was an error! ('+data.responseText+')', { type: 'error'});
       $("#sformFeedback").html('<div class="mt-2 alert alert-danger" role="alert"><i class="bi bi-x-circle"></i>&nbsp;Failed! <a class="alert-link" href="https://github.com/femto-code/Raspberry-Pi-Dashboard/issues/new" target="blank">Create an issue</a> mentioning error message: <kbd>'+data.responseText+'</kbd>.</div>');