SliTaz Repositories

     1.1 --- a/network.cgi	Tue Jul 28 12:26:28 2015 +0200
     1.2 +++ b/network.cgi	Fri Aug 07 02:33:24 2015 +0300
     1.3 @@ -436,6 +436,59 @@
     1.4  		# Wireless connections settings
     1.5  		xhtml_header "$(_ 'Wireless connection')"
     1.6  
     1.7 +		cat <<EOT
     1.8 +<style type="text/css">
     1.9 +#connection input[type="text"], #connection input[type="password"] { width: 14rem; }
    1.10 +#connection select { width: 14.4rem; }
    1.11 +
    1.12 +#connection td { padding: 0; margin: 0; }
    1.13 +#connection [class] div {
    1.14 +	max-height: 0; overflow: hidden; padding: 0; margin: 0;
    1.15 +	-webkit-transition: all 0.5s ease-in-out;
    1.16 +	   -moz-transition: all 0.5s ease-in-out;
    1.17 +	        transition: all 0.5s ease-in-out;
    1.18 +}
    1.19 +.wep .wep div, .wpa .wpa div, .eap .eap div,
    1.20 +.eap.peap .eap1 div, .eap.tls .eap1 div, .eap.ttls .eap1 div {
    1.21 +	max-height: 2em !important;
    1.22 +}
    1.23 +
    1.24 +#shader {
    1.25 +	z-index: 100;
    1.26 +	position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    1.27 +	background-color: #000;
    1.28 +	opacity: 0.6;
    1.29 +}
    1.30 +#shader.hidden {
    1.31 +	display: none;
    1.32 +	opacity: 0;
    1.33 +}
    1.34 +
    1.35 +#popup_qr {
    1.36 +	z-index: 101;
    1.37 +	position: fixed;
    1.38 +	width: 100%;
    1.39 +	bottom: 2em;
    1.40 +	transition: all 0.5s;
    1.41 +	-webkit-transition: all 0.5s;
    1.42 +	-webkit-transition-delay: 0.3s;
    1.43 +}
    1.44 +#popup_qr_inner {
    1.45 +	display: inline-block;
    1.46 +	text-align: center;
    1.47 +	margin: 0.5em;
    1.48 +	background: #fff; color: #222;
    1.49 +	border: 0.16em solid ; border-radius: 0.5em;
    1.50 +
    1.51 +	padding: 0.5em;
    1.52 +}
    1.53 +#popup_qr.hidden {bottom: -100em; }
    1.54 +
    1.55 +#qrimg { margin: 3em 1.5em 2em 3em; }
    1.56 +</style>
    1.57 +EOT
    1.58 +
    1.59 +
    1.60  		. /etc/network.conf
    1.61  
    1.62  		start_disabled=''; stop_disabled=''
    1.63 @@ -547,7 +600,16 @@
    1.64  					</div></td>
    1.65  				</tr>
    1.66  
    1.67 -				<script type="text/javascript">
    1.68 +			</table>
    1.69 +		</form>
    1.70 +	</div>
    1.71 +	<footer>
    1.72 +		<button form="connection" type="submit" name="wifi" data-icon="ok">$(_ 'Configure')</button>
    1.73 +		<button data-icon="user" onclick="shareWiFi(); popup('popup_qr', 'show');">$(_ 'Share')</button>
    1.74 +	</footer>
    1.75 +</section>
    1.76 +
    1.77 +<script type="text/javascript">
    1.78  function wifiSettingsChange() {
    1.79  	document.getElementById('connection').className = 
    1.80  		document.getElementById('keyType').value.toLowerCase() + ' ' + 
    1.81 @@ -557,32 +619,40 @@
    1.82  document.getElementById('eap').onchange = wifiSettingsChange;
    1.83  
    1.84  document.getElementById('keyType').value = "$WIFI_KEY_TYPE"; wifiSettingsChange();
    1.85 -				</script>
    1.86  
    1.87 -				<style type="text/css">
    1.88 -#connection input[type="text"], #connection input[type="password"] { width: 14rem; }
    1.89 -#connection select { width: 14.4rem; }
    1.90 +$(cat $PANEL/lib/qr.js.include)
    1.91  
    1.92 -#connection td { padding: 0; margin: 0; }
    1.93 -#connection [class] div {
    1.94 -	max-height: 0; overflow: hidden; padding: 0; margin: 0;
    1.95 -	-webkit-transition: all 0.5s ease-in-out;
    1.96 -	   -moz-transition: all 0.5s ease-in-out;
    1.97 -	        transition: all 0.5s ease-in-out;
    1.98 +function shareWiFi() {
    1.99 +	// S=<SSID>; T={WPA|WEP|nopass}; P=<password>; H=<hidden?>
   1.100 +	// Escape ":" and ";" -> "\:" and "\;"
   1.101 +	// No harm for regular networks marked as hidden
   1.102 +	var text = "WIFI:" + 
   1.103 +		"S:" + document.getElementById('essid').value.replace(/:/g, "\\\\:").replace(/;/g, "\\\\;") + ";" +
   1.104 +		"T:" + document.getElementById('keyType').value.replace("NONE", "nopass") + ";" +
   1.105 +		"P:" + document.getElementById('password').value.replace(/:/g, "\\\\:").replace(/;/g, "\\\\;") + ";" +
   1.106 +		"H:true;" +
   1.107 +		";";
   1.108 +	document.getElementById('qrimg').title = text;
   1.109 +	qr.image({
   1.110 +		image: document.getElementById('qrimg'),
   1.111 +		value: text,
   1.112 +		size: 10
   1.113 +	});
   1.114  }
   1.115 -.wep .wep div, .wpa .wpa div, .eap .eap div,
   1.116 -.eap.peap .eap1 div, .eap.tls .eap1 div, .eap.ttls .eap1 div {
   1.117 -	max-height: 2em !important;
   1.118 -}
   1.119 -				</style>
   1.120 +</script>
   1.121  
   1.122 -			</table>
   1.123 -		</form>
   1.124 -	</div>
   1.125 -	<footer>
   1.126 -		<button form="connection" type="submit" name="wifi" data-icon="ok">$(_ 'Configure')</button>
   1.127 -	</footer>
   1.128 -</section>
   1.129 +<div id="shader" class="hidden" onclick="popup('popup_qr', 'close');"></div>
   1.130 +
   1.131 +<table id="popup_qr" class="hidden" onclick="popup('popup_qr', 'close')">
   1.132 +	<tr>
   1.133 +		<td style="text-align: center;">
   1.134 +			<div id="popup_qr_inner">
   1.135 +				<img id="qrimg" src="#" /><br/>
   1.136 +				$(_ 'Share Wi-Fi network with your friends')
   1.137 +			</div>
   1.138 +		</td>
   1.139 +	</tr>
   1.140 +</table>
   1.141  EOT
   1.142  		fi
   1.143