mStream/webapp/qr/index.html
IrosTheBeggar 478112d087 move lib
2021-01-20 00:03:11 -05:00

115 lines
3.8 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>QR Tool</title>
<meta name="referrer" content="no-referrer" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="apple-touch-icon" sizes="180x180" href="../assets/fav/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../assets/fav/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../assets/fav/favicon-16x16.png">
<link rel="manifest" href="../assets/fav/site.webmanifest">
<link rel="mask-icon" href="../assets/fav/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="../assets/fav/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="../assets/fav/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<script src="../assets/js/lib/qr.js"></script>
<script src="../assets/js/lib/materialize.js"></script>
<script src="../assets/js/lib/jwt-decode.js"></script>
<link rel="stylesheet" href="../assets/css/materialize.css">
<style>
.c1 {
max-width: 500px !important;
}
.c2 {
max-width: 800px !important;
}
</style>
</head>
<body>
<div class="container c1">
<div id="mobile-qr-code"></div>
</div>
<div class="container c2">
<form id="qr-form" onsubmit="submitForm()">
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<div class="row">
<div class="input-field col s12 m6">
<input onfocusout="run()" id="server-url" type="text">
<label>Server Url</label>
</div>
<div class="input-field col s12 m6">
<input onfocusout="run()" id='server-name' type="text">
<label>Server Name</label>
</div>
<div class="input-field col s12 m6">
<input onfocusout="run()" id='server-username' type="text">
<label>Username</label>
</div>
<div class="input-field col s12 m6">
<input onfocusout="run()" id='server-password' type="text">
<label>Password</label>
</div>
</div>
</div>
<div class="card-action">
<button class="btn waves-effect waves-light" type="submit" name="action">
Generate QR Code
</button>
</div>
</div>
</div>
</div>
<!-- <button type="submit" class="mui-btn mui-btn--primary">Submit</button> -->
</form>
</div>
<script>
const token = localStorage.getItem("token");
if(token){
try{
const decoded = jwt_decode(token);
document.getElementById('server-username').value = decoded.username;
}catch(err) {
console.log('TOKEN DECODING ERROR');
console.log(err);
}
}
// Setup Form
document.getElementById('server-url').value = window.location.origin;
M.updateTextFields();
function run() {
const url = document.getElementById('server-url').value;
const name = document.getElementById('server-name').value;
const user = document.getElementById('server-username').value;
const pass = document.getElementById('server-password').value;
const returnThis = '|' + url + '|' + user + '|' + pass + '|' + name;
const QRC = qrcodegen.QrCode;
const qr0 = QRC.encodeText(returnThis, QRC.Ecc.MEDIUM);
const svg = qr0.toSvgString(2);
document.getElementById('mobile-qr-code').innerHTML = svg;
}
run();
function submitForm() {
event.preventDefault();
run();
}
</script>
</body>
</html>