qifi/index.html at gh-pages · Fry-kun/qifi

History

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

<!DOCTYPE html>

<html>

<head>

<title>pure JS WiFi QR Code Generator</title>

<!--[if IE]>

<![endif]-->

<style>

body {

padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */

}

</style>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</button>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">History <b class="caret"></b></a>

</ul>

</li>

</ul>

</div>

</div>

<div class="page-header"><h1 id="title">pure JS WiFi QR Code Generator</h1></div>

<p>

<label class="pull-left" for="hidden">Hidden:</label>

</p>

<p>

<label for="enc">Encryption:</label>

</select>

</p>

<label class="pull-left" for="display-key">display key:</label>

</p>

<p>

<button id="generate" class="btn btn-primary">Generate!</button>

<a href="#" id="export" class="btn" target="_blank" data-toggle="tooltip" title="Export the QR code as a PNG.">Export!</a>

</p>

</form>

</section>

<div class="page-header"><h1 class="anchor">About</h1></div>

<p>

Ever wanted to create a cool QR code for your guests? But never wanted to type in your WiFi credentials into a form that submits them to a remote webserver to render the QR code? <i>QiFi</i> for the rescue! It will render the code in your browser, on your machine, so the WiFi stays as secure as it was before (read the code if you do not trust text on the internet :-))!

</p>

<p>

If you use the Save-button to store a code, this is still secure, as the data is stored in HTML5 localStorage and is never transmitted to the server (in contrast to cookie-based solutions).

</p>

<p>

Don't trust your browser either? Just pipe the string

through the QR code generator of your choice after <a href="http://code.google.com/p/zxing/wiki/BarcodeContents#Wifi_Network_config_(Android)">reading the documentation</a>.

</p>

<h2>Supported Scanners</h2>

<p>

<a href="https://play.google.com/store/apps/details?id=com.google.zxing.client.android">Barcode Scanner</a> from ZXing.

</p>

<p>

Every other Android Barcode Scanner based on the <a href="https://code.google.com/p/zxing/">ZXing library</a>.

</p>

<p>

<a href="http://maemo.org/packages/view/mbarcode/">mbarcode</a> with the <a href="http://maemo.org/packages/view/mbarcode-plugin-wifi/">mbarcode wifi plugin</a> on Maemo 5.

</p>

<p>

<a href="https://itunes.apple.com/app/qr-reader-for-iphone/id368494609">QR Reader for iPhone</a> from TapMedia. Please note: Due to iOS design, Apps cannot modify WiFi settings directly and you'll have to copy&paste the details. The only alternative would be downloading a mobile profile from the Internet, but that would mean leaking your credentials to a third-party.

</p>

<p>

Every other QR scanner out there should be able to scan the code too, but probably won't interpret it as intended. If your scanner supports WiFi QR codes, please send me a mail!

</p>

</section>

<div class="page-header"><h1 class="anchor">Contact</h1></div>

<p>QiFi was written by <a href="https://www.die-welt.net">Evgeni Golov</a>, using <a href="http://jquery.com/">jQuery</a>, <a href="http://jeromeetienne.github.io/jquery-qrcode/">jQuery QRCode</a>, <a href="http://yckart.github.io/jquery.storage.js/">jQuery Storage</a> and <a href="http://twitter.github.io/bootstrap">Twitter Bootstrap</a>.</p>

<p>If you have any comments, suggestions, bugs or complaints: please write to: <a href="mailto:evgeni+qifi@golov.de">evgeni+qifi@golov.de</a>.</p>

</section>

<a href="https://github.com/evgeni/qifi">Fork me on GitHub</a>

</div>

<img src="qifi.png" alt="qifi logo"/> by <a href="https://github.com/evgeni">@evgeni</a><br />

</div>

</footer>

function escape_string (string) {

var to_escape = ['\\', ';', ',', ':', '"'];

var hex_only = /^[0-9a-f]+$/i;

var output = "";

for (var i=0; i<string.length; i++) {

if($.inArray(string[i], to_escape) != -1) {

output += '\\'+string[i];

}

else {

output += string[i];

}

if (hex_only.test(output)) {

output = '"'+output+'"';

}

return output;

};

function generate () {

var ssid = $('#ssid').val();

var hidden = $('#hidden').is(':checked');

var enc = $('#enc').val();

var key = $('#key').val();

// http://code.google.com/p/zxing/wiki/BarcodeContents#Wifi_Network_config_(Android)

var qrstring = 'WIFI:S:'+escape_string(ssid)+';T:'+enc+';P:'+escape_string(key)+';';

if (hidden) {

qrstring += 'H:true';

}

qrstring += ';';

$('#qrcode').empty();

$('#qrcode').qrcode(qrstring);

$('#showssid').text('SSID: '+ssid);

$('#save').show();

var canvas = $('#qrcode canvas');

if (canvas.length == 1) {

var data = canvas[0].toDataURL('image/png');

var e = $('#export');

e.attr('href', data);

e.attr('download', ssid+'-qrcode.png');

// e.show() sets display:inline, but we need inline-block

e.css('display', 'inline-block');

}

};

function save () {

var ssid = $('#ssid').val();

if (!ssid) return;

var hidden = $('#hidden').is(':checked');

var enc = $('#enc').val();

var key = $('#key').val();

var storage = $.localStorage('qificodes');

if (!storage) storage = {};

storage[ssid] = {'hidden': hidden, 'enc': enc, 'key': key};

$.localStorage('qificodes', storage);

loadhistory();

};

function load(ssid) {

var storage = $.localStorage('qificodes');

if (ssid in storage) {

$('#ssid').val(ssid);

$('#enc').val(storage[ssid]['enc']);

$('#key').val(storage[ssid]['key']);

$('#hidden').prop('checked', storage[ssid]['hidden']);

generate();

}

};

function loadhistory () {

var storage = $.localStorage('qificodes');

if (storage) {

var history = $('#history-drop ul.dropdown-menu');

var ssids = Object.keys(storage);

history.empty();

for (var i=0; i<ssids.length; i++) {

history.append('<li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="history-item">'+ssids[i]+'</a></li>');

}

history.append('<li role="presentation" class="divider"></li>');

history.append('<li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="history-clear">clear history</a></li>');

history.on('click', 'a.history-item', function(e) {

e.preventDefault();

load($(this).text());

});

history.on('click', 'a.history-clear', function(e) {

e.preventDefault();

clearhistory();

});

$('#history-drop').show();

}

};

function clearhistory () {

$.localStorage('qificodes', null);

$('#history-drop').hide();

};

$(document).ready(function(){

$('#form').submit(function() {

generate();

return false;

});

$('#save').click(function() {

save();

});

$('#display-key').change(function() {

if ($(this).is(':checked')) {

$('#key').attr('type', 'text');

}

else {

$('#key').attr('type', 'password');

}

});

$('#enc').change(function() {

if($(this).val() != 'nopass') {

$('#key-p').show();

$('#key').attr('required','required');

}

else {

$('#key-p').hide();

$('#key').removeAttr('required');

}

});

$('#form').tooltip({

selector: "[data-toggle=tooltip]"

});

loadhistory();

});

</script>

</body>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

index.html

index.html

Files

index.html

Latest commit

History

index.html

File metadata and controls