dunkirk.sh
my own indieAuth provider!
indiko.dunkirk.sh/docs
indieauth
oauth2-server
1<!doctype html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>login • indiko</title>
8 <meta name="description" content="Sign in to your Indiko account with passkey authentication" />
9 <link rel="icon" href="../../public/favicon.svg" type="image/svg+xml" />
10
11 <!-- Open Graph / Facebook -->
12 <meta property="og:type" content="website" />
13 <meta property="og:title" content="Login • Indiko" />
14 <meta property="og:description" content="Sign in to your Indiko account with passkey authentication" />
15
16 <!-- Twitter -->
17 <meta name="twitter:card" content="summary" />
18 <meta name="twitter:title" content="Login • Indiko" />
19 <meta name="twitter:description" content="Sign in to your Indiko account with passkey authentication" />
20 <link rel="preconnect" href="https://fonts.googleapis.com">
21 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
22 <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">
23 <link rel="stylesheet" href="../styles.css">
24 <style>
25 /* Login-specific styles */
26 body {
27 justify-content: center;
28 }
29
30 main {
31 max-width: 28rem !important;
32 width: 100%;
33 text-align: center;
34 }
35
36 h1 {
37 font-size: 3rem;
38 margin-bottom: 0.5rem;
39 }
40
41 .subtitle {
42 margin-bottom: 2rem;
43 }
44
45 .auth-box {
46 background: rgba(188, 141, 160, 0.05);
47 border: 1px solid var(--old-rose);
48 padding: 2rem;
49 margin-bottom: 1rem;
50 }
51
52 input[type="text"],
53 input[type="password"] {
54 margin-bottom: 1rem;
55 }
56
57 .ldap-user-display {
58 background: rgba(188, 141, 160, 0.1);
59 border-left: 3px solid var(--berry-crush);
60 padding: 0.75rem 1rem;
61 margin-bottom: 1rem;
62 text-align: left;
63 font-size: 0.875rem;
64 }
65
66 .ldap-user-display .label {
67 color: var(--old-rose);
68 font-size: 0.75rem;
69 text-transform: uppercase;
70 letter-spacing: 0.05rem;
71 }
72
73 .ldap-user-display .username {
74 color: var(--lavender);
75 font-weight: 600;
76 }
77
78 button {
79 width: 100%;
80 padding: 1.25rem 2rem;
81 font-size: 1.125rem;
82 margin-bottom: 0.75rem;
83 }
84
85 .info {
86 margin-top: 1.5rem;
87 padding: 1rem;
88 background: rgba(188, 141, 160, 0.05);
89 border-radius: 0.5rem;
90 font-size: 0.8125rem;
91 color: var(--old-rose);
92 line-height: 1.6;
93 text-align: left;
94 }
95
96 .info strong {
97 color: var(--lavender);
98 }
99 </style>
100</head>
101
102<body>
103 <main>
104 <img src="../../public/logo.svg" alt="indiko" style="height: 3rem; margin-bottom: 0.5rem;" />
105 <p class="subtitle">sign in with passkey</p>
106
107 <div id="message" class="message"></div>
108
109 <div class="auth-box">
110 <form id="loginForm">
111 <input type="text" id="username" placeholder="username" required autocomplete="username webauthn" />
112 <button type="submit" id="loginBtn">sign in</button>
113 </form>
114
115 <form id="registerForm" style="display: none;">
116 <input type="text" id="registerUsername" placeholder="create username" required
117 autocomplete="username webauthn" />
118 <button type="submit" class="secondary-btn" id="registerBtn">create passkey</button>
119 </form>
120
121 <form id="ldapForm" style="display: none;">
122 <div class="ldap-user-display">
123 <div class="label">username</div>
124 <div class="username" id="ldapUsername"></div>
125 </div>
126 <input type="password" id="ldapPassword" placeholder="LDAP password" required autocomplete="current-password" />
127 <button type="submit" id="ldapBtn">verify & continue</button>
128 </form>
129 </div>
130
131 <div class="info">
132 <strong>What's a passkey?</strong><br>
133 A passwordless login using your device's biometrics (fingerprint, face) or security key. More secure than
134 passwords, no typing required.
135 </div>
136 </main>
137
138 <script type="module" src="../client/login.ts"></script>
139
140</body>
141
142</html>