@authduo/authduo
Version:
Free User-sovereign Authentication for the World
215 lines (172 loc) • 4.18 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="darkreader" content="dark"/>
<title>Authduo Federated Test</title>
<link rel="icon" href="/assets/favicon.png"/>
<style>
:root {
color-scheme: dark;
--link: cyan;
--site-bg: #181818;
--instruction-color: #00ff89;
--domain-color: #ff0;
--passport-color: #512f71;
--login-color: #80f;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scrollbar-width: thin;
scrollbar-color: #333 transparent;
}
::-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%);
}
}
/*------------------------------------------*/
html {
height: 100%;
}
body {
min-height: 100%;
font-size: 16px;
color: #fffc;
background: var(--site-bg);
background-attachment: fixed;
font-family: sans-serif;
scrollbar-gutter: stable;
scrollbar-width: thin;
}
body {
display: flex;
flex-direction: column;
align-items: center;
gap: 2em;
padding-bottom: 4em;
> * {
display: block;
justify-content: center;
}
}
.title {
opacity: 0.3;
color: white;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
margin-top: 2vh;
> svg {
width: 2em;
height: 2em;
stroke-width: 2;
}
}
auth-manager {
display: block;
width: 95%;
max-width: 42em;
border-radius: 0.5em;
}
footer {
display: flex;
flex-direction: column;
gap: 0.33em;
opacity: 0.5;
font-size: 0.8em;
width: 42em;
max-width: 99%;
text-align: center;
> auth-safe-storage {
margin-top: 1em;
}
}
</style>
<style>
body {
background: #222;
}
</style>
<meta data-commit-hash="2cdd995d7f759d6a5e0be8fe4aa8f7134ee1508c"/>
<script type="importmap">
{
"imports": {
"@benev/slate/": "/node_modules/@benev/slate/",
"@benev/slate": "/node_modules/@benev/slate/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",
"@types/trusted-types/": "/node_modules/@types/trusted-types/",
"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",
"renraku/": "/node_modules/renraku/",
"renraku": "/node_modules/renraku/x/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.host.startsWith("localhost") ||
location.host.startsWith("192.168.") ||
location.host.startsWith("10.0.")
)
// 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: "../install.bundle.js?v=4d1a7d02"})
}
// launch prod module
else {
script({type: "module", src: "../install.bundle.min.js?v=aec4b06a"})
}
</script>
</head>
<body>
<h1 class=title>
Authduo Federated Test
</h1>
<auth-user></auth-user>
<auth-button src="/"></auth-button>
<footer>
<p>This page is a test for a typical federated auth integration with <a href="/">Authduo.org</a></p>
</footer>
</body>
</html>