my own indieAuth provider!
indiko.dunkirk.sh/docs
dunkirk.sh
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>authorized apps • indiko</title>
8 <meta name="description" content="Manage apps you've authorized with your Indiko account" />
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="Authorized Apps • Indiko" />
14 <meta property="og:description" content="Manage apps you've authorized with your Indiko account" />
15
16 <!-- Twitter -->
17 <meta name="twitter:card" content="summary" />
18 <meta name="twitter:title" content="Authorized Apps • Indiko" />
19 <meta name="twitter:description" content="Manage apps you've authorized with your Indiko account" />
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 /* Apps-specific styles */
26 h1 {
27 margin-bottom: 0.5rem;
28 }
29
30 .apps-list {
31 display: flex;
32 flex-direction: column;
33 gap: 1rem;
34 }
35
36 .app-card {
37 background: rgba(188, 141, 160, 0.05);
38 border: 1px solid var(--old-rose);
39 padding: 1.5rem;
40 }
41
42 .app-header {
43 display: flex;
44 justify-content: space-between;
45 align-items: flex-start;
46 margin-bottom: 1rem;
47 }
48
49 .app-name {
50 font-size: 1.125rem;
51 font-weight: 600;
52 color: var(--lavender);
53 }
54
55 .app-meta {
56 font-size: 0.875rem;
57 color: var(--old-rose);
58 margin-top: 0.25rem;
59 }
60
61 .scopes {
62 margin: 1rem 0;
63 }
64
65 .scope-title {
66 font-size: 0.75rem;
67 color: var(--old-rose);
68 text-transform: uppercase;
69 letter-spacing: 0.05rem;
70 margin-bottom: 0.5rem;
71 }
72
73 .scope-list {
74 display: flex;
75 flex-wrap: wrap;
76 gap: 0.5rem;
77 }
78
79 .scope-badge {
80 padding: 0.25rem 0.75rem;
81 font-size: 0.75rem;
82 font-weight: 600;
83 text-transform: uppercase;
84 letter-spacing: 0.05rem;
85 background: rgba(188, 141, 160, 0.2);
86 color: var(--lavender);
87 border: 1px solid var(--old-rose);
88 }
89
90 .revoke-btn {
91 padding: 0.5rem 1rem;
92 background: transparent;
93 color: var(--rosewood);
94 border: 2px solid var(--rosewood);
95 font-family: "Space Grotesk", sans-serif;
96 font-size: 0.875rem;
97 font-weight: 600;
98 text-transform: uppercase;
99 letter-spacing: 0.05rem;
100 cursor: pointer;
101 transition: all 0.2s;
102 box-shadow: none;
103 }
104
105 .revoke-btn::before {
106 display: none;
107 }
108
109 .revoke-btn:hover:not(:disabled) {
110 background: var(--rosewood);
111 color: var(--lavender);
112 transform: none;
113 }
114
115 .revoke-btn:disabled {
116 opacity: 0.5;
117 cursor: not-allowed;
118 }
119 </style>
120</head>
121
122<body>
123 <header>
124 <h1>authorized apps</h1>
125 <p class="subtitle">manage apps that have access to your account</p>
126 </header>
127
128 <main>
129 <div id="appsList" class="apps-list">
130 <div class="loading">loading apps...</div>
131 </div>
132
133 <div class="back-link">
134 <a href="/">← back to dashboard</a>
135 </div>
136 </main>
137
138 <script type="module" src="../client/apps.ts"></script>
139</body>
140
141</html>