databank-extension/scripts/html.js

252 lines
9.6 KiB
JavaScript

/**
* HTML de las tablas de los datos guardados
* @returns devuelve el HTML con las tablas de los datos guardados
*/
export function bodyHTML(){
var html=
`<div class="container nav_menu">
<div>
<ul class="nav nav-pills nav_menu_tabs" role="tablist">
<li role="presentation" class="active"><a id="aPrivate" href="#divPrivate">Archivos Privados <!--<span class="badge">42</span>--></a></li>
<li role="presentation"><a id="aShare" href="#divShare">Archivos Compartidos</a></li>
<li role="presentation"><a id="a2FA" href="#div2FA">2FA</a></li>
<!--<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>-->
</ul>
<div class = "nav_menu_botones"><button id="cerrarSesion" type="button" class="btn btn-secondary">Cerrar Sesión</button></div>
<div class = "nav_menu_botones"><button id="subirDatos" type="button" class="btn btn-success" >Subir datos</button>&nbsp</div>
<div class = "nav_menu_botones"><button type="button" id="compartirDatosButton" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Compartir</button>&nbsp</div>
<div id = "archivosCompartidosButton" class="archivosOcultos nav_menu_botones btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
ArchivosCompartidos <span class="caret"></span>
</button>
<ul id = "archivosCompartidosList" class="dropdown-menu" role="menu">
</ul>
</div>
<div id = "archivosCompartidosConmigoButton" class="archivosOcultos nav_menu_botones btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
ArchivosCompartidosConmigo <span class="caret"></span>
</button>&nbsp
<ul id = "archivosCompartidosConmigoList" class="dropdown-menu" role="menu">
</ul>
</div>
</div>
</div>
<div id="divPrivate">
<div class="container">
<div class="table-responsive">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-xs-6">
<h2><b>Usuarios</b></h2>
</div>
<div class="col-xs-6">
<button class="btn btn-success" id="añadirN" data-toggle="modal" data-target="#addU" type="submit"><i class="material-icons">&#xE147;</i> <span>Nuevo Usuario</span></button>
</div>
</div>
</div>
<table class="table table-striped table-hover" id="tablaUsuarios">
<thead>
<tr>
<th>Descripcion</th>
<th>Url</th>
<th>Usuario</th>
<th>Password</th>
<th>Acciones</th>
</tr>
</thead>
<tbody id="usuariosTable">
</tbody>
</table>
</div>
</div>
</div>
<div class="container">
<div class="table-responsive">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-xs-6">
<h2><b>Notas</b></h2>
</div>
<div class="col-xs-6">
<button class="btn btn-success" id="añadirN" data-toggle="modal" data-target="#addU" type="submit"><i class="material-icons">&#xE147;</i> <span>Nueva Nota</span></button>
</div>
</div>
</div>
<table class="table table-striped table-hover" id="tablaNotas">
<thead>
<tr>
<th>Nombre</th>
<th>Descripcion</th>
<th>Acciones</th>
</tr>
</thead>
<tbody id="notasTable">
</tbody>
</table>
</div>
</div>
</div>
<div class="container">
<div class="table-responsive">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-xs-6">
<h2><b>Tarjetas de Crédito</b></h2>
</div>
<div class="col-xs-6">
<button class="btn btn-success" id="añadirN" data-toggle="modal" data-target="#addU" type="submit"><i class="material-icons">&#xE147;</i> <span>Nueva Tarjeta de Crédito</span></button>
</div>
</div>
</div>
<table class="table table-striped table-hover" id="tablaTarjetasCredito">
<thead>
<tr>
<th>Nombre Entidad</th>
<th>Número de Tarjeta</th>
<th>Fecha de Caducidad</th>
<th>Nombre del Titular</th>
<th>Código De Seguridad</th>
<th>Acciones</th>
</tr>
</thead>
<tbody id="tarjetasTable">
</tbody>
</table>
</div>
</div>
</div>
<div class="container">
<div class="table-responsive">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-xs-6">
<h2><b>Cuentas Bancarias</b></h2>
</div>
<div class="col-xs-6">
<button class="btn btn-success" id="añadirN" data-toggle="modal" data-target="#addU" type="submit"><i class="material-icons">&#xE147;</i> <span>Nueva Cuenta Bancaria</span></button>
</div>
</div>
</div>
<table class="table table-striped table-hover" id="tablaCuentasBancarias">
<thead>
<tr>
<th>Nombre Entidad</th>
<th>IBAN</th>
<th>Usuario Banca Online</th>
<th>Contraseña Banca Online</th>
<th>Acciones</th>
</tr>
</thead>
<tbody id="cuentasTable">
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id=divShare class="archivosOcultos">
<div class="container">
<div class="table-responsive">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-xs-6">
<h2><b>Usuarios</b></h2>
</div>
<div class="col-xs-6">
<button class="btn btn-success" id="añadirN" data-toggle="modal" data-target="#addU" type="submit"><i class="material-icons">&#xE147;</i> <span>Nuevo Usuario</span></button>
</div>
</div>
</div>
<table class="table table-striped table-hover" id="tablaUsuarios">
<thead>
<tr>
<th>Descripcion</th>
<th>Url</th>
<th>Usuario</th>
<th>Password</th>
<th>Acciones</th>
</tr>
</thead>
<tbody id="usuariosTableCompartidos">
</tbody>
</table>
</div>
</div>
</div>
<div class="container">
<div class="table-responsive">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-xs-6">
<h2><b>Notas</b></h2>
</div>
<div class="col-xs-6">
<button class="btn btn-success" id="añadirN" data-toggle="modal" data-target="#addU" type="submit"><i class="material-icons">&#xE147;</i> <span>Nueva Nota</span></button>
</div>
</div>
</div>
<table class="table table-striped table-hover" id="tablaNotas">
<thead>
<tr>
<th>Nombre</th>
<th>Descripcion</th>
<th>Acciones</th>
</tr>
</thead>
<tbody id="notasTableCompartidos">
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id=div2FA class="archivosOcultos">
<div class="container" style="text-align:center">
<p style="margin-top:50px"><h2>Active y escane el código QR para aplicar el doble factor TOTP</h2></p>
<svg class="qrCode" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="qrcode"/>
</svg>
<label style="margin:40px" for="act2FA" class="btn btn-info qrCode">Activar <input type="checkbox" id="act2FA" class="badgebox"><span class="badge">&check;</span></label>
</div>
</div>
`;
return html;
}
export function bodyFA(){
let html = `<div id="Contenedor">
<div class="Icon">
<!--Icono de usuario-->
<span class="glyphicon glyphicon-user"></span>
</div>
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" name="secret" placeholder="Code TOTP" id="secret" aria-describedby="sizing-addon1" required>
</div>
<br>
<button class="btn btn-lg btn-primary btn-block btn-signup" id="checkcodeFA" type="submit">Comprobar</button>
</div>`
return html;
}