Skip to content

Commit

Permalink
Refactor bsserv-demo, upgrade to riot.js 3.11, new bs server cfg UI #374
Browse files Browse the repository at this point in the history
  • Loading branch information
@sbernard31
sbernard31 committed Aug 16, 2018
1 parent cb4419c commit 251c22b
Show file tree
Hide file tree
Showing 11 changed files with 6,408 additions and 5,297 deletions.
4 changes: 3 additions & 1 deletion ...er-demo/src/main/java/org/eclipse/leshan/server/bootstrap/demo/servlet/ServerServlet.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,9 @@ protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws Se
resp.setStatus(HttpServletResponse.SC_OK);
resp.setContentType("application/json");
resp.getOutputStream()
.write(String.format("{\"unsecuredEndpointPort\":\"%s\"}", server.getUnsecuredAddress().getPort())
.write(String
.format("{ \"securedEndpointPort\":\"%s\", \"unsecuredEndpointPort\":\"%s\"}",
server.getSecuredAddress().getPort(), server.getUnsecuredAddress().getPort())
.getBytes(StandardCharsets.UTF_8));
}
}
3 changes: 3 additions & 0 deletions leshan-bsserver-demo/src/main/resources/webapp/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
<link rel="icon" type="image/png" href="img/fav_icon.png" />

<script src="tag/bootstrap.tag" type="riot/tag"></script>
<script src="tag/securityconfig-input.tag" type="riot/tag"></script>
<script src="tag/psk-input.tag" type="riot/tag"></script>
<script src="tag/x509-input.tag" type="riot/tag"></script>
<script src="tag/bootstrap-modal.tag" type="riot/tag"></script>

<script src="js/bsconfigstore.js"></script>
Expand Down
285 changes: 62 additions & 223 deletions leshan-bsserver-demo/src/main/resources/webapp/tag/bootstrap-modal.tag
View file

Large diffs are not rendered by default.

36 changes: 25 additions & 11 deletions leshan-bsserver-demo/src/main/resources/webapp/tag/bootstrap.tag
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
</tr>
</thead>
<tbody>
<tr each={ endpoint, config in configs }>
<tr each={ config, endpoint in configs }>
<td>{ endpoint }</td>
<td>
<div each={ config.bs }>
Expand Down Expand Up @@ -62,35 +62,49 @@
<div id='modal'></div>

<script>
var self = this;
// Tag definition
var tag = this;
// internal state;
tag.remove = remove;
tag.showModal = showModal;
tag.toAscii = toAscii;
tag.toHex = toHex;

this.on('mount',function(){
// Tag initilialization
tag.on('mount',function(){
bsConfigStore.init();
});

bsConfigStore.on("changed", function(configs){
self.configs = configs;
self.update();
tag.configs = configs;
tag.update();
});

showModal(){
riot.mount('div#modal', 'bootstrap-modal');
// Tag functions
function showModal(){
$.get('api/server/endpoint', function(data) {
riot.mount('div#modal', 'bootstrap-modal', {server:data});
}).fail(function(xhr, status, error){
var err = "Unable to get the server info";
console.error(err, status, error, xhr.responseText);
alert(err + ": " + xhr.responseText);
});

};

remove(e){
function remove(e){
bsConfigStore.remove(e.item.endpoint);
}

// utils
toAscii(byteArray){
function toAscii(byteArray){
var ascii = [];
for (var i in byteArray){
ascii[i] = String.fromCharCode(byteArray[i]);
}
return ascii.join('');
};

toHex(byteArray){
function toHex(byteArray){
var hex = [];
for (var i in byteArray){
hex[i] = byteArray[i].toString(16).toUpperCase();
Expand Down
81 changes: 81 additions & 0 deletions leshan-bsserver-demo/src/main/resources/webapp/tag/psk-input.tag
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<psk-input>
<!-- PSK inputs -->
<div class={ form-group:true, has-error: pskId.error }>
<label for="pskId" class="col-sm-4 control-label">Identity</label>
<div class="col-sm-8">
<textarea class="form-control" style="resize:none" rows="3" id="pskId" ref="pskId" oninput={validate_pskId} onblur={validate_pskId}></textarea>
<p class="help-block" if={pskId.required} >The PSK identity is required</p>
<p class="help-block" if={pskId.toolong} >The PSK identity is too long</p>
</div>
</div>

<div class={ form-group:true, has-error: pskVal.error }>
<label for="pskVal" class="col-sm-4 control-label">Key</label>
<div class="col-sm-8">
<textarea class="form-control" style="resize:none" rows="3" id="pskVal" ref="pskVal" oninput={validate_pskVal} onblur={validate_pskVal}></textarea>
<p class="text-right text-muted small" style="margin:0">Hexadecimal format</p>
<p class="help-block" if={pskVal.required}>The pre-shared key is required</p>
<p class="help-block" if={pskVal.nothexa}>Hexadecimal format is expected</p>
<p class="help-block" if={pskVal.toolong}>The pre-shared key is too long</p>
</div>
</div>

<script>
// Tag definition
var tag = this;
// Tag Params
tag.onchange = opts.onchange;
// Tag API
tag.has_error = has_error;
tag.get_value = get_value
// Tag intenal state
tag.pskId={};
tag.pskVal={};
tag.validate_pskId = validate_pskId;
tag.validate_pskVal = validate_pskVal;

// Tag functions
function validate_pskId(e){
var str = tag.refs.pskId.value;
tag.pskId.error = false;
tag.pskId.required = false;
tag.pskId.toolong = false;
if (!str || 0 === str.length){
tag.pskId.error = true;
tag.pskId.required = true;
}else if (str.length > 128){
tag.pskId.error = true;
tag.pskId.toolong = true;
}
tag.onchange();
}

function validate_pskVal(e){
var str = tag.refs.pskVal.value;
tag.pskVal.error = false;
tag.pskVal.required = false;
tag.pskVal.toolong = false;
tag.pskVal.nothexa = false;
if (!str || 0 === str.length){
tag.pskVal.error = true;
tag.pskVal.required = true;
}else if (str.length > 128){
tag.pskVal.error = true;
tag.pskVal.toolong = true;
}else if (! /^[0-9a-fA-F]+$/i.test(str)){
tag.pskVal.error = true;
tag.pskVal.nothexa = true;
}
tag.onchange();
}

function has_error(){
return typeof tag.pskId.error === "undefined" || tag.pskId.error || typeof tag.pskVal.error === "undefined" || tag.pskVal.error;
}

function get_value(){
return { id:tag.refs.pskId.value, key:tag.refs.pskVal.value };
}
</script>
</psk-input>

109 changes: 109 additions & 0 deletions leshan-bsserver-demo/src/main/resources/webapp/tag/securityconfig-input.tag
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<securityconfig-input>
<!-- Server URI -->
<div class="form-group" >
<label for="uri" class="col-sm-4 control-label">LWM2M Server URL</label>
<div class="col-sm-8">
<input class="form-control" id="uri" ref="uri" placeholder={default_uri()} disabled={disable.uri}>
</div>
</div>

<!-- Security Mode -->
<div class="form-group">
<label for="secMode" class="col-sm-4 control-label">Security mode</label>
<div class="col-sm-8">
<select class="form-control" id="secMode" ref="secMode">
<option value="no_sec" show={secmode.no_sec} >No Security</option>
<option value="psk" show={secmode.psk} >Pre-Shared Key</option>
<!-- option value="rpk" show= {secmode.rpk} >Raw Public Key</option-->
<option value="x509" show={secmode.x509} >X.509 Certificate</option>
</select>
</div>
</div>

<!-- PSK -->
<div if={ refs.secMode.value == "psk" }>
<psk-input ref="psk" onchange={onchange}></psk-input>
</div>

<!-- X09 -->
<div if={ refs.secMode.value == "x509" } >
<x509-input ref="x509" onchange={onchange}></x509-input>
</div>

<script>
// Tag definition
var tag = this;
// Tag Params
tag.secmode = opts.secmode || {no_sec:true};
tag.disable = opts.disable || {};
tag.onchange = opts.onchange;
tag.securi = opts.securi || "";
tag.unsecuri = opts.unsecuri || "";
// Tag API
tag.has_error = has_error;
tag.get_value = get_value;
// Internal state
tag.default_uri = default_uri;

// Tag Functions
function default_uri() {
if (!tag.refs.secMode || tag.refs.secMode.value == "no_sec")
return opts.unsecuri;
else
return opts.securi;
}

function has_error() {
return tag.refs.secMode.value === "psk" && tag.refs.psk.has_error()
|| tag.refs.secMode.value === "x509" && tag.refs.x509.has_error();
}

function get_value() {
var config = {};

// set URI
if (!tag.refs.uri.value || tag.refs.uri.value.length == 0) {
config.uri = tag.default_uri();
} else {
config.uri = tag.refs.uri.value;
}

// set Secure mode
config.secmode = tag.refs.secMode.value.toUpperCase();

// set Credentials
config.id = [];
config.key = [];
config.serverKey = [];
if (config.secmode === "PSK"){
var psk = tag.refs.psk.get_value()
config.id = fromAscii(psk.id);
config.key = fromHex(psk.key);
}else if(config.secmode === "X509"){
var x509 = tag.refs.x509.get_value();
config.id = fromHex(x509.cert);
config.key = fromHex(x509.key);
config.serverKey = fromHex(x509.servCert);
}

return config;
}

// Utils
function fromAscii(ascii){
var bytearray = [];
for (var i in ascii){
bytearray[i] = ascii.charCodeAt(i);
}
return bytearray;
};

function fromHex(hex){
var bytes = [];
for(var i=0; i< hex.length-1; i+=2) {
bytes.push(parseInt(hex.substr(i, 2), 16));
}
return bytes;
};
</script>
</securityconfig-input>
101 changes: 101 additions & 0 deletions leshan-bsserver-demo/src/main/resources/webapp/tag/x509-input.tag
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<x509-input>
<!-- X.509 inputs -->
<div class={ form-group:true, has-error: x509Cert.error }>
<label for="x509Cert" class="col-sm-4 control-label">Client certificate</label>
<div class="col-sm-8">
<textarea class="form-control" style="resize:none" rows="3" id="x509Cert" ref="x509Cert" oninput={validate_x509Cert} onblur={validate_x509Cert}></textarea>
<p class="text-right text-muted small" style="margin:0">Hexadecimal format</p>
<p class="help-block" if={x509Cert.required}>The client certificate is required</p>
<p class="help-block" if={x509Cert.nothexa}>Hexadecimal format is expected</p>
</div>
</div>
<div class={ form-group:true, has-error: x509PrivateKey.error }>
<label for="x509PrivateKey" class="col-sm-4 control-label">Client private key</label>
<div class="col-sm-8">
<textarea class="form-control" style="resize:none" rows="3" id="x509PrivateKey" ref="x509PrivateKey" oninput={validate_x509PrivateKey} onblur={validate_x509PrivateKey}></textarea>
<p class="text-right text-muted small" style="margin:0">Hexadecimal format</p>
<p class="help-block" if={x509PrivateKey.required}>The client private key is required</p>
<p class="help-block" if={x509PrivateKey.nothexa}>Hexadecimal format is expected</p>
</div>
</div>
<div class={ form-group:true, has-error: x509ServerCert.error }>
<label for="x509ServerCert" class="col-sm-4 control-label">Server certificate</label>
<div class="col-sm-8">
<textarea class="form-control" style="resize:none" rows="3" id="x509ServerCert" ref="x509ServerCert" oninput={validate_x509ServerCert} onblur={validate_x509ServerCert}></textarea>
<p class="text-right text-muted small" style="margin:0">Hexadecimal format</p>
<p class="help-block" if={x509ServerCert.required}>The server certificate is required</p>
<p class="help-block" if={x509ServerCert.nothexa}>Hexadecimal format is expected</p>
</div>
</div>

<script>
// Tag definition
var tag = this;
// Tag Params
tag.onchange = opts.onchange;
// Tag API
tag.has_error = has_error;
tag.get_value = get_value
// Tag intenal state
tag.x509Cert = {};
tag.x509PrivateKey = {};
tag.x509ServerCert = {};
tag.validate_x509Cert = validate_x509Cert;
tag.validate_x509PrivateKey = validate_x509PrivateKey;
tag.validate_x509ServerCert = validate_x509ServerCert;

// Tag functions
function validate_x509Cert(){
var str = tag.refs.x509Cert.value;
tag.x509Cert.error = false;
tag.x509Cert.required = false;
tag.x509Cert.nothexa = false;
if (!str || 0 === str.length){
tag.x509Cert.error = true;
tag.x509Cert.required = true;
}else if (! /^[0-9a-fA-F]+$/i.test(str)){
tag.x509Cert.error = true;
tag.x509Cert.nothexa = true;
}
opts.onchange();
}

function validate_x509PrivateKey(){
var str = tag.refs.x509PrivateKey.value;
tag.x509PrivateKey.error = false;
tag.x509PrivateKey.required = false;
tag.x509PrivateKey.nothexa = false;
if (!str || 0 === str.length){
tag.x509PrivateKey.error = true;
tag.x509PrivateKey.required = true;
}else if (! /^[0-9a-fA-F]+$/i.test(str)){
tag.x509PrivateKey.error = true;
tag.x509PrivateKey.nothexa = true;
}
opts.onchange();
}

function validate_x509ServerCert(){
var str = tag.refs.x509ServerCert.value;
tag.x509ServerCert.error = false;
tag.x509ServerCert.required = false;
tag.x509ServerCert.nothexa = false;
if (!str || 0 === str.length){
tag.x509ServerCert.error = true;
tag.x509ServerCert.required = true;
}else if (! /^[0-9a-fA-F]+$/i.test(str)){
tag.x509ServerCert.error = true;
tag.x509ServerCert.nothexa = true;
}
opts.onchange();
}

function has_error(){
return typeof tag.x509Cert.error === "undefined" || x509Cert.error || typeof x509PrivateKey.error === "undefined" || x509PrivateKey.error || typeof x509ServerCert.error === "undefined" || x509ServerCert.error;
}

function get_value(){
return { cert:tag.refs.x509Cert.value, key:tag.refs.x509PrivateKey.value, servCert:tag.refs.x509ServerCert.value };
}
</script>
</x509-input>
Loading

0 comments on commit 251c22b

Please sign in to comment.