@rblez/authly 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,238 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Authly Dashboard</title>
7
+ <link rel="stylesheet" href="/styles.css">
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css">
9
+ </head>
10
+ <body>
11
+ <div class="layout">
12
+ <!-- Sidebar -->
13
+ <aside class="sidebar" id="sidebar">
14
+ <div class="sidebar__brand">
15
+ <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
16
+ <path d="M12 2L2 7v10l10 5 10-5V7L12 2z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
17
+ <path d="M12 22V12" stroke="currentColor" stroke-width="1.5"/>
18
+ <path d="M22 7L12 12 2 7" stroke="currentColor" stroke-width="1.5"/>
19
+ </svg>
20
+ <span>Authly</span>
21
+ </div>
22
+ <nav class="sidebar__nav">
23
+ <a href="#init" class="nav-item active" data-section="init"><i class="ri-flashlight-line"></i> Init</a>
24
+ <a href="#providers" class="nav-item" data-section="providers"><i class="ri-shield-keyhole-line"></i> Providers</a>
25
+ <a href="#ui" class="nav-item" data-section="ui"><i class="ri-layout-masonry-line"></i> UI</a>
26
+ <a href="#routes" class="nav-item" data-section="routes"><i class="ri-route-line"></i> Routes</a>
27
+ <a href="#roles" class="nav-item" data-section="roles"><i class="ri-user-settings-line"></i> Roles</a>
28
+ <a href="#api-keys" class="nav-item" data-section="api-keys"><i class="ri-key-2-line"></i> API Keys</a>
29
+ <a href="#env" class="nav-item" data-section="env"><i class="ri-file-code-line"></i> Env</a>
30
+ <a href="#migrate" class="nav-item" data-section="migrate"><i class="ri-database-2-line"></i> Migrate</a>
31
+ <a href="#users" class="nav-item" data-section="users"><i class="ri-user-line"></i> Users</a>
32
+ <a href="#mcp" class="nav-item" data-section="mcp"><i class="ri-robot-line"></i> MCP <span class="badge">BETA</span></a>
33
+ <a href="#audit" class="nav-item" data-section="audit"><i class="ri-search-line"></i> Audit</a>
34
+ </nav>
35
+ </aside>
36
+
37
+ <!-- Main -->
38
+ <main class="main">
39
+ <header class="header">
40
+ <button class="header__menu" id="menuBtn"><i class="ri-menu-line"></i></button>
41
+ <h1 class="header__title" id="headerTitle">Init</h1>
42
+ <div class="header__status">
43
+ <span class="header__dot"></span>
44
+ <span id="statusText">Disconnected</span>
45
+ </div>
46
+ </header>
47
+
48
+ <div class="content">
49
+
50
+ <!-- ═══ INIT ═══ -->
51
+ <section class="section" id="init">
52
+ <div class="card">
53
+ <div class="card__icon"><i class="ri-flashlight-line"></i></div>
54
+ <h2>Connect your project</h2>
55
+ <p>Detect your Next.js project and set up Supabase credentials.</p>
56
+ <form id="initForm" class="init-form">
57
+ <label>Supabase Project URL</label>
58
+ <input type="url" id="initUrl" placeholder="https://xxxx.supabase.co" />
59
+ <label>Supabase Anon Key</label>
60
+ <input type="password" id="initAnon" placeholder="eyJh…" />
61
+ <label>Service Role Key (optional, for admin)</label>
62
+ <input type="password" id="initService" placeholder="eyJh…" />
63
+ <div id="initResult" class="result hidden"></div>
64
+ <button type="submit" class="btn btn--primary" id="initBtn">
65
+ <i class="ri-plug-line"></i> Connect &amp; Configure
66
+ </button>
67
+ </form>
68
+ </div>
69
+ <div class="card">
70
+ <div class="card__icon"><i class="ri-folder-check-line"></i></div>
71
+ <h2>Generated files</h2>
72
+ <ul class="file-list" id="fileList">
73
+ <li><i class="ri-file-line"></i> .env.local <span class="file-status" id="envStatus">checking…</span></li>
74
+ <li><i class="ri-file-line"></i> authly.config.json <span class="file-status" id="configStatus">checking…</span></li>
75
+ </ul>
76
+ </div>
77
+ </section>
78
+
79
+ <!-- ═══ PROVIDERS ═══ -->
80
+ <section class="section hidden" id="providers">
81
+ <div id="providerList"></div>
82
+ </section>
83
+
84
+ <!-- ═══ UI (Scaffold) ═══ -->
85
+ <section class="section hidden" id="ui">
86
+ <div class="card">
87
+ <h2>Scaffold auth pages</h2>
88
+ <p>Generate ready-to-use TSX pages for your Next.js project.</p>
89
+ <div class="grid-3">
90
+ <div class="scaffold-card" data-scaffold="login">
91
+ <i class="ri-login-circle-line"></i>
92
+ <span>Login</span>
93
+ </div>
94
+ <div class="scaffold-card" data-scaffold="signup">
95
+ <i class="ri-user-add-line"></i>
96
+ <span>Sign Up</span>
97
+ </div>
98
+ <div class="scaffold-card" data-scaffold="middleware">
99
+ <i class="ri-route-line"></i>
100
+ <span>Middleware</span>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ <div class="card hidden" id="scaffoldPreview">
105
+ <h3>Generated code</h3>
106
+ <pre class="code-block" id="scaffoldCode"></pre>
107
+ </div>
108
+ </section>
109
+
110
+ <!-- ═══ ROUTES ═══ -->
111
+ <section class="section hidden" id="routes">
112
+ <div class="card">
113
+ <h2>Protected routes</h2>
114
+ <p>Middleware scaffold protects these paths:</p>
115
+ <div class="code-block"><code>/dashboard, /profile, /settings → redirect to /auth/login if unauthenticated</code></div>
116
+ </div>
117
+ </section>
118
+
119
+ <!-- ═══ ROLES ═══ -->
120
+ <section class="section hidden" id="roles">
121
+ <div class="card">
122
+ <div style="display:flex;justify-content:space-between;align-items:center">
123
+ <h2>Roles</h2>
124
+ <button class="btn btn--primary btn--sm" id="addRoleBtn"><i class="ri-add-line"></i> Add role</button>
125
+ </div>
126
+ <div id="rolesList" class="role-chips"></div>
127
+ </div>
128
+ <div class="card" id="roleAssignCard">
129
+ <h3>Assign role to user</h3>
130
+ <form id="roleAssignForm" style="display:flex;gap:8px;flex-wrap:wrap;align-items:end">
131
+ <div>
132
+ <label style="font-size:.75rem;color:#888;display:block;margin-bottom:2px">User ID</label>
133
+ <input type="text" id="assignUserId" placeholder="supabase-uuid…" style="background:#000;border:1px solid #333;color:#fff;padding:6px 10px;border-radius:4px;font-size:.8rem;width:250px" />
134
+ </div>
135
+ <div>
136
+ <label style="font-size:.75rem;color:#888;display:block;margin-bottom:2px">Role</label>
137
+ <input type="text" id="assignRoleName" placeholder="admin" style="background:#000;border:1px solid #333;color:#fff;padding:6px 10px;border-radius:4px;font-size:.8rem;width:120px" />
138
+ </div>
139
+ <button type="submit" class="btn btn--primary" style="padding:6px 14px;font-size:.8rem">Assign</button>
140
+ </form>
141
+ <div id="roleAssignResult" class="result hidden"></div>
142
+ </div>
143
+ </section>
144
+
145
+ <!-- ═══ API KEYS ═══ -->
146
+ <section class="section hidden" id="api-keys">
147
+ <div class="card">
148
+ <h2>Generate API Key</h2>
149
+ <p>Create a key for programmatic access.</p>
150
+ <form id="keyForm" style="display:flex;gap:8px;align-items:end;flex-wrap:wrap">
151
+ <div>
152
+ <label style="font-size:.75rem;color:#888;display:block;margin-bottom:2px">Key name</label>
153
+ <input type="text" id="keyName" placeholder="my-api-key" style="background:#000;border:1px solid #333;color:#fff;padding:6px 10px;border-radius:4px;font-size:.8rem" />
154
+ </div>
155
+ <button type="submit" class="btn btn--primary" style="padding:6px 14px;font-size:.8rem">Generate</button>
156
+ </form>
157
+ <div id="keyResult" class="result hidden"></div>
158
+ </div>
159
+ </section>
160
+
161
+ <!-- ═══ ENV ═══ -->
162
+ <section class="section hidden" id="env">
163
+ <div class="card">
164
+ <h2>Environment variables</h2>
165
+ <div class="vars-list" id="envVars"></div>
166
+ </div>
167
+ </section>
168
+
169
+ <!-- ═══ MIGRATE ═══ -->
170
+ <section class="section hidden" id="migrate">
171
+ <div class="card">
172
+ <h2>Migrations</h2>
173
+ <div class="migration-list" id="migrationList"></div>
174
+ </div>
175
+ </section>
176
+
177
+ <!-- ═══ USERS ═══ -->
178
+ <section class="section hidden" id="users">
179
+ <div class="card">
180
+ <div style="display:flex;justify-content:space-between;align-items:center">
181
+ <h2>Users</h2>
182
+ <button class="btn btn--primary btn--sm" id="refreshUsers"><i class="ri-refresh-line"></i> Refresh</button>
183
+ </div>
184
+ <div class="table-wrapper">
185
+ <table class="data-table">
186
+ <thead>
187
+ <tr><th>ID</th><th>Email</th><th>Role</th><th>Created</th></tr>
188
+ </thead>
189
+ <tbody id="usersBody">
190
+ <tr><td colspan="4" class="text-muted">Connect Supabase to see users</td></tr>
191
+ </tbody>
192
+ </table>
193
+ </div>
194
+ </div>
195
+ </section>
196
+
197
+ <!-- ═══ MCP (BETA) ═══ -->
198
+ <section class="section hidden" id="mcp">
199
+ <div class="card">
200
+ <div style="display:flex;align-items:center;gap:10px">
201
+ <i class="ri-robot-line" style="font-size:1.3rem;color:#fff"></i>
202
+ <h2 style="margin:0">MCP Server</h2>
203
+ <span class="badge">BETA</span>
204
+ </div>
205
+ <p class="text-muted" style="margin-top:8px">Connect an MCP client (Claude Desktop, Cursor) to manage Supabase through tools.</p>
206
+ <div class="code-block">
207
+ <code>mcpServers: [{
208
+ name: "authly",
209
+ url: "http://localhost:1284/mcp"
210
+ }]</code>
211
+ </div>
212
+ <p style="font-size:.8rem;color:#666;margin-top:12px">
213
+ <i class="ri-error-warning-line"></i> MCP tools are experimental. All backend tools are wired directly via the REST API for now.
214
+ MCP will be fully trained after all tools are tested and stable.
215
+ </p>
216
+ </div>
217
+ </section>
218
+
219
+ <!-- ═══ AUDIT ═══ -->
220
+ <section class="section hidden" id="audit">
221
+ <div class="card">
222
+ <h2>Configuration audit</h2>
223
+ <p>Detect missing variables, broken config, or setup issues.</p>
224
+ <button class="btn btn--primary" id="runAudit"><i class="ri-search-line"></i> Run audit</button>
225
+ <div id="auditResult" class="result hidden"></div>
226
+ </div>
227
+ </section>
228
+
229
+ </div>
230
+ </main>
231
+ </div>
232
+
233
+ <!-- Toast -->
234
+ <div id="toast" class="toast hidden"></div>
235
+
236
+ <script src="/app.js"></script>
237
+ </body>
238
+ </html>