Remove basic auth

HACKING.md

@@ -14,11 +14,15 @@ Ozone requires a PDS service to talk to, and it is convenient to point it to a l
 1. In the separate [atproto project](https://github.com/bluesky-social/atproto), run the dev server using `yarn workspace @atproto/dev-env start`. This will run a PDS, seeded with some users and data for you.
 2. Run the development server for Ozone using `yarn dev`. This will start running the Ozone frontend at `http://localhost:3000`.
 3. Navigate to the login page in your browser, at [http://localhost:3000](http://localhost:3000).
-4. Login using the atproto dev-env credentials, which you can find [here](https://github.com/bluesky-social/atproto/blob/a1240f0a37030766dfe0a2ccfdc2810432520ae9/packages/dev-env/src/mock/index.ts#L59-L84). For development some example login credentials that would are:
+4. Login using the atproto dev-env credentials, which you can find [here](https://github.com/bluesky-social/atproto/blob/a1240f0a37030766dfe0a2ccfdc2810432520ae9/packages/dev-env/src/mock/index.ts#L59-L84). For development some example login credentials that would work are:
    - Service URL: http://localhost:2583
-   - Account handle: alice.test
-   - Password: hunter2
-   - Admin Token: admin-pass
+   - Account handle: mod.test
+   - Password: mod-pass
+
+You can also test with different permission levels with the following credentials (<username>/<password>)
+
+- Triage: triage.test/triage-pass
+- Triage: admin-mod.test/admin-mod-pass
 
 ### Working with unpublished changes to the `@atproto/api` package
 

app/actions/ModActionPanel/QuickAction.tsx

@@ -725,14 +725,18 @@ function Form(
 async function getSubject(subject: string) {
   if (subject.startsWith('did:')) {
     const { data: repo } = await client.api.com.atproto.admin.getRepo(
-      { did: subject },
-      { headers: client.adminHeaders() },
+      {
+        did: subject,
+      },
+      { headers: client.proxyHeaders() },
     )
     return { repo }
   } else if (subject.startsWith('at://')) {
     const { data: record } = await client.api.com.atproto.admin.getRecord(
-      { uri: subject },
-      { headers: client.adminHeaders() },
+      {
+        uri: subject,
+      },
+      { headers: client.proxyHeaders() },
     )
     return { record }
   } else {
@@ -744,8 +748,12 @@ async function getSubjectStatus(subject: string) {
   const {
     data: { subjectStatuses },
   } = await client.api.com.atproto.admin.queryModerationStatuses(
-    { subject, includeMuted: true, limit: 1 },
-    { headers: client.adminHeaders() },
+    {
+      subject,
+      includeMuted: true,
+      limit: 1,
+    },
+    { headers: client.proxyHeaders() },
   )
   return subjectStatuses.at(0) || null
 }

app/actions/[id]/page.tsx

@@ -11,8 +11,10 @@ export default function Action({ params }: { params: { id: string } }) {
     queryKey: ['action', { id }],
     queryFn: async () => {
       const { data } = await client.api.com.atproto.admin.getModerationEvent(
-        { id: parseInt(id, 10) },
-        { headers: client.adminHeaders() },
+        {
+          id: parseInt(id, 10),
+        },
+        { headers: client.proxyHeaders() },
       )
       return data
     },

app/events/[id]/page.tsx

@@ -12,8 +12,10 @@ export default function EventViewPage({ params }: { params: { id: string } }) {
     queryKey: ['event', { id }],
     queryFn: async () => {
       const { data } = await client.api.com.atproto.admin.getModerationEvent(
-        { id: parseInt(id, 10) },
-        { headers: client.adminHeaders() },
+        {
+          id: parseInt(id, 10),
+        },
+        { headers: client.proxyHeaders() },
       )
       return data
     },

app/reports/page-content.tsx

@@ -324,7 +324,7 @@ async function getModerationQueue(
       includeMuted: true,
       ...opts,
     },
-    { headers: client.adminHeaders() },
+    { headers: client.proxyHeaders() },
   )
 
   const queueDivider = QUEUE_NAMES.length

app/repositories/[id]/[...record]/page-content.tsx

@@ -16,6 +16,7 @@ import { ModActionPanelQuick } from 'app/actions/ModActionPanel/QuickAction'
 import { emitEvent } from '@/mod-event/helpers/emitEvent'
 import { useEffect } from 'react'
 import { useTitle } from 'react-use'
+import { getDidFromHandle } from '@/lib/identity'
 
 const buildPageTitle = ({
   handle,
@@ -62,20 +63,21 @@ export default function RecordViewPageContent({
   } = useQuery({
     queryKey: ['record', { id, collection, rkey }],
     queryFn: async () => {
-      let did: string
+      let did: string | null
       if (id.startsWith('did:')) {
         did = id
       } else {
-        const { data } = await client.api.com.atproto.identity.resolveHandle({
-          handle: id,
-        })
-        did = data.did
+        did = await getDidFromHandle(id)
+      }
+      if (!did) {
+        throw new Error('Failed to resolve DID for the record')
       }
+
       const uri = createAtUri({ did, collection, rkey })
       const getRecord = async () => {
         const { data: record } = await client.api.com.atproto.admin.getRecord(
           { uri },
-          { headers: client.adminHeaders() },
+          { headers: client.proxyHeaders() },
         )
         return record
       }
@@ -86,7 +88,7 @@ export default function RecordViewPageContent({
         try {
           const { data: thread } = await client.api.app.bsky.feed.getPostThread(
             { uri },
-            { headers: client.adminHeaders() },
+            { headers: client.proxyHeaders() },
           )
           return thread
         } catch (err) {

app/repositories/page-content.tsx

@@ -18,7 +18,7 @@ export default function RepositoriesListPage() {
           limit: 25,
           cursor: pageParam,
         },
-        { headers: client.adminHeaders() },
+        { headers: client.proxyHeaders() },
       )
       return data
     },

app/subject-status/page.tsx

@@ -17,7 +17,7 @@ export default function SubjectStatus() {
       const { data } =
         await client.api.com.atproto.admin.queryModerationStatuses(
           { subject, limit: 1 },
-          { headers: client.adminHeaders() },
+          { headers: client.proxyHeaders() },
         )
       return data
     },

components/common/RecordCard.tsx

@@ -55,7 +55,7 @@ function PostCard(props: { uri: string; showLabels?: boolean }) {
           uri,
           depth: 0,
         },
-        { headers: client.adminHeaders() },
+        { headers: client.proxyHeaders() },
       )
       return post
     },
@@ -93,7 +93,7 @@ function BaseRecordCard(props: {
     queryFn: async () => {
       const { data } = await client.api.com.atproto.admin.getRecord(
         { uri },
-        { headers: client.adminHeaders() },
+        { headers: client.proxyHeaders() },
       )
       return data
     },
@@ -140,7 +140,7 @@ const useRepoAndProfile = ({ did }: { did: string }) => {
       const getRepo = async () => {
         const { data: repo } = await client.api.com.atproto.admin.getRepo(
           { did },
-          { headers: client.adminHeaders() },
+          { headers: client.proxyHeaders() },
         )
         return repo
       }
@@ -150,7 +150,7 @@ const useRepoAndProfile = ({ did }: { did: string }) => {
             {
               actor: did,
             },
-            { headers: client.adminHeaders() },
+            { headers: client.proxyHeaders() },
           )
           return profile
         } catch (err) {
@@ -190,10 +190,7 @@ export function InlineRepo(props: { did: string }) {
           className="h-4 w-4 rounded-full"
         />
       </div>
-      <Link
-        href={`/repositories/${repo.did}`}
-        className="hover:underline mr-1"
-      >
+      <Link href={`/repositories/${repo.did}`} className="hover:underline mr-1">
         {profile?.displayName ? (
           <>
             <span className="font-bold">{profile.displayName}</span>
@@ -243,7 +240,9 @@ export function RepoCard(props: { did: string }) {
               {profile?.displayName ? (
                 <>
                   <span className="font-bold">{profile.displayName}</span>
-                  <span className="ml-1 text-gray-500 dark:text-gray-50">@{repo.handle}</span>
+                  <span className="ml-1 text-gray-500 dark:text-gray-50">
+                    @{repo.handle}
+                  </span>
                 </>
               ) : (
                 <span className="font-bold">@{repo.handle}</span>
@@ -259,7 +258,9 @@ export function RepoCard(props: { did: string }) {
             </a>
           </p>
           {profile?.description && (
-            <p className="text-gray-500 dark:text-gray-50">{profile.description}</p>
+            <p className="text-gray-500 dark:text-gray-50">
+              {profile.description}
+            </p>
           )}
           {takendown && (
             <p className="pt-1 pb-1">

components/common/feeds/AuthorFeed.tsx

@@ -21,7 +21,7 @@ export function AuthorFeed({
           limit: 30,
           cursor: pageParam,
         },
-        { headers: client.adminHeaders() },
+        { headers: client.proxyHeaders() },
       )
       return data
     },

components/common/feeds/RecordCard.tsx

@@ -9,9 +9,12 @@ export const FeedGeneratorRecordCard = ({ uri }: { uri: string }) => {
     retry: false,
     queryKey: ['feed-generator', uri],
     queryFn: async () => {
-      const { data } = await client.api.app.bsky.feed.getFeedGenerator({
-        feed: uri,
-      })
+      const { data } = await client.api.app.bsky.feed.getFeedGenerator(
+        {
+          feed: uri,
+        },
+        { headers: client.proxyHeaders() },
+      )
       return data
     },
   })

components/communication-template/delete-confirmation-modal.tsx

@@ -22,13 +22,8 @@ export const CommunicationTemplateDeleteConfirmationModal = ({
     setIsDeleting(true)
     try {
       await clientManager.api.com.atproto.admin.deleteCommunicationTemplate(
-        {
-          id: templateId,
-        },
-        {
-          headers: clientManager.adminHeaders(),
-          encoding: 'application/json',
-        },
+        { id: templateId },
+        { headers: clientManager.proxyHeaders(), encoding: 'application/json' },
       )
       toast.success('Template deleted')
       queryClient.invalidateQueries(['communicationTemplateList'])

components/communication-template/hooks.ts

@@ -22,7 +22,7 @@ export const useCommunicationTemplateList = ({
       const { data } =
         await client.api.com.atproto.admin.listCommunicationTemplates(
           {},
-          { headers: client.adminHeaders() },
+          { headers: client.proxyHeaders() },
         )
       return data.communicationTemplates
     },
@@ -82,7 +82,7 @@ export const useCommunicationTemplateEditor = (templateId?: string) => {
             disabled,
             updatedBy: client.session.did,
           },
-          { headers: client.adminHeaders(), encoding: 'application/json' },
+          { encoding: 'application/json', headers: client.proxyHeaders() },
         )
       : client.api.com.atproto.admin.createCommunicationTemplate(
           {
@@ -91,7 +91,7 @@ export const useCommunicationTemplateEditor = (templateId?: string) => {
             name,
             createdBy: client.session.did,
           },
-          { headers: client.adminHeaders(), encoding: 'application/json' },
+          { headers: client.proxyHeaders(), encoding: 'application/json' },
         )
 
   const onSubmit = async (e) => {
@@ -103,19 +103,22 @@ export const useCommunicationTemplateEditor = (templateId?: string) => {
 
     setIsSaving(true)
     try {
-      await toast.promise(saveFunc({ contentMarkdown, name, subject, disabled }), {
-        pending: 'Saving template...',
-        success: {
-          render() {
-            return 'Template saved successfully'
+      await toast.promise(
+        saveFunc({ contentMarkdown, name, subject, disabled }),
+        {
+          pending: 'Saving template...',
+          success: {
+            render() {
+              return 'Template saved successfully'
+            },
           },
-        },
-        error: {
-          render() {
-            return 'Error saving template'
+          error: {
+            render() {
+              return 'Error saving template'
+            },
           },
         },
-      })
+      )
       // Reset the form if email is sent successfully
       e.target.reset()
       setContentMarkdown('')

components/email/Composer.tsx

@@ -58,7 +58,7 @@ export const EmailComposer = ({ did }: { did: string }) => {
             comment,
             senderDid: client.session.did,
           },
-          { headers: client.adminHeaders(), encoding: 'application/json' },
+          { headers: client.proxyHeaders(), encoding: 'application/json' },
         ),
         {
           pending: 'Sending email...',

components/list/RecordCard.tsx

@@ -9,10 +9,13 @@ export const ListRecordCard = ({ uri }: { uri: string }) => {
     retry: false,
     queryKey: ['list', uri],
     queryFn: async () => {
-      const { data } = await client.api.app.bsky.graph.getList({
-        list: uri,
-        limit: 1,
-      })
+      const { data } = await client.api.app.bsky.graph.getList(
+        {
+          list: uri,
+          limit: 1,
+        },
+        { headers: client.proxyHeaders() },
+      )
       return data
     },
   })

components/mod-event/helpers/emitEvent.tsx

@@ -12,10 +12,7 @@ export const emitEvent = async (
   const emitModerationEventAsync = async () => {
     const { data } = await client.api.com.atproto.admin.emitModerationEvent(
       vals,
-      {
-        headers: client.adminHeaders(),
-        encoding: 'application/json',
-      },
+      { encoding: 'application/json', headers: client.proxyHeaders() },
     )
 
     return data

components/mod-event/useModEventList.tsx

@@ -255,7 +255,7 @@ async function getModerationEvents(
       limit: 25,
       ...opts,
     },
-    { headers: client.adminHeaders() },
+    { headers: client.proxyHeaders() },
   )
   return data
 }