Ring joining/inviting works????????

Author: spearcat

env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="unplugin-vue-router/client" />

eslint.config.js

@@ -10,6 +10,7 @@ const rules = [
         rules: {
             '@typescript-eslint/no-unused-vars': 'warn',
             '@typescript-eslint/no-explicit-any': 'off',
+            'vue/multi-word-component-names': 'off',
             'semi': ['warn', 'always']
         },
     },

package.json

@@ -28,6 +28,7 @@
     "@atproto/syntax": "^0.3.1",
     "@mdx-js/mdx": "^3.1.0",
     "@noble/hashes": "^1.6.1",
+    "@vue/compiler-sfc": "^3.5.13",
     "@vue/reactivity": "3.5.13",
     "@vueuse/core": "^12.0.0",
     "bluesky-post-embed": "^1.0.5",
@@ -62,16 +63,18 @@
     "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vue/eslint-config-prettier": "^10.1.0",
     "@vue/eslint-config-typescript": "^14.1.4",
+    "@vue/runtime-dom": "^3.5.13",
     "@vue/tsconfig": "^0.7.0",
     "eslint": "^9.17.0",
     "eslint-plugin-vue": "^9.32.0",
     "material-design-icons-iconfont": "^6.7.0",
     "monaco-editor": "^0.52.2",
-    "npm-run-all2": "^7.0.1",
+    "npm-run-all2": "^7.0.2",
     "prettier": "^3.4.2",
     "sass": "^1.83.0",
     "sass-embedded": "^1.83.0",
     "typescript": "~5.7.2",
+    "unplugin-vue-router": "^0.10.9",
     "vite": "^6.0.3",
     "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-vue-devtools": "^7.6.8",

pnpm-lock.yaml

@@ -101,27 +101,57 @@ export class AtwebClient {
         return { ...result, uri: new AtUri(result.uri) };
     }
 
-    async updateRing(
+    async updateRingMembers(
         rkey: string,
-        ring: IoGithubAtwebRing.Record,
+        memberships: (string | AtUri | { membership: AtUri; })[],
         swapRecord?: string,
     ) {
+        const { value } = await this.agent.get({
+            collection: 'io.github.atweb.ring',
+            repo: this.user.did,
+            rkey,
+            cid: swapRecord,
+        });
+
         await this.agent.put({
             collection: 'io.github.atweb.ring',
             repo: this.user.did,
             rkey,
-            record: ring,
+            record: {
+                ...value,
+                members: memberships.map(e => ({
+                    membership: typeof e !== 'string' && 'membership' in e
+                        ? e.membership.toString()
+                        : e.toString()
+                }))
+            },
             swapRecord
         });
     }
 
     async deleteRing(
-        rkey: string
+        rkey: string,
+        swapRecord?: string,
     ) {
         await this.agent.delete({
             collection: 'io.github.atweb.ring',
             repo: this.user.did,
             rkey,
+            swapRecord,
+        });
+    }
+
+    async acceptInvite(inviterDid: string, rkey: string, mainPage: string) {
+        await this.agent.put({
+            collection: 'io.github.atweb.ringMembership',
+            repo: this.user.did,
+            rkey: rkey,
+            record: {
+                $type: 'io.github.atweb.ringMembership',
+                createdAt: new Date().toISOString(),
+                ring: AtUri.make(inviterDid, 'io.github.atweb.ring', rkey).toString(),
+                mainPage: AtUri.make(this.user.did, 'io.github.atweb.page', filepathToRkey(mainPage)).toString(),
+            }
         });
     }
 }

src/lib/atproto/atweb-client.ts

@@ -5,6 +5,7 @@ import { parseAtUri } from "../utils";
 import { getDidAndPds } from "./pds-helpers";
 import type { Awaitable } from "@vueuse/core";
 import { AtUri } from "@atproto/syntax";
+import { resolveHandleAnonymously } from "./handles/resolve";
 
 const unauthedAgent = new KittyAgent({ handler: simpleFetchHandler({ service: 'https://bsky.social' }) });
 
@@ -186,56 +187,50 @@ export async function downloadFile(did: At.DID, rkey: string): Promise<Page> {
     };
 }
 
-export async function getManagedRings(didOrHandle: string) {
-    const { records } = await unauthedAgent.list({
-        collection: 'io.github.atweb.ring',
-        repo: didOrHandle,
-    });
-
-    return records.map(record => ({
-        ...record.value,
-        uri: new AtUri(record.uri),
-    }));
-}
-
 export async function getRingsUserIsAMemberOf(didOrHandle: string) {
     const { records } = await unauthedAgent.list({
         collection: 'io.github.atweb.ringMembership',
         repo: didOrHandle,
     });
 
-    const rings: Array<IoGithubAtwebRing.Record & { uri: AtUri }> = [];
+    const rings: Array<Awaited<ReturnType<typeof getRing>>> = [];
     for (const record of records) {
         const uri = new AtUri(record.value.ring);
-        if (uri.host === didOrHandle) continue;
 
-        const entry = await unauthedAgent.tryGet({
-            collection: 'io.github.atweb.ring',
-            repo: uri.host,
-            rkey: uri.rkey,
-        });
+        const entry = await tryGetRing(uri.host, uri.rkey);
 
-        if (entry.value) {
-            rings.push({
-                ...entry.value,
-                uri: new AtUri(entry.uri),
-            });
+        if (entry) {
+            rings.push(entry);
         }
     }
 
     return rings;
 }
 
-export async function getMemberRings(didOrHandle: string) {
-    const { records } = await unauthedAgent.list({
+async function arrayFromAsync<T>(generator: AsyncIterable<T>): Promise<T[]> {
+    const arr: T[] = [];
+    for await (const e of generator) {
+        arr.push(e);
+    }
+    return arr;
+}
+
+export async function tryGetRing(repo: string, rkey: string) {
+    const result = await unauthedAgent.tryGet({
         collection: 'io.github.atweb.ring',
-        repo: didOrHandle,
+        repo,
+        rkey,
     });
 
-    return records.map(record => ({
-        ...record.value,
-        uri: new AtUri(record.uri),
-    }));
+    if (!result.value) return undefined;
+
+    return {
+        name: result.value.name,
+        createdAt: result.value.createdAt,
+        members: await arrayFromAsync(getMembershipStatuses(repo, result.value.members ?? [])),
+        cid: result.cid,
+        uri: new AtUri(result.uri),
+    };
 }
 
 export async function getRing(repo: string, rkey: string) {
@@ -244,9 +239,34 @@ export async function getRing(repo: string, rkey: string) {
         repo,
         rkey,
     });
+
     return {
-        ...result.value,
+        name: result.value.name,
+        createdAt: result.value.createdAt,
+        members: await arrayFromAsync(getMembershipStatuses(repo, result.value.members ?? [])),
         cid: result.cid,
         uri: new AtUri(result.uri),
     };
 }
+
+async function *getMembershipStatuses(owner: string, members: IoGithubAtwebRing.Member[]) {
+    owner = await resolveHandleAnonymously(owner);
+
+    for (const member of members) {
+        const uri = new AtUri(member.membership);
+        const result = await unauthedAgent.tryGet({
+            collection: 'io.github.atweb.ringMembership',
+            repo: uri.host,
+            rkey: uri.rkey,
+        });
+        const isMember = !!result.value;
+        const isOwner = isMember && uri.host === owner;
+
+        yield {
+            membership: uri,
+            isMember,
+            isOwner,
+        };
+    }
+}
+

src/lib/atproto/atweb-unauthed.ts

@@ -1,7 +1,6 @@
 import './assets/main.scss';
 
 import 'bluesky-profile-card-embed';
-
 // import './custom-elements.ts';
 
 import { createApp } from 'vue';

src/main.ts

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import SignInGate from '@/components/SignInGate.vue';
+import { getRing } from '@/lib/atproto/atweb-unauthed';
+import { getDidAndPds } from '@/lib/atproto/pds-helpers';
+import { user } from '@/lib/atproto/signed-in-user';
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute('/invited/[inviterDid]/[ringAndInviteRkey]/');
+
+const { didDocument } = await getDidAndPds(route.params.inviterDid);
+const inviterHandle = didDocument.alsoKnownAs?.[0].replace('at://', '') ?? route.params.inviterDid;
+
+const mainPage = ref('');
+
+async function acceptInvite() {
+    const ring = await getRing(route.params.inviterDid, route.params.ringAndInviteRkey);
+    if (!ring.members.some(member => member.membership.host === user.value!.did))
+        return; // invite was rescinded
+
+    await user.value!.client.acceptInvite(route.params.inviterDid, route.params.ringAndInviteRkey, mainPage.value);
+}
+</script>
+
+<template>
+    <SignInGate :sign-in-text="`Sign in to view invite from @${inviterHandle}`">
+        <div>
+            Accept this invite from @{{ inviterHandle }}?
+        </div>
+        <div>
+            <VaInput v-model="mainPage" label="My Member Page" placeholder="index.mdx"/>
+            <VaButton @click="acceptInvite()" style="vertical-align: text-top; margin-top: -1px">OK</VaButton>
+        </div>
+    </SignInGate>
+</template>

src/views/EditorView.vue src/pages/edit.vue

@@ -8,7 +8,7 @@ import { page } from '@/lib/shared-globals';
 import { watchImmediate } from '@vueuse/core';
 import { watchImmediateAsync } from '@/lib/vue-utils';
 
-const route = useRoute();
+const route = useRoute('/page/[handle]/[rkey]/');
 await watchImmediateAsync(
     route,
     async () => {