Add wifi params screen for friends

sources/public/css/style.css

@@ -75,3 +75,68 @@ div#saveconfirmation div#confirm {
   margin: 15px 0 0 0;
   border: 1px solid #F5E79E;
 }
+
+div#wifiparty_screen {
+  top: 0;
+  left: 0;
+  display: none;
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  z-index: 998;
+  background-color: #fff;
+  text-align: center;
+}
+
+div#wifiparty_screen div.btn-group {
+  display: block;
+  margin: 5px;
+  opacity: 0.3;
+}
+
+div#wifiparty_screen div.btn-group:hover {
+  opacity: 0.7;
+}
+
+div#wifiparty_ssid_part {
+  background: #5CB85C;
+  color: #fff;
+}
+
+div#wifiparty_ssid_part div.btn-group {
+  float: left;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  opacity: 0.2;
+}
+
+div#wifiparty_ssid_part div.btn-group:hover {
+  opacity: 0.8;
+}
+
+span#wifiparty_ssid {
+  font-size: 70px;
+}
+
+div#wifiparty_passphrase {
+  clear: both;
+  font-size: 140px;
+  font-style: italic;
+  margin: 50px 20px;
+  word-wrap: break-word;
+  line-height: 0.9;
+}
+
+div#wifiparty_passphrase span.passdigit {
+  color: #428BCA;
+}
+
+div#wifiparty_passphrase span.passother {
+  color: #D9534F;
+}
+
+div#wifiparty_passphrase span.passspace {
+  color: #CCC;
+}

sources/public/js/custom.js

@@ -77,4 +77,34 @@ $(document).ready(function() {
       });
     }
   });
+
+  $('#wifiparty').click(function() {
+    $('#wifiparty_screen').show('slow');
+  });
+
+  $('#wifiparty_zoomin_ssid').mousedown(function() {
+    $('#wifiparty_ssid').css('fontSize', (parseInt($('#wifiparty_ssid').css('fontSize')) + 5) + "px");
+  });
+
+  $('#wifiparty_zoomout_ssid').mousedown(function() {
+    $('#wifiparty_ssid').css('fontSize', (parseInt($('#wifiparty_ssid').css('fontSize')) - 5) + "px");
+  });
+
+  $('#wifiparty_zoomin_passphrase').mousedown(function() {
+    $('#wifiparty_passphrase').css('fontSize', (parseInt($('#wifiparty_passphrase').css('fontSize')) + 7) + "px");
+  });
+
+  $('#wifiparty_zoomout_passphrase').mousedown(function() {
+    $('#wifiparty_passphrase').css('fontSize', (parseInt($('#wifiparty_passphrase').css('fontSize')) - 7) + "px");
+  });
+
+  $('#wifiparty_close').click(function() {
+    $('#wifiparty_screen').hide();
+  });
+});
+
+$(document).keydown(function(e) {
+  if(e.keyCode == 27) {
+    $('#wifiparty_close').click();
+  }
 });

sources/views/settings.html.php

@@ -17,6 +17,31 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
+<div id="wifiparty_screen">
+<div id="wifiparty_ssid_part">
+  <div class="btn-group" role="group">
+    <button type="button" class="btn btn-default" id="wifiparty_close"><span class="glyphicon glyphicon-eye-close"></span></button>
+    <button type="button" class="btn btn-default" id="wifiparty_zoomin_ssid"><span class="glyphicon glyphicon-zoom-in"></span></button>
+    <button type="button" class="btn btn-default" id="wifiparty_zoomout_ssid"><span class="glyphicon glyphicon-zoom-out"></span></button>
+  </div>
+
+  <span id="wifiparty_ssid"><span class="glyphicon glyphicon-signal"></span> <?= $wifi_ssid ?></span>
+</div>
+
+<div class="btn-group" role="group">
+  <button type="button" class="btn btn-default" id="wifiparty_zoomin_passphrase"><span class="glyphicon glyphicon-zoom-in"></span></button>
+  <button type="button" class="btn btn-default" id="wifiparty_zoomout_passphrase"><span class="glyphicon glyphicon-zoom-out"></span></button>
+</div>
+
+<div id="wifiparty_passphrase"><?php
+  $pw = preg_replace('/[^0-9a-z ]/i', '<span-class="passother">$0</span>', $wifi_passphrase);
+  $pw = preg_replace('/\d/', '<span-class="passdigit">$0</span>', $pw);
+  $pw = preg_replace('/ /', '<span class="passspace">&#x25AE;</span>', $pw);
+  $pw = preg_replace('/span-class/', 'span class', $pw);
+  echo $pw;
+?></div>
+</div>
+
 <h2><?= T_("Wifi Hotspot Configuration") ?></h2>
 <?php if($faststatus): ?>
   <span class="label label-success" data-toggle="tooltip" data-title="<?= T_('This is a fast status. Click on More details to show the complete status.') ?>"><?= T_('Running') ?></span>
@@ -53,8 +78,9 @@
   
           <div class="form-group">
             <label for="wifi_passphrase" class="col-sm-3 control-label"><?= T_('Password (WPA2)') ?></label>
-            <div class="col-sm-9">
+            <div class="input-group col-sm-9" style="padding: 0 15px">
               <input type="text" data-toggle="tooltip" data-title="<?= T_('At least 8 characters') ?>" class="form-control" name="wifi_passphrase" id="wifi_passphrase" placeholder="VhegT8oev0jZI" value="<?= $wifi_passphrase ?>" />
+              <a class="btn input-group-addon" id="wifiparty" data-toggle="tooltip" data-title="<?= T_('Show to your friends how to access to your hotspot') ?>"><span class="glyphicon glyphicon-fullscreen"></span></a>
             </div>
           </div>