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>admin • indiko</title>
8 <meta name="description" content="Indiko admin panel - manage users and invites" />
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="Admin • Indiko" />
14 <meta property="og:description" content="Indiko admin panel - manage users and invites" />
15
16 <!-- Twitter -->
17 <meta name="twitter:card" content="summary" />
18 <meta name="twitter:title" content="Admin • Indiko" />
19 <meta name="twitter:description" content="Indiko admin panel - manage users and invites" />
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 /* Admin-specific styles */
26 header {
27 align-self: flex-start;
28 margin-left: auto;
29 margin-right: auto;
30 display: flex;
31 justify-content: space-between;
32 align-items: flex-start;
33 }
34
35 main {
36 padding: 2rem 1.25rem;
37 }
38
39 .users-section {
40 width: 100%;
41 }
42
43 .users-list {
44 display: flex;
45 flex-direction: column;
46 gap: 1rem;
47 }
48
49 .user-card {
50 background: rgba(188, 141, 160, 0.05);
51 border: 1px solid var(--old-rose);
52 padding: 1.5rem;
53 display: flex;
54 gap: 1.5rem;
55 align-items: center;
56 transition: background 0.2s;
57 }
58
59 .user-card:hover {
60 background: rgba(188, 141, 160, 0.1);
61 }
62
63 .user-info {
64 display: flex;
65 flex-direction: column;
66 gap: 0.5rem;
67 flex: 1;
68 }
69
70 .user-name {
71 font-size: 1.125rem;
72 font-weight: 600;
73 color: var(--lavender);
74 }
75
76 .user-meta {
77 font-size: 0.875rem;
78 color: var(--old-rose);
79 display: flex;
80 flex-wrap: wrap;
81 gap: 1rem;
82 }
83
84 .user-meta-item {
85 display: flex;
86 align-items: center;
87 gap: 0.25rem;
88 }
89
90 .user-badges {
91 display: flex;
92 gap: 0.5rem;
93 flex-wrap: wrap;
94 }
95
96 .user-actions {
97 display: flex;
98 gap: 0.5rem;
99 flex-wrap: wrap;
100 }
101
102 .user-suspended {
103 opacity: 0.5;
104 }
105 </style>
106</head>
107
108<body>
109 <header>
110 <div>
111 <img src="../../public/logo.svg" alt="indiko" style="height: 2rem;" />
112 </div>
113 <div class="header-nav">
114 <a href="/admin" class="active">users</a>
115 <a href="/admin/invites">invites</a>
116 <a href="/admin/clients">apps</a>
117 </div>
118 </header>
119
120 <main>
121 <div class="users-section">
122 <h2>users</h2>
123 <div id="usersList" class="users-list">
124 <div class="loading">loading users...</div>
125 </div>
126 </div>
127 </main>
128
129 <footer id="footer">
130 loading...
131 <div class="back-link"><a href="/">← back to dashboard</a></div>
132 </footer>
133
134 <script type="module" src="../client/admin.ts"></script>
135</body>
136
137</html>