commit db870b2b19a9c58ac82015f1edf1b78282a2c204 · juli.ee/cleanfollow

+69 -25

src/App.tsx

···

       8
        
       } from "solid-js";

     

       9
        
       import { createStore } from "solid-js/store";

     

       10
        
       

     

       11
       -
       import { XRPC } from "@atcute/client";

     

       12
        
       import {

     

       13
        
         AppBskyGraphFollow,

     

       14
        
         At,

     
···

       55
        
       const [loginState, setLoginState] = createSignal(false);

     

       56
        
       let rpc: XRPC;

     

       57
        
       let agent: OAuthUserAgent;

     

       0
        
       
     

       0
        
       
     

       58
        
       

     

       59
        
       const resolveDid = async (did: string) => {

     

       60
        
         const res = await fetch(

     
···

       77
        
       

     

       78
        
       const Login: Component = () => {

     

       79
        
         const [loginInput, setLoginInput] = createSignal("");

     

       0
        
       
     

       80
        
         const [handle, setHandle] = createSignal("");

     

       81
        
         const [notice, setNotice] = createSignal("");

     

       82
        
       

     
···

       113
        
           if (session) {

     

       114
        
             agent = new OAuthUserAgent(session);

     

       115
        
             rpc = new XRPC({ handler: agent });

     

       0
        
       
     

       116
        
       

     

       117
        
             setLoginState(true);

     

       118
        
             setHandle(await resolveDid(agent.sub));

     
···

       121
        
           setNotice("");

     

       122
        
         });

     

       123
        
       

     

       124
       -
         const loginBsky = async (handle: string) => {

     

       125
       -
           try {

     

       126
       -
             setNotice(`Resolving your identity...`);

     

       127
       -
             const resolved = await resolveFromIdentity(handle);

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       128
        
       

     

       129
       -
             setNotice(`Contacting your data server...`);

     

       130
       -
             const authUrl = await createAuthorizationUrl({

     

       131
       -
               scope: import.meta.env.VITE_OAUTH_SCOPE,

     

       132
       -
               ...resolved,

     

       133
        
             });

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       134
        
       

     

       135
       -
             setNotice(`Redirecting...`);

     

       136
       -
             await new Promise((resolve) => setTimeout(resolve, 250));

     

       137
        
       

     

       138
       -
             location.assign(authUrl);

     

       139
       -
           } catch {

     

       140
       -
             setNotice("Error during OAuth login");

     

       0
        
       
     

       141
        
           }

     

       142
        
         };

     

       143
        
       

     
···

       160
        
                   class="dark:bg-dark-100 mb-2 rounded-lg border border-gray-400 px-2 py-1 focus:outline-none focus:ring-1 focus:ring-gray-300"

     

       161
        
                   onInput={(e) => setLoginInput(e.currentTarget.value)}

     

       162
        
                 />

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       163
        
                 <button

     

       164
        
                   onclick={() => loginBsky(loginInput())}

     

       165
        
                   class="rounded bg-blue-600 py-1.5 font-bold text-slate-100 hover:bg-blue-700"

     
···

       167
        
                   Login

     

       168
        
                 </button>

     

       169
        
               </form>

     

       170
       -
               <div class="mt-3">

     

       171
       -
                 <p>Remember to use your main password, not an app password.</p>

     

       172
       -
                 <p>The session is only stored on your browser.</p>

     

       173
       -
                 <p>Make sure to check the URL you will be authenticated through.</p>

     

       174
       -
                 <p>

     

       175
       -
                   (<b>bsky.social</b> unless you are on a selfhosted server)

     

       176
       -
                 </p>

     

       177
       -
               </div>

     

       178
        
             </Show>

     

       179
        
             <Show when={loginState() && handle()}>

     

       180
        
               <div class="mb-4">

     
···

       205
        
             const fetchPage = async (cursor?: string) => {

     

       206
        
               return await rpc.get("com.atproto.repo.listRecords", {

     

       207
        
                 params: {

     

       208
       -
                   repo: agent.sub,

     

       209
        
                   collection: "app.bsky.graph.follow",

     

       210
        
                   limit: PAGE_LIMIT,

     

       211
        
                   cursor: cursor,

     
···

       253
        
                     viewer.blocking || viewer.blockingByList ?

     

       254
        
                       RepoStatus.BLOCKEDBY | RepoStatus.BLOCKING

     

       255
        
                     : RepoStatus.BLOCKEDBY;

     

       256
       -
                 } else if (res.data.did.includes(agent.sub)) {

     

       257
        
                   status = RepoStatus.YOURSELF;

     

       258
        
                 } else if (viewer.blocking || viewer.blockingByList) {

     

       259
        
                   status = RepoStatus.BLOCKING;

     
···

       315
        
           for (let i = 0; i < writes.length; i += BATCHSIZE) {

     

       316
        
             await rpc.call("com.atproto.repo.applyWrites", {

     

       317
        
               data: {

     

       318
       -
                 repo: agent.sub,

     

       319
        
                 writes: writes.slice(i, i + BATCHSIZE),

     

       320
        
               },

     

       321
        
             });

···

       8
        
       } from "solid-js";

     

       9
        
       import { createStore } from "solid-js/store";

     

       10
        
       

     

       11
       +
       import { CredentialManager, XRPC } from "@atcute/client";

     

       12
        
       import {

     

       13
        
         AppBskyGraphFollow,

     

       14
        
         At,

     
···

       55
        
       const [loginState, setLoginState] = createSignal(false);

     

       56
        
       let rpc: XRPC;

     

       57
        
       let agent: OAuthUserAgent;

     

       58
       +
       let manager: CredentialManager;

     

       59
       +
       let agentDID: string;

     

       60
        
       

     

       61
        
       const resolveDid = async (did: string) => {

     

       62
        
         const res = await fetch(

     
···

       79
        
       

     

       80
        
       const Login: Component = () => {

     

       81
        
         const [loginInput, setLoginInput] = createSignal("");

     

       82
       +
         const [password, setPassword] = createSignal("");

     

       83
        
         const [handle, setHandle] = createSignal("");

     

       84
        
         const [notice, setNotice] = createSignal("");

     

       85
        
       

     
···

       116
        
           if (session) {

     

       117
        
             agent = new OAuthUserAgent(session);

     

       118
        
             rpc = new XRPC({ handler: agent });

     

       119
       +
             agentDID = agent.sub;

     

       120
        
       

     

       121
        
             setLoginState(true);

     

       122
        
             setHandle(await resolveDid(agent.sub));

     
···

       125
        
           setNotice("");

     

       126
        
         });

     

       127
        
       

     

       128
       +
         const getPDS = async (did: string) => {

     

       129
       +
           const res = await fetch(

     

       130
       +
             did.startsWith("did:web") ?

     

       131
       +
               `https://${did.split(":")[2]}/.well-known/did.json`

     

       132
       +
             : "https://plc.directory/" + did,

     

       133
       +
           );

     

       134
       +
       

     

       135
       +
           return res.json().then((doc: any) => {

     

       136
       +
             for (const service of doc.service) {

     

       137
       +
               if (service.id === "#atproto_pds") return service.serviceEndpoint;

     

       138
       +
             }

     

       139
       +
           });

     

       140
       +
         };

     

       141
       +
       

     

       142
       +
         const resolveHandle = async (handle: string) => {

     

       143
       +
           const rpc = new XRPC({

     

       144
       +
             handler: new CredentialManager({

     

       145
       +
               service: "https://public.api.bsky.app",

     

       146
       +
             }),

     

       147
       +
           });

     

       148
       +
           const res = await rpc.get("com.atproto.identity.resolveHandle", {

     

       149
       +
             params: { handle: handle },

     

       150
       +
           });

     

       151
       +
           return res.data.did;

     

       152
       +
         };

     

       153
       +
       

     

       154
       +
         const loginBsky = async (login: string) => {

     

       155
       +
           if (password()) {

     

       156
       +
             agentDID = login.startsWith("did:") ? login : await resolveHandle(login);

     

       157
       +
             manager = new CredentialManager({ service: await getPDS(agentDID) });

     

       158
       +
             rpc = new XRPC({ handler: manager });

     

       159
        
       

     

       160
       +
             await manager.login({

     

       161
       +
               identifier: agentDID,

     

       162
       +
               password: password(),

     

       0
        
       
     

       163
        
             });

     

       164
       +
             setLoginState(true);

     

       165
       +
           } else {

     

       166
       +
             try {

     

       167
       +
               setNotice(`Resolving your identity...`);

     

       168
       +
               const resolved = await resolveFromIdentity(login);

     

       169
       +
       

     

       170
       +
               setNotice(`Contacting your data server...`);

     

       171
       +
               const authUrl = await createAuthorizationUrl({

     

       172
       +
                 scope: import.meta.env.VITE_OAUTH_SCOPE,

     

       173
       +
                 ...resolved,

     

       174
       +
               });

     

       175
        
       

     

       176
       +
               setNotice(`Redirecting...`);

     

       177
       +
               await new Promise((resolve) => setTimeout(resolve, 250));

     

       178
        
       

     

       179
       +
               location.assign(authUrl);

     

       180
       +
             } catch {

     

       181
       +
               setNotice("Error during OAuth login");

     

       182
       +
             }

     

       183
        
           }

     

       184
        
         };

     

       185
        
       

     
···

       202
        
                   class="dark:bg-dark-100 mb-2 rounded-lg border border-gray-400 px-2 py-1 focus:outline-none focus:ring-1 focus:ring-gray-300"

     

       203
        
                   onInput={(e) => setLoginInput(e.currentTarget.value)}

     

       204
        
                 />

     

       205
       +
                 <label for="password" class="ml-0.5">

     

       206
       +
                   App Password

     

       207
       +
                 </label>

     

       208
       +
                 <input

     

       209
       +
                   type="password"

     

       210
       +
                   id="password"

     

       211
       +
                   placeholder="leave empty for oauth"

     

       212
       +
                   class="dark:bg-dark-100 mb-2 rounded-lg border border-gray-400 px-2 py-1 focus:outline-none focus:ring-1 focus:ring-gray-300"

     

       213
       +
                   onInput={(e) => setPassword(e.currentTarget.value)}

     

       214
       +
                 />

     

       215
        
                 <button

     

       216
        
                   onclick={() => loginBsky(loginInput())}

     

       217
        
                   class="rounded bg-blue-600 py-1.5 font-bold text-slate-100 hover:bg-blue-700"

     
···

       219
        
                   Login

     

       220
        
                 </button>

     

       221
        
               </form>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       222
        
             </Show>

     

       223
        
             <Show when={loginState() && handle()}>

     

       224
        
               <div class="mb-4">

     
···

       249
        
             const fetchPage = async (cursor?: string) => {

     

       250
        
               return await rpc.get("com.atproto.repo.listRecords", {

     

       251
        
                 params: {

     

       252
       +
                   repo: agentDID,

     

       253
        
                   collection: "app.bsky.graph.follow",

     

       254
        
                   limit: PAGE_LIMIT,

     

       255
        
                   cursor: cursor,

     
···

       297
        
                     viewer.blocking || viewer.blockingByList ?

     

       298
        
                       RepoStatus.BLOCKEDBY | RepoStatus.BLOCKING

     

       299
        
                     : RepoStatus.BLOCKEDBY;

     

       300
       +
                 } else if (res.data.did.includes(agentDID)) {

     

       301
        
                   status = RepoStatus.YOURSELF;

     

       302
        
                 } else if (viewer.blocking || viewer.blockingByList) {

     

       303
        
                   status = RepoStatus.BLOCKING;

     
···

       359
        
           for (let i = 0; i < writes.length; i += BATCHSIZE) {

     

       360
        
             await rpc.call("com.atproto.repo.applyWrites", {

     

       361
        
               data: {

     

       362
       +
                 repo: agentDID,

     

       363
        
                 writes: writes.slice(i, i + BATCHSIZE),

     

       364
        
               },

     

       365
        
             });