@e280/authlocal
Version:
User-sovereign login system for everybody
232 lines (194 loc) • 6.11 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="darkreader-lock"/>
<title>Authlocal App Demo</title>
<link rel="icon" href="/assets/favicon.png"/>
<style>
:root {
--authlocal-login: green;
--authlocal-logout: #555;
--authlocal-button-text: white;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scrollbar-width: thin;
scrollbar-color: #333 transparent;
}
:root {
color-scheme: dark;
padding: 10vh 10vw;
min-height: 100%;
scrollbar-gutter: stable;
font-size: 16px;
font-family: sans-serif;
color: #aaa;
background: #222;
--link: cyan;
}
body {
display: flex;
flex-direction: column;
align-items: center;
gap: 3em;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 1em; }
::-webkit-scrollbar-thumb:hover { background: #444; }
a {
color: var(--link);
text-decoration: none;
&:visited {
color: color-mix(in srgb, purple, var(--link) 70%);
}
&:hover {
color: color-mix(in srgb, white, var(--link) 90%);
text-decoration: underline;
}
&:active {
color: color-mix(in srgb, white, var(--link) 50%);
}
}
</style>
<style>
:is(
auth-user,
auth-sigil,
auth-button,
) {
&::part(button) {
all: unset;
font: inherit;
color: inherit;
cursor: pointer;
padding: 1em 0.5em;
border-radius: 0.5em;
border: 0.1em solid transparent;
font-weight: bold;
color: #fff;
background: #567;
text-shadow: 0.1em 0.1em 0.1em #0008;
box-shadow: 0.1em 0.1em 0.3em #0004;
}
&::part(button):hover { background: #678; }
&::part(button):active { background: #456; }
&::part(button-login) {
all: unset;
font: inherit;
color: inherit;
cursor: pointer;
padding: 1em 0.5em;
border-radius: 0.5em;
border: 0.1em solid transparent;
font-weight: bold;
color: white;
background: #0a0;
text-shadow: 0.1em 0.1em 0.1em #0008;
box-shadow: 0.1em 0.1em 0.3em #0004;
}
&::part(button-login):hover { background: #4a4; }
&::part(button-login):active { background: #080; }
}
</style>
<meta data-commit-hash="c820d50df0e95e324d9be9a3802568dfaa736bc3"/>
<script type="importmap">
{
"imports": {
"@benev/slate/": "/node_modules/@benev/slate/",
"@benev/slate": "/node_modules/@benev/slate/x/index.js",
"@e280/kv/": "/node_modules/@e280/kv/",
"@e280/kv": "/node_modules/@e280/kv/x/index.js",
"@e280/renraku/": "/node_modules/@e280/renraku/",
"@e280/renraku": "/node_modules/@e280/renraku/x/index.universal.js",
"@e280/science/": "/node_modules/@e280/science/",
"@e280/science": "/node_modules/@e280/science/x/index.js",
"@e280/sten/": "/node_modules/@e280/sten/",
"@e280/sten": "/node_modules/@e280/sten/x/index.js",
"@e280/stz/": "/node_modules/@e280/stz/",
"@e280/stz": "/node_modules/@e280/stz/x/index.js",
"@lit-labs/ssr-dom-shim/": "/node_modules/@lit-labs/ssr-dom-shim/",
"@lit-labs/ssr-dom-shim": "/node_modules/@lit-labs/ssr-dom-shim/index.js",
"@lit/reactive-element/": "/node_modules/@lit/reactive-element/",
"@lit/reactive-element": "/node_modules/@lit/reactive-element/reactive-element.js",
"@noble/ed25519/": "/node_modules/@noble/ed25519/",
"@noble/ed25519": "/node_modules/@noble/ed25519/index.js",
"@types/trusted-types/": "/node_modules/@types/trusted-types/",
"abstract-level/": "/node_modules/abstract-level/",
"abstract-level": "/node_modules/abstract-level/index.js",
"base64-js/": "/node_modules/base64-js/",
"base64-js": "/node_modules/base64-js/index.js",
"browser-level/": "/node_modules/browser-level/",
"browser-level": "/node_modules/browser-level/index.js",
"buffer/": "/node_modules/buffer/",
"buffer": "/node_modules/buffer/index.js",
"classic-level/": "/node_modules/classic-level/",
"classic-level": "/node_modules/classic-level/index.js",
"ieee754/": "/node_modules/ieee754/",
"ieee754": "/node_modules/ieee754/index.js",
"is-buffer/": "/node_modules/is-buffer/",
"is-buffer": "/node_modules/is-buffer/index.js",
"level/": "/node_modules/level/",
"level": "/node_modules/level/index.js",
"level-supports/": "/node_modules/level-supports/",
"level-transcoder/": "/node_modules/level-transcoder/",
"level-transcoder": "/node_modules/level-transcoder/index.js",
"lit/": "/node_modules/lit/",
"lit": "/node_modules/lit/index.js",
"lit-element/": "/node_modules/lit-element/",
"lit-element": "/node_modules/lit-element/index.js",
"lit-html/": "/node_modules/lit-html/",
"lit-html": "/node_modules/lit-html/lit-html.js",
"maybe-combine-errors/": "/node_modules/maybe-combine-errors/",
"module-error/": "/node_modules/module-error/",
"napi-macros/": "/node_modules/napi-macros/",
"napi-macros": "/node_modules/napi-macros/index.js",
"node-gyp-build/": "/node_modules/node-gyp-build/",
"node-gyp-build": "/node_modules/node-gyp-build/index.js",
"ws/": "/node_modules/ws/",
"ws": "/node_modules/ws/index.js"
},
"scopes": {}
}
</script>
<script>
// determine dev mode
const params = new URLSearchParams(location.search)
const isDevMode = params.has("dev")
? params.get("dev") !== "false"
: (
location.hostname === "localhost" ||
location.hostname.startsWith("192.168.") ||
location.hostname.startsWith("10.0.") ||
location.hostname.endsWith("trycloudflare.com")
)
// create and insert a script element
function script(attributes) {
const element = document.createElement("script")
element.defer = true
for (const [key, value] of Object.entries(attributes))
element.setAttribute(key, value === true ?"" :value)
document.head.appendChild(element)
}
// launch dev module
if (isDevMode) {
document.title = "[dev] " + document.title
script({type: "module", src: "demo.bundle.js?v=a11601ed"})
}
// launch prod module
else {
script({type: "module", src: "demo.bundle.min.js?v=a0b93afd"})
}
</script>
</head>
<body>
<h1>Example app using Authlocal</h1>
<p>This page is a test for a typical federated auth integration with <a href="/">Authlocal</a></p>
<auth-button src="/"></auth-button>
<auth-user></auth-user>
</body>
</html>