puerta/internal/server/admin.html

259 lines
8.5 KiB
HTML
Raw Permalink Normal View History

<!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, viewport-fit=cover" />
<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" />
2023-04-16 21:17:36 +00:00
<link rel="manifest" href="/static/admin-manifest.webmanifest" />
2023-04-16 23:03:18 +00:00
<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">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
2023-01-03 07:40:38 +00:00
<style>
#user-list {
2023-01-04 04:21:49 +00:00
display: grid;
2023-01-03 07:40:38 +00:00
padding: 0;
margin: 0;
2023-01-04 04:21:49 +00:00
grid-template-columns: repeat(3, 1fr);
gap: 10px;
grid-auto-rows: minmax(100px, auto);
position: relative;
2023-01-03 07:40:38 +00:00
}
#main-nav a {
color: #fff
}
2023-01-04 04:21:49 +00:00
table {
width: 100%;
2023-01-03 07:40:38 +00:00
}
2023-01-04 04:21:49 +00:00
.rex-record {
font-size: .8em;
2023-01-03 07:40:38 +00:00
}
</style>
</head>
<body>
<header id="main-header">
<div class="container">
<h1>Puerta</h1>
2023-01-03 07:40:38 +00:00
<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>
2023-04-16 21:17:36 +00:00
<button id="push-notifications">🔔</button>
2023-01-03 07:40:38 +00:00
</nav>
</div>
</header>
<main class="container">
2023-01-03 07:40:38 +00:00
<section id="invitades" class="hidden">
<h2>Invitades</h2>
<ul id="user-list"></ul>
<template id="user-info-panel">
<style>
@import "/static/index.css";
2023-01-04 04:21:49 +00:00
: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;
}
2023-01-03 07:40:38 +00:00
.user-info-panel {
list-style: none;
}
</style>
<li class="user-info-panel">
<header>
2023-01-04 04:21:49 +00:00
<button class="user-edit"></button>
2023-01-03 07:40:38 +00:00
<h3>Alguien</h3>
2023-01-04 04:21:49 +00:00
<div class="user-info-meta">
<code>alguien</code>
</div>
2023-01-03 07:40:38 +00:00
</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 />
2023-01-03 07:40:38 +00:00
<label for="edit-edit-greeting">Saludo</label>
<input id="edit-greeting" name="greeting" placeholder="Olá Joãzinho!" />
2023-01-03 07:40:38 +00:00
<label for="edit-password">Password</label>
<input id="edit-password" type="password" name="password" />
2023-01-03 07:40:38 +00:00
<label for="edit-schedule">Horarios</label>
<input id="edit-schedule" type="text" name="schedule" placeholder="days=1-5 hours=8-20:35" autocorrect="off"/>
2023-01-03 07:40:38 +00:00
<label for="edit-expires">Expires</label>
<input id="edit-expires" type="datetime-local" name="expires" placeholder="2023-01-01T00:00:00Z" />
2023-01-03 07:40:38 +00:00
<label for="edit-ttl">TTL</label>
<input id="edit-max_ttl" type="text" name="max_ttl" placeholder="30d" autocorrect="off"/>
2023-01-03 07:40:38 +00:00
2023-01-04 04:21:49 +00:00
<div>
<input id="edit-is_admin" type="checkbox" name="is_admin" /><label for="edit-admin">Admin?</label>
2023-01-04 04:21:49 +00:00
</div>
2023-01-03 07:40:38 +00:00
2023-01-04 04:21:49 +00:00
<div>
<input id="edit-second_factor" type="checkbox" name="second_factor" /><label for="edit-second_factor">Requiere 2FA?</label>
2023-01-04 04:21:49 +00:00
</div>
2023-01-03 07:40:38 +00:00
2023-04-16 21:17:36 +00:00
<div>
<input id="edit-receives_notifications" type="checkbox" name="receives_notifications" /><label for="edit-receives_notifications">Recibe Notificaciones?</label>
</div>
2023-01-04 04:21:49 +00:00
<div id="actions">
<button class="user-delete">Eliminar</button>
<button class="user-save">Guardar cambios</button>
</div>
2023-01-03 07:40:38 +00:00
</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>
2023-01-03 07:40:38 +00:00
<input name="handle" placeholder="joao" autocorrect="off" required />
<label for="name">Nombre</label>
2023-01-03 07:40:38 +00:00
<input name="name" placeholder="João Gilberto" required />
2023-01-04 04:21:49 +00:00
<label for="greeting">Saludo</label>
<input name="greeting" placeholder="Olá Joãzinho!" />
<label for="password">Password</label>
2023-01-03 07:40:38 +00:00
<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"/>
2023-01-04 04:21:49 +00:00
<div>
2023-04-16 21:17:36 +00:00
<input type="checkbox" name="is_admin" /><label for="is_admin">Admin?</label>
2023-01-04 04:21:49 +00:00
</div>
2023-01-04 04:21:49 +00:00
<div>
2023-04-16 21:17:36 +00:00
<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>
2023-01-04 04:21:49 +00:00
</div>
<button id="create-user-submit" type="submit">Crear</button>
</form>
</section>
2023-01-03 07:40:38 +00:00
<section id="registro" class="hidden">
<h2>Entradas recientes</h2>
<table>
2023-01-04 04:21:49 +00:00
<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>
2023-01-03 07:40:38 +00:00
<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.1.1/dist/esm/webauthn-json.browser-ponyfill.js"></script>
2023-04-16 21:17:36 +00:00
<script>window._PushKey = "$PUSH_KEY$"</script>
2023-01-03 07:40:38 +00:00
<script type="module" src="/static/admin.js"></script>
</body>
</html>