-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathandroid.html
342 lines (316 loc) · 19 KB
/
android.html
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
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Android & Windows Wi-Fi Profile Generator</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- The goal of this is simple - for the data you enter into the fields, to edit the generated XML at the bottom.
You should then be able to click the "Copy" button and paste it into a file.
This app is fully self-contained, and this code can be copied/used freely (more info below on the dependencies)
I simply ask for you to credit me if you wish, and link to my GitHub repo for this.
https://github.com/daduckMSFT/WiFiProfileGenerator
=======================================================================================
This page us using Bootstrap as the CSS framework, and some simple JQuery functions to take the input you type in and edit the text at the bottom.
Additionally, it uses a JS Framework ("Clipboard.JS" - https://clipboard.js or https://github.com/zenorocha/clipboard.js ) to copy the profile to your clipboard
While this page DOES have the framework unpacked locally, you can utilize a CDN for it - I've included it below, or more info can be found at the above GitHub link.
-->
<style>
body {
background-color: #1a1a1a;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Load clipboard.js from local repo -->
<script src="./js/clipboard.min.js"></script>
<!-- Load clipboard.js from CDN
<script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script> -->
<script>new ClipboardJS('.btn');</script>
<!-- This is what converts the SSID to Hex in the resulting profile
This function is called immediately on page load and constantly reads the values in the Wi-Fi SSID box and converts it to hex -->
<script>
/* These are ALL of the functions needed for both iOS & Windows/Android. NOTE - There is a simple "PagePlatform" variable at the top here
This is used to dictate which fields are read / receive output (eg; for the passphrase, SSID, encryption type, etc. */
/* var pagePlatform = "iOS"; */
var pagePlatform = "AndroidWindows";
function toHex(input) {
var result = "";
for (i=0; i<input.length; i++) {
hex = input.charCodeAt(i).toString(16);
result += (hex).slice(-4);
}
return result
};
function readHex() {
$( "#inputSSID" )
.keyup(function() {
var color = 'Aqua';
var value = $( this ).val();
outputvalue = toHex(value);
$( "#outputSSIDHex" )
.text( outputvalue )
.css('color', color );
});
}
var changeColor = function(desiredColor,targetElementId) {
$( targetElementId ).css('color', desiredColor);
};
var changeText = function (desiredValue,targetElementId) {
$( targetElementId ).text( desiredValue );
};
function inputText(input,targetElementId,optElementId=0) {
$( input )
.keyup(function(){
var value = $( input ).val();
changeText(value, targetElementId);
changeColor('aqua',targetElementId);
if (optElementId != 0) {
changeText(value, optElementId);
changeColor('aqua',optElementId);
};
});
};
function changeValue(targetElementId,targetElementIdValue,color,optElementId=0,optElementIdValue=0) {
var dest = document.getElementById(targetElementId);
changeColor(color,dest);
changeText(targetElementIdValue,dest);
if (optElementIdValue != 0) {
var optionalTarget = document.getElementById(optElementId);
changeText(optElementIdValue,optionalTarget);
changeColor(color,optionalTarget);};
};
function passphraseEnableDisable(EnableDisable) {
var passphraseOutput = $( '#outputPassphrase' );
var passphraseInput = $( '#inputPassphrase' );
var disabledState = passphraseInput.is( ":disabled" );
if (EnableDisable == 'disable') {
passphraseInput.prop( "value", "").prop("disabled", true);
passphraseOutput.prop ( "textContent", "");
};
if ((disabledState = true) & (EnableDisable == 'enable')) {
passphraseInput.prop( "disabled", false);
};
};
function openSecurity() {
if (pagePlatform == "iOS")
{
changeValue('outputSecurityType','None','white');
}
else if (pagePlatform == "AndroidWindows") {
changeValue('outputSecurityType','open','white','outputEncryption','none');
}
passphraseEnableDisable('disable');
}
function pageLoad(platform) {
if (platform == "iOS") {
$(document).ready(function(){
inputText("#inputSSID","#outputSSID");
inputText("#inputPassphrase","#outputPassphrase");
inputText("#inputDisplayName","#outputDisplayName","#outputBottomDisplayName");
});
}
else if (platform == "AndroidWindows") {
$(document).ready(function(){
readHex();
inputText("#inputSSID","#outputSSID","#outputNetworkName");
inputText("#inputPassphrase","#outputPassphrase");
});
}
}
</script>
<script>
/* Used to pass the platform (Android/Windows or iOS) to the "pageLoad" function.
This is by the "readHex" and "inputText" functions (Only Android/Windows use the "readHex" function). */
pageLoad(pagePlatform);
</script>
<!-- This is the parent container, that keeps everything lined up in the middle -->
<div class="container">
<main role="main" class="pb-1 pt-2">
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<span class="navbar-brand">Wi-Fi Profile Generator</span>
<ul class="navbar-nav mr-auto">
<div class="collapse navbar-collapse" id="navbarSupportedContent"></div>
<li class="nav-item">
<a class="nav-link" href="./index.html">iOS</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Android & Windows <span class="sr-only">(current)</span></a>
</li>
</ul>
<ul class="navbar-nav">
<a class="nav-item nav-link text-white font-weight-bold" href="https://github.com/daduckMSFT/WiFiProfileGenerator/" target="_blank">GitHub</a>
</ul>
</nav>
<hr />
<!-- This is the "What is this for?" box-->
<div class="card text-light bg-dark mb-3 border-secondary">
<div class="card-body">
<h3 class="card-title font-weight-bold">What is this for?</h3>
<p>If you need to configure your Android or Windows devices, using a Wi-Fi network - you can either use the GUI, or this. <br>
Sometimes the option you need isn't in the UI - so as a workaround, you can find out what the manual option is and generate it. <br>
This is meant to be a supplement to that.</p>
<hr />
<p>Both Android & Windows use the same XML format, as far as I'm aware (there might be fields that vary).
Use this as the basis, and enjoy! <br>
<p>This site will help generate a configuration profile based on the network information you provide. <br>
Using this, you can import the profile into your mobile devices (via a method such as an MDM).</p>
<p>You can see all of the modified output in the bottom as <b><span style="color:aqua">aqua</span></b> text.</p>
<hr />
<p class="font-italic">All of this is run client-side, within the browser. </p>
<hr />
<span class="font-weight-light"><p>Extra stuff: </p>
<a class="text-primary" href="https://docs.microsoft.com/en-us/windows/win32/nativewifi/wireless-profile-samples" target="_blank">Wireless profile samples</a><br>
<a class="text-primary" href="https://docs.microsoft.com/en-us/windows/win32/nativewifi/wlan-profileschema-elements" target="_blank">XML Profile Elements</a></span>
</div>
</div>
<hr />
<!-- This is the box containing the Wi-Fi network input -->
<div class="card text-light bg-dark border-secondary">
<div class="card-body">
<h5 class="card-title font-weight-bold">Fill out your Wi-Fi network details below. This only supports "Personal" connections.</h5>
<!-- This is where the Input forms begin
In essence, every field is labeled as "inputX" - where X is the property we're modifying. Do not adjust the ID's without understanding the functions at the top.
The "output" (aka, where what they put in is copied) is further in the Generated Profile section -->
<form>
<div class="form-group row">
<label for="inputSSID" class="col-sm-2 col-form-label">Wi-Fi SSID</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSSID" placeholder="Enter your Wi-Fi network's SSID">
</div>
</div>
<div class="form-group row">
<label for="inputPassphrase" class="col-sm-2 col-form-label">Pre-Shared Key/Passphrase</label>
<div class="col-sm-10">
<!-- setting the "type" to password means the browser won't reveal it, and shows the eye to reveal it if they want -->
<input type="password" class="form-control" id="inputPassphrase" placeholder="Enter passphrase" disabled>
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Security</legend>
<div class="col-sm-10">
<div class="form-check">
<!-- This is where the user can select the desired security types - Open, WEP, WPA WPA2.
WEP is disabled simply because it's terrible from a security perspective, and WPA/WPA2 both use AES as TKIP is no longer hardware accelerated. -->
<input class="form-check-input" type="radio" name="SecurityRadios" id="inputSecurityOpen" value="option1" onclick="openSecurity()" checked>
<label class="form-check-label" for="gridRadios1">
Open / None
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="SecurityRadios" id="inputSecurityWEP" value="option2" disabled>
<label class="form-check-label" for="gridRadios2">
WEP (not supported)
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="SecurityRadios" id="inputSecurityWPA" value="option3" onclick="changeValue('outputSecurityType','WPAPSK','aqua','outputEncryption','AES');passphraseEnableDisable('enable')">
<label class="form-check-label" for="gridRadios3">
WPA
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="SecurityRadios" id="inputSecurityWPA2" value="option4" onclick="changeValue('outputSecurityType','WPA2PSK','aqua','outputEncryption','AES');passphraseEnableDisable('enable')">
<label class="form-check-label" for="gridRadios4">
WPA2
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<!-- This is where the user can specify if the network is hidden or not -->
<legend class="col-form-label col-sm-2 pt-0">Hidden network?</legend>
<div class="col-sm-10">
<div class="form-check-inline">
<input class="form-check-input" type="radio" name="hiddenRadios" id="inputHiddenNo" value="option1" onclick="changeValue('outputHidden','false','white')" checked>
<label class="form-check-label" for="gridRadios1">
No
</label>
</div>
<div class="form-check-inline">
<input class="form-check-input" type="radio" name="hiddenRadios" id="inputHiddenYes" value="option2" onclick="changeValue('outputHidden','true','aqua')">
<label class="form-check-label" for="gridRadios2">
Yes
</label>
</div>
</div>
</div>
</fieldset>
<!-- Automatically Connect to the Wi-Fi? -->
<fieldset class="form-group">
<div class="row">
<!-- This is where you can specify if the device will connect to Wi-Fi automatically when in range -->
<legend class="col-form-label col-sm-2 pt-0">Automatically connect?</legend>
<div class="col-sm-10">
<div class="form-check-inline">
<input class="form-check-input" type="radio" name="AutoJoinRadios" id="inputAutoJoinYes" value="option1" onclick="changeValue('outputAutoJoin','auto','white')" checked>
<label class="form-check-label" for="gridRadios1">
Yes
</label>
</div>
<div class="form-check-inline">
<input class="form-check-input" type="radio" name="AutoJoinRadios" id="inputAutoJoinNo" value="option2" onclick="changeValue('outputAutoJoin','manual','aqua')">
<label class="form-check-label" for="gridRadios2">
No
</label>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div> <hr />
<div class="card text-light bg-dark border-secondary">
<div class="card-body">
<!-- The "Generated Profile" card at the bottom
This contains the escaped, default XML that I've started with - and after the user puts their input, it will be rendered here too.
The values are placed into span elements with specifics ID's, via the functions at the start.
This is presented in a pre-scrollable code box -->
<h4 class="card-title font-weight-bold">Generated Profile</h4>
<div class="col-auto">
<button type="button" class="btn btn-primary" data-clipboard-target="#generated_profile" id="CopyAll" active>Copy to clipboard</button>
</div>
<hr />
<!-- Since "pre" attributes retain spacing, the profile has white spaced removed so it isn't copied when the user gets it -->
<pre id="generated_profile" class="pre-scrollable text-light bg-secondary"><code><?xml version="1.0"?>
<WLANProfile xmlns="http://www.microsoft.com/networking/WLAN/profile/v1">
<name><span id="outputNetworkName">Network Name</span></name>
<SSIDConfig>
<SSID>
<hex><span id="outputSSIDHex">53534944</span></hex>
<name><span id="outputSSID">SSID</span></name>
</SSID>
<nonBroadcast><span id="outputHidden">false</span></nonBroadcast>
</SSIDConfig>
<connectionType>ESS</connectionType>
<connectionMode><span id="outputAutoJoin">auto</span></connectionMode>
<MSM>
<security>
<authEncryption>
<authentication><span id="outputSecurityType">open</span></authentication>
<encryption><span id="outputEncryption">none</span></encryption>
<useOneX>false</useOneX>
</authEncryption>
<sharedKey>
<keyType>passPhrase</keyType>
<protected>false</protected>
<keyMaterial><span id="outputPassphrase"></span></keyMaterial>
</sharedKey>
</security>
</MSM>
</WLANProfile>
</code></pre>
</div>
</div>
</main>
</div>
</body>
</html>