+1

.prettierrc

reviewed

··· 15 15 "^@atcute/(.*)$", 16 16 "^@danaus/(.*)$", 17 17 "^@kelinci/(.*)$", 18 18 + "^@oomfware/(.*)$", 18 19 "", 19 20 "<THIRD_PARTY_MODULES>", 20 21 "",

+3 -1

packages/danaus/package.json

reviewed

··· 42 42 "@atcute/xrpc-server": "^0.1.8", 43 43 "@atcute/xrpc-server-bun": "^0.1.1", 44 44 "@kelinci/danaus-lexicons": "workspace:*", 45 45 + "@oomfware/fetch-router": "^0.2.1", 46 46 + "@oomfware/forms": "^0.2.0", 47 47 + "@oomfware/jsx": "^0.1.4", 45 48 "cva": "1.0.0-beta.4", 46 49 "drizzle-orm": "1.0.0-beta.6-4414a19", 47 50 "get-port": "^7.1.0", 48 48 - "hono": "^4.11.3", 49 51 "jose": "^6.1.3", 50 52 "nanoid": "^5.1.6", 51 53 "p-queue": "^9.1.0",

+3 -3

packages/danaus/src/pds-server.ts

reviewed

··· 9 9 import type { AppConfig } from './config.ts'; 10 10 import { createAppContext, type AppContext } from './context.ts'; 11 11 import { createProxyMiddleware } from './proxy/index.ts'; 12 12 - import { createWebApp } from './web/app.ts'; 12 12 + import { createWebRouter } from './web/router.ts'; 13 13 import styles from './web/styles/main.out.css' with { type: 'file' }; 14 14 15 15 export interface PdsServerOptions { ··· 74 74 comAtproto(router, context); 75 75 localDanaus(router, context); 76 76 77 77 - const web = createWebApp(context); 77 77 + const web = createWebRouter(context); 78 78 79 79 const corsHeaders = { 'access-control-allow-origin': '*' }; 80 80 ··· 119 119 '/xrpc/*': wrapped.fetch, 120 120 121 121 '/assets/style.css': new Response(Bun.file(styles), { headers: { 'cache-control': 'no-cache' } }), 122 122 - '/*': web.fetch, 122 122 + '/*': (request) => web.fetch(request), 123 123 }, 124 124 }); 125 125 disposables.defer(() => server.stop());

+169 -198

packages/danaus/src/web/account/forms.ts

reviewed

··· 2 2 import type { Did, Handle } from '@atcute/lexicons'; 3 3 import { isHandle } from '@atcute/lexicons/syntax'; 4 4 import { XRPCError } from '@atcute/xrpc-server'; 5 5 + import { redirect } from '@oomfware/fetch-router'; 6 6 + import { getContext } from '@oomfware/fetch-router/middlewares/async-context'; 7 7 + import { form, invalid } from '@oomfware/forms'; 5 8 6 6 - import { HTTPException } from 'hono/http-exception'; 7 9 import * as v from 'valibot'; 8 10 9 11 import { parseAppPasswordPrivilege } from '#app/accounts/app-passwords.ts'; 10 12 import { MAX_PASSWORD_LENGTH, MIN_PASSWORD_LENGTH } from '#app/accounts/passwords.ts'; 11 11 - import { readWebSessionToken, setWebSessionToken, verifyWebSessionToken } from '#app/auth/web.ts'; 13 13 + import { setWebSessionToken } from '#app/auth/web.ts'; 12 14 import type { AppContext } from '#app/context.ts'; 13 15 import { isHostnameSuffix } from '#app/utils/schema.ts'; 14 16 15 15 - import { form, getRequestContext, invalid, redirect } from '../forms/index.ts'; 17 17 + import { getAppContext } from '../middlewares/app-context.ts'; 18 18 + import { getSession } from '../middlewares/session.ts'; 16 19 17 17 - export const createAccountForms = (ctx: AppContext) => { 18 18 - const { accountManager } = ctx; 19 19 - 20 20 - const verifyCredentials = () => { 21 21 - const c = getRequestContext(); 22 22 - const token = readWebSessionToken(c.req.raw); 23 23 - if (!token) { 24 24 - throw new HTTPException(302, { 25 25 - res: c.redirect(`/account/login?redirect=${encodeURIComponent(c.req.path)}`), 26 26 - }); 27 27 - } 20 20 + /** 21 21 + * validates credentials, creates session, sets cookie, and redirects. 22 22 + */ 23 23 + export const signInForm = form( 24 24 + v.object({ 25 25 + identifier: v.pipe(v.string(), v.minLength(1, `Enter your email or username`)), 26 26 + _password: v.pipe(v.string(), v.minLength(1, `Enter your password`)), 27 27 + remember: v.optional(v.boolean()), 28 28 + redirect: v.optional(v.string()), 29 29 + }), 30 30 + async (data, issue) => { 31 31 + const { accountManager } = getAppContext(); 32 32 + const { request } = getContext(); 28 33 29 29 - const sessionId = verifyWebSessionToken(ctx.config.secrets.jwtKey, token); 30 30 - if (!sessionId) { 31 31 - throw new HTTPException(302, { 32 32 - res: c.redirect(`/account/login?redirect=${encodeURIComponent(c.req.path)}`), 33 33 - }); 34 34 + if (data._password.length < MIN_PASSWORD_LENGTH || data._password.length > MAX_PASSWORD_LENGTH) { 35 35 + invalid(issue.identifier(`Invalid account credentials`)); 34 36 } 35 37 36 36 - const session = accountManager.getWebSession(sessionId); 37 37 - if (!session) { 38 38 - throw new HTTPException(302, { 39 39 - res: c.redirect(`/account/login?redirect=${encodeURIComponent(c.req.path)}`), 40 40 - }); 38 38 + const account = await accountManager.verifyAccountPassword(data.identifier, data._password); 39 39 + if (account === null) { 40 40 + invalid(issue.identifier(`Invalid account credentials`)); 41 41 } 42 42 43 43 - return session; 44 44 - }; 43 43 + const { session, token } = await accountManager.createWebSession({ 44 44 + did: account.did, 45 45 + remember: data.remember ?? false, 46 46 + userAgent: request.headers.get('user-agent') ?? undefined, 47 47 + }); 45 48 46 46 - /** 47 47 - * validates credentials, creates session, sets cookie, and redirects. 48 48 - */ 49 49 - const signInForm = form( 50 50 - v.object({ 51 51 - identifier: v.pipe(v.string(), v.minLength(1, `Enter your email or username`)), 52 52 - password: v.pipe(v.string(), v.minLength(1, `Enter your password`)), 53 53 - remember: v.optional(v.boolean()), 54 54 - redirect: v.optional(v.string()), 55 55 - }), 56 56 - async (data, issue) => { 57 57 - const c = getRequestContext(); 49 49 + setWebSessionToken(request, token, { 50 50 + expires: session.expires_at, 51 51 + httpOnly: true, 52 52 + sameSite: 'lax', 53 53 + path: '/', 54 54 + }); 58 55 59 59 - if (data.password.length < MIN_PASSWORD_LENGTH || data.password.length > MAX_PASSWORD_LENGTH) { 60 60 - invalid(issue.identifier(`Invalid account credentials`)); 61 61 - } 56 56 + redirect(data.redirect ?? '/account'); 57 57 + }, 58 58 + ); 62 59 63 63 - const account = await accountManager.verifyAccountPassword(data.identifier, data.password); 64 64 - if (account === null) { 65 65 - invalid(issue.identifier(`Invalid account credentials`)); 66 66 - } 60 60 + /** 61 61 + * creates an app password and returns the secret for display. 62 62 + */ 63 63 + export const createAppPasswordForm = form( 64 64 + v.object({ 65 65 + name: v.pipe(v.string(), v.minLength(1, `Name is required`), v.maxLength(32, `Name is too long`)), 66 66 + privilege: v.picklist(['limited', 'privileged', 'full'], `Invalid privilege`), 67 67 + }), 68 68 + async (data) => { 69 69 + const { accountManager } = getAppContext(); 70 70 + const session = getSession(); 67 71 68 68 - const { session, token } = await accountManager.createWebSession({ 69 69 - did: account.did, 70 70 - remember: data.remember ?? false, 71 71 - userAgent: c.req.header('user-agent'), 72 72 - }); 72 72 + const privilege = parseAppPasswordPrivilege(data.privilege); 73 73 74 74 - setWebSessionToken(c.req.raw, token, { 75 75 - expires: session.expires_at, 76 76 - httpOnly: true, 77 77 - sameSite: 'lax', 78 78 - path: '/', 74 74 + try { 75 75 + const { appPassword, secret } = await accountManager.createAppPassword({ 76 76 + did: session.did, 77 77 + name: data.name, 78 78 + privilege, 79 79 }); 80 80 81 81 - redirect(302, data.redirect ?? '/account'); 82 82 - }, 83 83 - ); 84 84 - 85 85 - /** 86 86 - * creates an app password and returns the secret for display. 87 87 - */ 88 88 - const createAppPasswordForm = form( 89 89 - v.object({ 90 90 - name: v.pipe(v.string(), v.minLength(1, `Name is required`), v.maxLength(32, `Name is too long`)), 91 91 - privilege: v.picklist(['limited', 'privileged', 'full'], `Invalid privilege`), 92 92 - }), 93 93 - async (data) => { 94 94 - const session = verifyCredentials(); 95 95 - const privilege = parseAppPasswordPrivilege(data.privilege); 96 96 - 97 97 - try { 98 98 - const { appPassword, secret } = await accountManager.createAppPassword({ 99 99 - did: session.did, 100 100 - name: data.name, 101 101 - privilege, 102 102 - }); 103 103 - 104 104 - return { name: appPassword.name, secret }; 105 105 - } catch (err) { 106 106 - if (err instanceof XRPCError && err.status === 400) { 107 107 - switch (err.error) { 108 108 - case 'DuplicateAppPassword': { 109 109 - invalid(`An app password with this name already exists`); 110 110 - } 111 111 - case 'TooManyAppPasswords': { 112 112 - invalid(`You've reached the maximum amount of app passwords allowed`); 113 113 - } 81 81 + return { name: appPassword.name, secret }; 82 82 + } catch (err) { 83 83 + if (err instanceof XRPCError && err.status === 400) { 84 84 + switch (err.error) { 85 85 + case 'DuplicateAppPassword': { 86 86 + invalid(`An app password with this name already exists`); 87 87 + } 88 88 + case 'TooManyAppPasswords': { 89 89 + invalid(`You've reached the maximum amount of app passwords allowed`); 114 90 } 115 91 } 116 116 - 117 117 - throw err; 118 92 } 119 119 - }, 120 120 - ); 121 93 122 122 - /** 123 123 - * deletes an app password and redirects back to the list. 124 124 - */ 125 125 - const deleteAppPasswordForm = form( 126 126 - v.object({ 127 127 - name: v.pipe(v.string(), v.minLength(1)), 128 128 - }), 129 129 - async (data) => { 130 130 - const session = verifyCredentials(); 94 94 + throw err; 95 95 + } 96 96 + }, 97 97 + ); 131 98 132 132 - accountManager.deleteAppPassword(session.did, data.name); 133 133 - }, 134 134 - ); 99 99 + /** 100 100 + * deletes an app password. 101 101 + */ 102 102 + export const deleteAppPasswordForm = form( 103 103 + v.object({ 104 104 + name: v.pipe(v.string(), v.minLength(1)), 105 105 + }), 106 106 + async (data) => { 107 107 + const { accountManager } = getAppContext(); 108 108 + const session = getSession(); 135 109 136 136 - /** 137 137 - * updates the account handle, including PLC document for did:plc accounts. 138 138 - */ 139 139 - const updateHandleForm = form( 140 140 - v.object({ 141 141 - domain: v.union([v.pipe(v.string(), v.check(isHostnameSuffix)), v.literal('custom')]), 142 142 - handle: v.pipe(v.string(), v.minLength(1, `Handle is required`)), 143 143 - }), 144 144 - async (data) => { 145 145 - const { did } = verifyCredentials(); 110 110 + accountManager.deleteAppPassword(session.did, data.name); 111 111 + }, 112 112 + ); 146 113 147 147 - let handle: Handle; 148 148 - if (data.domain === 'custom') { 149 149 - if (!isHandle(data.handle)) { 150 150 - invalid(`Invalid handle`); 151 151 - } 114 114 + /** 115 115 + * updates the account handle, including PLC document for did:plc accounts. 116 116 + */ 117 117 + export const updateHandleForm = form( 118 118 + v.object({ 119 119 + domain: v.union([v.pipe(v.string(), v.check(isHostnameSuffix)), v.literal('custom')]), 120 120 + handle: v.pipe(v.string(), v.minLength(1, `Handle is required`)), 121 121 + }), 122 122 + async (data) => { 123 123 + const ctx = getAppContext(); 124 124 + const { did } = getSession(); 152 125 153 153 - handle = data.handle; 154 154 - } else { 155 155 - const fullHandle = `${data.handle}${data.domain}`; 156 156 - if (!isHandle(fullHandle)) { 157 157 - invalid(`Invalid handle`); 158 158 - } 126 126 + let handle: Handle; 127 127 + if (data.domain === 'custom') { 128 128 + if (!isHandle(data.handle)) { 129 129 + invalid(`Invalid handle`); 130 130 + } 159 131 160 160 - handle = fullHandle; 132 132 + handle = data.handle; 133 133 + } else { 134 134 + const fullHandle = `${data.handle}${data.domain}`; 135 135 + if (!isHandle(fullHandle)) { 136 136 + invalid(`Invalid handle`); 161 137 } 162 138 163 163 - // validate the handle (checks TLD, service domain constraints, external domain resolution) 164 164 - try { 165 165 - handle = await accountManager.validateHandle(handle, { did }); 166 166 - } catch (err) { 167 167 - if (err instanceof XRPCError && err.status === 400) { 168 168 - switch (err.error) { 169 169 - case 'InvalidHandle': { 170 170 - invalid(err.description ?? `Invalid handle`); 171 171 - } 172 172 - case 'UnsupportedDomain': { 173 173 - invalid(`Handle must resolve to your DID via DNS or .well-known`); 174 174 - } 139 139 + handle = fullHandle; 140 140 + } 141 141 + 142 142 + // validate the handle (checks TLD, service domain constraints, external domain resolution) 143 143 + try { 144 144 + handle = await ctx.accountManager.validateHandle(handle, { did }); 145 145 + } catch (err) { 146 146 + if (err instanceof XRPCError && err.status === 400) { 147 147 + switch (err.error) { 148 148 + case 'InvalidHandle': { 149 149 + invalid(err.description ?? `Invalid handle`); 150 150 + } 151 151 + case 'UnsupportedDomain': { 152 152 + invalid(`Handle must resolve to your DID via DNS or .well-known`); 175 153 } 176 154 } 177 177 - throw err; 178 155 } 156 156 + throw err; 157 157 + } 179 158 180 180 - // check if handle is already taken by another account 181 181 - const existing = accountManager.getAccount(handle, { 182 182 - includeDeactivated: true, 183 183 - includeTakenDown: true, 184 184 - }); 159 159 + // check if handle is already taken by another account 160 160 + const existing = ctx.accountManager.getAccount(handle, { 161 161 + includeDeactivated: true, 162 162 + includeTakenDown: true, 163 163 + }); 185 164 186 186 - if (existing !== null) { 187 187 - if (existing.did === did) { 188 188 - return; 189 189 - } 190 190 - 191 191 - invalid(`Handle is already taken`); 165 165 + if (existing !== null) { 166 166 + if (existing.did === did) { 167 167 + return; 192 168 } 193 169 194 194 - // update PLC document for did:plc accounts 195 195 - if (did.startsWith('did:plc:')) { 196 196 - try { 197 197 - await updatePlcHandle(ctx, did as Did<'plc'>, handle); 198 198 - } catch (err) { 199 199 - if (err instanceof PlcClientError) { 200 200 - invalid(`Unable to update DID document, please try again later`); 201 201 - } 170 170 + invalid(`Handle is already taken`); 171 171 + } 202 172 203 203 - throw err; 173 173 + // update PLC document for did:plc accounts 174 174 + if (did.startsWith('did:plc:')) { 175 175 + try { 176 176 + await updatePlcHandle(ctx, did as Did<'plc'>, handle); 177 177 + } catch (err) { 178 178 + if (err instanceof PlcClientError) { 179 179 + invalid(`Unable to update DID document, please try again later`); 204 180 } 181 181 + 182 182 + throw err; 205 183 } 184 184 + } 206 185 207 207 - // update local database and emit identity event 208 208 - accountManager.updateAccountHandle(did, handle); 209 209 - await ctx.sequencer.emitIdentity(did, handle); 210 210 - }, 211 211 - ); 186 186 + // update local database and emit identity event 187 187 + ctx.accountManager.updateAccountHandle(did, handle); 188 188 + await ctx.sequencer.emitIdentity(did, handle); 189 189 + }, 190 190 + ); 212 191 213 213 - /** 214 214 - * triggers identity event to refresh handle caches after verifying handle still resolves. 215 215 - */ 216 216 - const refreshHandleForm = form(v.object({}), async () => { 217 217 - const { did } = verifyCredentials(); 192 192 + /** 193 193 + * triggers identity event to refresh handle caches after verifying handle still resolves. 194 194 + */ 195 195 + export const refreshHandleForm = form(v.object({}), async () => { 196 196 + const { accountManager, sequencer } = getAppContext(); 197 197 + const { did } = getSession(); 218 198 219 219 - const account = accountManager.getAccount(did)!; 220 220 - if (!account.handle) { 221 221 - invalid(`Handle not set`); 222 222 - } 199 199 + const account = accountManager.getAccount(did)!; 200 200 + if (!account.handle) { 201 201 + invalid(`Handle not set`); 202 202 + } 223 203 224 224 - // verify handle still resolves correctly 225 225 - try { 226 226 - await accountManager.validateHandle(account.handle, { did }); 227 227 - } catch (err) { 228 228 - if (err instanceof XRPCError && err.status === 400) { 229 229 - switch (err.error) { 230 230 - case 'InvalidHandle': { 231 231 - invalid(err.description ?? `Handle is no longer valid`); 232 232 - } 233 233 - case 'UnsupportedDomain': { 234 234 - invalid(`Handle no longer resolves to your DID`); 235 235 - } 204 204 + // verify handle still resolves correctly 205 205 + try { 206 206 + await accountManager.validateHandle(account.handle, { did }); 207 207 + } catch (err) { 208 208 + if (err instanceof XRPCError && err.status === 400) { 209 209 + switch (err.error) { 210 210 + case 'InvalidHandle': { 211 211 + invalid(err.description ?? `Handle is no longer valid`); 212 212 + } 213 213 + case 'UnsupportedDomain': { 214 214 + invalid(`Handle no longer resolves to your DID`); 236 215 } 237 216 } 238 238 - throw err; 239 217 } 240 240 - 241 241 - // emit identity event with current handle to trigger cache refresh 242 242 - await ctx.sequencer.emitIdentity(did, account.handle); 243 243 - }); 218 218 + throw err; 219 219 + } 244 220 245 245 - return { 246 246 - signInForm, 247 247 - createAppPasswordForm, 248 248 - deleteAppPasswordForm, 249 249 - updateHandleForm, 250 250 - refreshHandleForm, 251 251 - }; 252 252 - }; 221 221 + // emit identity event with current handle to trigger cache refresh 222 222 + await sequencer.emitIdentity(did, account.handle); 223 223 + }); 253 224 254 225 /** 255 226 * updates the handle in a did:plc document.

-851

packages/danaus/src/web/account/index.tsx

reviewed

··· 1 1 - import type { Did } from '@atcute/lexicons'; 2 2 - 3 3 - import { Hono, type Context } from 'hono'; 4 4 - import { HTTPException } from 'hono/http-exception'; 5 5 - import { jsxRenderer } from 'hono/jsx-renderer'; 6 6 - 7 7 - import { AppPasswordPrivilege } from '#app/accounts/db/schema.ts'; 8 8 - import type { WebSession } from '#app/accounts/manager.ts'; 9 9 - import { readWebSessionToken, verifyWebSessionToken } from '#app/auth/web.ts'; 10 10 - import type { AppContext } from '#app/context.ts'; 11 11 - 12 12 - import AsideItem from '../admin/components/aside-item.tsx'; 13 13 - import { IdProvider } from '../components/id.tsx'; 14 14 - import { registerForms } from '../forms/index.ts'; 15 15 - import AtOutlined from '../icons/central/at-outlined.tsx'; 16 16 - import DotGrid1x3HorizontalOutlined from '../icons/central/dot-grid-1x3-horizontal-outlined.tsx'; 17 17 - import Key2Outlined from '../icons/central/key-2-outlined.tsx'; 18 18 - import PasskeysOutlined from '../icons/central/passkeys-outlined.tsx'; 19 19 - import PasswordOutlined from '../icons/central/password-outlined.tsx'; 20 20 - import PersonOutlined from '../icons/central/person-outlined.tsx'; 21 21 - import PhoneOutlined from '../icons/central/phone-outlined.tsx'; 22 22 - import PlusLargeOutlined from '../icons/central/plus-large-outlined.tsx'; 23 23 - import ShieldOutlined from '../icons/central/shield-outlined.tsx'; 24 24 - import UsbOutlined from '../icons/central/usb-outlined.tsx'; 25 25 - import AccordionHeader from '../primitives/accordion-header.tsx'; 26 26 - import AccordionItem from '../primitives/accordion-item.tsx'; 27 27 - import AccordionPanel from '../primitives/accordion-panel.tsx'; 28 28 - import Accordion from '../primitives/accordion.tsx'; 29 29 - import Button from '../primitives/button.tsx'; 30 30 - import DialogActions from '../primitives/dialog-actions.tsx'; 31 31 - import DialogBody from '../primitives/dialog-body.tsx'; 32 32 - import DialogClose from '../primitives/dialog-close.tsx'; 33 33 - import DialogContent from '../primitives/dialog-content.tsx'; 34 34 - import DialogSurface from '../primitives/dialog-surface.tsx'; 35 35 - import DialogTitle from '../primitives/dialog-title.tsx'; 36 36 - import DialogTrigger from '../primitives/dialog-trigger.tsx'; 37 37 - import Dialog from '../primitives/dialog.tsx'; 38 38 - import Field from '../primitives/field.tsx'; 39 39 - import Input from '../primitives/input.tsx'; 40 40 - import MenuDivider from '../primitives/menu-divider.tsx'; 41 41 - import MenuItem from '../primitives/menu-item.tsx'; 42 42 - import MenuList from '../primitives/menu-list.tsx'; 43 43 - import MenuPopover from '../primitives/menu-popover.tsx'; 44 44 - import MenuTrigger from '../primitives/menu-trigger.tsx'; 45 45 - import Menu from '../primitives/menu.tsx'; 46 46 - import MessageBarBody from '../primitives/message-bar-body.tsx'; 47 47 - import MessageBarTitle from '../primitives/message-bar-title.tsx'; 48 48 - import MessageBar from '../primitives/message-bar.tsx'; 49 49 - import Select from '../primitives/select.tsx'; 50 50 - 51 51 - import { createAccountForms } from './forms.ts'; 52 52 - 53 53 - export const createAccountApp = (ctx: AppContext) => { 54 54 - const app = new Hono(); 55 55 - 56 56 - const forms = createAccountForms(ctx); 57 57 - app.use(registerForms(forms)); 58 58 - 59 59 - // #region verify credentials helper 60 60 - const verifyCredentials = (c: Context): WebSession => { 61 61 - const token = readWebSessionToken(c.req.raw); 62 62 - if (!token) { 63 63 - throw new HTTPException(302, { 64 64 - res: c.redirect(`/account/login?redirect=${encodeURIComponent(c.req.path)}`), 65 65 - }); 66 66 - } 67 67 - 68 68 - const sessionId = verifyWebSessionToken(ctx.config.secrets.jwtKey, token); 69 69 - if (!sessionId) { 70 70 - throw new HTTPException(302, { 71 71 - res: c.redirect(`/account/login?redirect=${encodeURIComponent(c.req.path)}`), 72 72 - }); 73 73 - } 74 74 - 75 75 - const session = ctx.accountManager.getWebSession(sessionId); 76 76 - if (!session) { 77 77 - throw new HTTPException(302, { 78 78 - res: c.redirect(`/account/login?redirect=${encodeURIComponent(c.req.path)}`), 79 79 - }); 80 80 - } 81 81 - 82 82 - return session; 83 83 - }; 84 84 - // #endregion 85 85 - 86 86 - // #region base HTML renderer 87 87 - app.use( 88 88 - jsxRenderer(({ children }) => { 89 89 - return ( 90 90 - <IdProvider> 91 91 - <html lang="en"> 92 92 - <head> 93 93 - <meta charset="utf-8" /> 94 94 - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 95 95 - <link rel="stylesheet" href="/assets/style.css" /> 96 96 - </head> 97 97 - 98 98 - <body> 99 99 - <div class="flex min-h-dvh flex-col">{children}</div> 100 100 - </body> 101 101 - </html> 102 102 - </IdProvider> 103 103 - ); 104 104 - }), 105 105 - ); 106 106 - // #endregion 107 107 - 108 108 - // #region login route (unauthenticated) 109 109 - app.on(['GET', 'POST'], '/login', (c) => { 110 110 - const { signInForm } = forms; 111 111 - const { fields } = signInForm; 112 112 - 113 113 - return c.render( 114 114 - <> 115 115 - <title>sign in - danaus</title> 116 116 - 117 117 - <div class="flex flex-1 items-center justify-center p-4"> 118 118 - <div class="w-full max-w-96 rounded-xl bg-neutral-background-1 p-6 shadow-16"> 119 119 - <form {...signInForm} class="flex flex-col gap-6"> 120 120 - <h1 class="text-base-500 font-semibold">Sign in to your account</h1> 121 121 - 122 122 - <Field 123 123 - label="Handle or email" 124 124 - required 125 125 - validationMessageText={fields.identifier.issues()[0]?.message} 126 126 - > 127 127 - <Input {...fields.identifier.as('text')} placeholder="alice.bsky.social" required autofocus /> 128 128 - </Field> 129 129 - 130 130 - <Field label="Password" required validationMessageText={fields.password.issues()[0]?.message}> 131 131 - <Input {...fields.password.as('password')} required /> 132 132 - </Field> 133 133 - 134 134 - <Button type="submit" variant="primary"> 135 135 - Sign in 136 136 - </Button> 137 137 - </form> 138 138 - </div> 139 139 - </div> 140 140 - </>, 141 141 - ); 142 142 - }); 143 143 - // #endregion 144 144 - 145 145 - // #region overview route 146 146 - app.on(['GET', 'POST'], '/', (c) => { 147 147 - const session = verifyCredentials(c); 148 148 - const account = ctx.accountManager.getAccount(session.did); 149 149 - const { updateHandleForm, refreshHandleForm } = forms; 150 150 - 151 151 - // determine current handle parts for form prefill 152 152 - const currentHandle = account?.handle ?? ''; 153 153 - const isServiceHandle = ctx.config.identity.serviceHandleDomains.some((d) => currentHandle.endsWith(d)); 154 154 - const currentDomain = isServiceHandle 155 155 - ? (ctx.config.identity.serviceHandleDomains.find((d) => currentHandle.endsWith(d)) ?? 'custom') 156 156 - : 'custom'; 157 157 - const currentLocalPart = isServiceHandle ? currentHandle.slice(0, -currentDomain.length) : currentHandle; 158 158 - 159 159 - const updateHandleError = updateHandleForm.fields.allIssues().at(0); 160 160 - const refreshHandleError = refreshHandleForm.fields.allIssues().at(0); 161 161 - 162 162 - return c.render( 163 163 - <AccountLayout> 164 164 - <title>My account - Danaus</title> 165 165 - 166 166 - <div class="flex flex-col gap-4"> 167 167 - <div class="flex h-8 items-center"> 168 168 - <h3 class="text-base-400 font-medium">Account overview</h3> 169 169 - </div> 170 170 - 171 171 - {updateHandleError && ( 172 172 - <MessageBar intent="error" layout="singleline"> 173 173 - <MessageBarBody>{updateHandleError.message}</MessageBarBody> 174 174 - </MessageBar> 175 175 - )} 176 176 - 177 177 - {refreshHandleError && ( 178 178 - <MessageBar intent="error" layout="singleline"> 179 179 - <MessageBarBody>{refreshHandleError.message}</MessageBarBody> 180 180 - </MessageBar> 181 181 - )} 182 182 - 183 183 - <div class="flex flex-col gap-8"> 184 184 - <div class="flex flex-col gap-2"> 185 185 - <h4 class="text-base-300 font-medium text-neutral-foreground-2">Your identity</h4> 186 186 - 187 187 - <div class="flex flex-col divide-y divide-neutral-stroke-2 rounded-md bg-neutral-background-1 shadow-4"> 188 188 - <div class="flex items-center gap-4 px-4 py-3"> 189 189 - <div class="min-w-0 grow"> 190 190 - <p class="text-base-300 font-medium wrap-break-word">@{account?.handle}</p> 191 191 - <p class="text-base-300 text-neutral-foreground-3">Your username on the network</p> 192 192 - </div> 193 193 - 194 194 - <Menu> 195 195 - <MenuTrigger> 196 196 - <button class="grid h-6 w-6 shrink-0 place-items-center rounded-md bg-subtle-background text-neutral-foreground-3 outline-2 -outline-offset-2 outline-transparent transition hover:bg-subtle-background-hover hover:text-neutral-foreground-3-hover focus-visible:outline-stroke-focus-2 active:bg-subtle-background-active active:text-neutral-foreground-3-active"> 197 197 - <DotGrid1x3HorizontalOutlined size={16} /> 198 198 - </button> 199 199 - </MenuTrigger> 200 200 - 201 201 - <MenuPopover> 202 202 - <MenuList> 203 203 - <MenuItem command="show-modal" commandfor="change-service-handle-dialog"> 204 204 - Change handle 205 205 - </MenuItem> 206 206 - 207 207 - <MenuItem command="show-modal" commandfor="refresh-handle-dialog"> 208 208 - Request refresh 209 209 - </MenuItem> 210 210 - </MenuList> 211 211 - </MenuPopover> 212 212 - </Menu> 213 213 - </div> 214 214 - </div> 215 215 - </div> 216 216 - 217 217 - <div class="flex flex-col gap-2"> 218 218 - <h4 class="text-base-300 font-medium text-neutral-foreground-2">Account management</h4> 219 219 - 220 220 - <div class="flex flex-col divide-y divide-neutral-stroke-2 rounded-md bg-neutral-background-1 shadow-4"> 221 221 - <div class="flex items-center gap-4 px-4 py-3"> 222 222 - <div class="min-w-0 grow"> 223 223 - <p class="text-base-300 font-medium">Data export</p> 224 224 - <p class="text-base-300 text-neutral-foreground-3">Download your repository and blobs</p> 225 225 - </div> 226 226 - 227 227 - <Button disabled>Export</Button> 228 228 - </div> 229 229 - 230 230 - <div class="flex items-center gap-4 px-4 py-3"> 231 231 - <div class="min-w-0 grow"> 232 232 - <p class="text-base-300 font-medium">Deactivate account</p> 233 233 - <p class="text-base-300 text-neutral-foreground-3">Temporarily disable your account</p> 234 234 - </div> 235 235 - 236 236 - <Button disabled>Deactivate</Button> 237 237 - </div> 238 238 - 239 239 - <div class="flex items-center gap-4 px-4 py-3"> 240 240 - <div class="min-w-0 grow"> 241 241 - <p class="text-base-300 font-medium">Delete account</p> 242 242 - <p class="text-base-300 text-neutral-foreground-3">Permanently delete your account</p> 243 243 - </div> 244 244 - 245 245 - <Button disabled>Delete</Button> 246 246 - </div> 247 247 - </div> 248 248 - </div> 249 249 - </div> 250 250 - </div> 251 251 - 252 252 - <Dialog id="change-service-handle-dialog"> 253 253 - <DialogSurface> 254 254 - <DialogBody> 255 255 - <DialogTitle>Change handle</DialogTitle> 256 256 - 257 257 - <form {...updateHandleForm} class="contents"> 258 258 - <DialogContent class="flex flex-col gap-4"> 259 259 - <p class="text-base-300 text-neutral-foreground-3"> 260 260 - Your handle is your unique identity on the AT Protocol network. 261 261 - </p> 262 262 - 263 263 - <Field label="Handle" required> 264 264 - <div class="flex gap-2"> 265 265 - <Input 266 266 - {...updateHandleForm.fields.handle.as('text')} 267 267 - value={updateHandleForm.fields.handle.value() || currentLocalPart} 268 268 - placeholder="alice" 269 269 - contentBefore={<AtOutlined size={16} />} 270 270 - class="grow" 271 271 - /> 272 272 - 273 273 - <Select 274 274 - {...updateHandleForm.fields.domain.as('select')} 275 275 - value={updateHandleForm.fields.domain.value() || currentDomain} 276 276 - options={ctx.config.identity.serviceHandleDomains.map((d) => ({ 277 277 - value: d, 278 278 - label: d, 279 279 - }))} 280 280 - /> 281 281 - </div> 282 282 - </Field> 283 283 - 284 284 - <div></div> 285 285 - </DialogContent> 286 286 - 287 287 - <DialogActions> 288 288 - <Button command="show-modal" commandfor="change-custom-handle-dialog"> 289 289 - Use my own domain 290 290 - </Button> 291 291 - 292 292 - <div class="grow"></div> 293 293 - 294 294 - <DialogClose> 295 295 - <Button>Cancel</Button> 296 296 - </DialogClose> 297 297 - 298 298 - <Button type="submit" variant="primary"> 299 299 - Change 300 300 - </Button> 301 301 - </DialogActions> 302 302 - </form> 303 303 - </DialogBody> 304 304 - </DialogSurface> 305 305 - </Dialog> 306 306 - 307 307 - <Dialog id="refresh-handle-dialog"> 308 308 - <DialogSurface> 309 309 - <DialogBody> 310 310 - <DialogTitle>Request handle refresh</DialogTitle> 311 311 - 312 312 - <form {...refreshHandleForm} class="contents"> 313 313 - <DialogContent> 314 314 - <p class="text-base-300"> 315 315 - This will notify the network to re-verify your handle. Use this if apps are marking your 316 316 - handle as invalid despite being set up correctly. 317 317 - </p> 318 318 - </DialogContent> 319 319 - 320 320 - <DialogActions> 321 321 - <DialogClose> 322 322 - <Button>Cancel</Button> 323 323 - </DialogClose> 324 324 - 325 325 - <Button type="submit" variant="primary"> 326 326 - Refresh 327 327 - </Button> 328 328 - </DialogActions> 329 329 - </form> 330 330 - </DialogBody> 331 331 - </DialogSurface> 332 332 - </Dialog> 333 333 - 334 334 - <Dialog id="change-custom-handle-dialog"> 335 335 - <DialogSurface> 336 336 - <DialogBody> 337 337 - <DialogTitle>Change handle</DialogTitle> 338 338 - 339 339 - <form {...updateHandleForm} class="contents"> 340 340 - <DialogContent class="flex flex-col gap-4"> 341 341 - <p class="text-base-300 text-neutral-foreground-3"> 342 342 - Your handle is your unique identity on the AT Protocol network. 343 343 - </p> 344 344 - 345 345 - <Field label="Handle" required> 346 346 - <Input 347 347 - {...updateHandleForm.fields.handle.as('text')} 348 348 - placeholder="alice.com" 349 349 - contentBefore={<AtOutlined size={16} />} 350 350 - /> 351 351 - </Field> 352 352 - 353 353 - <input {...updateHandleForm.fields.domain.as('hidden', 'custom')} /> 354 354 - 355 355 - <Accordion class="flex flex-col gap-2"> 356 356 - <AccordionItem name="handle-method" open> 357 357 - <AccordionHeader>DNS record</AccordionHeader> 358 358 - <AccordionPanel> 359 359 - <div class="flex flex-col gap-3"> 360 360 - <p class="text-base-300 text-neutral-foreground-3"> 361 361 - Add the following DNS record to your domain: 362 362 - </p> 363 363 - 364 364 - <div class="flex flex-col gap-2 rounded-md bg-neutral-background-3 p-3"> 365 365 - <div class="flex flex-col gap-0.5"> 366 366 - <span class="text-base-200 text-neutral-foreground-3">Host</span> 367 367 - <input 368 368 - type="text" 369 369 - readonly 370 370 - value="_atproto.<your-domain>" 371 371 - class="font-mono text-base-300 outline-none" 372 372 - /> 373 373 - </div> 374 374 - <div class="flex flex-col gap-0.5"> 375 375 - <span class="text-base-200 text-neutral-foreground-3">Type</span> 376 376 - <input 377 377 - type="text" 378 378 - readonly 379 379 - value="TXT" 380 380 - class="font-mono text-base-300 outline-none" 381 381 - /> 382 382 - </div> 383 383 - <div class="flex flex-col gap-0.5"> 384 384 - <span class="text-base-200 text-neutral-foreground-3">Value</span> 385 385 - <input 386 386 - type="text" 387 387 - readonly 388 388 - value={`did=${session.did}`} 389 389 - class="font-mono text-base-300 outline-none" 390 390 - /> 391 391 - </div> 392 392 - </div> 393 393 - </div> 394 394 - </AccordionPanel> 395 395 - </AccordionItem> 396 396 - 397 397 - <AccordionItem name="handle-method"> 398 398 - <AccordionHeader>HTTP well-known entry</AccordionHeader> 399 399 - <AccordionPanel> 400 400 - <div class="flex flex-col gap-3"> 401 401 - <p class="text-base-300 text-neutral-foreground-3"> 402 402 - Upload a text file to the following URL: 403 403 - </p> 404 404 - 405 405 - <div class="flex flex-col gap-2 rounded-md bg-neutral-background-3 p-3"> 406 406 - <div class="flex flex-col gap-0.5"> 407 407 - <span class="text-base-200 text-neutral-foreground-3">URL</span> 408 408 - <input 409 409 - type="text" 410 410 - readonly 411 411 - value="https://<your-domain>/.well-known/atproto-did" 412 412 - class="font-mono text-base-300 outline-none" 413 413 - /> 414 414 - </div> 415 415 - <div class="flex flex-col gap-0.5"> 416 416 - <span class="text-base-200 text-neutral-foreground-3">Contents</span> 417 417 - <input 418 418 - type="text" 419 419 - readonly 420 420 - value={session.did} 421 421 - class="font-mono text-base-300 outline-none" 422 422 - /> 423 423 - </div> 424 424 - </div> 425 425 - </div> 426 426 - </AccordionPanel> 427 427 - </AccordionItem> 428 428 - </Accordion> 429 429 - </DialogContent> 430 430 - 431 431 - <DialogActions> 432 432 - <DialogClose> 433 433 - <Button>Cancel</Button> 434 434 - </DialogClose> 435 435 - 436 436 - <Button type="submit" variant="primary"> 437 437 - Change 438 438 - </Button> 439 439 - </DialogActions> 440 440 - </form> 441 441 - </DialogBody> 442 442 - </DialogSurface> 443 443 - </Dialog> 444 444 - </AccountLayout>, 445 445 - ); 446 446 - }); 447 447 - // #endregion 448 448 - 449 449 - // #region app passwords route 450 450 - app.on(['GET', 'POST'], '/app-passwords', (c) => { 451 451 - const session = verifyCredentials(c); 452 452 - const did = session.did as Did; 453 453 - const { createAppPasswordForm, deleteAppPasswordForm } = forms; 454 454 - 455 455 - const passwords = ctx.accountManager.listAppPasswords(did); 456 456 - 457 457 - const newPasswordResult = createAppPasswordForm.result; 458 458 - const newPasswordError = createAppPasswordForm.fields.allIssues().at(0); 459 459 - 460 460 - return c.render( 461 461 - <AccountLayout> 462 462 - <title>App passwords - Danaus</title> 463 463 - 464 464 - <div class="flex flex-col gap-4"> 465 465 - <div class="flex h-8 shrink-0 items-center justify-between"> 466 466 - <h3 class="text-base-400 font-medium">App passwords</h3> 467 467 - 468 468 - <Button commandfor="create-app-password-dialog" command="show-modal" variant="primary"> 469 469 - <PlusLargeOutlined size={16} /> 470 470 - New 471 471 - </Button> 472 472 - </div> 473 473 - 474 474 - {newPasswordResult && ( 475 475 - <MessageBar intent="success" layout="multiline"> 476 476 - <MessageBarBody> 477 477 - <MessageBarTitle>App password created</MessageBarTitle> 478 478 - 479 479 - <div class="mt-2 flex flex-col gap-2"> 480 480 - <code class="rounded-md bg-neutral-background-3 px-2 py-1 font-mono text-base-300"> 481 481 - {newPasswordResult.secret} 482 482 - </code> 483 483 - <p class="text-base-200 text-neutral-foreground-3"> 484 484 - Copy this password now. You won't be able to see it again. 485 485 - </p> 486 486 - </div> 487 487 - </MessageBarBody> 488 488 - </MessageBar> 489 489 - )} 490 490 - 491 491 - {newPasswordError && ( 492 492 - <MessageBar intent="error" layout="singleline"> 493 493 - <MessageBarBody>{newPasswordError.message}</MessageBarBody> 494 494 - </MessageBar> 495 495 - )} 496 496 - 497 497 - {/* {passwords.length === 0 ? ( 498 498 - <p class="py-8 text-center text-base-300 text-neutral-foreground-3">no app passwords yet.</p> 499 499 - ) : ( 500 500 - <ul class="divide-y divide-neutral-stroke-2"> 501 501 - {passwords.map((password) => ( 502 502 - <li class="flex items-center justify-between gap-4 py-3"> 503 503 - <div class="flex flex-col"> 504 504 - <span class="text-base-300 font-medium">{password.name}</span> 505 505 - <span class="text-base-200 text-neutral-foreground-3"> 506 506 - {formatAppPasswordPrivilege(password.privilege)} · created{' '} 507 507 - {password.created_at.toLocaleDateString()} 508 508 - </span> 509 509 - </div> 510 510 - <form {...deleteAppPasswordForm} class="contents"> 511 511 - <input type="hidden" name="name" value={password.name} /> 512 512 - <Button type="submit" variant="subtle"> 513 513 - <TrashCanOutlined size={16} /> 514 514 - Delete 515 515 - </Button> 516 516 - </form> 517 517 - </li> 518 518 - ))} 519 519 - </ul> 520 520 - )} */} 521 521 - 522 522 - <div class="flex flex-col divide-y divide-neutral-stroke-2 rounded-md bg-neutral-background-1 shadow-4"> 523 523 - {passwords.length === 0 && ( 524 524 - <div class="flex flex-col gap-1 p-8 text-center"> 525 525 - <p class="text-base-300 font-medium">No app passwords created</p> 526 526 - <p class="text-base-300 text-neutral-foreground-3"> 527 527 - App passwords lets you sign into legacy AT Protocol apps. 528 528 - </p> 529 529 - </div> 530 530 - )} 531 531 - 532 532 - {passwords.map((password) => { 533 533 - let privilege = `Unknown`; 534 534 - switch (password.privilege) { 535 535 - case AppPasswordPrivilege.Full: { 536 536 - privilege = `Full access`; 537 537 - break; 538 538 - } 539 539 - case AppPasswordPrivilege.Privileged: { 540 540 - privilege = `Privileged access`; 541 541 - break; 542 542 - } 543 543 - case AppPasswordPrivilege.Limited: { 544 544 - privilege = `Limited access`; 545 545 - break; 546 546 - } 547 547 - } 548 548 - 549 549 - return ( 550 550 - <div class="flex items-center gap-4 px-4 py-3"> 551 551 - <Key2Outlined size={24} class="shrink-0" /> 552 552 - 553 553 - <div class="min-w-0 grow"> 554 554 - <p class="text-base-300">{password.name}</p> 555 555 - <p class="text-base-300 text-neutral-foreground-3">{privilege}</p> 556 556 - </div> 557 557 - 558 558 - <Menu> 559 559 - <MenuTrigger> 560 560 - <button class="grid h-6 w-6 shrink-0 place-items-center rounded-md bg-subtle-background text-neutral-foreground-3 outline-2 -outline-offset-2 outline-transparent transition hover:bg-subtle-background-hover hover:text-neutral-foreground-3-hover focus-visible:outline-stroke-focus-2 active:bg-subtle-background-active active:text-neutral-foreground-3-active"> 561 561 - <DotGrid1x3HorizontalOutlined size={16} /> 562 562 - </button> 563 563 - </MenuTrigger> 564 564 - 565 565 - <MenuPopover> 566 566 - <MenuList> 567 567 - <Dialog> 568 568 - <DialogTrigger> 569 569 - <MenuItem>Delete</MenuItem> 570 570 - </DialogTrigger> 571 571 - 572 572 - <DialogSurface> 573 573 - <DialogBody> 574 574 - <DialogTitle>Delete this app password?</DialogTitle> 575 575 - 576 576 - <form {...deleteAppPasswordForm} class="contents"> 577 577 - <DialogContent> 578 578 - <p class="text-base-300"> 579 579 - You'll no longer be able to sign in to legacy apps using the{' '} 580 580 - <strong>{password.name}</strong> app password. 581 581 - </p> 582 582 - 583 583 - <input {...deleteAppPasswordForm.fields.name.as('hidden', password.name)} /> 584 584 - </DialogContent> 585 585 - 586 586 - <DialogActions> 587 587 - <DialogClose> 588 588 - <Button>Cancel</Button> 589 589 - </DialogClose> 590 590 - 591 591 - <Button type="submit" variant="primary"> 592 592 - Delete 593 593 - </Button> 594 594 - </DialogActions> 595 595 - </form> 596 596 - </DialogBody> 597 597 - </DialogSurface> 598 598 - </Dialog> 599 599 - </MenuList> 600 600 - </MenuPopover> 601 601 - </Menu> 602 602 - </div> 603 603 - ); 604 604 - })} 605 605 - </div> 606 606 - </div> 607 607 - 608 608 - <Dialog id="create-app-password-dialog"> 609 609 - <DialogSurface> 610 610 - <DialogBody> 611 611 - <DialogTitle>Create app password</DialogTitle> 612 612 - 613 613 - <form {...createAppPasswordForm} class="contents"> 614 614 - <DialogContent class="flex flex-col gap-6"> 615 615 - <Field label="Name" required> 616 616 - <Input {...createAppPasswordForm.fields.name.as('text')} placeholder="My app" required /> 617 617 - </Field> 618 618 - 619 619 - <Field label="Privilege"> 620 620 - <Select 621 621 - {...createAppPasswordForm.fields.privilege.as('select')} 622 622 - options={[ 623 623 - { value: 'limited', label: 'Limited - cannot access DMs' }, 624 624 - { value: 'privileged', label: 'Privileged - can access DMs' }, 625 625 - { value: 'full', label: 'Full - full account access' }, 626 626 - ]} 627 627 - /> 628 628 - </Field> 629 629 - </DialogContent> 630 630 - 631 631 - <DialogActions> 632 632 - <Button commandfor="create-app-password-dialog" command="close" variant="outlined"> 633 633 - Cancel 634 634 - </Button> 635 635 - <Button type="submit" variant="primary"> 636 636 - Create 637 637 - </Button> 638 638 - </DialogActions> 639 639 - </form> 640 640 - </DialogBody> 641 641 - </DialogSurface> 642 642 - </Dialog> 643 643 - </AccountLayout>, 644 644 - ); 645 645 - }); 646 646 - // #endregion 647 647 - 648 648 - // #region security route 649 649 - app.get('/security', (c) => { 650 650 - const session = verifyCredentials(c); 651 651 - const account = ctx.accountManager.getAccount(session.did); 652 652 - 653 653 - return c.render( 654 654 - <AccountLayout> 655 655 - <title>Security - Danaus</title> 656 656 - 657 657 - <div class="flex flex-col gap-4"> 658 658 - <div class="flex h-8 shrink-0 items-center"> 659 659 - <h3 class="text-base-400 font-medium">Security</h3> 660 660 - </div> 661 661 - 662 662 - <div class="flex flex-col gap-8"> 663 663 - <div class="flex flex-col gap-2"> 664 664 - <h4 class="text-base-300 font-medium text-neutral-foreground-2">Account information</h4> 665 665 - 666 666 - <div class="flex flex-col divide-y divide-neutral-stroke-2 rounded-md bg-neutral-background-1 shadow-4"> 667 667 - <div class="flex items-center gap-4 px-4 py-3"> 668 668 - <div class="min-w-0 grow"> 669 669 - <p class="text-base-300 font-medium wrap-break-word">{account?.email}</p> 670 670 - <p class="text-base-300 text-neutral-foreground-3"> 671 671 - {account?.email_confirmed_at ? 'Verified' : 'Not verified'} 672 672 - </p> 673 673 - </div> 674 674 - 675 675 - {!account?.email_confirmed_at && <Button>Verify</Button>} 676 676 - 677 677 - <Menu> 678 678 - <MenuTrigger> 679 679 - <button class="grid h-6 w-6 shrink-0 place-items-center rounded-md bg-subtle-background text-neutral-foreground-3 outline-2 -outline-offset-2 outline-transparent transition hover:bg-subtle-background-hover hover:text-neutral-foreground-3-hover focus-visible:outline-stroke-focus-2 active:bg-subtle-background-active active:text-neutral-foreground-3-active"> 680 680 - <DotGrid1x3HorizontalOutlined size={16} /> 681 681 - </button> 682 682 - </MenuTrigger> 683 683 - 684 684 - <MenuPopover> 685 685 - <MenuList> 686 686 - <MenuItem>Change email</MenuItem> 687 687 - </MenuList> 688 688 - </MenuPopover> 689 689 - </Menu> 690 690 - </div> 691 691 - </div> 692 692 - </div> 693 693 - 694 694 - <div class="flex flex-col gap-2"> 695 695 - <h4 class="text-base-300 font-medium text-neutral-foreground-2">Ways to prove who you are</h4> 696 696 - 697 697 - <div class="flex flex-col divide-y divide-neutral-stroke-2 rounded-md bg-neutral-background-1 shadow-4"> 698 698 - <div class="flex items-center gap-4 px-4 py-3"> 699 699 - <PasswordOutlined size={24} class="shrink-0" /> 700 700 - 701 701 - <div class="min-w-0 grow"> 702 702 - <p class="text-base-300 font-medium wrap-break-word">Password</p> 703 703 - <p class="text-base-300 text-neutral-foreground-3">Last changed yesterday</p> 704 704 - </div> 705 705 - 706 706 - <Menu> 707 707 - <MenuTrigger> 708 708 - <button class="grid h-6 w-6 shrink-0 place-items-center rounded-md bg-subtle-background text-neutral-foreground-3 outline-2 -outline-offset-2 outline-transparent transition hover:bg-subtle-background-hover hover:text-neutral-foreground-3-hover focus-visible:outline-stroke-focus-2 active:bg-subtle-background-active active:text-neutral-foreground-3-active"> 709 709 - <DotGrid1x3HorizontalOutlined size={16} /> 710 710 - </button> 711 711 - </MenuTrigger> 712 712 - 713 713 - <MenuPopover> 714 714 - <MenuList> 715 715 - <MenuItem>Change password</MenuItem> 716 716 - </MenuList> 717 717 - </MenuPopover> 718 718 - </Menu> 719 719 - </div> 720 720 - 721 721 - <div class="flex items-center gap-4 px-4 py-3"> 722 722 - <PhoneOutlined size={24} class="shrink-0" /> 723 723 - 724 724 - <div class="min-w-0 grow"> 725 725 - <p class="text-base-300 font-medium wrap-break-word">Bitwarden</p> 726 726 - <p class="text-base-300 text-neutral-foreground-3">Authenticator · Added yesterday</p> 727 727 - </div> 728 728 - 729 729 - <Menu> 730 730 - <MenuTrigger> 731 731 - <button class="grid h-6 w-6 shrink-0 place-items-center rounded-md bg-subtle-background text-neutral-foreground-3 outline-2 -outline-offset-2 outline-transparent transition hover:bg-subtle-background-hover hover:text-neutral-foreground-3-hover focus-visible:outline-stroke-focus-2 active:bg-subtle-background-active active:text-neutral-foreground-3-active"> 732 732 - <DotGrid1x3HorizontalOutlined size={16} /> 733 733 - </button> 734 734 - </MenuTrigger> 735 735 - 736 736 - <MenuPopover> 737 737 - <MenuList> 738 738 - <MenuItem>Rename</MenuItem> 739 739 - <MenuDivider /> 740 740 - <MenuItem>Remove</MenuItem> 741 741 - </MenuList> 742 742 - </MenuPopover> 743 743 - </Menu> 744 744 - </div> 745 745 - 746 746 - <div class="flex items-center gap-4 px-4 py-3"> 747 747 - <UsbOutlined size={24} class="shrink-0" /> 748 748 - 749 749 - <div class="min-w-0 grow"> 750 750 - <p class="text-base-300 font-medium wrap-break-word">YubiKey 5</p> 751 751 - <p class="text-base-300 text-neutral-foreground-3">Security key · Added 2 weeks ago</p> 752 752 - </div> 753 753 - 754 754 - <Menu> 755 755 - <MenuTrigger> 756 756 - <button class="grid h-6 w-6 shrink-0 place-items-center rounded-md bg-subtle-background text-neutral-foreground-3 outline-2 -outline-offset-2 outline-transparent transition hover:bg-subtle-background-hover hover:text-neutral-foreground-3-hover focus-visible:outline-stroke-focus-2 active:bg-subtle-background-active active:text-neutral-foreground-3-active"> 757 757 - <DotGrid1x3HorizontalOutlined size={16} /> 758 758 - </button> 759 759 - </MenuTrigger> 760 760 - 761 761 - <MenuPopover> 762 762 - <MenuList> 763 763 - <MenuItem>Rename</MenuItem> 764 764 - <MenuDivider /> 765 765 - <MenuItem>Remove</MenuItem> 766 766 - </MenuList> 767 767 - </MenuPopover> 768 768 - </Menu> 769 769 - </div> 770 770 - 771 771 - <div class="flex items-center gap-4 px-4 py-3"> 772 772 - <PasskeysOutlined size={24} class="shrink-0" /> 773 773 - 774 774 - <div class="min-w-0 grow"> 775 775 - <p class="text-base-300 font-medium wrap-break-word">iCloud Keychain</p> 776 776 - <p class="text-base-300 text-neutral-foreground-3">Passkey · Added last month</p> 777 777 - </div> 778 778 - 779 779 - <Menu> 780 780 - <MenuTrigger> 781 781 - <button class="grid h-6 w-6 shrink-0 place-items-center rounded-md bg-subtle-background text-neutral-foreground-3 outline-2 -outline-offset-2 outline-transparent transition hover:bg-subtle-background-hover hover:text-neutral-foreground-3-hover focus-visible:outline-stroke-focus-2 active:bg-subtle-background-active active:text-neutral-foreground-3-active"> 782 782 - <DotGrid1x3HorizontalOutlined size={16} /> 783 783 - </button> 784 784 - </MenuTrigger> 785 785 - 786 786 - <MenuPopover> 787 787 - <MenuList> 788 788 - <MenuItem>Rename</MenuItem> 789 789 - <MenuDivider /> 790 790 - <MenuItem>Remove</MenuItem> 791 791 - </MenuList> 792 792 - </MenuPopover> 793 793 - </Menu> 794 794 - </div> 795 795 - 796 796 - <button class="flex items-center gap-4 bg-subtle-background px-4 py-3 text-left outline-2 -outline-offset-2 outline-transparent transition select-none first:rounded-t-md last:rounded-b-md hover:bg-subtle-background-hover focus-visible:outline-stroke-focus-2 active:bg-subtle-background-active"> 797 797 - <div class="grid h-6 w-6 shrink-0 place-items-center"> 798 798 - <PlusLargeOutlined size={16} /> 799 799 - </div> 800 800 - 801 801 - <div class="min-w-0 grow"> 802 802 - <p class="text-base-300">Add another way to sign in</p> 803 803 - </div> 804 804 - </button> 805 805 - </div> 806 806 - </div> 807 807 - </div> 808 808 - </div> 809 809 - </AccountLayout>, 810 810 - ); 811 811 - }); 812 812 - // #endregion 813 813 - 814 814 - return app; 815 815 - }; 816 816 - 817 817 - // #region account layout component 818 818 - interface AccountLayoutProps { 819 819 - children?: unknown; 820 820 - } 821 821 - 822 822 - const AccountLayout = (props: AccountLayoutProps) => { 823 823 - return ( 824 824 - <div class="flex flex-col gap-4 p-4 sm:p-16 sm:pt-24 lg:grid lg:grid-cols-[280px_minmax(0,640px)] lg:justify-center"> 825 825 - <aside class="-ml-2 flex flex-col gap-4 sm:ml-0"> 826 826 - <div class="flex h-8 shrink-0 items-center pl-4"> 827 827 - <h2 class="text-base-400 font-medium">Account</h2> 828 828 - </div> 829 829 - 830 830 - <div class="flex flex-col gap-px"> 831 831 - <AsideItem href="/account" exact icon={<PersonOutlined size={20} />}> 832 832 - Overview 833 833 - </AsideItem> 834 834 - 835 835 - <AsideItem href="/account/app-passwords" icon={<Key2Outlined size={20} />}> 836 836 - App passwords 837 837 - </AsideItem> 838 838 - 839 839 - <AsideItem href="/account/security" icon={<ShieldOutlined size={20} />}> 840 840 - Security 841 841 - </AsideItem> 842 842 - </div> 843 843 - </aside> 844 844 - 845 845 - <hr class="border-neutral-stroke-1 sm:hidden" /> 846 846 - 847 847 - <main>{props.children}</main> 848 848 - </div> 849 849 - ); 850 850 - }; 851 851 - // #endregion

+7 -6

packages/danaus/src/web/admin/components/aside-item.tsx packages/danaus/src/web/components/aside-item.tsx

reviewed

··· 1 1 + import { getContext } from '@oomfware/fetch-router/middlewares/async-context'; 2 2 + import type { JSXNode } from '@oomfware/jsx'; 3 3 + 1 4 import { cva } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 3 - import { useRequestContext } from 'hono/jsx-renderer'; 4 5 5 6 const root = cva({ 6 7 base: [ ··· 22 23 href: string; 23 24 /** whether to match the path exactly (default: false) */ 24 25 exact?: boolean; 25 25 - icon?: Child; 26 26 - children?: Child; 26 26 + icon?: JSXNode; 27 27 + children?: JSXNode; 27 28 } 28 29 29 30 /** ··· 35 36 const AsideItem = (props: AsideItemProps) => { 36 37 const { href, exact = false, icon, children } = props; 37 38 38 38 - const c = useRequestContext(); 39 39 - const currentPath = c.req.path; 39 39 + const { url } = getContext(); 40 40 + const currentPath = url.pathname; 40 41 const isActive = exact ? currentPath === href : currentPath.startsWith(href); 41 42 42 43 return (

+61 -57

packages/danaus/src/web/admin/forms.ts

reviewed

··· 1 1 import type { Handle } from '@atcute/lexicons'; 2 2 import { XRPCError } from '@atcute/xrpc-server'; 3 3 + import { redirect } from '@oomfware/fetch-router'; 4 4 + import { form, invalid } from '@oomfware/forms'; 3 5 4 6 import * as v from 'valibot'; 5 7 6 8 import { MAX_PASSWORD_LENGTH, MIN_PASSWORD_LENGTH } from '#app/accounts/passwords.ts'; 7 9 import { provisionAccount } from '#app/api/local.danaus/account.createAccount.ts'; 8 8 - import type { AppContext } from '#app/context.ts'; 9 10 10 10 - import { form, invalid, redirect } from '../forms/index.ts'; 11 11 + import { getAppContext } from '../middlewares/app-context.ts'; 11 12 12 12 - export const createAdminForms = (ctx: AppContext) => { 13 13 - const createAccountForm = form( 14 14 - v.object({ 15 15 - handle: v.pipe( 16 16 - v.string(), 17 17 - v.minLength(1, `Handle is required`), 18 18 - v.maxLength(63, `Handle is too long`), 19 19 - v.regex(/^[a-zA-Z0-9][a-zA-Z0-9-]*$/, `Invalid handle`), 20 20 - ), 21 21 - domain: v.picklist(ctx.config.identity.serviceHandleDomains), 22 22 - email: v.pipe(v.string(), v.minLength(1, `Email is required`), v.email(`Invalid email`)), 23 23 - password: v.pipe( 24 24 - v.string(), 25 25 - v.minLength(1, `Password is required`), 26 26 - v.minLength(MIN_PASSWORD_LENGTH, `Password is too short`), 27 27 - v.maxLength(MAX_PASSWORD_LENGTH, `Password is too long`), 28 28 - ), 29 29 - }), 30 30 - async (data, issue) => { 31 31 - const handle = `${data.handle}${data.domain}` as Handle; 13 13 + export const createAccountForm = form( 14 14 + v.object({ 15 15 + handle: v.pipe( 16 16 + v.string(), 17 17 + v.minLength(1, `Handle is required`), 18 18 + v.maxLength(63, `Handle is too long`), 19 19 + v.regex(/^[a-zA-Z0-9][a-zA-Z0-9-]*$/, `Invalid handle`), 20 20 + ), 21 21 + domain: v.string(), 22 22 + email: v.pipe(v.string(), v.minLength(1, `Email is required`), v.email(`Invalid email`)), 23 23 + password: v.pipe( 24 24 + v.string(), 25 25 + v.minLength(1, `Password is required`), 26 26 + v.minLength(MIN_PASSWORD_LENGTH, `Password is too short`), 27 27 + v.maxLength(MAX_PASSWORD_LENGTH, `Password is too long`), 28 28 + ), 29 29 + }), 30 30 + async (data, issue) => { 31 31 + const ctx = getAppContext(); 32 32 33 33 - try { 34 34 - await provisionAccount(ctx, { 35 35 - handle, 36 36 - email: data.email, 37 37 - password: data.password, 38 38 - }); 33 33 + // validate domain against config 34 34 + if (!ctx.config.identity.serviceHandleDomains.includes(data.domain)) { 35 35 + invalid(issue.domain(`Invalid domain`)); 36 36 + } 39 37 40 40 - redirect(302, '/admin/accounts'); 41 41 - } catch (err) { 42 42 - if (err instanceof XRPCError && err.status === 400) { 43 43 - switch (err.error) { 44 44 - case 'InvalidHandle': 45 45 - case 'UnsupportedDomain': { 46 46 - invalid(issue.handle(`Invalid handle`)); 47 47 - } 48 48 - case 'HandleTaken': { 49 49 - invalid(issue.handle(`Handle is already taken`)); 50 50 - } 51 51 - case 'InvalidEmail': { 52 52 - invalid(issue.email(`Invalid email`)); 53 53 - } 54 54 - case 'EmailTaken': { 55 55 - invalid(issue.email(`Email is already taken`)); 56 56 - } 57 57 - case 'InvalidPassword': { 58 58 - invalid(issue.password(`Invalid password`)); 59 59 - } 60 60 - default: { 61 61 - invalid(`Something went wrong`); 62 62 - } 38 38 + const handle = `${data.handle}${data.domain}` as Handle; 39 39 + 40 40 + try { 41 41 + await provisionAccount(ctx, { 42 42 + handle, 43 43 + email: data.email, 44 44 + password: data.password, 45 45 + }); 46 46 + 47 47 + redirect('/admin/accounts'); 48 48 + } catch (err) { 49 49 + if (err instanceof XRPCError && err.status === 400) { 50 50 + switch (err.error) { 51 51 + case 'InvalidHandle': 52 52 + case 'UnsupportedDomain': { 53 53 + invalid(issue.handle(`Invalid handle`)); 54 54 + } 55 55 + case 'HandleTaken': { 56 56 + invalid(issue.handle(`Handle is already taken`)); 57 57 + } 58 58 + case 'InvalidEmail': { 59 59 + invalid(issue.email(`Invalid email`)); 60 60 + } 61 61 + case 'EmailTaken': { 62 62 + invalid(issue.email(`Email is already taken`)); 63 63 + } 64 64 + case 'InvalidPassword': { 65 65 + invalid(issue.password(`Invalid password`)); 66 66 + } 67 67 + default: { 68 68 + invalid(`Something went wrong`); 63 69 } 64 70 } 65 65 - 66 66 - throw err; 67 71 } 68 68 - }, 69 69 - ); 70 72 71 71 - return { createAccountForm }; 72 72 - }; 73 73 + throw err; 74 74 + } 75 75 + }, 76 76 + );

-286

packages/danaus/src/web/admin/index.tsx

reviewed

··· 1 1 - import { Hono } from 'hono'; 2 2 - import { jsxRenderer } from 'hono/jsx-renderer'; 3 3 - 4 4 - import { parseBasicAuth } from '#app/auth/verifier.ts'; 5 5 - import type { AppContext } from '#app/context.ts'; 6 6 - 7 7 - import { IdProvider } from '../components/id.tsx'; 8 8 - import { registerForms } from '../forms/index.ts'; 9 9 - import Group1Outlined from '../icons/central/group-1-outlined.tsx'; 10 10 - import HomeOpenOutlined from '../icons/central/home-open-outlined.tsx'; 11 11 - import MagnifyingGlassOutlined from '../icons/central/magnifying-glass-outlined.tsx'; 12 12 - import PlusLargeOutlined from '../icons/central/plus-large-outlined.tsx'; 13 13 - import Button from '../primitives/button.tsx'; 14 14 - import Field from '../primitives/field.tsx'; 15 15 - import Input from '../primitives/input.tsx'; 16 16 - import Select from '../primitives/select.tsx'; 17 17 - 18 18 - import AsideItem from './components/aside-item.tsx'; 19 19 - import StatCard from './components/stat-card.tsx'; 20 20 - import { createAdminForms } from './forms.ts'; 21 21 - 22 22 - const REALM = `admin`; 23 23 - 24 24 - export const createAdminApp = (ctx: AppContext) => { 25 25 - const app = new Hono(); 26 26 - const main = new Hono(); 27 27 - 28 28 - const adminPassword = ctx.config.secrets.adminPassword; 29 29 - if (adminPassword === null) { 30 30 - app.use(async (c, _next) => { 31 31 - return c.text(`Administration UI is disabled`); 32 32 - }); 33 33 - 34 34 - return app; 35 35 - } 36 36 - 37 37 - app.use(async (c, next) => { 38 38 - const auth = parseBasicAuth(c.req.raw); 39 39 - if (auth === null || auth.password !== adminPassword) { 40 40 - return c.text(`Unauthorized`, 401, { 41 41 - 'www-authenticate': `Basic realm="${REALM}", charset="UTF-8"`, 42 42 - }); 43 43 - } 44 44 - 45 45 - await next(); 46 46 - }); 47 47 - 48 48 - const forms = createAdminForms(ctx); 49 49 - app.use(registerForms(forms)); 50 50 - 51 51 - app.use( 52 52 - jsxRenderer(({ children }) => { 53 53 - return ( 54 54 - <IdProvider> 55 55 - <html lang="en"> 56 56 - <head> 57 57 - <meta charset="utf-8" /> 58 58 - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 59 59 - <link rel="stylesheet" href="/assets/style.css" /> 60 60 - </head> 61 61 - 62 62 - <body> 63 63 - <div class="flex min-h-dvh flex-col">{children}</div> 64 64 - </body> 65 65 - </html> 66 66 - </IdProvider> 67 67 - ); 68 68 - }), 69 69 - ); 70 70 - 71 71 - main.use( 72 72 - jsxRenderer(({ children, Layout: Html }) => { 73 73 - return ( 74 74 - <Html> 75 75 - <div class="flex flex-col gap-4 p-4 sm:p-16 sm:pt-24 lg:grid lg:grid-cols-[280px_minmax(0,640px)] lg:justify-center"> 76 76 - <aside class="-ml-2 flex flex-col gap-2 sm:ml-0"> 77 77 - <h2 class="pb-2 pl-4 text-base-400 font-medium">PDS administration</h2> 78 78 - 79 79 - <div class="flex flex-col gap-px"> 80 80 - <AsideItem href="/admin" exact icon={<HomeOpenOutlined size={20} />}> 81 81 - Home 82 82 - </AsideItem> 83 83 - 84 84 - <AsideItem href="/admin/accounts" icon={<Group1Outlined size={20} />}> 85 85 - Accounts 86 86 - </AsideItem> 87 87 - </div> 88 88 - </aside> 89 89 - 90 90 - <hr class="border-neutral-stroke-1 sm:hidden" /> 91 91 - 92 92 - <main>{children}</main> 93 93 - </div> 94 94 - </Html> 95 95 - ); 96 96 - }), 97 97 - ); 98 98 - 99 99 - // #region home route 100 100 - main.get('/', (c) => { 101 101 - const accountStats = ctx.accountManager.getAccountStats(); 102 102 - const inviteCodeStats = ctx.accountManager.getInviteCodeStats(); 103 103 - const sequencerStats = ctx.sequencer.getStats(); 104 104 - 105 105 - return c.render( 106 106 - <> 107 107 - <title>Home - Danaus admin</title> 108 108 - 109 109 - <div class="flex flex-col gap-4"> 110 110 - <h3 class="text-base-400 font-medium">Home</h3> 111 111 - 112 112 - <div class="flex flex-col gap-6"> 113 113 - <div class="flex flex-col gap-2"> 114 114 - <h4 class="text-base-300 font-medium text-neutral-foreground-2">Accounts</h4> 115 115 - <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5"> 116 116 - <StatCard label="Total" value={accountStats.total} /> 117 117 - <StatCard label="Active" value={accountStats.active} /> 118 118 - <StatCard label="Deactivated" value={accountStats.deactivated} /> 119 119 - <StatCard label="Taken down" value={accountStats.takendown} /> 120 120 - <StatCard label="Delete scheduled" value={accountStats.deleteScheduled} /> 121 121 - </div> 122 122 - </div> 123 123 - 124 124 - <div class="flex flex-col gap-2"> 125 125 - <h4 class="text-base-300 font-medium text-neutral-foreground-2">Invite codes</h4> 126 126 - <div class="grid grid-cols-2 gap-3 sm:grid-cols-4"> 127 127 - <StatCard label="Total" value={inviteCodeStats.total} /> 128 128 - <StatCard label="Available" value={inviteCodeStats.available} /> 129 129 - <StatCard label="Used" value={inviteCodeStats.used} /> 130 130 - <StatCard label="Disabled" value={inviteCodeStats.disabled} /> 131 131 - </div> 132 132 - </div> 133 133 - 134 134 - <div class="flex flex-col gap-2"> 135 135 - <h4 class="text-base-300 font-medium text-neutral-foreground-2">Sequencer</h4> 136 136 - <div class="grid grid-cols-2 gap-3 sm:grid-cols-3"> 137 137 - <StatCard label="Last seq" value={sequencerStats.lastSeq} /> 138 138 - <StatCard label="Total events" value={sequencerStats.totalEvents} /> 139 139 - <StatCard label="Invalidated events" value={sequencerStats.invalidatedEvents} /> 140 140 - </div> 141 141 - </div> 142 142 - </div> 143 143 - </div> 144 144 - </>, 145 145 - ); 146 146 - }); 147 147 - // #endregion 148 148 - 149 149 - // #region accounts routes 150 150 - main.get('/accounts', (c) => { 151 151 - const query = c.req.query('q') ?? ''; 152 152 - const cursor = c.req.query('cursor'); 153 153 - 154 154 - const { accounts, cursor: nextCursor } = ctx.accountManager.listAccounts({ 155 155 - query: query || undefined, 156 156 - cursor, 157 157 - limit: 50, 158 158 - }); 159 159 - 160 160 - const buildHref = (nextCursor: string) => { 161 161 - const params = new URLSearchParams(); 162 162 - if (query) { 163 163 - params.set('q', query); 164 164 - } 165 165 - params.set('cursor', nextCursor); 166 166 - return `/admin/accounts?${params.toString()}`; 167 167 - }; 168 168 - 169 169 - return c.render( 170 170 - <> 171 171 - <title>Accounts - Danaus admin</title> 172 172 - 173 173 - <div class="flex flex-col gap-4"> 174 174 - <h3 class="text-base-400 font-medium">Accounts</h3> 175 175 - 176 176 - <div class="flex gap-2"> 177 177 - <form method="get" action="/admin/accounts" class="contents"> 178 178 - <Input 179 179 - type="search" 180 180 - name="q" 181 181 - value={query} 182 182 - placeholder="Search by handle or email..." 183 183 - contentBefore={<MagnifyingGlassOutlined size={16} />} 184 184 - class="grow" 185 185 - /> 186 186 - </form> 187 187 - 188 188 - <Button label="New account" href="/admin/accounts/new" variant="primary"> 189 189 - <PlusLargeOutlined size={16} /> 190 190 - New 191 191 - </Button> 192 192 - </div> 193 193 - 194 194 - <div class="flex flex-col"> 195 195 - {accounts.length === 0 ? ( 196 196 - <p class="py-8 text-center text-base-300 text-neutral-foreground-3"> 197 197 - {query ? 'No accounts found matching your search.' : 'No accounts yet.'} 198 198 - </p> 199 199 - ) : ( 200 200 - <ul class="divide-y divide-neutral-stroke-2"> 201 201 - {accounts.map((account) => ( 202 202 - <li class="flex items-center justify-between gap-4 py-3"> 203 203 - <div class="flex min-w-0 flex-col"> 204 204 - <span class="truncate text-base-300 font-medium">@{account.handle}</span> 205 205 - <span class="truncate text-base-200 text-neutral-foreground-3">{account.email}</span> 206 206 - </div> 207 207 - <div class="flex shrink-0 gap-2 text-base-200 text-neutral-foreground-3"> 208 208 - {account.deactivated_at && ( 209 209 - <span class="rounded-md bg-neutral-background-3 px-1.5 py-0.5 text-neutral-foreground-2"> 210 210 - deactivated 211 211 - </span> 212 212 - )} 213 213 - {account.takedown_ref && ( 214 214 - <span class="rounded-md bg-status-danger-background-1 px-1.5 py-0.5 text-status-danger-foreground-1"> 215 215 - taken down 216 216 - </span> 217 217 - )} 218 218 - </div> 219 219 - </li> 220 220 - ))} 221 221 - </ul> 222 222 - )} 223 223 - </div> 224 224 - 225 225 - {nextCursor && ( 226 226 - <div class="flex justify-end"> 227 227 - <Button href={buildHref(nextCursor)} variant="outlined"> 228 228 - Next page 229 229 - </Button> 230 230 - </div> 231 231 - )} 232 232 - </div> 233 233 - </>, 234 234 - ); 235 235 - }); 236 236 - 237 237 - main.on(['GET', 'POST'], '/accounts/new', (c) => { 238 238 - const domains = ctx.config.identity.serviceHandleDomains; 239 239 - const domainOptions = domains.map((d) => ({ value: d, label: d })); 240 240 - 241 241 - const { createAccountForm } = forms; 242 242 - const { fields } = createAccountForm; 243 243 - 244 244 - return c.render( 245 245 - <> 246 246 - <title>New account - Danaus admin</title> 247 247 - 248 248 - <div class="flex flex-col gap-4"> 249 249 - <h3 class="text-base-400 font-medium">New account</h3> 250 250 - 251 251 - <form {...createAccountForm} class="flex max-w-96 flex-col gap-6"> 252 252 - <Field label="Handle" required validationMessageText={fields.handle.issues()[0]?.message}> 253 253 - <div class="flex gap-2"> 254 254 - <Input {...fields.handle.as('text')} placeholder="alice" required class="grow" /> 255 255 - 256 256 - <Select {...fields.domain.as('select')} options={domainOptions} /> 257 257 - </div> 258 258 - </Field> 259 259 - 260 260 - <Field label="Email" required validationMessageText={fields.email.issues()[0]?.message}> 261 261 - <Input {...fields.email.as('email')} placeholder="alice@example.com" required /> 262 262 - </Field> 263 263 - 264 264 - <Field label="Password" required validationMessageText={fields.password.issues()[0]?.message}> 265 265 - <Input {...fields.password.as('password')} required /> 266 266 - </Field> 267 267 - 268 268 - <div class="flex gap-3 pt-2"> 269 269 - <Button type="submit" variant="primary"> 270 270 - Create account 271 271 - </Button> 272 272 - <Button href="/admin/accounts" variant="outlined"> 273 273 - Cancel 274 274 - </Button> 275 275 - </div> 276 276 - </form> 277 277 - </div> 278 278 - </>, 279 279 - ); 280 280 - }); 281 281 - // #endregion 282 282 - 283 283 - app.route('/', main); 284 284 - 285 285 - return app; 286 286 - };

-18

packages/danaus/src/web/app.ts

reviewed

··· 1 1 - import { Hono } from 'hono'; 2 2 - 3 3 - import type { AppContext } from '../context.ts'; 4 4 - 5 5 - import { createAccountApp } from './account/index.tsx'; 6 6 - import { createAdminApp } from './admin/index.tsx'; 7 7 - import { createOAuthApp } from './oauth/index.tsx'; 8 8 - 9 9 - export const createWebApp = (ctx: AppContext): Hono => { 10 10 - const app = new Hono(); 11 11 - 12 12 - app.get('/', (c) => c.text(`This is an AT Protocol personal data server.`)); 13 13 - app.route('/admin', createAdminApp(ctx)); 14 14 - app.route('/account', createAccountApp(ctx)); 15 15 - app.route('/oauth', createOAuthApp(ctx)); 16 16 - 17 17 - return app; 18 18 - };

+3 -3

packages/danaus/src/web/components/id.tsx

reviewed

··· 1 1 - import { createContext, useContext, type Child } from 'hono/jsx'; 1 1 + import { createContext, use, type JSXNode } from '@oomfware/jsx'; 2 2 3 3 export interface IdContextValue { 4 4 count: number; ··· 7 7 export const IdContext = createContext<IdContextValue | null>(null); 8 8 9 9 export const useId = (): string => { 10 10 - const context = useContext(IdContext); 10 10 + const context = use(IdContext); 11 11 if (context === null) { 12 12 throw new Error(`expected useId() to be used under <IdProvider>`); 13 13 } ··· 16 16 }; 17 17 18 18 export interface IdProviderProps { 19 19 - children?: Child; 19 19 + children?: JSXNode; 20 20 } 21 21 22 22 export const IdProvider = (props: IdProviderProps) => {

+674

packages/danaus/src/web/controllers/account.tsx

reviewed

··· 1 1 + import type { Did } from '@atcute/lexicons'; 2 2 + import type { Controller } from '@oomfware/fetch-router'; 3 3 + import { forms } from '@oomfware/forms'; 4 4 + import { render } from '@oomfware/jsx'; 5 5 + 6 6 + import { AppPasswordPrivilege } from '#app/accounts/db/schema.ts'; 7 7 + 8 8 + import { 9 9 + createAppPasswordForm, 10 10 + deleteAppPasswordForm, 11 11 + refreshHandleForm, 12 12 + updateHandleForm, 13 13 + } from '../account/forms.ts'; 14 14 + import AtOutlined from '../icons/central/at-outlined.tsx'; 15 15 + import DotGrid1x3HorizontalOutlined from '../icons/central/dot-grid-1x3-horizontal-outlined.tsx'; 16 16 + import Key2Outlined from '../icons/central/key-2-outlined.tsx'; 17 17 + import PasskeysOutlined from '../icons/central/passkeys-outlined.tsx'; 18 18 + import PasswordOutlined from '../icons/central/password-outlined.tsx'; 19 19 + import PhoneOutlined from '../icons/central/phone-outlined.tsx'; 20 20 + import PlusLargeOutlined from '../icons/central/plus-large-outlined.tsx'; 21 21 + import TrashCanOutlined from '../icons/central/trash-can-outlined.tsx'; 22 22 + import UsbOutlined from '../icons/central/usb-outlined.tsx'; 23 23 + import { AccountLayout } from '../layouts/account.tsx'; 24 24 + import { getAppContext } from '../middlewares/app-context.ts'; 25 25 + import { getSession, requireSession } from '../middlewares/session.ts'; 26 26 + import AccordionHeader from '../primitives/accordion-header.tsx'; 27 27 + import AccordionItem from '../primitives/accordion-item.tsx'; 28 28 + import AccordionPanel from '../primitives/accordion-panel.tsx'; 29 29 + import Accordion from '../primitives/accordion.tsx'; 30 30 + import Button from '../primitives/button.tsx'; 31 31 + import DialogActions from '../primitives/dialog-actions.tsx'; 32 32 + import DialogBody from '../primitives/dialog-body.tsx'; 33 33 + import DialogClose from '../primitives/dialog-close.tsx'; 34 34 + import DialogContent from '../primitives/dialog-content.tsx'; 35 35 + import DialogSurface from '../primitives/dialog-surface.tsx'; 36 36 + import DialogTitle from '../primitives/dialog-title.tsx'; 37 37 + import Dialog from '../primitives/dialog.tsx'; 38 38 + import Field from '../primitives/field.tsx'; 39 39 + import Input from '../primitives/input.tsx'; 40 40 + import MenuDivider from '../primitives/menu-divider.tsx'; 41 41 + import MenuItem from '../primitives/menu-item.tsx'; 42 42 + import MenuList from '../primitives/menu-list.tsx'; 43 43 + import MenuPopover from '../primitives/menu-popover.tsx'; 44 44 + import MenuTrigger from '../primitives/menu-trigger.tsx'; 45 45 + import Menu from '../primitives/menu.tsx'; 46 46 + import MessageBarBody from '../primitives/message-bar-body.tsx'; 47 47 + import MessageBarTitle from '../primitives/message-bar-title.tsx'; 48 48 + import MessageBar from '../primitives/message-bar.tsx'; 49 49 + import Select from '../primitives/select.tsx'; 50 50 + import type { routes } from '../routes.ts'; 51 51 + 52 52 + export default { 53 53 + middleware: [ 54 54 + requireSession(), 55 55 + forms({ 56 56 + updateHandleForm, 57 57 + refreshHandleForm, 58 58 + createAppPasswordForm, 59 59 + deleteAppPasswordForm, 60 60 + }), 61 61 + ], 62 62 + actions: { 63 63 + overview() { 64 64 + const ctx = getAppContext(); 65 65 + const session = getSession(); 66 66 + const account = ctx.accountManager.getAccount(session.did); 67 67 + 68 68 + // determine current handle parts for form prefill 69 69 + const currentHandle = account?.handle ?? ''; 70 70 + const isServiceHandle = ctx.config.identity.serviceHandleDomains.some((d) => currentHandle.endsWith(d)); 71 71 + const currentDomain = isServiceHandle 72 72 + ? (ctx.config.identity.serviceHandleDomains.find((d) => currentHandle.endsWith(d)) ?? 'custom') 73 73 + : 'custom'; 74 74 + const currentLocalPart = isServiceHandle 75 75 + ? currentHandle.slice(0, -currentDomain.length) 76 76 + : currentHandle; 77 77 + 78 78 + const updateHandleError = updateHandleForm.fields.allIssues()?.[0]; 79 79 + const refreshHandleError = refreshHandleForm.fields.allIssues()?.[0]; 80 80 + 81 81 + return render( 82 82 + <AccountLayout> 83 83 + <title>My account - Danaus</title> 84 84 + 85 85 + <div class="flex flex-col gap-4"> 86 86 + <div class="flex h-8 items-center"> 87 87 + <h3 class="text-base-400 font-medium">Account overview</h3> 88 88 + </div> 89 89 + 90 90 + {updateHandleError && ( 91 91 + <MessageBar intent="error" layout="singleline"> 92 92 + <MessageBarBody>{updateHandleError.message}</MessageBarBody> 93 93 + </MessageBar> 94 94 + )} 95 95 + 96 96 + {refreshHandleError && ( 97 97 + <MessageBar intent="error" layout="singleline"> 98 98 + <MessageBarBody>{refreshHandleError.message}</MessageBarBody> 99 99 + </MessageBar> 100 100 + )} 101 101 + 102 102 + <div class="flex flex-col gap-8"> 103 103 + <div class="flex flex-col gap-2"> 104 104 + <h4 class="text-base-300 font-medium text-neutral-foreground-2">Your identity</h4> 105 105 + 106 106 + <div class="flex flex-col divide-y divide-neutral-stroke-2 rounded-md bg-neutral-background-1 shadow-4"> 107 107 + <div class="flex items-center gap-4 px-4 py-3"> 108 108 + <div class="min-w-0 grow"> 109 109 + <p class="text-base-300 font-medium wrap-break-word">@{account?.handle}</p> 110 110 + <p class="text-base-300 text-neutral-foreground-3">Your username on the network</p> 111 111 + </div> 112 112 + 113 113 + <Menu> 114 114 + <MenuTrigger> 115 115 + <button class="grid h-6 w-6 shrink-0 place-items-center rounded-md bg-subtle-background text-neutral-foreground-3 outline-2 -outline-offset-2 outline-transparent transition hover:bg-subtle-background-hover hover:text-neutral-foreground-3-hover focus-visible:outline-stroke-focus-2 active:bg-subtle-background-active active:text-neutral-foreground-3-active"> 116 116 + <DotGrid1x3HorizontalOutlined size={16} /> 117 117 + </button> 118 118 + </MenuTrigger> 119 119 + 120 120 + <MenuPopover> 121 121 + <MenuList> 122 122 + <MenuItem command="show-modal" commandfor="change-service-handle-dialog"> 123 123 + Change handle 124 124 + </MenuItem> 125 125 + 126 126 + <MenuItem command="show-modal" commandfor="refresh-handle-dialog"> 127 127 + Request refresh 128 128 + </MenuItem> 129 129 + </MenuList> 130 130 + </MenuPopover> 131 131 + </Menu> 132 132 + </div> 133 133 + </div> 134 134 + </div> 135 135 + 136 136 + <div class="flex flex-col gap-2"> 137 137 + <h4 class="text-base-300 font-medium text-neutral-foreground-2">Account management</h4> 138 138 + 139 139 + <div class="flex flex-col divide-y divide-neutral-stroke-2 rounded-md bg-neutral-background-1 shadow-4"> 140 140 + <div class="flex items-center gap-4 px-4 py-3"> 141 141 + <div class="min-w-0 grow"> 142 142 + <p class="text-base-300 font-medium">Data export</p> 143 143 + <p class="text-base-300 text-neutral-foreground-3"> 144 144 + Download your repository and blobs 145 145 + </p> 146 146 + </div> 147 147 + 148 148 + <Button disabled>Export</Button> 149 149 + </div> 150 150 + 151 151 + <div class="flex items-center gap-4 px-4 py-3"> 152 152 + <div class="min-w-0 grow"> 153 153 + <p class="text-base-300 font-medium">Deactivate account</p> 154 154 + <p class="text-base-300 text-neutral-foreground-3">Temporarily disable your account</p> 155 155 + </div> 156 156 + 157 157 + <Button disabled>Deactivate</Button> 158 158 + </div> 159 159 + 160 160 + <div class="flex items-center gap-4 px-4 py-3"> 161 161 + <div class="min-w-0 grow"> 162 162 + <p class="text-base-300 font-medium">Delete account</p> 163 163 + <p class="text-base-300 text-neutral-foreground-3">Permanently delete your account</p> 164 164 + </div> 165 165 + 166 166 + <Button disabled>Delete</Button> 167 167 + </div> 168 168 + </div> 169 169 + </div> 170 170 + </div> 171 171 + </div> 172 172 + 173 173 + <Dialog id="change-service-handle-dialog"> 174 174 + <DialogSurface> 175 175 + <DialogBody> 176 176 + <DialogTitle>Change handle</DialogTitle> 177 177 + 178 178 + <form {...updateHandleForm} class="contents"> 179 179 + <DialogContent class="flex flex-col gap-4"> 180 180 + <p class="text-base-300 text-neutral-foreground-3"> 181 181 + Your handle is your unique identity on the AT Protocol network. 182 182 + </p> 183 183 + 184 184 + <Field label="Handle" required> 185 185 + <div class="flex gap-2"> 186 186 + <Input 187 187 + {...updateHandleForm.fields.handle.as('text')} 188 188 + value={updateHandleForm.fields.handle.value() || currentLocalPart} 189 189 + placeholder="alice" 190 190 + contentBefore={<AtOutlined size={16} />} 191 191 + class="grow" 192 192 + /> 193 193 + 194 194 + <Select 195 195 + {...updateHandleForm.fields.domain.as('select')} 196 196 + value={updateHandleForm.fields.domain.value() || currentDomain} 197 197 + options={ctx.config.identity.serviceHandleDomains.map((d) => ({ 198 198 + value: d, 199 199 + label: d, 200 200 + }))} 201 201 + /> 202 202 + </div> 203 203 + </Field> 204 204 + </DialogContent> 205 205 + 206 206 + <DialogActions> 207 207 + <Button command="show-modal" commandfor="change-custom-handle-dialog"> 208 208 + Use my own domain 209 209 + </Button> 210 210 + 211 211 + <div class="grow"></div> 212 212 + 213 213 + <DialogClose> 214 214 + <Button>Cancel</Button> 215 215 + </DialogClose> 216 216 + 217 217 + <Button type="submit" variant="primary"> 218 218 + Change 219 219 + </Button> 220 220 + </DialogActions> 221 221 + </form> 222 222 + </DialogBody> 223 223 + </DialogSurface> 224 224 + </Dialog> 225 225 + 226 226 + <Dialog id="refresh-handle-dialog"> 227 227 + <DialogSurface> 228 228 + <DialogBody> 229 229 + <DialogTitle>Request handle refresh</DialogTitle> 230 230 + 231 231 + <form {...refreshHandleForm} class="contents"> 232 232 + <DialogContent> 233 233 + <p class="text-base-300"> 234 234 + This will notify the network to re-verify your handle. Use this if apps are marking your 235 235 + handle as invalid despite being set up correctly. 236 236 + </p> 237 237 + </DialogContent> 238 238 + 239 239 + <DialogActions> 240 240 + <DialogClose> 241 241 + <Button>Cancel</Button> 242 242 + </DialogClose> 243 243 + 244 244 + <Button type="submit" variant="primary"> 245 245 + Refresh 246 246 + </Button> 247 247 + </DialogActions> 248 248 + </form> 249 249 + </DialogBody> 250 250 + </DialogSurface> 251 251 + </Dialog> 252 252 + 253 253 + <Dialog id="change-custom-handle-dialog"> 254 254 + <DialogSurface> 255 255 + <DialogBody> 256 256 + <DialogTitle>Change handle</DialogTitle> 257 257 + 258 258 + <form {...updateHandleForm} class="contents"> 259 259 + <DialogContent class="flex flex-col gap-4"> 260 260 + <p class="text-base-300 text-neutral-foreground-3"> 261 261 + Your handle is your unique identity on the AT Protocol network. 262 262 + </p> 263 263 + 264 264 + <Field label="Handle" required> 265 265 + <Input 266 266 + {...updateHandleForm.fields.handle.as('text')} 267 267 + placeholder="alice.com" 268 268 + contentBefore={<AtOutlined size={16} />} 269 269 + /> 270 270 + </Field> 271 271 + 272 272 + <input {...updateHandleForm.fields.domain.as('hidden', 'custom')} /> 273 273 + 274 274 + <Accordion class="flex flex-col gap-2"> 275 275 + <AccordionItem name="handle-method" open> 276 276 + <AccordionHeader>DNS record</AccordionHeader> 277 277 + <AccordionPanel> 278 278 + <div class="flex flex-col gap-3"> 279 279 + <p class="text-base-300 text-neutral-foreground-3"> 280 280 + Add the following DNS record to your domain: 281 281 + </p> 282 282 + 283 283 + <div class="flex flex-col gap-2 rounded-md bg-neutral-background-3 p-3"> 284 284 + <div class="flex flex-col gap-0.5"> 285 285 + <span class="text-base-200 text-neutral-foreground-3">Host</span> 286 286 + <input 287 287 + type="text" 288 288 + readonly 289 289 + value="_atproto.<your-domain>" 290 290 + class="font-mono text-base-300 outline-none" 291 291 + /> 292 292 + </div> 293 293 + <div class="flex flex-col gap-0.5"> 294 294 + <span class="text-base-200 text-neutral-foreground-3">Type</span> 295 295 + <input 296 296 + type="text" 297 297 + readonly 298 298 + value="TXT" 299 299 + class="font-mono text-base-300 outline-none" 300 300 + /> 301 301 + </div> 302 302 + <div class="flex flex-col gap-0.5"> 303 303 + <span class="text-base-200 text-neutral-foreground-3">Value</span> 304 304 + <input 305 305 + type="text" 306 306 + readonly 307 307 + value={`did=${session.did}`} 308 308 + class="font-mono text-base-300 outline-none" 309 309 + /> 310 310 + </div> 311 311 + </div> 312 312 + </div> 313 313 + </AccordionPanel> 314 314 + </AccordionItem> 315 315 + 316 316 + <AccordionItem name="handle-method"> 317 317 + <AccordionHeader>HTTP well-known entry</AccordionHeader> 318 318 + <AccordionPanel> 319 319 + <div class="flex flex-col gap-3"> 320 320 + <p class="text-base-300 text-neutral-foreground-3"> 321 321 + Upload a text file to the following URL: 322 322 + </p> 323 323 + 324 324 + <div class="flex flex-col gap-2 rounded-md bg-neutral-background-3 p-3"> 325 325 + <div class="flex flex-col gap-0.5"> 326 326 + <span class="text-base-200 text-neutral-foreground-3">URL</span> 327 327 + <input 328 328 + type="text" 329 329 + readonly 330 330 + value="https://<your-domain>/.well-known/atproto-did" 331 331 + class="font-mono text-base-300 outline-none" 332 332 + /> 333 333 + </div> 334 334 + <div class="flex flex-col gap-0.5"> 335 335 + <span class="text-base-200 text-neutral-foreground-3">Contents</span> 336 336 + <input 337 337 + type="text" 338 338 + readonly 339 339 + value={session.did} 340 340 + class="font-mono text-base-300 outline-none" 341 341 + /> 342 342 + </div> 343 343 + </div> 344 344 + </div> 345 345 + </AccordionPanel> 346 346 + </AccordionItem> 347 347 + </Accordion> 348 348 + </DialogContent> 349 349 + 350 350 + <DialogActions> 351 351 + <DialogClose> 352 352 + <Button>Cancel</Button> 353 353 + </DialogClose> 354 354 + 355 355 + <Button type="submit" variant="primary"> 356 356 + Change 357 357 + </Button> 358 358 + </DialogActions> 359 359 + </form> 360 360 + </DialogBody> 361 361 + </DialogSurface> 362 362 + </Dialog> 363 363 + </AccountLayout>, 364 364 + ); 365 365 + }, 366 366 + 367 367 + appPasswords() { 368 368 + const ctx = getAppContext(); 369 369 + const session = getSession(); 370 370 + const did = session.did as Did; 371 371 + 372 372 + const passwords = ctx.accountManager.listAppPasswords(did); 373 373 + 374 374 + const newPasswordResult = createAppPasswordForm.result; 375 375 + const newPasswordError = createAppPasswordForm.fields.allIssues()?.[0]; 376 376 + 377 377 + return render( 378 378 + <AccountLayout> 379 379 + <title>App passwords - Danaus</title> 380 380 + 381 381 + <div class="flex flex-col gap-4"> 382 382 + <div class="flex h-8 shrink-0 items-center justify-between"> 383 383 + <h3 class="text-base-400 font-medium">App passwords</h3> 384 384 + 385 385 + <Button commandfor="create-app-password-dialog" command="show-modal" variant="primary"> 386 386 + <PlusLargeOutlined size={16} /> 387 387 + New 388 388 + </Button> 389 389 + </div> 390 390 + 391 391 + {newPasswordResult && ( 392 392 + <MessageBar intent="success" layout="multiline"> 393 393 + <MessageBarBody> 394 394 + <MessageBarTitle>App password created</MessageBarTitle> 395 395 + 396 396 + <div class="mt-2 flex flex-col gap-2"> 397 397 + <code class="rounded-md bg-neutral-background-3 px-2 py-1 font-mono text-base-300"> 398 398 + {newPasswordResult.secret} 399 399 + </code> 400 400 + <p class="text-base-200 text-neutral-foreground-3"> 401 401 + Copy this password now. You won't be able to see it again. 402 402 + </p> 403 403 + </div> 404 404 + </MessageBarBody> 405 405 + </MessageBar> 406 406 + )} 407 407 + 408 408 + {newPasswordError && ( 409 409 + <MessageBar intent="error" layout="singleline"> 410 410 + <MessageBarBody>{newPasswordError.message}</MessageBarBody> 411 411 + </MessageBar> 412 412 + )} 413 413 + 414 414 + <div class="flex flex-col divide-y divide-neutral-stroke-2 rounded-md bg-neutral-background-1 shadow-4"> 415 415 + {passwords.length === 0 && ( 416 416 + <div class="flex flex-col gap-1 p-8 text-center"> 417 417 + <p class="text-base-300 font-medium">No app passwords created</p> 418 418 + <p class="text-base-300 text-neutral-foreground-3"> 419 419 + App passwords lets you sign into legacy AT Protocol apps. 420 420 + </p> 421 421 + </div> 422 422 + )} 423 423 + 424 424 + {passwords.map((password) => { 425 425 + let privilege = `Unknown`; 426 426 + switch (password.privilege) { 427 427 + case AppPasswordPrivilege.Full: { 428 428 + privilege = `Full access`; 429 429 + break; 430 430 + } 431 431 + case AppPasswordPrivilege.Privileged: { 432 432 + privilege = `Privileged access`; 433 433 + break; 434 434 + } 435 435 + case AppPasswordPrivilege.Limited: { 436 436 + privilege = `Limited access`; 437 437 + break; 438 438 + } 439 439 + } 440 440 + 441 441 + return ( 442 442 + <div class="flex items-center gap-4 px-4 py-3"> 443 443 + <Key2Outlined size={24} class="shrink-0 text-neutral-foreground-3" /> 444 444 + 445 445 + <div class="min-w-0 grow"> 446 446 + <p class="text-base-300 font-medium">{password.name}</p> 447 447 + <p class="text-base-300 text-neutral-foreground-3"> 448 448 + {privilege} · created {password.created_at.toLocaleDateString()} 449 449 + </p> 450 450 + </div> 451 451 + 452 452 + <form {...deleteAppPasswordForm} class="contents"> 453 453 + <input type="hidden" name="name" value={password.name} /> 454 454 + <Button type="submit" variant="subtle"> 455 455 + <TrashCanOutlined size={16} /> 456 456 + </Button> 457 457 + </form> 458 458 + </div> 459 459 + ); 460 460 + })} 461 461 + </div> 462 462 + </div> 463 463 + 464 464 + <Dialog id="create-app-password-dialog"> 465 465 + <DialogSurface> 466 466 + <DialogBody> 467 467 + <DialogTitle>Create app password</DialogTitle> 468 468 + 469 469 + <form {...createAppPasswordForm} class="contents"> 470 470 + <DialogContent class="flex flex-col gap-4"> 471 471 + <p class="text-base-300 text-neutral-foreground-3"> 472 472 + App passwords let you sign into legacy AT Protocol apps without giving them access to 473 473 + your main password. 474 474 + </p> 475 475 + 476 476 + <Field label="Name" required> 477 477 + <Input {...createAppPasswordForm.fields.name.as('text')} placeholder="App" required /> 478 478 + </Field> 479 479 + 480 480 + <Field label="Privilege" required> 481 481 + <Select 482 482 + {...createAppPasswordForm.fields.privilege.as('select')} 483 483 + options={[ 484 484 + { value: 'limited', label: 'Limited access' }, 485 485 + { value: 'privileged', label: 'Privileged access' }, 486 486 + { value: 'full', label: 'Full access' }, 487 487 + ]} 488 488 + /> 489 489 + </Field> 490 490 + </DialogContent> 491 491 + 492 492 + <DialogActions> 493 493 + <DialogClose> 494 494 + <Button>Cancel</Button> 495 495 + </DialogClose> 496 496 + 497 497 + <Button type="submit" variant="primary"> 498 498 + Create 499 499 + </Button> 500 500 + </DialogActions> 501 501 + </form> 502 502 + </DialogBody> 503 503 + </DialogSurface> 504 504 + </Dialog> 505 505 + </AccountLayout>, 506 506 + ); 507 507 + }, 508 508 + 509 509 + security() { 510 510 + const ctx = getAppContext(); 511 511 + const session = getSession(); 512 512 + const account = ctx.accountManager.getAccount(session.did); 513 513 + 514 514 + return render( 515 515 + <AccountLayout> 516 516 + <title>Security - Danaus</title> 517 517 + 518 518 + <div class="flex flex-col gap-4"> 519 519 + <div class="flex h-8 shrink-0 items-center"> 520 520 + <h3 class="text-base-400 font-medium">Security</h3> 521 521 + </div> 522 522 + 523 523 + <div class="flex flex-col gap-8"> 524 524 + <div class="flex flex-col gap-2"> 525 525 + <h4 class="text-base-300 font-medium text-neutral-foreground-2">Account information</h4> 526 526 + 527 527 + <div class="flex flex-col divide-y divide-neutral-stroke-2 rounded-md bg-neutral-background-1 shadow-4"> 528 528 + <div class="flex items-center gap-4 px-4 py-3"> 529 529 + <div class="min-w-0 grow"> 530 530 + <p class="text-base-300 font-medium wrap-break-word">{account?.email}</p> 531 531 + <p class="text-base-300 text-neutral-foreground-3"> 532 532 + {account?.email_confirmed_at ? 'Verified' : 'Not verified'} 533 533 + </p> 534 534 + </div> 535 535 + 536 536 + {!account?.email_confirmed_at && <Button>Verify</Button>} 537 537 + 538 538 + <Menu> 539 539 + <MenuTrigger> 540 540 + <button class="grid h-6 w-6 shrink-0 place-items-center rounded-md bg-subtle-background text-neutral-foreground-3 outline-2 -outline-offset-2 outline-transparent transition hover:bg-subtle-background-hover hover:text-neutral-foreground-3-hover focus-visible:outline-stroke-focus-2 active:bg-subtle-background-active active:text-neutral-foreground-3-active"> 541 541 + <DotGrid1x3HorizontalOutlined size={16} /> 542 542 + </button> 543 543 + </MenuTrigger> 544 544 + 545 545 + <MenuPopover> 546 546 + <MenuList> 547 547 + <MenuItem>Change email</MenuItem> 548 548 + </MenuList> 549 549 + </MenuPopover> 550 550 + </Menu> 551 551 + </div> 552 552 + </div> 553 553 + </div> 554 554 + 555 555 + <div class="flex flex-col gap-2"> 556 556 + <h4 class="text-base-300 font-medium text-neutral-foreground-2">Ways to prove who you are</h4> 557 557 + 558 558 + <div class="flex flex-col divide-y divide-neutral-stroke-2 rounded-md bg-neutral-background-1 shadow-4"> 559 559 + <div class="flex items-center gap-4 px-4 py-3"> 560 560 + <PasswordOutlined size={24} class="shrink-0" /> 561 561 + 562 562 + <div class="min-w-0 grow"> 563 563 + <p class="text-base-300 font-medium wrap-break-word">Password</p> 564 564 + <p class="text-base-300 text-neutral-foreground-3">Last changed yesterday</p> 565 565 + </div> 566 566 + 567 567 + <Menu> 568 568 + <MenuTrigger> 569 569 + <button class="grid h-6 w-6 shrink-0 place-items-center rounded-md bg-subtle-background text-neutral-foreground-3 outline-2 -outline-offset-2 outline-transparent transition hover:bg-subtle-background-hover hover:text-neutral-foreground-3-hover focus-visible:outline-stroke-focus-2 active:bg-subtle-background-active active:text-neutral-foreground-3-active"> 570 570 + <DotGrid1x3HorizontalOutlined size={16} /> 571 571 + </button> 572 572 + </MenuTrigger> 573 573 + 574 574 + <MenuPopover> 575 575 + <MenuList> 576 576 + <MenuItem>Change password</MenuItem> 577 577 + </MenuList> 578 578 + </MenuPopover> 579 579 + </Menu> 580 580 + </div> 581 581 + 582 582 + <div class="flex items-center gap-4 px-4 py-3"> 583 583 + <PhoneOutlined size={24} class="shrink-0" /> 584 584 + 585 585 + <div class="min-w-0 grow"> 586 586 + <p class="text-base-300 font-medium wrap-break-word">Bitwarden</p> 587 587 + <p class="text-base-300 text-neutral-foreground-3">Authenticator · Added yesterday</p> 588 588 + </div> 589 589 + 590 590 + <Menu> 591 591 + <MenuTrigger> 592 592 + <button class="grid h-6 w-6 shrink-0 place-items-center rounded-md bg-subtle-background text-neutral-foreground-3 outline-2 -outline-offset-2 outline-transparent transition hover:bg-subtle-background-hover hover:text-neutral-foreground-3-hover focus-visible:outline-stroke-focus-2 active:bg-subtle-background-active active:text-neutral-foreground-3-active"> 593 593 + <DotGrid1x3HorizontalOutlined size={16} /> 594 594 + </button> 595 595 + </MenuTrigger> 596 596 + 597 597 + <MenuPopover> 598 598 + <MenuList> 599 599 + <MenuItem>Rename</MenuItem> 600 600 + <MenuDivider /> 601 601 + <MenuItem>Remove</MenuItem> 602 602 + </MenuList> 603 603 + </MenuPopover> 604 604 + </Menu> 605 605 + </div> 606 606 + 607 607 + <div class="flex items-center gap-4 px-4 py-3"> 608 608 + <UsbOutlined size={24} class="shrink-0" /> 609 609 + 610 610 + <div class="min-w-0 grow"> 611 611 + <p class="text-base-300 font-medium wrap-break-word">YubiKey 5</p> 612 612 + <p class="text-base-300 text-neutral-foreground-3">Security key · Added 2 weeks ago</p> 613 613 + </div> 614 614 + 615 615 + <Menu> 616 616 + <MenuTrigger> 617 617 + <button class="grid h-6 w-6 shrink-0 place-items-center rounded-md bg-subtle-background text-neutral-foreground-3 outline-2 -outline-offset-2 outline-transparent transition hover:bg-subtle-background-hover hover:text-neutral-foreground-3-hover focus-visible:outline-stroke-focus-2 active:bg-subtle-background-active active:text-neutral-foreground-3-active"> 618 618 + <DotGrid1x3HorizontalOutlined size={16} /> 619 619 + </button> 620 620 + </MenuTrigger> 621 621 + 622 622 + <MenuPopover> 623 623 + <MenuList> 624 624 + <MenuItem>Rename</MenuItem> 625 625 + <MenuDivider /> 626 626 + <MenuItem>Remove</MenuItem> 627 627 + </MenuList> 628 628 + </MenuPopover> 629 629 + </Menu> 630 630 + </div> 631 631 + 632 632 + <div class="flex items-center gap-4 px-4 py-3"> 633 633 + <PasskeysOutlined size={24} class="shrink-0" /> 634 634 + 635 635 + <div class="min-w-0 grow"> 636 636 + <p class="text-base-300 font-medium wrap-break-word">iCloud Keychain</p> 637 637 + <p class="text-base-300 text-neutral-foreground-3">Passkey · Added last month</p> 638 638 + </div> 639 639 + 640 640 + <Menu> 641 641 + <MenuTrigger> 642 642 + <button class="grid h-6 w-6 shrink-0 place-items-center rounded-md bg-subtle-background text-neutral-foreground-3 outline-2 -outline-offset-2 outline-transparent transition hover:bg-subtle-background-hover hover:text-neutral-foreground-3-hover focus-visible:outline-stroke-focus-2 active:bg-subtle-background-active active:text-neutral-foreground-3-active"> 643 643 + <DotGrid1x3HorizontalOutlined size={16} /> 644 644 + </button> 645 645 + </MenuTrigger> 646 646 + 647 647 + <MenuPopover> 648 648 + <MenuList> 649 649 + <MenuItem>Rename</MenuItem> 650 650 + <MenuDivider /> 651 651 + <MenuItem>Remove</MenuItem> 652 652 + </MenuList> 653 653 + </MenuPopover> 654 654 + </Menu> 655 655 + </div> 656 656 + 657 657 + <button class="flex items-center gap-4 bg-subtle-background px-4 py-3 text-left outline-2 -outline-offset-2 outline-transparent transition select-none first:rounded-t-md last:rounded-b-md hover:bg-subtle-background-hover focus-visible:outline-stroke-focus-2 active:bg-subtle-background-active"> 658 658 + <div class="grid h-6 w-6 shrink-0 place-items-center"> 659 659 + <PlusLargeOutlined size={16} /> 660 660 + </div> 661 661 + 662 662 + <div class="min-w-0 grow"> 663 663 + <p class="text-base-300">Add another way to sign in</p> 664 664 + </div> 665 665 + </button> 666 666 + </div> 667 667 + </div> 668 668 + </div> 669 669 + </div> 670 670 + </AccountLayout>, 671 671 + ); 672 672 + }, 673 673 + }, 674 674 + } satisfies Controller<typeof routes.account>;

+209

packages/danaus/src/web/controllers/admin.tsx

reviewed

··· 1 1 + import type { Controller } from '@oomfware/fetch-router'; 2 2 + import { forms } from '@oomfware/forms'; 3 3 + import { render } from '@oomfware/jsx'; 4 4 + 5 5 + import StatCard from '../admin/components/stat-card.tsx'; 6 6 + import { createAccountForm } from '../admin/forms.ts'; 7 7 + import MagnifyingGlassOutlined from '../icons/central/magnifying-glass-outlined.tsx'; 8 8 + import PlusLargeOutlined from '../icons/central/plus-large-outlined.tsx'; 9 9 + import { AdminLayout } from '../layouts/admin.tsx'; 10 10 + import { getAppContext } from '../middlewares/app-context.ts'; 11 11 + import { requireAdmin } from '../middlewares/basic-auth.ts'; 12 12 + import Button from '../primitives/button.tsx'; 13 13 + import Field from '../primitives/field.tsx'; 14 14 + import Input from '../primitives/input.tsx'; 15 15 + import Select from '../primitives/select.tsx'; 16 16 + import { routes } from '../routes.ts'; 17 17 + 18 18 + export default { 19 19 + middleware: [requireAdmin(), forms({ createAccountForm })], 20 20 + actions: { 21 21 + dashboard() { 22 22 + const ctx = getAppContext(); 23 23 + const accountStats = ctx.accountManager.getAccountStats(); 24 24 + const inviteCodeStats = ctx.accountManager.getInviteCodeStats(); 25 25 + const sequencerStats = ctx.sequencer.getStats(); 26 26 + 27 27 + return render( 28 28 + <AdminLayout> 29 29 + <title>Home - Danaus admin</title> 30 30 + 31 31 + <div class="flex flex-col gap-4"> 32 32 + <h3 class="text-base-400 font-medium">Home</h3> 33 33 + 34 34 + <div class="flex flex-col gap-6"> 35 35 + <div class="flex flex-col gap-2"> 36 36 + <h4 class="text-base-300 font-medium text-neutral-foreground-2">Accounts</h4> 37 37 + <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5"> 38 38 + <StatCard label="Total" value={accountStats.total} /> 39 39 + <StatCard label="Active" value={accountStats.active} /> 40 40 + <StatCard label="Deactivated" value={accountStats.deactivated} /> 41 41 + <StatCard label="Taken down" value={accountStats.takendown} /> 42 42 + <StatCard label="Delete scheduled" value={accountStats.deleteScheduled} /> 43 43 + </div> 44 44 + </div> 45 45 + 46 46 + <div class="flex flex-col gap-2"> 47 47 + <h4 class="text-base-300 font-medium text-neutral-foreground-2">Invite codes</h4> 48 48 + <div class="grid grid-cols-2 gap-3 sm:grid-cols-4"> 49 49 + <StatCard label="Total" value={inviteCodeStats.total} /> 50 50 + <StatCard label="Available" value={inviteCodeStats.available} /> 51 51 + <StatCard label="Used" value={inviteCodeStats.used} /> 52 52 + <StatCard label="Disabled" value={inviteCodeStats.disabled} /> 53 53 + </div> 54 54 + </div> 55 55 + 56 56 + <div class="flex flex-col gap-2"> 57 57 + <h4 class="text-base-300 font-medium text-neutral-foreground-2">Sequencer</h4> 58 58 + <div class="grid grid-cols-2 gap-3 sm:grid-cols-3"> 59 59 + <StatCard label="Last seq" value={sequencerStats.lastSeq} /> 60 60 + <StatCard label="Total events" value={sequencerStats.totalEvents} /> 61 61 + <StatCard label="Invalidated events" value={sequencerStats.invalidatedEvents} /> 62 62 + </div> 63 63 + </div> 64 64 + </div> 65 65 + </div> 66 66 + </AdminLayout>, 67 67 + ); 68 68 + }, 69 69 + 70 70 + accounts: { 71 71 + index({ url }) { 72 72 + const ctx = getAppContext(); 73 73 + const query = url.searchParams.get('q') ?? ''; 74 74 + const cursor = url.searchParams.get('cursor') ?? undefined; 75 75 + 76 76 + const { accounts, cursor: nextCursor } = ctx.accountManager.listAccounts({ 77 77 + query: query || undefined, 78 78 + cursor, 79 79 + limit: 50, 80 80 + }); 81 81 + 82 82 + const buildHref = (nextCursor: string) => { 83 83 + return routes.admin.accounts.index.href(undefined, { 84 84 + q: query || undefined, 85 85 + cursor: nextCursor, 86 86 + }); 87 87 + }; 88 88 + 89 89 + return render( 90 90 + <AdminLayout> 91 91 + <title>Accounts - Danaus admin</title> 92 92 + 93 93 + <div class="flex flex-col gap-4"> 94 94 + <h3 class="text-base-400 font-medium">Accounts</h3> 95 95 + 96 96 + <div class="flex gap-2"> 97 97 + <form method="get" action={routes.admin.accounts.index.href()} class="contents"> 98 98 + <Input 99 99 + type="search" 100 100 + name="q" 101 101 + value={query} 102 102 + placeholder="Search by handle or email..." 103 103 + contentBefore={<MagnifyingGlassOutlined size={16} />} 104 104 + class="grow" 105 105 + /> 106 106 + </form> 107 107 + 108 108 + <Button label="New account" href={routes.admin.accounts.create.href()} variant="primary"> 109 109 + <PlusLargeOutlined size={16} /> 110 110 + New 111 111 + </Button> 112 112 + </div> 113 113 + 114 114 + <div class="flex flex-col"> 115 115 + {accounts.length === 0 ? ( 116 116 + <p class="py-8 text-center text-base-300 text-neutral-foreground-3"> 117 117 + {query ? 'No accounts found matching your search.' : 'No accounts yet.'} 118 118 + </p> 119 119 + ) : ( 120 120 + <ul class="divide-y divide-neutral-stroke-2"> 121 121 + {accounts.map((account) => ( 122 122 + <li class="flex items-center justify-between gap-4 py-3"> 123 123 + <div class="flex min-w-0 flex-col"> 124 124 + <span class="truncate text-base-300 font-medium">@{account.handle}</span> 125 125 + <span class="truncate text-base-200 text-neutral-foreground-3"> 126 126 + {account.email} 127 127 + </span> 128 128 + </div> 129 129 + <div class="flex shrink-0 gap-2 text-base-200 text-neutral-foreground-3"> 130 130 + {account.deactivated_at && ( 131 131 + <span class="rounded-md bg-neutral-background-3 px-1.5 py-0.5 text-neutral-foreground-2"> 132 132 + deactivated 133 133 + </span> 134 134 + )} 135 135 + {account.takedown_ref && ( 136 136 + <span class="rounded-md bg-status-danger-background-1 px-1.5 py-0.5 text-status-danger-foreground-1"> 137 137 + taken down 138 138 + </span> 139 139 + )} 140 140 + </div> 141 141 + </li> 142 142 + ))} 143 143 + </ul> 144 144 + )} 145 145 + </div> 146 146 + 147 147 + {nextCursor && ( 148 148 + <div class="flex justify-end"> 149 149 + <Button href={buildHref(nextCursor)} variant="outlined"> 150 150 + Next page 151 151 + </Button> 152 152 + </div> 153 153 + )} 154 154 + </div> 155 155 + </AdminLayout>, 156 156 + ); 157 157 + }, 158 158 + 159 159 + create() { 160 160 + const ctx = getAppContext(); 161 161 + const domains = ctx.config.identity.serviceHandleDomains; 162 162 + const domainOptions = domains.map((d) => ({ value: d, label: d })); 163 163 + 164 164 + const { fields } = createAccountForm; 165 165 + 166 166 + return render( 167 167 + <AdminLayout> 168 168 + <title>New account - Danaus admin</title> 169 169 + 170 170 + <div class="flex flex-col gap-4"> 171 171 + <h3 class="text-base-400 font-medium">New account</h3> 172 172 + 173 173 + <form {...createAccountForm} class="flex max-w-96 flex-col gap-6"> 174 174 + <Field label="Handle" required validationMessageText={fields.handle.issues()?.[0]!.message}> 175 175 + <div class="flex gap-2"> 176 176 + <Input {...fields.handle.as('text')} placeholder="alice" required class="grow" /> 177 177 + 178 178 + <Select {...fields.domain.as('select')} options={domainOptions} /> 179 179 + </div> 180 180 + </Field> 181 181 + 182 182 + <Field label="Email" required validationMessageText={fields.email.issues()?.[0]!.message}> 183 183 + <Input {...fields.email.as('email')} placeholder="alice@example.com" required /> 184 184 + </Field> 185 185 + 186 186 + <Field 187 187 + label="Password" 188 188 + required 189 189 + validationMessageText={fields.password.issues()?.[0]!.message} 190 190 + > 191 191 + <Input {...fields.password.as('password')} required /> 192 192 + </Field> 193 193 + 194 194 + <div class="flex gap-3 pt-2"> 195 195 + <Button type="submit" variant="primary"> 196 196 + Create account 197 197 + </Button> 198 198 + <Button href={routes.admin.accounts.index.href()} variant="outlined"> 199 199 + Cancel 200 200 + </Button> 201 201 + </div> 202 202 + </form> 203 203 + </div> 204 204 + </AdminLayout>, 205 205 + ); 206 206 + }, 207 207 + }, 208 208 + }, 209 209 + } satisfies Controller<typeof routes.admin>;

+10

packages/danaus/src/web/controllers/home.tsx

reviewed

··· 1 1 + import type { BuildAction } from '@oomfware/fetch-router'; 2 2 + 3 3 + import type { routes } from '../routes'; 4 4 + 5 5 + export default { 6 6 + middleware: [], 7 7 + action() { 8 8 + return new Response('This is an AT Protocol personal data server.'); 9 9 + }, 10 10 + } satisfies BuildAction<'ANY', typeof routes.home>;

+51

packages/danaus/src/web/controllers/login.tsx

reviewed

··· 1 1 + import type { BuildAction } from '@oomfware/fetch-router'; 2 2 + import { forms } from '@oomfware/forms'; 3 3 + import { render } from '@oomfware/jsx'; 4 4 + 5 5 + import { signInForm } from '../account/forms.ts'; 6 6 + import { BaseLayout } from '../layouts/base.tsx'; 7 7 + import Button from '../primitives/button.tsx'; 8 8 + import Field from '../primitives/field.tsx'; 9 9 + import Input from '../primitives/input.tsx'; 10 10 + import type { routes } from '../routes.ts'; 11 11 + 12 12 + export default { 13 13 + middleware: [forms({ signInForm })], 14 14 + action() { 15 15 + const { fields } = signInForm; 16 16 + 17 17 + return render( 18 18 + <BaseLayout> 19 19 + <title>sign in - danaus</title> 20 20 + 21 21 + <div class="flex flex-1 items-center justify-center p-4"> 22 22 + <div class="w-full max-w-96 rounded-xl bg-neutral-background-1 p-6 shadow-16"> 23 23 + <form {...signInForm} class="flex flex-col gap-6"> 24 24 + <h1 class="text-base-500 font-semibold">Sign in to your account</h1> 25 25 + 26 26 + <Field 27 27 + label="Handle or email" 28 28 + required 29 29 + validationMessageText={fields.identifier.issues()?.[0]!.message} 30 30 + > 31 31 + <Input {...fields.identifier.as('text')} placeholder="alice.bsky.social" required autofocus /> 32 32 + </Field> 33 33 + 34 34 + <Field 35 35 + label="Password" 36 36 + required 37 37 + validationMessageText={fields._password.issues()?.[0]!.message} 38 38 + > 39 39 + <Input {...fields._password.as('password')} required /> 40 40 + </Field> 41 41 + 42 42 + <Button type="submit" variant="primary"> 43 43 + Sign in 44 44 + </Button> 45 45 + </form> 46 46 + </div> 47 47 + </div> 48 48 + </BaseLayout>, 49 49 + ); 50 50 + }, 51 51 + } satisfies BuildAction<'ANY', typeof routes.home>;

+36

packages/danaus/src/web/controllers/oauth.tsx

reviewed

··· 1 1 + import type { Controller } from '@oomfware/fetch-router'; 2 2 + import { render } from '@oomfware/jsx'; 3 3 + 4 4 + import { BaseLayout } from '../layouts/base.tsx'; 5 5 + import { requireSession } from '../middlewares/session.ts'; 6 6 + import Button from '../primitives/button.tsx'; 7 7 + import { routes } from '../routes.ts'; 8 8 + 9 9 + export default { 10 10 + authorize: { 11 11 + middleware: [requireSession()], 12 12 + action() { 13 13 + return render( 14 14 + <BaseLayout> 15 15 + <title>authorize - danaus</title> 16 16 + 17 17 + <div class="flex flex-1 items-center justify-center p-4"> 18 18 + <div class="w-full max-w-96 rounded-xl bg-neutral-background-1 p-6 shadow-16"> 19 19 + <div class="flex flex-col gap-4"> 20 20 + <h1 class="text-base-500 font-semibold">authorize application</h1> 21 21 + 22 22 + <p class="text-base-300 text-neutral-foreground-3"> 23 23 + OAuth authorization is not yet implemented. 24 24 + </p> 25 25 + 26 26 + <Button href={routes.account.overview.href()} variant="outlined"> 27 27 + Back to account 28 28 + </Button> 29 29 + </div> 30 30 + </div> 31 31 + </div> 32 32 + </BaseLayout>, 33 33 + ); 34 34 + }, 35 35 + }, 36 36 + } satisfies Controller<typeof routes.oauth>;

-592

packages/danaus/src/web/forms/index.ts

reviewed

··· 1 1 - import { AsyncLocalStorage } from 'node:async_hooks'; 2 2 - 3 3 - import type { StandardSchemaV1 } from '@standard-schema/spec'; 4 4 - import type { Context, MiddlewareHandler, Next } from 'hono'; 5 5 - import { HTTPException } from 'hono/http-exception'; 6 6 - import type { ContentfulStatusCode } from 'hono/utils/http-status'; 7 7 - 8 8 - // #region types 9 9 - export interface FormIssue { 10 10 - path: (string | number)[]; 11 11 - message: string; 12 12 - } 13 13 - 14 14 - interface FormState { 15 15 - input: Record<string, unknown>; 16 16 - /** flattened issues map keyed by path string, '$' contains all issues */ 17 17 - issues: Record<string, FormIssue[]>; 18 18 - result?: unknown; 19 19 - } 20 20 - 21 21 - interface FormConfig { 22 22 - id: string; 23 23 - action: string; 24 24 - } 25 25 - 26 26 - interface FormStore { 27 27 - definitions: WeakMap<FormDefinition<any, any>, FormConfig>; 28 28 - state: Map<string, FormState>; 29 29 - } 30 30 - 31 31 - interface FormHandlerStore { 32 32 - context: Context; 33 33 - } 34 34 - 35 35 - export interface FormDefinition<TInput, TOutput> { 36 36 - /** the form action URL */ 37 37 - readonly action: string; 38 38 - /** the form method */ 39 39 - readonly method: 'post'; 40 40 - /** proxy for accessing field values and issues */ 41 41 - readonly fields: FieldsProxy<TInput>; 42 42 - /** the result of the form handler, if successful */ 43 43 - readonly result: TOutput | undefined; 44 44 - /** internal metadata */ 45 45 - readonly __: { 46 46 - schema: StandardSchemaV1<TInput>; 47 47 - handler: (data: TInput, issue: IssueBuilder<TInput>) => Promise<TOutput>; 48 48 - }; 49 49 - } 50 50 - 51 51 - export type IssueBuilder<T> = { 52 52 - [K in keyof T]: T[K] extends Record<string, unknown> 53 53 - ? IssueBuilder<T[K]> & ((message: string) => FormIssue) 54 54 - : (message: string) => FormIssue; 55 55 - } & ((message: string) => FormIssue); 56 56 - 57 57 - export type FieldsProxy<T> = { 58 58 - [K in keyof T]: T[K] extends Record<string, unknown> 59 59 - ? FieldsProxy<T[K]> & FieldAccessor<T[K]> 60 60 - : FieldAccessor<T[K]>; 61 61 - } & FieldAccessor<T>; 62 62 - 63 63 - export type FormFieldValue = string | string[] | number | boolean | File | File[]; 64 64 - 65 65 - export type FormFieldType<T> = { 66 66 - [K in keyof InputTypeMap]: T extends InputTypeMap[K] ? K : never; 67 67 - }[keyof InputTypeMap]; 68 68 - 69 69 - export interface FieldAccessor<Value> { 70 70 - /** returns the current input value for this field */ 71 71 - value(): Value; 72 72 - /** returns validation issues for this exact field path */ 73 73 - issues(): { path: (string | number)[]; message: string }[]; 74 74 - /** returns validation issues for this field and all nested fields */ 75 75 - allIssues(): { path: (string | number)[]; message: string }[]; 76 76 - /** returns props for an input element */ 77 77 - as<T extends FormFieldType<Value>>(...args: AsArgs<T, Value>): Record<string, unknown>; 78 78 - } 79 79 - 80 80 - type InputTypeMap = { 81 81 - text: string; 82 82 - email: string; 83 83 - password: string; 84 84 - url: string; 85 85 - tel: string; 86 86 - search: string; 87 87 - number: number; 88 88 - range: number; 89 89 - date: string; 90 90 - 'datetime-local': string; 91 91 - time: string; 92 92 - month: string; 93 93 - week: string; 94 94 - color: string; 95 95 - checkbox: boolean | string[]; 96 96 - radio: string; 97 97 - file: File; 98 98 - hidden: string; 99 99 - submit: string; 100 100 - button: string; 101 101 - reset: string; 102 102 - image: string; 103 103 - select: string; 104 104 - 'select multiple': string[]; 105 105 - 'file multiple': File[]; 106 106 - }; 107 107 - 108 108 - type InputType = keyof InputTypeMap; 109 109 - 110 110 - type AsArgs<Type extends InputType, Value> = Type extends 'checkbox' 111 111 - ? Value extends string[] 112 112 - ? [type: Type, value: Value[number] | (string & {})] 113 113 - : [type: Type] 114 114 - : Type extends 'radio' | 'submit' | 'hidden' 115 115 - ? [type: Type, value: Value | (string & {})] 116 116 - : [type: Type]; 117 117 - // #endregion 118 118 - 119 119 - // #region async local storage 120 120 - const formStore = new AsyncLocalStorage<FormStore>(); 121 121 - const formHandlerStore = new AsyncLocalStorage<FormHandlerStore>(); 122 122 - 123 123 - const getFormConfig = (form: FormDefinition<any, any>): FormConfig | undefined => { 124 124 - return formStore.getStore()?.definitions.get(form); 125 125 - }; 126 126 - 127 127 - const getFormState = (id: string): FormState | undefined => { 128 128 - return formStore.getStore()?.state.get(id); 129 129 - }; 130 130 - 131 131 - /** 132 132 - * returns the current request context from within a form handler 133 133 - * @returns the hono context object 134 134 - * @throws if called outside of a form handler context 135 135 - */ 136 136 - export const getRequestContext = (): Context => { 137 137 - const store = formHandlerStore.getStore(); 138 138 - if (!store) { 139 139 - throw new Error('getRequestContext called outside of form handler'); 140 140 - } 141 141 - 142 142 - return store.context; 143 143 - }; 144 144 - // #endregion 145 145 - 146 146 - // #region form factory 147 147 - /** 148 148 - * creates a form definition with schema validation and handler 149 149 - * @param schema standard schema for input validation 150 150 - * @param handler async function to process validated form data 151 151 - * @returns form definition object 152 152 - */ 153 153 - export const form = <TInput extends Record<string, unknown>, TOutput>( 154 154 - schema: StandardSchemaV1<TInput>, 155 155 - handler: (data: TInput, issue: IssueBuilder<TInput>) => Promise<TOutput>, 156 156 - ): FormDefinition<TInput, TOutput> => { 157 157 - const definition = {} as FormDefinition<TInput, TOutput>; 158 158 - 159 159 - const getConfig = () => { 160 160 - const config = getFormConfig(definition); 161 161 - if (!config) { 162 162 - throw new Error('Form accessed outside of registered context'); 163 163 - } 164 164 - return config; 165 165 - }; 166 166 - 167 167 - // enumerable - included in spread 168 168 - Object.defineProperties(definition, { 169 169 - action: { 170 170 - enumerable: true, 171 171 - get: () => getConfig().action, 172 172 - }, 173 173 - method: { 174 174 - enumerable: true, 175 175 - value: 'post', 176 176 - }, 177 177 - }); 178 178 - 179 179 - // non-enumerable - excluded from spread 180 180 - Object.defineProperties(definition, { 181 181 - fields: { 182 182 - enumerable: false, 183 183 - get: () => { 184 184 - const state = getFormState(getConfig().id); 185 185 - return createFieldsProxy<TInput>( 186 186 - () => state?.input ?? {}, 187 187 - () => state?.issues ?? {}, 188 188 - ); 189 189 - }, 190 190 - }, 191 191 - result: { 192 192 - enumerable: false, 193 193 - get: () => { 194 194 - const config = getFormConfig(definition); 195 195 - if (!config) { 196 196 - return undefined; 197 197 - } 198 198 - return getFormState(config.id)?.result as TOutput | undefined; 199 199 - }, 200 200 - }, 201 201 - __: { 202 202 - enumerable: false, 203 203 - value: { schema, handler }, 204 204 - }, 205 205 - }); 206 206 - 207 207 - return definition; 208 208 - }; 209 209 - // #endregion 210 210 - 211 211 - // #region middleware 212 212 - const EMPTY_STATE = new Map<string, FormState>(); 213 213 - 214 214 - /** 215 215 - * registers form handlers as middleware 216 216 - * @param forms object mapping form IDs to form definitions 217 217 - * @returns hono middleware handler 218 218 - */ 219 219 - export const registerForms = (forms: Record<string, FormDefinition<any, any>>): MiddlewareHandler => { 220 220 - const definitions = new WeakMap<FormDefinition<any, any>, FormConfig>(); 221 221 - for (const [id, form] of Object.entries(forms)) { 222 222 - definitions.set(form, { id, action: `?__action=${id}` }); 223 223 - } 224 224 - 225 225 - return async (c: Context, next: Next) => { 226 226 - let state: Map<string, FormState> | undefined; 227 227 - 228 228 - jmp: { 229 229 - if (c.req.method !== 'POST') { 230 230 - break jmp; 231 231 - } 232 232 - 233 233 - const actionId = c.req.query('__action'); 234 234 - if (actionId === undefined) { 235 235 - break jmp; 236 236 - } 237 237 - 238 238 - const form = forms[actionId]; 239 239 - if (form === undefined) { 240 240 - break jmp; 241 241 - } 242 242 - 243 243 - const fetchSite = c.req.header('sec-fetch-site'); 244 244 - if (fetchSite !== 'same-origin') { 245 245 - throw new HTTPException(403, { message: 'cross-origin form submission rejected' }); 246 246 - } 247 247 - 248 248 - const formData = await c.req.formData(); 249 249 - const input = convertFormData(formData); 250 250 - 251 251 - // validate with schema 252 252 - const validated = await form.__.schema['~standard'].validate(input); 253 253 - 254 254 - state ??= new Map(); 255 255 - 256 256 - if (validated.issues) { 257 257 - state.set(actionId, { 258 258 - input, 259 259 - issues: flattenIssues(normalizeIssues(validated.issues)), 260 260 - }); 261 261 - 262 262 - break jmp; 263 263 - } 264 264 - 265 265 - const issueBuilder = createIssueBuilder<any>(); 266 266 - 267 267 - try { 268 268 - const result = await formHandlerStore.run({ context: c }, async () => { 269 269 - return await form.__.handler(validated.value, issueBuilder); 270 270 - }); 271 271 - 272 272 - state.set(actionId, { input: {}, issues: {}, result }); 273 273 - } catch (err) { 274 274 - if (err instanceof ValidationError) { 275 275 - state.set(actionId, { input, issues: flattenIssues(err.issues) }); 276 276 - } else { 277 277 - throw err; 278 278 - } 279 279 - } 280 280 - } 281 281 - 282 282 - await formStore.run({ definitions: definitions, state: state ?? EMPTY_STATE }, next); 283 283 - }; 284 284 - }; 285 285 - // #endregion 286 286 - 287 287 - // #region validation error 288 288 - /** 289 289 - * error thrown to indicate form validation failure 290 290 - */ 291 291 - export class ValidationError extends Error { 292 292 - readonly issues: FormIssue[]; 293 293 - 294 294 - constructor(issues: FormIssue[]) { 295 295 - super('Validation failed'); 296 296 - this.name = 'ValidationError'; 297 297 - this.issues = issues; 298 298 - } 299 299 - } 300 300 - 301 301 - /** 302 302 - * throws a validation error with the given issues 303 303 - * @param issues one or more form issues 304 304 - */ 305 305 - export const invalid: { 306 306 - (...issues: (FormIssue | string)[]): never; 307 307 - } = (...issues: (FormIssue | string)[]): never => { 308 308 - throw new ValidationError( 309 309 - issues.map((issue) => (typeof issue === 'string' ? { path: [], message: issue } : issue)), 310 310 - ); 311 311 - }; 312 312 - // #endregion 313 313 - 314 314 - // #region redirect 315 315 - type RedirectStatus = 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308; 316 316 - 317 317 - /** 318 318 - * throws an HTTP redirect exception 319 319 - * @param status redirect status code 320 320 - * @param location target URL 321 321 - */ 322 322 - export const redirect: { 323 323 - (status: RedirectStatus, location: string): never; 324 324 - } = (status: RedirectStatus, location: string): never => { 325 325 - throw new HTTPException(status as ContentfulStatusCode, { 326 326 - res: new Response(null, { status, headers: { location } }), 327 327 - }); 328 328 - }; 329 329 - // #endregion 330 330 - 331 331 - // #region issue builder 332 332 - const createIssueBuilder = <T>(): IssueBuilder<T> => { 333 333 - const createProxy = (path: (string | number)[]): any => { 334 334 - const issueFunc = (message: string): FormIssue => ({ path, message }); 335 335 - 336 336 - return new Proxy(issueFunc, { 337 337 - get(_, prop) { 338 338 - if (typeof prop === 'symbol') { 339 339 - return undefined; 340 340 - } 341 341 - 342 342 - const key = /^\d+$/.test(prop) ? parseInt(prop, 10) : prop; 343 343 - return createProxy([...path, key]); 344 344 - }, 345 345 - }); 346 346 - }; 347 347 - 348 348 - return createProxy([]); 349 349 - }; 350 350 - // #endregion 351 351 - 352 352 - // #region fields proxy 353 353 - const createFieldsProxy = <T>( 354 354 - getInput: () => Record<string, unknown>, 355 355 - getIssues: () => Record<string, FormIssue[]>, 356 356 - path: (string | number)[] = [], 357 357 - ): FieldsProxy<T> => { 358 358 - const getValue = (): unknown => { 359 359 - let current: unknown = getInput(); 360 360 - for (const key of path) { 361 361 - if (current == null || typeof current !== 'object') { 362 362 - return undefined; 363 363 - } 364 364 - current = (current as Record<string | number, unknown>)[key]; 365 365 - } 366 366 - return current; 367 367 - }; 368 368 - 369 369 - const buildName = (): string => { 370 370 - let name = ''; 371 371 - for (const segment of path) { 372 372 - if (typeof segment === 'number') { 373 373 - name += `[${segment}]`; 374 374 - } else { 375 375 - name += name === '' ? segment : `.${segment}`; 376 376 - } 377 377 - } 378 378 - return name; 379 379 - }; 380 380 - 381 381 - const pathKey = buildName() || '$'; 382 382 - 383 383 - const accessor = { 384 384 - value: getValue, 385 385 - issues: () => { 386 386 - const issues = getIssues()[pathKey] ?? []; 387 387 - const pathStr = path.join('.'); 388 388 - return issues 389 389 - .filter((issue) => issue.path.join('.') === pathStr) 390 390 - .map((issue) => ({ path: issue.path, message: issue.message })); 391 391 - }, 392 392 - allIssues: () => { 393 393 - const issues = getIssues()[pathKey] ?? []; 394 394 - return issues.map((issue) => ({ path: issue.path, message: issue.message })); 395 395 - }, 396 396 - as: (type: InputType, inputValue?: string) => { 397 397 - const baseName = buildName(); 398 398 - const issues = getIssues()[pathKey] ?? []; 399 399 - const pathStr = path.join('.'); 400 400 - const hasError = issues.some((i) => i.path.join('.') === pathStr); 401 401 - 402 402 - const isArray = 403 403 - type === 'file multiple' || 404 404 - type === 'select multiple' || 405 405 - (type === 'checkbox' && typeof inputValue === 'string'); 406 406 - 407 407 - const prefix = 408 408 - type === 'number' || type === 'range' ? 'n:' : type === 'checkbox' && !isArray ? 'b:' : ''; 409 409 - 410 410 - const props: Record<string, unknown> = { 411 411 - name: prefix + baseName + (isArray ? '[]' : ''), 412 412 - 'aria-invalid': hasError ? 'true' : undefined, 413 413 - }; 414 414 - 415 415 - // add type attribute for non-text, non-select elements 416 416 - if (type !== 'text' && type !== 'select' && type !== 'select multiple') { 417 417 - props.type = type === 'file multiple' ? 'file' : type; 418 418 - } 419 419 - 420 420 - // submit and hidden require inputValue 421 421 - if (type === 'submit' || type === 'hidden') { 422 422 - props.value = inputValue; 423 423 - return props; 424 424 - } 425 425 - 426 426 - // select inputs 427 427 - if (type === 'select' || type === 'select multiple') { 428 428 - props.multiple = isArray; 429 429 - props.value = getValue(); 430 430 - return props; 431 431 - } 432 432 - 433 433 - // checkbox and radio inputs 434 434 - if (type === 'checkbox' || type === 'radio') { 435 435 - props.value = inputValue ?? 'on'; 436 436 - const value = getValue(); 437 437 - 438 438 - if (type === 'radio') { 439 439 - props.checked = value === inputValue; 440 440 - } else if (isArray) { 441 441 - props.checked = Array.isArray(value) && value.includes(inputValue); 442 442 - } else { 443 443 - props.checked = !!value; 444 444 - } 445 445 - 446 446 - return props; 447 447 - } 448 448 - 449 449 - // file inputs 450 450 - if (type === 'file' || type === 'file multiple') { 451 451 - props.multiple = isArray; 452 452 - return props; 453 453 - } 454 454 - 455 455 - // all other text-like inputs 456 456 - const value = getValue(); 457 457 - props.value = value != null ? String(value) : ''; 458 458 - return props; 459 459 - }, 460 460 - }; 461 461 - 462 462 - return new Proxy(accessor as FieldsProxy<T>, { 463 463 - get(_, prop) { 464 464 - if (typeof prop === 'symbol') { 465 465 - return undefined; 466 466 - } 467 467 - 468 468 - // return accessor methods 469 469 - if (prop === 'value' || prop === 'issues' || prop === 'allIssues' || prop === 'as') { 470 470 - return accessor[prop]; 471 471 - } 472 472 - 473 473 - // nested field access 474 474 - const key = /^\d+$/.test(prop) ? parseInt(prop, 10) : prop; 475 475 - return createFieldsProxy(getInput, getIssues, [...path, key]); 476 476 - }, 477 477 - }); 478 478 - }; 479 479 - // #endregion 480 480 - 481 481 - // #region form data conversion 482 482 - const convertFormData = (data: FormData): Record<string, unknown> => { 483 483 - const result: Record<string, unknown> = {}; 484 484 - 485 485 - for (let key of data.keys()) { 486 486 - const isArray = key.endsWith('[]'); 487 487 - let values: unknown[] = data.getAll(key); 488 488 - 489 489 - if (isArray) { 490 490 - key = key.slice(0, -2); 491 491 - } 492 492 - 493 493 - // reject duplicate non-array keys 494 494 - if (values.length > 1 && !isArray) { 495 495 - throw new Error(`Form cannot contain duplicated keys — "${key}" has ${values.length} values`); 496 496 - } 497 497 - 498 498 - // filter empty file inputs (browsers submit a File with empty name for empty file inputs) 499 499 - values = values.filter( 500 500 - (entry) => 501 501 - typeof entry === 'string' || (entry instanceof File && (entry.name !== '' || entry.size > 0)), 502 502 - ); 503 503 - 504 504 - // handle type coercion prefixes 505 505 - if (key.startsWith('n:')) { 506 506 - key = key.slice(2); 507 507 - values = values.map((v) => (v === '' ? undefined : parseFloat(v as string))); 508 508 - } else if (key.startsWith('b:')) { 509 509 - key = key.slice(2); 510 510 - values = values.map((v) => v === 'on'); 511 511 - } 512 512 - 513 513 - setNestedValue(result, key, isArray ? values : values[0]); 514 514 - } 515 515 - 516 516 - return result; 517 517 - }; 518 518 - 519 519 - const DANGEROUS_KEYS = new Set(['__proto__', 'constructor', 'prototype']); 520 520 - 521 521 - const setNestedValue = (obj: Record<string, unknown>, path: string, value: unknown): void => { 522 522 - const keys = path.split(/\.|\[|\]/).filter((k): k is string => k !== ''); 523 523 - 524 524 - if (keys.length === 0) { 525 525 - return; 526 526 - } 527 527 - 528 528 - let current = obj; 529 529 - 530 530 - for (let i = 0; i < keys.length - 1; i++) { 531 531 - const key = keys[i]!; 532 532 - 533 533 - if (DANGEROUS_KEYS.has(key)) { 534 534 - throw new Error(`Invalid key "${key}"`); 535 535 - } 536 536 - 537 537 - const nextKey = keys[i + 1]!; 538 538 - const isNextArray = /^\d+$/.test(nextKey); 539 539 - const exists = key in current; 540 540 - const inner = current[key]; 541 541 - 542 542 - if (exists && isNextArray !== Array.isArray(inner)) { 543 543 - throw new Error(`Invalid array key "${nextKey}"`); 544 544 - } 545 545 - 546 546 - if (!exists) { 547 547 - current[key] = isNextArray ? [] : {}; 548 548 - } 549 549 - 550 550 - current = current[key] as Record<string, unknown>; 551 551 - } 552 552 - 553 553 - const finalKey = keys[keys.length - 1]!; 554 554 - 555 555 - if (DANGEROUS_KEYS.has(finalKey)) { 556 556 - throw new Error(`Invalid key "${finalKey}"`); 557 557 - } 558 558 - 559 559 - current[finalKey] = value; 560 560 - }; 561 561 - 562 562 - const normalizeIssues = (issues: readonly StandardSchemaV1.Issue[]): FormIssue[] => { 563 563 - return issues.map((issue) => ({ 564 564 - path: (issue.path ?? []).map((segment) => (typeof segment === 'object' ? segment.key : segment)) as ( 565 565 - | string 566 566 - | number 567 567 - )[], 568 568 - message: issue.message, 569 569 - })); 570 570 - }; 571 571 - 572 572 - /** flattens issues into a map keyed by path prefix for O(1) lookups */ 573 573 - const flattenIssues = (issues: FormIssue[]): Record<string, FormIssue[]> => { 574 574 - const result: Record<string, FormIssue[]> = {}; 575 575 - 576 576 - for (const issue of issues) { 577 577 - (result.$ ??= []).push(issue); 578 578 - 579 579 - let name = ''; 580 580 - for (const key of issue.path) { 581 581 - if (typeof key === 'number') { 582 582 - name += `[${key}]`; 583 583 - } else { 584 584 - name += name === '' ? key : `.${key}`; 585 585 - } 586 586 - (result[name] ??= []).push(issue); 587 587 - } 588 588 - } 589 589 - 590 590 - return result; 591 591 - }; 592 592 - // #endregion

+48

packages/danaus/src/web/layouts/account.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 3 3 + import AsideItem from '../components/aside-item.tsx'; 4 4 + import Key2Outlined from '../icons/central/key-2-outlined.tsx'; 5 5 + import PersonOutlined from '../icons/central/person-outlined.tsx'; 6 6 + import ShieldOutlined from '../icons/central/shield-outlined.tsx'; 7 7 + import { routes } from '../routes.ts'; 8 8 + 9 9 + import { BaseLayout } from './base.tsx'; 10 10 + 11 11 + export interface AccountLayoutProps { 12 12 + children?: JSXNode; 13 13 + } 14 14 + 15 15 + /** 16 16 + * account management layout with sidebar navigation. 17 17 + */ 18 18 + export const AccountLayout = (props: AccountLayoutProps) => { 19 19 + return ( 20 20 + <BaseLayout> 21 21 + <div class="flex flex-col gap-4 p-4 sm:p-16 sm:pt-24 lg:grid lg:grid-cols-[280px_minmax(0,640px)] lg:justify-center"> 22 22 + <aside class="-ml-2 flex flex-col gap-4 sm:ml-0"> 23 23 + <div class="flex h-8 shrink-0 items-center pl-4"> 24 24 + <h2 class="text-base-400 font-medium">Account</h2> 25 25 + </div> 26 26 + 27 27 + <div class="flex flex-col gap-px"> 28 28 + <AsideItem href={routes.account.overview.href()} exact icon={<PersonOutlined size={20} />}> 29 29 + Overview 30 30 + </AsideItem> 31 31 + 32 32 + <AsideItem href={routes.account.appPasswords.href()} icon={<Key2Outlined size={20} />}> 33 33 + App passwords 34 34 + </AsideItem> 35 35 + 36 36 + <AsideItem href={routes.account.security.href()} icon={<ShieldOutlined size={20} />}> 37 37 + Security 38 38 + </AsideItem> 39 39 + </div> 40 40 + </aside> 41 41 + 42 42 + <hr class="border-neutral-stroke-1 sm:hidden" /> 43 43 + 44 44 + <main>{props.children}</main> 45 45 + </div> 46 46 + </BaseLayout> 47 47 + ); 48 48 + };

+41

packages/danaus/src/web/layouts/admin.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 3 3 + import AsideItem from '../components/aside-item.tsx'; 4 4 + import Group1Outlined from '../icons/central/group-1-outlined.tsx'; 5 5 + import HomeOpenOutlined from '../icons/central/home-open-outlined.tsx'; 6 6 + import { routes } from '../routes.ts'; 7 7 + 8 8 + import { BaseLayout } from './base.tsx'; 9 9 + 10 10 + export interface AdminLayoutProps { 11 11 + children?: JSXNode; 12 12 + } 13 13 + 14 14 + /** 15 15 + * admin layout with sidebar navigation. 16 16 + */ 17 17 + export const AdminLayout = (props: AdminLayoutProps) => { 18 18 + return ( 19 19 + <BaseLayout> 20 20 + <div class="flex flex-col gap-4 p-4 sm:p-16 sm:pt-24 lg:grid lg:grid-cols-[280px_minmax(0,640px)] lg:justify-center"> 21 21 + <aside class="-ml-2 flex flex-col gap-2 sm:ml-0"> 22 22 + <h2 class="pb-2 pl-4 text-base-400 font-medium">PDS administration</h2> 23 23 + 24 24 + <div class="flex flex-col gap-px"> 25 25 + <AsideItem href={routes.admin.dashboard.href()} exact icon={<HomeOpenOutlined size={20} />}> 26 26 + Home 27 27 + </AsideItem> 28 28 + 29 29 + <AsideItem href={routes.admin.accounts.index.href()} icon={<Group1Outlined size={20} />}> 30 30 + Accounts 31 31 + </AsideItem> 32 32 + </div> 33 33 + </aside> 34 34 + 35 35 + <hr class="border-neutral-stroke-1 sm:hidden" /> 36 36 + 37 37 + <main>{props.children}</main> 38 38 + </div> 39 39 + </BaseLayout> 40 40 + ); 41 41 + };

+29

packages/danaus/src/web/layouts/base.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 3 3 + import { IdProvider } from '../components/id.tsx'; 4 4 + 5 5 + export interface BaseLayoutProps { 6 6 + children?: JSXNode; 7 7 + } 8 8 + 9 9 + /** 10 10 + * base HTML layout wrapper for all pages. 11 11 + * includes the document structure, meta tags, and stylesheet. 12 12 + */ 13 13 + export const BaseLayout = (props: BaseLayoutProps) => { 14 14 + return ( 15 15 + <IdProvider> 16 16 + <html lang="en"> 17 17 + <head> 18 18 + <meta charset="utf-8" /> 19 19 + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 20 20 + <link rel="stylesheet" href="/assets/style.css" /> 21 21 + </head> 22 22 + 23 23 + <body> 24 24 + <div class="flex min-h-dvh flex-col">{props.children}</div> 25 25 + </body> 26 26 + </html> 27 27 + </IdProvider> 28 28 + ); 29 29 + };

+33

packages/danaus/src/web/middlewares/app-context.ts

reviewed

··· 1 1 + import { createInjectionKey, type Middleware } from '@oomfware/fetch-router'; 2 2 + import { getContext } from '@oomfware/fetch-router/middlewares/async-context'; 3 3 + 4 4 + import type { AppContext } from '#app/context.ts'; 5 5 + 6 6 + const appContextKey = createInjectionKey<AppContext>(); 7 7 + 8 8 + /** 9 9 + * middleware that provides the AppContext to the request context store. 10 10 + * @param ctx the application context to provide 11 11 + */ 12 12 + export const provideAppContext = (ctx: AppContext): Middleware => { 13 13 + return async ({ store }, next) => { 14 14 + store.provide(appContextKey, ctx); 15 15 + return next(); 16 16 + }; 17 17 + }; 18 18 + 19 19 + /** 20 20 + * retrieves the AppContext from the current request context. 21 21 + * must be called within a request handler after the provideAppContext middleware. 22 22 + * @returns the application context 23 23 + */ 24 24 + export const getAppContext = (): AppContext => { 25 25 + const { store } = getContext(); 26 26 + const ctx = store.inject(appContextKey); 27 27 + 28 28 + if (ctx === undefined) { 29 29 + throw new Error('AppContext not found in request context'); 30 30 + } 31 31 + 32 32 + return ctx; 33 33 + };

+32

packages/danaus/src/web/middlewares/basic-auth.ts

reviewed

··· 1 1 + import type { Middleware } from '@oomfware/fetch-router'; 2 2 + 3 3 + import { parseBasicAuth } from '#app/auth/verifier.ts'; 4 4 + 5 5 + import { getAppContext } from './app-context.ts'; 6 6 + 7 7 + const REALM = 'admin'; 8 8 + 9 9 + /** 10 10 + * middleware that requires HTTP Basic Authentication for admin access. 11 11 + * uses the admin password from app config via async context. 12 12 + */ 13 13 + export const requireAdmin = (): Middleware => { 14 14 + return async ({ request }, next) => { 15 15 + const ctx = getAppContext(); 16 16 + const adminPassword = ctx.config.secrets.adminPassword; 17 17 + 18 18 + if (adminPassword === null) { 19 19 + return new Response('Administration UI is disabled', { status: 403 }); 20 20 + } 21 21 + 22 22 + const auth = parseBasicAuth(request); 23 23 + if (auth === null || auth.password !== adminPassword) { 24 24 + return new Response('Unauthorized', { 25 25 + status: 401, 26 26 + headers: { 'www-authenticate': `Basic realm="${REALM}", charset="UTF-8"` }, 27 27 + }); 28 28 + } 29 29 + 30 30 + return next(); 31 31 + }; 32 32 + };

+51

packages/danaus/src/web/middlewares/session.ts

reviewed

··· 1 1 + import { createInjectionKey, redirect, type Middleware } from '@oomfware/fetch-router'; 2 2 + import { getContext } from '@oomfware/fetch-router/middlewares/async-context'; 3 3 + 4 4 + import type { WebSession } from '#app/accounts/manager.ts'; 5 5 + import { readWebSessionToken, verifyWebSessionToken } from '#app/auth/web.ts'; 6 6 + 7 7 + import { getAppContext } from './app-context.ts'; 8 8 + 9 9 + const sessionKey = createInjectionKey<WebSession>(); 10 10 + 11 11 + /** 12 12 + * middleware that requires a valid web session. 13 13 + * redirects to login page if no session is found. 14 14 + */ 15 15 + export const requireSession = (): Middleware => { 16 16 + return async ({ request, url, store }, next) => { 17 17 + const ctx = getAppContext(); 18 18 + const path = url.pathname; 19 19 + 20 20 + const token = readWebSessionToken(request); 21 21 + if (!token) { 22 22 + redirect(`/account/login?redirect=${encodeURIComponent(path)}`); 23 23 + } 24 24 + 25 25 + const sessionId = verifyWebSessionToken(ctx.config.secrets.jwtKey, token); 26 26 + if (!sessionId) { 27 27 + redirect(`/account/login?redirect=${encodeURIComponent(path)}`); 28 28 + } 29 29 + 30 30 + const session = ctx.accountManager.getWebSession(sessionId); 31 31 + if (!session) { 32 32 + redirect(`/account/login?redirect=${encodeURIComponent(path)}`); 33 33 + } 34 34 + 35 35 + store.provide(sessionKey, session); 36 36 + return next(); 37 37 + }; 38 38 + }; 39 39 + 40 40 + /** 41 41 + * retrieves the current web session from the request context. 42 42 + * must be called within a request handler after the requireSession middleware. 43 43 + * @returns the web session 44 44 + */ 45 45 + export const getSession = (): WebSession => { 46 46 + const session = getContext().store.inject(sessionKey); 47 47 + if (!session) { 48 48 + throw new Error('Session not found in request context'); 49 49 + } 50 50 + return session; 51 51 + };

-61

packages/danaus/src/web/oauth/index.tsx

reviewed

··· 1 1 - import { Hono } from 'hono'; 2 2 - import { jsxRenderer } from 'hono/jsx-renderer'; 3 3 - 4 4 - import type { AppContext } from '#app/context.ts'; 5 5 - 6 6 - import { IdProvider } from '../components/id.tsx'; 7 7 - import Button from '../primitives/button.tsx'; 8 8 - 9 9 - export const createOAuthApp = (_ctx: AppContext) => { 10 10 - const app = new Hono(); 11 11 - 12 12 - // #region base HTML renderer 13 13 - app.use( 14 14 - jsxRenderer(({ children }) => { 15 15 - return ( 16 16 - <IdProvider> 17 17 - <html lang="en"> 18 18 - <head> 19 19 - <meta charset="utf-8" /> 20 20 - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 21 21 - <link rel="stylesheet" href="/assets/style.css" /> 22 22 - </head> 23 23 - 24 24 - <body> 25 25 - <div class="flex min-h-dvh flex-col">{children}</div> 26 26 - </body> 27 27 - </html> 28 28 - </IdProvider> 29 29 - ); 30 30 - }), 31 31 - ); 32 32 - // #endregion 33 33 - 34 34 - // #region authorize route 35 35 - app.on(['GET', 'POST'], '/authorize', (c) => { 36 36 - return c.render( 37 37 - <> 38 38 - <title>authorize - danaus</title> 39 39 - 40 40 - <div class="flex flex-1 items-center justify-center p-4"> 41 41 - <div class="w-full max-w-96 rounded-xl bg-neutral-background-1 p-6 shadow-16"> 42 42 - <div class="flex flex-col gap-4"> 43 43 - <h1 class="text-base-500 font-semibold">authorize application</h1> 44 44 - 45 45 - <p class="text-base-300 text-neutral-foreground-3"> 46 46 - OAuth authorization is not yet implemented. 47 47 - </p> 48 48 - 49 49 - <Button href="/account" variant="outlined"> 50 50 - Back to account 51 51 - </Button> 52 52 - </div> 53 53 - </div> 54 54 - </div> 55 55 - </>, 56 56 - ); 57 57 - }); 58 58 - // #endregion 59 59 - 60 60 - return app; 61 61 - };

+4 -3

packages/danaus/src/web/primitives/accordion-header.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 import ChevronDownSmallOutlined from '../icons/central/chevron-down-small-outlined.tsx'; 5 6 ··· 51 52 size?: 'small' | 'medium' | 'large' | 'extra-large'; 52 53 expandIconPosition?: 'start' | 'end'; 53 54 /** slot for custom icon before the text */ 54 54 - icon?: Child; 55 55 + icon?: JSXNode; 55 56 class?: string; 56 56 - children?: Child; 57 57 + children?: JSXNode; 57 58 } 58 59 59 60 /**

+2 -2

packages/danaus/src/web/primitives/accordion-item.tsx

reviewed

··· 1 1 - import type { Child } from 'hono/jsx'; 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 3 3 export interface AccordionItemProps { 4 4 /** whether the accordion item is open by default */ ··· 6 6 /** group name for exclusive accordion behavior (only one open at a time) */ 7 7 name?: string; 8 8 class?: string; 9 9 - children?: Child; 9 9 + children?: JSXNode; 10 10 } 11 11 12 12 /**

+3 -2

packages/danaus/src/web/primitives/accordion-panel.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 const root = cva({ 5 6 base: 'px-3 pb-3', ··· 7 8 8 9 export interface AccordionPanelProps { 9 10 class?: string; 10 10 - children?: Child; 11 11 + children?: JSXNode; 11 12 } 12 13 13 14 /**

+2 -2

packages/danaus/src/web/primitives/accordion.tsx

reviewed

··· 1 1 - import type { Child } from 'hono/jsx'; 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 3 3 export interface AccordionProps { 4 4 class?: string; 5 5 - children?: Child; 5 5 + children?: JSXNode; 6 6 } 7 7 8 8 /**

+3 -2

packages/danaus/src/web/primitives/button.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva, type VariantProps } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 import type { InvokerCommand } from './utils/types.ts'; 5 6 ··· 57 58 /** invoker command action */ 58 59 command?: InvokerCommand; 59 60 class?: string; 60 60 - children?: Child; 61 61 + children?: JSXNode; 61 62 } 62 63 63 64 const Button = (props: ButtonProps) => {

+3 -2

packages/danaus/src/web/primitives/checkbox.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 import { useId } from '../components/id.tsx'; 5 6 import CheckmarkIcon from '../icons/central/checkmark-1-solid.tsx'; ··· 75 76 disabled?: boolean; 76 77 labelPosition?: 'before' | 'after'; 77 78 class?: string; 78 78 - children?: Child; 79 79 + children?: JSXNode; 79 80 } 80 81 81 82 const Checkbox = (props: CheckboxProps) => {

+3 -2

packages/danaus/src/web/primitives/dialog-actions.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva, type VariantProps } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 const root = cva({ 5 6 base: [ ··· 18 19 19 20 export interface DialogActionsProps extends VariantProps<typeof root> { 20 21 class?: string; 21 21 - children?: Child; 22 22 + children?: JSXNode; 22 23 } 23 24 24 25 /**

+3 -2

packages/danaus/src/web/primitives/dialog-body.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 const root = cva({ 5 6 base: ['grid gap-2', '@container/dialog-body'], ··· 7 8 8 9 export interface DialogBodyProps { 9 10 class?: string; 10 10 - children?: Child; 11 11 + children?: JSXNode; 11 12 } 12 13 13 14 /**

+2 -3

packages/danaus/src/web/primitives/dialog-close.tsx

reviewed

··· 1 1 - import { cloneElement } from 'hono/jsx'; 2 2 - import type { JSX } from 'hono/jsx/jsx-runtime'; 1 1 + import { cloneElement, type JSXElement } from '@oomfware/jsx'; 3 2 4 3 import { useDialogContext } from './utils/dialog-context.tsx'; 5 4 6 5 export interface DialogCloseProps { 7 7 - children: JSX.Element; 6 6 + children: JSXElement; 8 7 } 9 8 10 9 const DialogClose = (props: DialogCloseProps) => {

+3 -2

packages/danaus/src/web/primitives/dialog-content.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 const root = cva({ 5 6 base: ['min-h-8 overflow-y-auto', 'text-base-300'], ··· 7 8 8 9 export interface DialogContentProps { 9 10 class?: string; 10 10 - children?: Child; 11 11 + children?: JSXNode; 11 12 } 12 13 13 14 /**

+3 -2

packages/danaus/src/web/primitives/dialog-surface.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva, type VariantProps } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 import { useDialogContext } from './utils/dialog-context'; 5 6 ··· 43 44 }); 44 45 45 46 export interface DialogSurfaceProps extends VariantProps<typeof surface> { 46 46 - children?: Child; 47 47 + children?: JSXNode; 47 48 } 48 49 49 50 /**

+4 -3

packages/danaus/src/web/primitives/dialog-title.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 import { useDialogContext } from './utils/dialog-context.tsx'; 5 6 ··· 13 14 14 15 export interface DialogTitleProps { 15 16 /** optional action element (e.g., close button) */ 16 16 - action?: Child; 17 17 + action?: JSXNode; 17 18 class?: string; 18 18 - children?: Child; 19 19 + children?: JSXNode; 19 20 } 20 21 21 22 /**

+2 -3

packages/danaus/src/web/primitives/dialog-trigger.tsx

reviewed

··· 1 1 - import { cloneElement } from 'hono/jsx'; 2 2 - import type { JSX } from 'hono/jsx/jsx-runtime'; 1 1 + import { cloneElement, type JSXElement } from '@oomfware/jsx'; 3 2 4 3 import { useDialogContext } from './utils/dialog-context.tsx'; 5 4 6 5 export interface DialogTriggerProps { 7 7 - children: JSX.Element; 6 6 + children: JSXElement; 8 7 } 9 8 10 9 const DialogTrigger = (props: DialogTriggerProps) => {

+2 -2

packages/danaus/src/web/primitives/dialog.tsx

reviewed

··· 1 1 - import type { Child } from 'hono/jsx'; 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 3 3 import { useId } from '../components/id.tsx'; 4 4 ··· 6 6 7 7 export interface DialogProps { 8 8 id?: string; 9 9 - children?: Child; 9 9 + children?: JSXNode; 10 10 } 11 11 12 12 /**

+8 -7

packages/danaus/src/web/primitives/field.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 import { useId } from '../components/id.tsx'; 5 6 import CheckCircle2Solid from '../icons/central/check-circle-2-solid.tsx'; ··· 61 62 export interface FieldProps { 62 63 required?: boolean; 63 64 validationStatus?: ValidationStatus; 64 64 - label?: Child; 65 65 - description?: Child; 66 66 - hint?: Child; 67 67 - validationMessageText?: Child; 68 68 - validationMessageIcon?: Child; 65 65 + label?: JSXNode; 66 66 + description?: JSXNode; 67 67 + hint?: JSXNode; 68 68 + validationMessageText?: JSXNode; 69 69 + validationMessageIcon?: JSXNode; 69 70 class?: string; 70 70 - children?: Child; 71 71 + children?: JSXNode; 71 72 } 72 73 73 74 const Field = (props: FieldProps) => {

+4 -3

packages/danaus/src/web/primitives/input.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 import { useFieldContext } from './utils/field-context.tsx'; 5 6 ··· 67 68 autofocus?: boolean; 68 69 autocomplete?: string; 69 70 required?: boolean; 70 70 - contentBefore?: Child; 71 71 - contentAfter?: Child; 71 71 + contentBefore?: JSXNode; 72 72 + contentAfter?: JSXNode; 72 73 class?: string; 73 74 } 74 75

+3 -2

packages/danaus/src/web/primitives/label.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 import { useFieldContext } from './utils/field-context.tsx'; 5 6 ··· 15 16 for?: string; 16 17 required?: boolean; 17 18 class?: string; 18 18 - children?: Child; 19 19 + children?: JSXNode; 19 20 } 20 21 21 22 const Label = (props: LabelProps) => {

+3 -2

packages/danaus/src/web/primitives/menu-item.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 import type { InvokerCommand } from './utils/types.ts'; 5 6 ··· 24 25 /** invoker command action */ 25 26 command?: InvokerCommand; 26 27 class?: string; 27 27 - children?: Child; 28 28 + children?: JSXNode; 28 29 } 29 30 30 31 /**

+3 -2

packages/danaus/src/web/primitives/menu-list.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 const root = cva({ 5 6 base: ['flex flex-col gap-0.5'], ··· 7 8 8 9 export interface MenuListProps { 9 10 class?: string; 10 10 - children?: Child; 11 11 + children?: JSXNode; 11 12 } 12 13 13 14 /**

+3 -2

packages/danaus/src/web/primitives/menu-popover.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 import { useMenuContext } from './utils/menu-context.tsx'; 5 6 ··· 12 13 13 14 export interface MenuPopoverProps { 14 15 class?: string; 15 15 - children?: Child; 16 16 + children?: JSXNode; 16 17 } 17 18 18 19 /**

+4 -4

packages/danaus/src/web/primitives/menu-trigger.tsx

reviewed

··· 1 1 + import { cloneElement, type JSXElement } from '@oomfware/jsx'; 2 2 + 1 3 import { cx } from 'cva'; 2 2 - import { cloneElement } from 'hono/jsx'; 3 3 - import type { JSX } from 'hono/jsx/jsx-runtime'; 4 4 5 5 import { useMenuContext } from './utils/menu-context.tsx'; 6 6 7 7 export interface MenuTriggerProps { 8 8 - children: JSX.Element; 8 8 + children: JSXElement; 9 9 } 10 10 11 11 /** ··· 16 16 const { children } = props; 17 17 const { menuId } = useMenuContext(); 18 18 19 19 - const childProps = (children as any).props as Record<string, unknown> | undefined; 19 19 + const childProps = children.props as Record<string, unknown>; 20 20 21 21 return cloneElement(children, { 22 22 commandfor: menuId,

+4 -2

packages/danaus/src/web/primitives/menu.tsx

reviewed

··· 1 1 - import { useId, type Child } from 'hono/jsx'; 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 3 3 + import { useId } from '../components/id.tsx'; 2 4 3 5 import { MenuContext, type MenuContextValue } from './utils/menu-context.tsx'; 4 6 5 7 export interface MenuProps { 6 8 id?: string; 7 7 - children?: Child; 9 9 + children?: JSXNode; 8 10 } 9 11 10 12 /**

+3 -2

packages/danaus/src/web/primitives/message-bar-actions.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 import { useMessageBarContext } from './utils/message-bar-context.tsx'; 5 6 ··· 15 16 16 17 export interface MessageBarActionsProps { 17 18 class?: string; 18 18 - children?: Child; 19 19 + children?: JSXNode; 19 20 } 20 21 21 22 /**

+3 -2

packages/danaus/src/web/primitives/message-bar-body.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 const root = cva({ 5 6 base: ['pr-3', 'text-base-300'], ··· 7 8 8 9 export interface MessageBarBodyProps { 9 10 class?: string; 10 10 - children?: Child; 11 11 + children?: JSXNode; 11 12 } 12 13 13 14 /**

+3 -2

packages/danaus/src/web/primitives/message-bar-title.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 const root = cva({ 5 6 base: ['mr-1', 'text-base-300 font-semibold'], ··· 7 8 8 9 export interface MessageBarTitleProps { 9 10 class?: string; 10 10 - children?: Child; 11 11 + children?: JSXNode; 11 12 } 12 13 13 14 /**

+5 -4

packages/danaus/src/web/primitives/message-bar.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 import CheckCircle2Solid from '../icons/central/check-circle-2-solid.tsx'; 5 6 import CircleInfoSolid from '../icons/central/circle-info-solid.tsx'; ··· 13 14 type MessageBarLayout, 14 15 } from './utils/message-bar-context.tsx'; 15 16 16 16 - const getIntentIcon = (intent: MessageBarIntent): Child => { 17 17 + const getIntentIcon = (intent: MessageBarIntent): JSXNode => { 17 18 switch (intent) { 18 19 case 'info': 19 20 return <CircleInfoSolid size={20} />; ··· 71 72 /** layout of the message bar */ 72 73 layout: MessageBarLayout; 73 74 /** optional icon to display */ 74 74 - icon?: Child; 75 75 + icon?: JSXNode; 75 76 class?: string; 76 76 - children?: Child; 77 77 + children?: JSXNode; 77 78 } 78 79 79 80 /**

+3 -3

packages/danaus/src/web/primitives/radio-group.tsx

reviewed

··· 1 1 - import { createContext, useContext, type Child } from 'hono/jsx'; 1 1 + import { createContext, use, type JSXNode } from '@oomfware/jsx'; 2 2 3 3 import { useId } from '../components/id.tsx'; 4 4 ··· 13 13 export const RadioGroupContext = createContext<RadioGroupContextValue | null>(null); 14 14 15 15 export const useRadioGroupContext = () => { 16 16 - const context = useContext(RadioGroupContext); 16 16 + const context = use(RadioGroupContext); 17 17 if (context === null) { 18 18 throw new Error('<Radio> must be used under <RadioGroup>'); 19 19 } ··· 27 27 disabled?: boolean; 28 28 autofocus?: boolean; 29 29 class?: string; 30 30 - children?: Child; 30 30 + children?: JSXNode; 31 31 } 32 32 33 33 const RadioGroup = (props: RadioGroupProps) => {

+3 -2

packages/danaus/src/web/primitives/radio.tsx

reviewed

··· 1 1 + import type { JSXNode } from '@oomfware/jsx'; 2 2 + 1 3 import { cva } from 'cva'; 2 2 - import type { Child } from 'hono/jsx'; 3 4 4 5 import { useId } from '../components/id.tsx'; 5 6 ··· 65 66 value: string; 66 67 disabled?: boolean; 67 68 class?: string; 68 68 - children?: Child; 69 69 + children?: JSXNode; 69 70 } 70 71 71 72 const Radio = (props: RadioProps) => {

+2 -2

packages/danaus/src/web/primitives/utils/dialog-context.tsx

reviewed

··· 1 1 - import { createContext, useContext } from 'hono/jsx'; 1 1 + import { createContext, use } from '@oomfware/jsx'; 2 2 3 3 export interface DialogContextValue { 4 4 dialogId: string; ··· 15 15 (fallback: null): DialogContextValue | null; 16 16 (fallback?: DialogContextValue): DialogContextValue; 17 17 } = (fallback?: DialogContextValue | null): any => { 18 18 - const context = useContext(DialogContext); 18 18 + const context = use(DialogContext); 19 19 if (context === null) { 20 20 if (fallback !== undefined) { 21 21 return fallback;

+2 -2

packages/danaus/src/web/primitives/utils/field-context.tsx

reviewed

··· 1 1 - import { createContext, useContext } from 'hono/jsx'; 1 1 + import { createContext, use } from '@oomfware/jsx'; 2 2 3 3 export type ValidationStatus = 'error' | 'warning' | 'success' | 'none'; 4 4 ··· 17 17 (fallback: null): FieldContextValue | null; 18 18 (fallback?: FieldContextValue): FieldContextValue; 19 19 } = (fallback?: FieldContextValue | null): any => { 20 20 - const context = useContext(FieldContext); 20 20 + const context = use(FieldContext); 21 21 if (context === null) { 22 22 if (fallback !== undefined) { 23 23 return fallback;

+2 -2

packages/danaus/src/web/primitives/utils/menu-context.tsx

reviewed

··· 1 1 - import { createContext, useContext } from 'hono/jsx'; 1 1 + import { createContext, use } from '@oomfware/jsx'; 2 2 3 3 export interface MenuContextValue { 4 4 menuId: string; ··· 14 14 (fallback: null): MenuContextValue | null; 15 15 (fallback?: MenuContextValue): MenuContextValue; 16 16 } = (fallback?: MenuContextValue | null): any => { 17 17 - const context = useContext(MenuContext); 17 17 + const context = use(MenuContext); 18 18 if (context === null) { 19 19 if (fallback !== undefined) { 20 20 return fallback;

+2 -2

packages/danaus/src/web/primitives/utils/message-bar-context.tsx

reviewed

··· 1 1 - import { createContext, useContext } from 'hono/jsx'; 1 1 + import { createContext, use } from '@oomfware/jsx'; 2 2 3 3 export type MessageBarIntent = 'info' | 'success' | 'warning' | 'error'; 4 4 export type MessageBarLayout = 'singleline' | 'multiline'; ··· 18 18 (fallback: null): MessageBarContextValue | null; 19 19 (fallback?: MessageBarContextValue): MessageBarContextValue; 20 20 } = (fallback?: MessageBarContextValue | null): any => { 21 21 - const context = useContext(MessageBarContext); 21 21 + const context = use(MessageBarContext); 22 22 if (context === null) { 23 23 if (fallback !== undefined) { 24 24 return fallback;

+31

packages/danaus/src/web/router.ts

reviewed

··· 1 1 + import { createRouter } from '@oomfware/fetch-router'; 2 2 + import { asyncContext } from '@oomfware/fetch-router/middlewares/async-context'; 3 3 + 4 4 + import type { AppContext } from '#app/context.ts'; 5 5 + 6 6 + import accountController from './controllers/account.tsx'; 7 7 + import adminController from './controllers/admin.tsx'; 8 8 + import homeController from './controllers/home.tsx'; 9 9 + import loginController from './controllers/login.tsx'; 10 10 + import oauthController from './controllers/oauth.tsx'; 11 11 + import { provideAppContext } from './middlewares/app-context.ts'; 12 12 + import { routes } from './routes.ts'; 13 13 + 14 14 + /** 15 15 + * creates the web router with all routes and middleware. 16 16 + * @param ctx application context 17 17 + * @returns the configured router 18 18 + */ 19 19 + export const createWebRouter = (ctx: AppContext) => { 20 20 + const router = createRouter({ 21 21 + middleware: [asyncContext(), provideAppContext(ctx)], 22 22 + }); 23 23 + 24 24 + router.map(routes.home, homeController); 25 25 + router.map(routes.admin, adminController); 26 26 + router.map(routes.login, loginController); 27 27 + router.map(routes.account, accountController); 28 28 + router.map(routes.oauth, oauthController); 29 29 + 30 30 + return router; 31 31 + };

+27

packages/danaus/src/web/routes.ts

reviewed

··· 1 1 + import { route } from '@oomfware/fetch-router'; 2 2 + 3 3 + export const routes = route({ 4 4 + home: '/', 5 5 + 6 6 + admin: { 7 7 + dashboard: '/admin', 8 8 + accounts: { 9 9 + index: '/admin/accounts', 10 10 + create: '/admin/accounts/new', 11 11 + }, 12 12 + }, 13 13 + 14 14 + // login is separate - no session required 15 15 + login: '/account/login', 16 16 + 17 17 + // account routes - all require session 18 18 + account: { 19 19 + overview: '/account', 20 20 + appPasswords: '/account/app-passwords', 21 21 + security: '/account/security', 22 22 + }, 23 23 + 24 24 + oauth: { 25 25 + authorize: '/oauth/authorize', 26 26 + }, 27 27 + });

-92

packages/danaus/src/web/styles/main.out.css

reviewed

··· 322 322 .-mx-1\.25 { 323 323 margin-inline: calc(var(--spacing) * -1.25); 324 324 } 325 325 - .-mx-3 { 326 326 - margin-inline: calc(var(--spacing) * -3); 327 327 - } 328 325 .-my-0\.5 { 329 326 margin-block: calc(var(--spacing) * -0.5); 330 327 } ··· 517 514 } 518 515 .flex-col { 519 516 flex-direction: column; 520 520 - } 521 521 - .flex-row-reverse { 522 522 - flex-direction: row-reverse; 523 517 } 524 518 .flex-nowrap { 525 519 flex-wrap: nowrap; ··· 833 827 --tw-font-weight: var(--font-weight-semibold); 834 828 font-weight: var(--font-weight-semibold); 835 829 } 836 836 - .wrap-anywhere { 837 837 - overflow-wrap: anywhere; 838 838 - } 839 830 .wrap-break-word { 840 831 overflow-wrap: break-word; 841 832 } ··· 900 891 .outline-transparent { 901 892 outline-color: transparent; 902 893 } 903 903 - .filter { 904 904 - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); 905 905 - } 906 894 .transition { 907 895 transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; 908 896 transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); 909 897 transition-duration: var(--tw-duration, var(--default-transition-duration)); 910 898 } 911 911 - .transition-transform { 912 912 - transition-property: transform, translate, scale, rotate; 913 913 - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); 914 914 - transition-duration: var(--tw-duration, var(--default-transition-duration)); 915 915 - } 916 899 .duration-100 { 917 900 --tw-duration: 100ms; 918 901 transition-duration: 100ms; ··· 925 908 --tw-outline-style: none; 926 909 outline-style: none; 927 910 } 928 928 - .select-all { 929 929 - -webkit-user-select: all; 930 930 - user-select: all; 931 931 - } 932 911 .select-none { 933 912 -webkit-user-select: none; 934 913 user-select: none; ··· 950 929 } 951 930 .try-flip-y { 952 931 position-try-fallbacks: flip-block; 953 953 - } 954 954 - .group-open\/accordion-item\:rotate-180 { 955 955 - &:is(:where(.group\/accordion-item):is([open], :popover-open, :open) *) { 956 956 - rotate: 180deg; 957 957 - } 958 932 } 959 933 .group-hover\/checkbox\:border-compound-brand-background-hover { 960 934 &:is(:where(.group\/checkbox):hover *) { ··· 1711 1685 inherits: false; 1712 1686 initial-value: solid; 1713 1687 } 1714 1714 - @property --tw-blur { 1715 1715 - syntax: "*"; 1716 1716 - inherits: false; 1717 1717 - } 1718 1718 - @property --tw-brightness { 1719 1719 - syntax: "*"; 1720 1720 - inherits: false; 1721 1721 - } 1722 1722 - @property --tw-contrast { 1723 1723 - syntax: "*"; 1724 1724 - inherits: false; 1725 1725 - } 1726 1726 - @property --tw-grayscale { 1727 1727 - syntax: "*"; 1728 1728 - inherits: false; 1729 1729 - } 1730 1730 - @property --tw-hue-rotate { 1731 1731 - syntax: "*"; 1732 1732 - inherits: false; 1733 1733 - } 1734 1734 - @property --tw-invert { 1735 1735 - syntax: "*"; 1736 1736 - inherits: false; 1737 1737 - } 1738 1738 - @property --tw-opacity { 1739 1739 - syntax: "*"; 1740 1740 - inherits: false; 1741 1741 - } 1742 1742 - @property --tw-saturate { 1743 1743 - syntax: "*"; 1744 1744 - inherits: false; 1745 1745 - } 1746 1746 - @property --tw-sepia { 1747 1747 - syntax: "*"; 1748 1748 - inherits: false; 1749 1749 - } 1750 1750 - @property --tw-drop-shadow { 1751 1751 - syntax: "*"; 1752 1752 - inherits: false; 1753 1753 - } 1754 1754 - @property --tw-drop-shadow-color { 1755 1755 - syntax: "*"; 1756 1756 - inherits: false; 1757 1757 - } 1758 1758 - @property --tw-drop-shadow-alpha { 1759 1759 - syntax: "<percentage>"; 1760 1760 - inherits: false; 1761 1761 - initial-value: 100%; 1762 1762 - } 1763 1763 - @property --tw-drop-shadow-size { 1764 1764 - syntax: "*"; 1765 1765 - inherits: false; 1766 1766 - } 1767 1688 @property --tw-duration { 1768 1689 syntax: "*"; 1769 1690 inherits: false; ··· 1793 1714 --tw-ring-offset-color: #fff; 1794 1715 --tw-ring-offset-shadow: 0 0 #0000; 1795 1716 --tw-outline-style: solid; 1796 1796 - --tw-blur: initial; 1797 1797 - --tw-brightness: initial; 1798 1798 - --tw-contrast: initial; 1799 1799 - --tw-grayscale: initial; 1800 1800 - --tw-hue-rotate: initial; 1801 1801 - --tw-invert: initial; 1802 1802 - --tw-opacity: initial; 1803 1803 - --tw-saturate: initial; 1804 1804 - --tw-sepia: initial; 1805 1805 - --tw-drop-shadow: initial; 1806 1806 - --tw-drop-shadow-color: initial; 1807 1807 - --tw-drop-shadow-alpha: 100%; 1808 1808 - --tw-drop-shadow-size: initial; 1809 1717 --tw-duration: initial; 1810 1718 --tw-ease: initial; 1811 1719 }

+1 -1

packages/danaus/tsconfig.json

reviewed

··· 16 16 17 17 /* JSX */ 18 18 "jsx": "react-jsx", 19 19 - "jsxImportSource": "hono/jsx", 19 19 + "jsxImportSource": "@oomfware/jsx", 20 20 21 21 /* Linting */ 22 22 "strict": true,

+40 -13

pnpm-lock.yaml

reviewed

··· 97 97 '@kelinci/danaus-lexicons': 98 98 specifier: workspace:* 99 99 version: link:../lexicons 100 100 + '@oomfware/fetch-router': 101 101 + specifier: ^0.2.1 102 102 + version: 0.2.1 103 103 + '@oomfware/forms': 104 104 + specifier: ^0.2.0 105 105 + version: 0.2.0(@oomfware/fetch-router@0.2.1) 106 106 + '@oomfware/jsx': 107 107 + specifier: ^0.1.4 108 108 + version: 0.1.4 100 109 cva: 101 110 specifier: 1.0.0-beta.4 102 111 version: 1.0.0-beta.4(typescript@5.9.3) ··· 106 115 get-port: 107 116 specifier: ^7.1.0 108 117 version: 7.1.0 109 109 - hono: 110 110 - specifier: ^4.11.3 111 111 - version: 4.11.3 112 118 jose: 113 119 specifier: ^6.1.3 114 120 version: 6.1.3 ··· 878 884 '@noble/secp256k1@3.0.0': 879 885 resolution: {integrity: sha512-NJBaR352KyIvj3t6sgT/+7xrNyF9Xk9QlLSIqUGVUYlsnDTAUqY8LOmwpcgEx4AMJXRITQ5XEVHD+mMaPfr3mg==} 880 886 887 887 + '@oomfware/fetch-router@0.2.1': 888 888 + resolution: {integrity: sha512-WV0cSeKjyTmM2pXYlRzv1md3Dym1vMR8PnJ/GfZUg8i1GS7RIDezmMkqVaWI/9IpeOHhs+QeDO41q1u+z1EzSg==} 889 889 + 890 890 + '@oomfware/forms@0.2.0': 891 891 + resolution: {integrity: sha512-XNvTZzAAur4ahitZ5R5VSZSzJem9Myn1T5Vhv6RLhVALn8qTsOKD8ju+hYed9P/cdMGog4DhKpiyaXbS5Elicw==} 892 892 + peerDependencies: 893 893 + '@oomfware/fetch-router': ^0.2.1 894 894 + 895 895 + '@oomfware/jsx@0.1.4': 896 896 + resolution: {integrity: sha512-3mY2Iqdjl+mE1ni3i6x9TdmgYTndfgiK4hpqBpHfvZHLtUddLBPWT8+AEidC5EZRXS1E2B1AZvtHFPESdkscfQ==} 897 897 + 881 898 '@optique/core@0.6.11': 882 899 resolution: {integrity: sha512-GVLFihzBA1j78NFlkU5N1Lu0jRqET0k6Z66WK8VQKG/a3cxmCInVGSKMIdQG8i6pgC8wD5OizF6Y3QMztmhAxg==} 883 900 engines: {bun: '>=1.2.0', deno: '>=2.3.0', node: '>=20.0.0'} ··· 1237 1254 1238 1255 '@protobufjs/utf8@1.1.0': 1239 1256 resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==} 1257 1257 + 1258 1258 + '@remix-run/route-pattern@0.16.0': 1259 1259 + resolution: {integrity: sha512-Co6bPtODF7cLYVBweayRXfEb31ybz45WqwT/u72eDQJZgRSVKFf0Ps9fqinSaiX0Xp7jvkRCBAbSUgLuLLjzuw==} 1240 1260 1241 1261 '@standard-schema/spec@1.1.0': 1242 1262 resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==} ··· 2073 2093 hmac-drbg@1.0.1: 2074 2094 resolution: {integrity: sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==} 2075 2095 2076 2076 - hono@4.11.3: 2077 2077 - resolution: {integrity: sha512-PmQi306+M/ct/m5s66Hrg+adPnkD5jiO6IjA7WhWw0gSBSo1EcRegwuI1deZ+wd5pzCGynCcn2DprnE4/yEV4w==} 2078 2078 - engines: {node: '>=16.9.0'} 2079 2079 - 2080 2096 http-errors@2.0.1: 2081 2097 resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==} 2082 2098 engines: {node: '>= 0.8'} ··· 2101 2117 resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} 2102 2118 engines: {node: '>=0.10.0'} 2103 2119 2104 2104 - iconv-lite@0.7.1: 2105 2105 - resolution: {integrity: sha512-2Tth85cXwGFHfvRgZWszZSvdo+0Xsqmw8k8ZwxScfcBneNUraK+dxRxRm24nszx80Y0TVio8kKLt5sLE7ZCLlw==} 2120 2120 + iconv-lite@0.7.2: 2121 2121 + resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==} 2106 2122 engines: {node: '>=0.10.0'} 2107 2123 2108 2124 ieee754@1.2.1: ··· 3886 3902 3887 3903 '@noble/secp256k1@3.0.0': {} 3888 3904 3905 3905 + '@oomfware/fetch-router@0.2.1': 3906 3906 + dependencies: 3907 3907 + '@remix-run/route-pattern': 0.16.0 3908 3908 + 3909 3909 + '@oomfware/forms@0.2.0(@oomfware/fetch-router@0.2.1)': 3910 3910 + dependencies: 3911 3911 + '@oomfware/fetch-router': 0.2.1 3912 3912 + '@standard-schema/spec': 1.1.0 3913 3913 + 3914 3914 + '@oomfware/jsx@0.1.4': {} 3915 3915 + 3889 3916 '@optique/core@0.6.11': {} 3890 3917 3891 3918 '@optique/run@0.6.11': ··· 4120 4147 '@protobufjs/pool@1.1.0': {} 4121 4148 4122 4149 '@protobufjs/utf8@1.1.0': {} 4150 4150 + 4151 4151 + '@remix-run/route-pattern@0.16.0': {} 4123 4152 4124 4153 '@standard-schema/spec@1.1.0': {} 4125 4154 ··· 4888 4917 minimalistic-assert: 1.0.1 4889 4918 minimalistic-crypto-utils: 1.0.1 4890 4919 4891 4891 - hono@4.11.3: {} 4892 4892 - 4893 4920 http-errors@2.0.1: 4894 4921 dependencies: 4895 4922 depd: 2.0.0 ··· 4927 4954 dependencies: 4928 4955 safer-buffer: 2.1.2 4929 4956 4930 4930 - iconv-lite@0.7.1: 4957 4957 + iconv-lite@0.7.2: 4931 4958 dependencies: 4932 4959 safer-buffer: 2.1.2 4933 4960 ··· 5633 5660 '@js-joda/core': 5.6.5 5634 5661 '@types/node': 22.19.3 5635 5662 bl: 6.1.6 5636 5636 - iconv-lite: 0.7.1 5663 5663 + iconv-lite: 0.7.2 5637 5664 js-md4: 0.3.2 5638 5665 native-duplexpair: 1.0.0 5639 5666 sprintf-js: 1.1.3