259 lines
8.4 KiB
HTML
259 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>puerta@nidi.to</title>
|
|
<link rel="stylesheet" href="https://cdn.rob.mx/css/fonts.css" />
|
|
<link rel="stylesheet" href="https://cdn.rob.mx/nidito/index.css" />
|
|
<link rel="stylesheet" href="/static/index.css" />
|
|
<link rel="manifest" href="/static/admin-manifest.webmanifest" />
|
|
<link rel="icon" type="image/png" href="/static/icon/128.png" sizes="128x128" />
|
|
<link rel="icon" type="image/png" href="/static/icon/512.png" sizes="512" />
|
|
|
|
<link rel="apple-touch-icon" href="/static/icon/512.png">
|
|
<link rel="apple-touch-icon" sizes="152x152" href="/static/icon/152.png">
|
|
<link rel="apple-touch-icon" sizes="384x384" href="/static/icon/384.png">
|
|
<link rel="apple-touch-icon" sizes="192x192" href="/static/icon/192.png">
|
|
<style>
|
|
#user-list {
|
|
display: grid;
|
|
padding: 0;
|
|
margin: 0;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 10px;
|
|
grid-auto-rows: minmax(100px, auto);
|
|
position: relative;
|
|
}
|
|
|
|
#main-nav a {
|
|
color: #fff
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
}
|
|
|
|
.rex-record {
|
|
font-size: .8em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header id="main-header">
|
|
<div class="container">
|
|
<h1>Puerta</h1>
|
|
<nav id="main-nav">
|
|
<a class="nav-item" href="#invitades">Invitades</a>
|
|
<a class="nav-item" href="#crear">Crear Invitade</a>
|
|
<a class="nav-item" href="#registro">Registro</a>
|
|
<button id="push-notifications">🔔</button>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<main class="container">
|
|
<section id="invitades" class="hidden">
|
|
<h2>Invitades</h2>
|
|
<ul id="user-list"></ul>
|
|
<template id="user-info-panel">
|
|
<style>
|
|
@import "/static/index.css";
|
|
|
|
:host {
|
|
border: 1px solid #c11145;
|
|
border-radius: 5px;
|
|
box-sizing: border-box;
|
|
transition: all ease-in-out .2s;
|
|
}
|
|
|
|
:host(.editing) {
|
|
position: absolute;
|
|
background-color: #f9f2f4;
|
|
float: left;
|
|
width: 100%;
|
|
box-shadow: 0px 1px 4px, 2px 2px #c11145;
|
|
}
|
|
|
|
button {
|
|
font-family: "Aestetico", sans-serif;
|
|
border-width: 2px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
header h3 {
|
|
background: #c46e87;
|
|
margin: 0;
|
|
padding: .5em .2em;
|
|
color: #fff
|
|
}
|
|
|
|
header .user-info-meta {
|
|
padding: .5em .2em;
|
|
}
|
|
|
|
header button {
|
|
float: right;
|
|
border-radius: 100%;
|
|
background-color: rgba(255,255,255,.5);
|
|
margin: .5em;
|
|
font-size: 1em;
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
}
|
|
header button:hover {
|
|
background-color: rgba(255,255,255,.8)
|
|
}
|
|
|
|
form {
|
|
padding: .5em;
|
|
}
|
|
|
|
#actions {
|
|
border-top: 1px solid #eee;
|
|
padding: .5em 0;
|
|
margin: .5em 0em;
|
|
}
|
|
|
|
.user-delete {
|
|
font-size: 1.2em;
|
|
display: inline;
|
|
}
|
|
|
|
.user-save {
|
|
float: right;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.user-info-panel {
|
|
list-style: none;
|
|
}
|
|
</style>
|
|
<li class="user-info-panel">
|
|
<header>
|
|
<button class="user-edit">✎</button>
|
|
<h3>Alguien</h3>
|
|
<div class="user-info-meta">
|
|
<code>alguien</code>
|
|
</div>
|
|
</header>
|
|
<form action="/api/user/:id" class="user-info-panel-details hidden">
|
|
<label for="edit-name">Nombre</label>
|
|
<input id="edit-name" name="name" value="" placeholder="João Gilberto" required />
|
|
|
|
<label for="edit-edit-greeting">Saludo</label>
|
|
<input id="edit-greeting" name="greeting" placeholder="Olá Joãzinho!" />
|
|
|
|
<label for="edit-password">Password</label>
|
|
<input id="edit-password" type="password" name="password" />
|
|
|
|
<label for="edit-schedule">Horarios</label>
|
|
<input id="edit-schedule" type="text" name="schedule" placeholder="days=1-5 hours=8-20:35" autocorrect="off"/>
|
|
|
|
<label for="edit-expires">Expires</label>
|
|
<input id="edit-expires" type="datetime-local" name="expires" placeholder="2023-01-01T00:00:00Z" />
|
|
|
|
<label for="edit-ttl">TTL</label>
|
|
<input id="edit-max_ttl" type="text" name="max_ttl" placeholder="30d" autocorrect="off"/>
|
|
|
|
<div>
|
|
<input id="edit-is_admin" type="checkbox" name="is_admin" /><label for="edit-admin">Admin?</label>
|
|
</div>
|
|
|
|
<div>
|
|
<input id="edit-second_factor" type="checkbox" name="second_factor" /><label for="edit-second_factor">Requiere 2FA?</label>
|
|
</div>
|
|
|
|
<div>
|
|
<input id="edit-receives_notifications" type="checkbox" name="receives_notifications" /><label for="edit-receives_notifications">Recibe Notificaciones?</label>
|
|
</div>
|
|
|
|
<div id="actions">
|
|
<button class="user-delete">Eliminar</button>
|
|
<button class="user-save">Guardar cambios</button>
|
|
</div>
|
|
</form>
|
|
</li>
|
|
</template>
|
|
</section>
|
|
|
|
<section id="crear" class="hidden">
|
|
<h2>Crear Invitade</h2>
|
|
<form id="create-user" method="post" action="/api/user">
|
|
<label for="user">Handle</label>
|
|
<input name="handle" placeholder="joao" autocorrect="off" required />
|
|
|
|
<label for="name">Nombre</label>
|
|
<input name="name" placeholder="João Gilberto" required />
|
|
|
|
<label for="greeting">Saludo</label>
|
|
<input name="greeting" placeholder="Olá Joãzinho!" />
|
|
|
|
<label for="password">Password</label>
|
|
<input type="password" name="password" required />
|
|
|
|
<label for="schedule">Horarios</label>
|
|
<input type="text" name="schedule" placeholder="days=1-5 hours=8-20:35" autocorrect="off"/>
|
|
|
|
<label for="expires">Expires</label>
|
|
<input type="datetime-local" name="expires" placeholder="2023-01-01T00:00:00Z" />
|
|
|
|
<label for="max_ttl">TTL</label>
|
|
<input type="text" name="max_ttl" placeholder="30d" autocorrect="off"/>
|
|
|
|
<div>
|
|
<input type="checkbox" name="is_admin" /><label for="is_admin">Admin?</label>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="checkbox" name="second_factor" /><label for="second_factor">Requiere 2FA?</label>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="checkbox" name="receives_notifications" /><label for="receives_notifications">Recibe Notificaciones?</label>
|
|
</div>
|
|
|
|
<button id="create-user-submit" type="submit">Crear</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section id="registro" class="hidden">
|
|
<h2>Entradas recientes</h2>
|
|
<table>
|
|
<colgroup>
|
|
<col span="1" style="width: 10%;">
|
|
<col span="1" style="width: 15%;">
|
|
<col span="1" style="width: 5%;">
|
|
<col span="1" style="width: 5%;">
|
|
<col span="1" style="width: 15%;">
|
|
<col span="1" style="width: 50%;">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th>ts</th>
|
|
<th>nombre</th>
|
|
<th>status</th>
|
|
<th>2fa</th>
|
|
<th>ip</th>
|
|
<th>ua</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="rex-records">
|
|
</tbody>
|
|
</table>
|
|
<template id="rex-record">
|
|
<style>
|
|
@import "/static/index.css";
|
|
</style>
|
|
|
|
</template>
|
|
</section>
|
|
</main>
|
|
|
|
<script type="module" src="https://unpkg.com/@github/webauthn-json@2.0.2/dist/esm/webauthn-json.browser-ponyfill.js"></script>
|
|
<script>window._PushKey = "$PUSH_KEY$"</script>
|
|
<script type="module" src="/static/admin.js"></script>
|
|
</body>
|
|
</html>
|