Several enhancements, thanks @PRO2XY & @njkeng. Resolves #168, Resolves #261

includes/configure_client.php

@@ -6,7 +6,7 @@
 */
 function DisplayWPAConfig(){
   $status = new StatusMessages();
-  $scanned_networks = array();
+  $networks = array();
 
   // Find currently configured networks
   exec(' sudo cat ' . RASPI_WPA_SUPPLICANT_CONFIG, $known_return);
@@ -49,7 +49,11 @@ function DisplayWPAConfig(){
     }
   }
 
-  if ( isset($_POST['client_settings']) && CSRFValidate() ) {
+   if ( isset($_POST['connect']) ) {
+    $result = 0;
+    exec ( 'sudo wpa_cli -i ' . RASPI_WPA_CTRL_INTERFACE . ' select_network '.strval($_POST['connect'] ));
+  }
+  else if ( isset($_POST['client_settings']) && CSRFValidate() ) {
     $tmp_networks = $networks;
     if ($wpa_file = fopen('/tmp/wifidata', 'w')) {
       fwrite($wpa_file, 'ctrl_interface=DIR=' . RASPI_WPA_CTRL_INTERFACE . ' GROUP=netdev' . PHP_EOL);
@@ -107,31 +111,40 @@ function DisplayWPAConfig(){
       if ($ok) {
         system( 'sudo cp /tmp/wifidata ' . RASPI_WPA_SUPPLICANT_CONFIG, $returnval );
         if( $returnval == 0 ) {
-          exec('sudo wpa_cli reconfigure', $reconfigure_out, $reconfigure_return );
+          exec('sudo wpa_cli -i ' . RASPI_WIFI_CLIENT_INTERFACE . ' reconfigure', $reconfigure_out, $reconfigure_return );
           if ($reconfigure_return == 0) {
             $status->addMessage('Wifi settings updated successfully', 'success');
             $networks = $tmp_networks;
           } else {
-            $status->addMessage('Wifi settings updated but cannot restart (cannot execute "wpa_cli reconfigure")', 'danger');
+            $status->addMessage('Wifi settings updated but cannot restart (cannon execute "wpa_cli reconfigure")', 'danger');
           }
         } else {
           $status->addMessage('Wifi settings failed to be updated', 'danger');
         }
       }
     } else {
-      $status->addMessage('Failed to update wifi settings', 'danger');
+      $status->addMessage('Failed to updated wifi settings', 'danger');
     }
   }
 
   exec( 'sudo wpa_cli -i ' . RASPI_WIFI_CLIENT_INTERFACE . ' scan' );
   sleep(3);
   exec( 'sudo wpa_cli -i ' . RASPI_WIFI_CLIENT_INTERFACE . ' scan_results',$scan_return );
-  for( $shift = 0; $shift < 1; $shift++ ) {
+
+  for( $shift = 0; $shift < 2; $shift++ ) {
     array_shift($scan_return);
   }
+
   // display output
   foreach( $scan_return as $network ) {
-    $arrNetwork = preg_split("/[\t]+/",$network);
+    $arrNetwork = preg_split("/[\t]+/",$network);  // split result into array
+
+    // Save RSSI
+    if (array_key_exists(4, $arrNetwork)) {
+      $networks[$arrNetwork[4]]['RSSI'] = $arrNetwork[2];
+    }
+
+    // If network is saved
     if (array_key_exists(4, $arrNetwork) && array_key_exists($arrNetwork[4], $networks)) {
       $networks[$arrNetwork[4]]['visible'] = true;
       $networks[$arrNetwork[4]]['channel'] = ConvertToChannel($arrNetwork[1]);
@@ -158,78 +171,124 @@ function DisplayWPAConfig(){
 
   <div class="row">
     <div class="col-lg-12">
-      <div class="panel panel-primary">
+      <div class="panel panel-primary"> 
         <div class="panel-heading"><i class="fa fa-signal fa-fw"></i> <?php echo _("Configure client"); ?></div>
         <!-- /.panel-heading -->
         <div class="panel-body">
           <p><?php $status->showMessages(); ?></p>
           <h4><?php echo _("Client settings"); ?></h4>
-	        <div class="btn-group btn-block">
+              <div class="btn-group btn-block">
 	          <a href=".?<?php echo htmlspecialchars($_SERVER['QUERY_STRING'], ENT_QUOTES); ?>" style="padding:10px;float: right;display: block;position: relative;margin-top: -55px;" class="col-md-2 btn btn-info" id="update"><?php echo _("Rescan"); ?></a>
-	        </div>
-          <form method="POST" action="?page=wpa_conf" name="wpa_conf_form">
-            <?php CSRFToken() ?>
-            <input type="hidden" name="client_settings" ?>
-            <table class="table table-responsive table-striped">
-              <tr>
-                <th></th>
-                <th><?php echo _("SSID"); ?></th>
-                <th><?php echo _("Channel"); ?></th>
-                <th><?php echo _("Security"); ?></th>
-                <th><?php echo _("Passphrase"); ?></th>
-                <th></th>
-              </tr>
-            <?php $index = 0; ?>
-            <?php foreach ($networks as $ssid => $network) { ?>
-              <tr>
-                <td>
-                <?php if ($network['configured']) { ?>
-                <i class="fa fa-check-circle fa-fw"></i>
-                <?php } ?>
-                <?php if (array_key_exists('connected', $network) && $network['connected']) { ?>
-                <i class="fa fa-exchange fa-fw"></i>
-                <?php } ?>
-                </td>
-                <td>
+	        </div> 
+
+            <form method="POST" action="?page=wpa_conf" name="wpa_conf_form">
+              <?php CSRFToken() ?>
+              <input type="hidden" name="client_settings" ?>
+              <script>
+                function showPassword(index) {
+                    var x = document.getElementsByName("passphrase"+index)[0];
+                    if (x.type === "password") {
+                        x.type = "text";
+                    } else {
+                        x.type = "password";
+                    }
+                }
+              </script>
+
+              <?php $index = 0; ?>
+              <?php foreach ($networks as $ssid => $network) { ?>
+ 
+              <div class="col-md-6">
+                <div class="panel panel-default">
+                  <div class="panel-body">
+
                   <input type="hidden" name="ssid<?php echo $index ?>" value="<?php echo htmlentities($ssid, ENT_QUOTES) ?>" />
-                  <?php echo htmlspecialchars($ssid, ENT_QUOTES); ?>
-                </td>
-              <?php if (array_key_exists('visible', $network) && $network['visible']) { ?>
-                <td><?php echo htmlspecialchars($network['channel'], ENT_QUOTES); ?></td>
-              <?php } else { ?>
-                <td><span class="label label-warning">X</span></td>
-              <?php } ?>
-                <td>
-              <?php if (array_key_exists('priority', $network)) { ?>
-                  <input type="hidden" name="priority<?php echo $index ?>" value="<?php echo htmlspecialchars($network['priority'], ENT_QUOTES); ?>" />
-              <?php } ?>
-                  <input type="hidden" name="protocol<?php echo $index ?>" value="<?php echo htmlspecialchars($network['protocol'], ENT_QUOTES); ?>" /><?php echo $network['protocol']; ?>
-                </td>
-              <?php if ($network['protocol'] === 'Open') { ?>
-                <td><input type="hidden" name="passphrase<?php echo $index ?>" value="" />---</td>
-              <?php } else { ?>
-                <td><input type="text" class="form-control" name="passphrase<?php echo $index ?>" value="<?php echo $network['passphrase'] ?>" onKeyUp="CheckPSK(this, 'update<?php echo $index?>')" />
-              <?php } ?>
-                <td>
-                  <div class="btn-group btn-block">
-                  <?php if ($network['configured']) { ?>
-                    <input type="submit" class="col-md-6 btn btn-warning" value="<?php echo _("Update"); ?>" id="update<?php echo $index ?>" name="update<?php echo $index ?>"<?php echo ($network['protocol'] === 'Open' ? ' disabled' : '')?> />
-                  <?php } else { ?>
-                    <input type="submit" class="col-md-6 btn btn-info" value="<?php echo _("Add"); ?>" id="update<?php echo $index ?>" name="update<?php echo $index ?>" <?php echo ($network['protocol'] === 'Open' ? '' : ' disabled')?> />
-                  <?php } ?>
-                    <input type="submit" class="col-md-6 btn btn-danger" value="<?php echo _("Delete"); ?>" name="delete<?php echo $index ?>"<?php echo ($network['configured'] ? '' : ' disabled')?> />
+                  <h4><?php echo htmlspecialchars($ssid, ENT_QUOTES); ?></h4>
+
+                  <div class="row">
+                    <div class="col-xs-4 col-md-4">Status</div>
+                    <div class="col-xs-4 col-md-4">
+                      <?php if ($network['configured']) { ?>
+                        <i class="fa fa-check-circle fa-fw"></i>
+                      <?php } ?>
+                      <?php if ($network['connected']) { ?>
+                        <i class="fa fa-exchange fa-fw"></i>
+                      <?php } ?>
+                     </div>
                   </div>
-                </td>
-              </tr>
-              <?php $index += 1; ?>
+
+                  <div class="row">
+                    <div class="col-xs-4 col-md-4">Channel</div>
+                    <div class="col-xs-4 col-md-4">
+                      <?php if ($network['visible']) { ?>
+                          <?php echo htmlspecialchars($network['channel'], ENT_QUOTES) ?>
+                      <?php } else { ?>
+                          <span class="label label-warning"> X </span>
+                      <?php } ?>
+                    </div>
+                  </div>
+
+                  <div class="row">
+                    <div class="col-xs-4 col-md-4">RSSI</div>
+                    <div class="col-xs-4 col-md-4">
+                    <?php echo htmlspecialchars($network['RSSI'], ENT_QUOTES);
+                        echo "dB (";
+                        if($network['RSSI'] >= -50) { echo 100; }
+                        else if($network['RSSI'] <= -100) { echo 0;}
+                        else {echo  2*($network['RSSI'] + 100); }
+                        echo "%)";
+                    ?>
+                    </div>
+                  </div>
+
+                  <?php if (array_key_exists('priority', $network)) { ?>
+                      <input type="hidden" name="priority<?php echo $index ?>" value="<?php echo htmlspecialchars($network['priority'], ENT_QUOTES); ?>" />
+                  <?php } ?>
+                  <input type="hidden" name="protocol<?php echo $index ?>" value="<?php echo htmlspecialchars($network['protocol'], ENT_QUOTES); ?>" />
+
+                  <div class="row">
+                    <div class="col-xs-4 col-md-4">Security</div>
+                    <div class="col-xs-4 col-md-4"><?php echo $network['protocol'] ?></div>
+                  </div>
+
+                  <div class="form-group">
+                    <div class="input-group col-xs-12 col-md-12">
+                      <span class="input-group-addon" id="passphrase">Passphrase</span>
+                      <?php if ($network['protocol'] === 'Open') { ?> 
+                          <input type="hidden" name="passphrase<?php echo $index ?>" value="" />--- 
+                      <?php } else { ?>
+                          <input type="password" class="form-control" aria-describedby="passphrase" name="passphrase<?php echo $index ?>" value="<?php echo $network['passphrase'] ?>" onKeyUp="CheckPSK(this, 'update<?php echo $index?>')" >
+                          <span class="input-group-btn">
+                            <button class="btn btn-default" onclick="showPassword(<?php echo $index; ?>)" type="button">Show</button>
+                          </span>
+                      <?php } ?>
+                    </div>
+                  </div>
+
+                  <div class="btn-group btn-block ">
+                    <?php if ($network['configured']) { ?>
+                        <input type="submit" class="col-xs-4 col-md-4 btn btn-warning" value="<?php echo _("Update"); ?>" id="update<?php echo $index ?>" name="update<?php echo $index ?>"<?php echo ($network['protocol'] === 'Open' ? ' disabled' : '')?> />
+                        <button type="submit" class="col-xs-4 col-md-4 btn btn-info" value="<?php echo $index?>" ><?php echo _("Connect"); ?></button>
+                    <?php } else { ?>
+                        <input type="submit" class="col-xs-4 col-md-4 btn btn-info" value="<?php echo _("Add"); ?>" id="update<?php echo $index ?>" name="update<?php echo $index ?>" <?php echo ($network['protocol'] === 'Open' ? '' : ' disabled')?> />
+                    <?php } ?>
+                        <input type="submit" class="col-xs-4 col-md-4 btn btn-danger" value="<?php echo _("Delete"); ?>" name="delete<?php echo $index ?>"<?php echo ($network['configured'] ? '' : ' disabled')?> />
+                  </div><!-- /.btn-group -->
+
+                </div><!-- /.panel-body -->
+              </div><!-- /.panel-default -->
+            </div><!-- /.col-md-6 -->
+
+            <?php $index += 1; ?>
             <?php } ?>
-            </table>
+
           </form>
         </div><!-- ./ Panel body -->
-        <div class="panel-footer"><?php echo _("<strong>Note:</strong> WEP access points appear as 'Open'. RaspAP does not currently support connecting to WEP"); ?></div>
+	<div class="panel-footer"><?php echo _("<strong>Note:</strong> WEP access points appear as 'Open'. RaspAP does not currently support connecting to WEP"); ?></div>
       </div><!-- /.panel-primary -->
     </div><!-- /.col-lg-12 -->
   </div><!-- /.row -->
 <?php
 }
 
+?>