+1 -1

justfile

··· 25 25 docker buildx build \ 26 26 --platform linux/arm64,linux/amd64 \ 27 27 --tag fatfingers23/moover_ui:latest \ 28 28 - --tag fatfingers23/moover_ui:0.0.3 \ 28 28 + --tag fatfingers23/moover_ui:0.0.4 \ 29 29 --file Dockerfiles/web-ui.Dockerfile \ 30 30 --push .

+5 -1

packages/moover/lib/pdsmoover.js

··· 49 49 * @param {string|null} inviteCode - The invite code you got from the PDS you are migrating to. If null does not include one 50 50 * @param {function|null} statusUpdateHandler - a function that takes a string used to update the UI. Like (status) => console.log(status) 51 51 * @param {string|null} twoFactorCode - Optional, but needed if it fails with 2fa required 52 52 + * @param verificationCode - Optional verification captcha code for account creation if the PDS requires it 52 53 */ 53 53 - async migrate(oldHandle, password, newPdsUrl, newEmail, newHandle, inviteCode, statusUpdateHandler = null, twoFactorCode = null) { 54 54 + async migrate(oldHandle, password, newPdsUrl, newEmail, newHandle, inviteCode, statusUpdateHandler = null, twoFactorCode = null, verificationCode = null) { 54 55 //Leaving this logic that either sets the agent to bsky.social, or the PDS since it's what I found worked best for migrations. 55 56 // handleAndPDSResolver should be able to handle it, but there have been edge cases and this was what worked best 56 57 oldHandle = cleanHandle(oldHandle); ··· 114 115 }; 115 116 if (inviteCode) { 116 117 createAccountRequest.inviteCode = inviteCode; 118 118 + } 119 119 + if (verificationCode) { 120 120 + createAccountRequest.verificationCode = verificationCode; 117 121 } 118 122 const createNewAccount = await newAgent.com.atproto.server.createAccount( 119 123 createAccountRequest,

+1 -1

packages/moover/package.json

··· 1 1 { 2 2 "name": "@pds-moover/moover", 3 3 - "version": "1.0.4", 3 3 + "version": "1.0.5", 4 4 "description": "Utilities for ATProto PDS migrations and recovery", 5 5 "repository": { 6 6 "type": "git",

+2 -1

packages/moover/types/pdsmoover.d.ts

··· 35 35 * @param {string|null} inviteCode - The invite code you got from the PDS you are migrating to. If null does not include one 36 36 * @param {function|null} statusUpdateHandler - a function that takes a string used to update the UI. Like (status) => console.log(status) 37 37 * @param {string|null} twoFactorCode - Optional, but needed if it fails with 2fa required 38 38 + * @param verificationCode - Optional verification captcha code for account creation if the PDS requires it 38 39 */ 39 39 - migrate(oldHandle: string, password: string, newPdsUrl: string, newEmail: string, newHandle: string, inviteCode: string | null, statusUpdateHandler?: Function | null, twoFactorCode?: string | null): Promise<void>; 40 40 + migrate(oldHandle: string, password: string, newPdsUrl: string, newEmail: string, newHandle: string, inviteCode: string | null, statusUpdateHandler?: Function | null, twoFactorCode?: string | null, verificationCode?: any): Promise<void>; 40 41 /** 41 42 * Sign and submits the PLC operation to officially migrate the account 42 43 * @param {string} token - the PLC token sent in the email. If you're just wanting to run this rerun migrate with all the flags set as false except for migratePlcRecord

+1 -1

packages/moover/types/pdsmoover.d.ts.map

··· 1 1 - {"version":3,"file":"pdsmoover.d.ts","sourceRoot":"","sources":["../lib/pdsmoover.js"],"names":[],"mappings":"AAUA;;;GAGG;AACH;IAEQ,uBAAuB;IACvB,UADW,QAAQ,CACC;IACpB,uBAAuB;IACvB,UADW,QAAQ,CACC;IACpB,uBAAuB;IACvB,cADW,CAAC,MAAM,CAAC,CACG;IAEtB,sBAAsB;IACtB,kBADW,OAAO,CACU;IAC5B,sBAAsB;IACtB,aADW,OAAO,CACK;IACvB,sBAAsB;IACtB,cADW,OAAO,CACM;IACxB,sBAAsB;IACtB,qBADW,OAAO,CACa;IAC/B,sBAAsB;IACtB,cADW,OAAO,CACM;IACxB,sBAAsB;IACtB,kBADW,OAAO,CACU;IAGhC;;;;;;;;;;;;;;OAcG;IACH,mBATW,MAAM,YACN,MAAM,aACN,MAAM,YACN,MAAM,aACN,MAAM,cACN,MAAM,GAAC,IAAI,wBACX,WAAS,IAAI,kBACb,MAAM,GAAC,IAAI,iBAuLrB;IAED;;;;;OAKG;IACH,wBAJW,MAAM,gCACsB,MAAM,EAAE,GAClC,OAAO,CAAC,IAAI,CAAC,CA4BzB;IAED;;;;;;;;;;;OAWG;IACH,gCAPqB,MAAM,eACJ,MAAM,wBAClB,WAAS,IAAI,kBAEb,MAAM,GAAC,IAAI,GACT,OAAO,CAAC,IAAI,CAAC,CAiEzB;IAED;;;;;OAKG;IACH,uCAHW,MAAM,GACJ,OAAO,CAAC,IAAI,CAAC,CAkCzB;CACJ;yBAhYsB,cAAc"} 1 1 + {"version":3,"file":"pdsmoover.d.ts","sourceRoot":"","sources":["../lib/pdsmoover.js"],"names":[],"mappings":"AAUA;;;GAGG;AACH;IAEQ,uBAAuB;IACvB,UADW,QAAQ,CACC;IACpB,uBAAuB;IACvB,UADW,QAAQ,CACC;IACpB,uBAAuB;IACvB,cADW,CAAC,MAAM,CAAC,CACG;IAEtB,sBAAsB;IACtB,kBADW,OAAO,CACU;IAC5B,sBAAsB;IACtB,aADW,OAAO,CACK;IACvB,sBAAsB;IACtB,cADW,OAAO,CACM;IACxB,sBAAsB;IACtB,qBADW,OAAO,CACa;IAC/B,sBAAsB;IACtB,cADW,OAAO,CACM;IACxB,sBAAsB;IACtB,kBADW,OAAO,CACU;IAGhC;;;;;;;;;;;;;;;OAeG;IACH,mBAVW,MAAM,YACN,MAAM,aACN,MAAM,YACN,MAAM,aACN,MAAM,cACN,MAAM,GAAC,IAAI,wBACX,WAAS,IAAI,kBACb,MAAM,GAAC,IAAI,yCA2LrB;IAED;;;;;OAKG;IACH,wBAJW,MAAM,gCACsB,MAAM,EAAE,GAClC,OAAO,CAAC,IAAI,CAAC,CA4BzB;IAED;;;;;;;;;;;OAWG;IACH,gCAPqB,MAAM,eACJ,MAAM,wBAClB,WAAS,IAAI,kBAEb,MAAM,GAAC,IAAI,GACT,OAAO,CAAC,IAAI,CAAC,CAiEzB;IAED;;;;;OAKG;IACH,uCAHW,MAAM,GACJ,OAAO,CAAC,IAAI,CAAC,CAkCzB;CACJ;yBApYsB,cAAc"}

+1 -1

web-ui/package.json

··· 17 17 "@atcute/client": "^4.0.5", 18 18 "@atcute/lexicons": "^1.2.2", 19 19 "@pds-moover/lexicons": "^1.0.1", 20 20 - "@pds-moover/moover": "^1.0.4" 20 20 + "@pds-moover/moover": "^1.0.5" 21 21 }, 22 22 "devDependencies": { 23 23 "@eslint/compat": "^1.4.0",

+18 -18

web-ui/pnpm-lock.yaml

··· 21 21 specifier: ^1.0.1 22 22 version: 1.0.1 23 23 '@pds-moover/moover': 24 24 - specifier: ^1.0.4 25 25 - version: 1.0.4(@atcute/identity@1.1.1)(vite@7.1.12(@types/node@22.19.0)) 24 24 + specifier: ^1.0.5 25 25 + version: 1.0.5(@atcute/identity@1.1.1)(vite@7.1.12(@types/node@22.19.0)) 26 26 devDependencies: 27 27 '@eslint/compat': 28 28 specifier: ^1.4.0 ··· 79 79 '@atcute/atproto@3.1.9': 80 80 resolution: {integrity: sha512-DyWwHCTdR4hY2BPNbLXgVmm7lI+fceOwWbE4LXbGvbvVtSn+ejSVFaAv01Ra3kWDha0whsOmbJL8JP0QPpf1+w==} 81 81 82 82 - '@atcute/cbor@2.2.7': 83 83 - resolution: {integrity: sha512-/mwAF0gnokOphceZqFq3uzMGdd8sbw5y6bxF8CRutRkCCUcpjjpJc5fkLwhxyGgOveF3mZuHE6p7t/+IAqb7Aw==} 82 82 + '@atcute/cbor@2.2.8': 83 83 + resolution: {integrity: sha512-UzOAN9BuN6JCXgn0ryV8qZuRJUDrNqrbLd6EFM8jc6RYssjRyGRxNy6RZ1NU/07Hd8Tq/0pz8+nQiMu5Zai5uw==} 84 84 85 85 '@atcute/cid@2.2.6': 86 86 resolution: {integrity: sha512-bTAHHbJ24p+E//V4KCS4xdmd39o211jJswvqQOevj7vk+5IYcgDLx1ryZWZ1sEPOo9x875li/kj5gpKL14RDwQ==} ··· 111 111 '@atcute/uint8array@1.0.5': 112 112 resolution: {integrity: sha512-XLWWxoR2HNl2qU+FCr0rp1APwJXci7HnzbOQLxK55OaMNBXZ19+xNC5ii4QCsThsDxa4JS/JTzuiQLziITWf2Q==} 113 113 114 114 - '@atcute/util-fetch@1.0.3': 115 115 - resolution: {integrity: sha512-f8zzTb/xlKIwv2OQ31DhShPUNCmIIleX6p7qIXwWwEUjX6x8skUtpdISSjnImq01LXpltGV5y8yhV4/Mlb7CRQ==} 114 114 + '@atcute/util-fetch@1.0.4': 115 115 + resolution: {integrity: sha512-sIU9Qk0dE8PLEXSfhy+gIJV+HpiiknMytCI2SqLlqd0vgZUtEKI/EQfP+23LHWvP+CLCzVDOa6cpH045OlmNBg==} 116 116 117 117 '@atproto/api@0.16.11': 118 118 resolution: {integrity: sha512-1dhfQNHiclb102RW+Ea8Nft5olfqU0Ev/vlQaSX6mWNo1aP5zT+sPODJ8+BTUOYk3vcuvL7QMkqA/rLYy2PMyw==} ··· 386 386 '@pds-moover/lexicons@1.0.1': 387 387 resolution: {integrity: sha512-fv5b/DtHM7FEo/JklyF9gdK0ainlb6mWjWrBe6cmSAeg9G/4O2jBlQUOqfOAICY9gOcrCpkOrk9PHgGw//JQ2A==} 388 388 389 389 - '@pds-moover/moover@1.0.4': 390 390 - resolution: {integrity: sha512-VR4pMB9fMUEV0QCxLDaxfreaRGyxZR54UfOk5TLRYEcp2zmaLKFTI3NTcpvIFiVREpy6EzK+RNkwhxUD16OaVA==} 389 389 + '@pds-moover/moover@1.0.5': 390 390 + resolution: {integrity: sha512-do8Itd1mrH/446KYJf+velZqsA45ldJCPrEV10eD3nhFJyhf4KBEuseSHIhV0+KIZGU06HvmofBO+v8EZx9ToA==} 391 391 392 392 '@polka/url@1.0.0-next.29': 393 393 resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==} ··· 677 677 ajv@6.12.6: 678 678 resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==} 679 679 680 680 - alpinejs@3.15.1: 681 681 - resolution: {integrity: sha512-HLO1TtiE92VajFHtLLPK8BWaK1YepV/uj31UrfoGnQ00lyFOJZ+oVY3F0DghPAwvg8sLU79pmjGQSytERa2gEg==} 680 680 + alpinejs@3.15.2: 681 681 + resolution: {integrity: sha512-2kYF2aG+DTFkE6p0rHG5XmN4VEb6sO9b02aOdU4+i8QN6rL0DbRZQiypDE1gBcGO65yDcqMz5KKYUYgMUxgNkw==} 682 682 683 683 ansi-styles@4.3.0: 684 684 resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==} ··· 1352 1352 dependencies: 1353 1353 '@atcute/lexicons': 1.2.2 1354 1354 1355 1355 - '@atcute/cbor@2.2.7': 1355 1355 + '@atcute/cbor@2.2.8': 1356 1356 dependencies: 1357 1357 '@atcute/cid': 2.2.6 1358 1358 '@atcute/multibase': 1.1.6 ··· 1376 1376 1377 1377 '@atcute/did-plc@0.1.7': 1378 1378 dependencies: 1379 1379 - '@atcute/cbor': 2.2.7 1379 1379 + '@atcute/cbor': 2.2.8 1380 1380 '@atcute/cid': 2.2.6 1381 1381 '@atcute/crypto': 2.2.6 1382 1382 '@atcute/identity': 1.1.1 ··· 1389 1389 dependencies: 1390 1390 '@atcute/identity': 1.1.1 1391 1391 '@atcute/lexicons': 1.2.2 1392 1392 - '@atcute/util-fetch': 1.0.3 1392 1392 + '@atcute/util-fetch': 1.0.4 1393 1393 '@badrap/valita': 0.4.6 1394 1394 1395 1395 '@atcute/identity@1.1.1': ··· 1408 1408 1409 1409 '@atcute/uint8array@1.0.5': {} 1410 1410 1411 1411 - '@atcute/util-fetch@1.0.3': 1411 1411 + '@atcute/util-fetch@1.0.4': 1412 1412 dependencies: 1413 1413 '@badrap/valita': 0.4.6 1414 1414 ··· 1626 1626 '@atproto/lexicon': 0.5.1 1627 1627 '@atproto/xrpc': 0.7.5 1628 1628 1629 1629 - '@pds-moover/moover@1.0.4(@atcute/identity@1.1.1)(vite@7.1.12(@types/node@22.19.0))': 1629 1629 + '@pds-moover/moover@1.0.5(@atcute/identity@1.1.1)(vite@7.1.12(@types/node@22.19.0))': 1630 1630 dependencies: 1631 1631 - '@atcute/cbor': 2.2.7 1631 1631 + '@atcute/cbor': 2.2.8 1632 1632 '@atcute/client': 4.0.5 1633 1633 '@atcute/crypto': 2.2.6 1634 1634 '@atcute/did-plc': 0.1.7 ··· 1637 1637 '@atcute/multibase': 1.1.6 1638 1638 '@atproto/api': 0.16.11 1639 1639 '@pds-moover/lexicons': 1.0.1 1640 1640 - alpinejs: 3.15.1 1640 1640 + alpinejs: 3.15.2 1641 1641 vite-plugin-full-reload: 1.2.0 1642 1642 vite-rs-plugin: 1.0.1(vite@7.1.12(@types/node@22.19.0)) 1643 1643 transitivePeerDependencies: ··· 1930 1930 json-schema-traverse: 0.4.1 1931 1931 uri-js: 4.4.1 1932 1932 1933 1933 - alpinejs@3.15.1: 1933 1933 + alpinejs@3.15.2: 1934 1934 dependencies: 1935 1935 '@vue/reactivity': 3.1.5 1936 1936

+210 -166

web-ui/src/routes/moover/[[pds]]/+page.svelte

··· 4 4 import {resolve} from '$app/paths'; 5 5 import {Migrator} from '@pds-moover/moover'; 6 6 import SignThePapers from './SignThePapers.svelte'; 7 7 + import Captcha from './Captcha.svelte'; 7 8 8 9 let {data} = $props(); 9 10 ··· 43 44 newHandle: '', 44 45 inviteCode: null, 45 46 twoFactorCode: null, 47 47 + verificationCode: null, 46 48 confirmation: false, 47 49 // Acceptance of provider policies (when required by selected PDS) 48 50 acceptPolicies: false, ··· 63 65 let showStatusMessage = $state(false); 64 66 let askForPlcToken = $state(false); 65 67 let disableSubmit = $state(false); 68 68 + let showCaptcha = $state(false); 66 69 67 70 let errorMessage: null | string = $state(null); 68 71 let statusMessage: null | string = $state(null); ··· 71 74 const privacyUrl = $derived(selectedPds?.links?.privacyPolicy); 72 75 const tosUrl = $derived(selectedPds?.links?.termsOfService); 73 76 const requiresAccept = $derived(!!(privacyUrl || tosUrl)); 77 77 + 78 78 + // Check if phone verification is required 79 79 + const captchaVerificationRequired = $derived(selectedPds?.phoneVerificationRequired === true); 74 80 75 81 const updateStatusHandler = (status: string) => { 76 82 statusMessage = status; 77 83 } 78 84 85 85 + function handleCaptchaSuccess(code: string) { 86 86 + formData.verificationCode = code; 87 87 + showCaptcha = false; 88 88 + // Continue with the migration 89 89 + performMigration(); 90 90 + } 91 91 + 92 92 + function handleCaptchaError(error: string) { 93 93 + errorMessage = `Verification failed: ${error}`; 94 94 + disableSubmit = false; 95 95 + } 96 96 + 79 97 async function submitMoove(event: SubmitEvent & { currentTarget: EventTarget & HTMLFormElement }) { 80 98 event.preventDefault(); 81 99 disableSubmit = true; ··· 105 123 } 106 124 } 107 125 126 126 + if (captchaVerificationRequired && formData.createNewAccount && !formData.verificationCode) { 127 127 + showCaptcha = true; 128 128 + return; 129 129 + } 130 130 + 131 131 + // Continue with migration 132 132 + await performMigration(); 133 133 + } 134 134 + 135 135 + async function performMigration() { 108 136 try { 109 137 110 138 if (showTwoFactorCodeInput) { ··· 127 155 128 156 updateStatusHandler('Starting migration...'); 129 157 showStatusMessage = true; 158 158 + 130 159 await migrator.migrate( 131 160 formData.handle, 132 161 formData.password, ··· 136 165 formData.inviteCode, 137 166 updateStatusHandler, 138 167 formData.twoFactorCode, 168 168 + formData.verificationCode, 139 169 ); 140 170 if (migrator.migratePlcRecord) { 141 171 //I don't think disable submit is needed, but you never know. ··· 170 200 <br/> 171 201 <a href="https://blacksky.community/profile/did:plc:g7j6qok5us4hjqlwjxwrrkjm/post/3lw3hcuojck2u">Video guide for 172 202 joining blacksky.app</a> 173 173 - 174 174 - <form id="moover-form" onsubmit={submitMoove}> 175 175 - <!-- First section: Login credentials --> 176 176 - <div class="section"> 177 177 - <h2>Login for your current PDS</h2> 178 178 - <div class="form-group"> 179 179 - <label for="handle">Old Handle:</label> 180 180 - <input type="text" id="handle" name="handle" placeholder="alice.bsky.social" required 181 181 - bind:value={formData.handle}> 182 182 - </div> 203 203 + {#if showCaptcha} 204 204 + <Captcha 205 205 + pdsUrl={formData.newPds} 206 206 + handle={newHandle} 207 207 + onSuccess={handleCaptchaSuccess} 208 208 + onError={handleCaptchaError} 209 209 + /> 210 210 + {:else} 183 211 184 184 - <div class="form-group"> 185 185 - <label for="password">Old Password (Will also be your new password):</label> 186 186 - <input type="password" id="password" name="password" required bind:value={formData.password}> 187 187 - </div> 188 188 - {#if showTwoFactorCodeInput} 212 212 + <form id="moover-form" onsubmit={submitMoove}> 213 213 + <!-- First section: Login credentials --> 214 214 + <div class="section"> 215 215 + <h2>Login for your current PDS</h2> 189 216 <div class="form-group"> 190 190 - <label for="two-factor-code">2FA from the email sent</label> 191 191 - <input type="text" id="two-factor-code" name="twoFactorCode" 192 192 - bind:value={formData.twoFactorCode}> 193 193 - <div class="error-message">Enter your 2fa code here</div> 194 194 - 217 217 + <label for="handle">Old Handle:</label> 218 218 + <input type="text" id="handle" name="handle" placeholder="alice.bsky.social" required 219 219 + bind:value={formData.handle}> 195 220 </div> 196 196 - {/if} 197 197 - </div> 198 221 199 199 - <!-- Second section: New account details --> 200 200 - <div class="section"> 201 201 - <h2>{selectedPds ? `Setup for ${cleanSelectedPds}` : 'Setup for the new PDS'}</h2> 202 202 - {#if !selectedPds} 203 222 <div class="form-group"> 204 204 - <label for="new-pds">New PDS (URL):</label> 205 205 - <input type="url" id="new-pds" name="newPds" placeholder="https://coolnewpds.com" 206 206 - required bind:value={formData.newPds}> 223 223 + <label for="password">Old Password (Will also be your new password):</label> 224 224 + <input type="password" id="password" name="password" required bind:value={formData.password}> 207 225 </div> 208 208 - {/if} 226 226 + {#if showTwoFactorCodeInput} 227 227 + <div class="form-group"> 228 228 + <label for="two-factor-code">2FA from the email sent</label> 229 229 + <input type="text" id="two-factor-code" name="twoFactorCode" 230 230 + bind:value={formData.twoFactorCode}> 231 231 + <div class="error-message">Enter your 2fa code here</div> 209 232 210 210 - <div class="form-group"> 211 211 - <label for="new-email">New Email:</label> 212 212 - <input type="email" id="new-email" name="newEmail" 213 213 - placeholder="CanBeSameEmailAsTheOldPds@email.com" 214 214 - required bind:value={formData.newEmail}> 233 233 + </div> 234 234 + {/if} 215 235 </div> 216 236 217 217 - 218 218 - <div class="form-group"> 219 219 - <label for="new-handle">New Handle:</label> 220 220 - <div class={selectedPds ? 'input-group' : ''}> 221 221 - <input type="text" id="new-handle" name="newHandle" 222 222 - placeholder="{handlePlaceHolder}" 223 223 - required 224 224 - bind:value={formData.newHandle}> 225 225 - {#if selectedPds} 237 237 + <!-- Second section: New account details --> 238 238 + <div class="section"> 239 239 + <h2>{selectedPds ? `Setup for ${cleanSelectedPds}` : 'Setup for the new PDS'}</h2> 240 240 + {#if !selectedPds} 241 241 + <div class="form-group"> 242 242 + <label for="new-pds">New PDS (URL):</label> 243 243 + <input type="url" id="new-pds" name="newPds" placeholder="https://coolnewpds.com" 244 244 + required bind:value={formData.newPds}> 245 245 + </div> 246 246 + {/if} 226 247 227 227 - <select bind:value={selectedDomain} class="domain-select"> 228 228 - {#each selectedPds?.availableUserDomains as domain (domain)} 229 229 - <option value={domain}>{domain}</option> 230 230 - {/each} 231 231 - <option value="custom">I have my own domain setup</option> 248 248 + <div class="form-group"> 249 249 + <label for="new-email">New Email:</label> 250 250 + <input type="email" id="new-email" name="newEmail" 251 251 + placeholder="CanBeSameEmailAsTheOldPds@email.com" 252 252 + required bind:value={formData.newEmail}> 253 253 + </div> 232 254 233 233 - </select> 234 234 - {/if} 235 235 - </div> 236 236 - </div> 237 255 238 238 - {#if !selectedPds || selectedPds.inviteCodeRequired !== false} 239 256 <div class="form-group"> 240 240 - <label for="invite-code">Invite Code:</label> 241 241 - <input type="text" id="invite-code" name="inviteCode" 242 242 - placeholder="Invite code from your new PDS (Leave blank if you don't have one)" 243 243 - bind:value={formData.inviteCode}> 244 244 - </div> 245 245 - {/if} 246 246 - </div> 257 257 + <label for="new-handle">New Handle:</label> 258 258 + <div class={selectedPds ? 'input-group' : ''}> 259 259 + <input type="text" id="new-handle" name="newHandle" 260 260 + placeholder="{handlePlaceHolder}" 261 261 + required 262 262 + bind:value={formData.newHandle}> 263 263 + {#if selectedPds} 247 264 265 265 + <select bind:value={selectedDomain} class="domain-select"> 266 266 + {#each selectedPds?.availableUserDomains as domain (domain)} 267 267 + <option value={domain}>{domain}</option> 268 268 + {/each} 269 269 + <option value="custom">I have my own domain setup</option> 248 270 249 249 - <div class="form-group"> 250 250 - <button type="button" onclick={() => showAdvance = !showAdvance} id="advance" name="advance">Advance 251 251 - Options 252 252 - </button> 253 253 - </div> 254 254 - {#if showAdvance} 255 255 - <div class="section" style="padding-bottom: 10px; text-align: left"> 256 256 - <h3>Pick and choose which actions to run</h3> 257 257 - <p>Useful if a migration failed and you want to have a bit more manual control</p> 258 258 - <div class="form-control"> 259 259 - <label class="moove-checkbox-label"> 260 260 - <input type="checkbox" id="createNewAccount" name="createNewAccount" 261 261 - bind:checked={formData.createNewAccount}> 262 262 - Create a New Account on the New PDS 263 263 - </label> 264 264 - </div> 265 265 - <div class="form-control"> 266 266 - <label class="moove-checkbox-label"> 267 267 - <input bind:checked={formData.migrateRepo} type="checkbox" id="migrateRepo" 268 268 - name="migrateRepo"> 269 269 - Migrate Repo 270 270 - </label> 271 271 - </div> 272 272 - <div class="form-control"> 273 273 - <label class="moove-checkbox-label"> 274 274 - <input bind:checked={formData.migrateBlobs} type="checkbox" id="migrateBlobs" 275 275 - name="migrateBlobs"> 276 276 - Migrate Blobs 277 277 - </label> 278 278 - </div> 279 279 - <div class="form-control"> 280 280 - <label class="moove-checkbox-label"> 281 281 - <input bind:checked={formData.migrateMissingBlobs} type="checkbox" id="migrateMissingBlobs" 282 282 - name="migrateMissingBlobs"> 283 283 - Migrate Missing Blobs 284 284 - </label> 285 285 - </div> 286 286 - <div class="form-control"> 287 287 - <label class="moove-checkbox-label"> 288 288 - <input bind:checked={formData.migratePrefs} type="checkbox" id="migratePrefs" 289 289 - name="migratePrefs"> 290 290 - Migrate Prefs 291 291 - </label> 292 292 - </div> 293 293 - <div class="form-control"> 294 294 - <label class="moove-checkbox-label"> 295 295 - <input bind:checked={formData.migratePlcRecord} type="checkbox" id="migratePlcRecord" 296 296 - name="migratePlcRecord"> 297 297 - Migrate PLC Record 298 298 - </label> 271 271 + </select> 272 272 + {/if} 273 273 + </div> 299 274 </div> 300 275 276 276 + {#if !selectedPds || selectedPds.inviteCodeRequired !== false} 277 277 + <div class="form-group"> 278 278 + <label for="invite-code">Invite Code:</label> 279 279 + <input type="text" id="invite-code" name="inviteCode" 280 280 + placeholder="Invite code from your new PDS (Leave blank if you don't have one)" 281 281 + bind:value={formData.inviteCode}> 282 282 + </div> 283 283 + {/if} 301 284 </div> 302 302 - {/if} 303 285 304 304 - {#if requiresAccept} 305 305 - <div class="section" style="text-align: left"> 306 306 - <h3>Provider policies</h3> 307 307 - <p> 308 308 - To migrate to {cleanSelectedPds}, you must review and accept: 309 309 - </p> 310 310 - <ul> 311 311 - {#if privacyUrl} 312 312 - <li><a href={privacyUrl} target="_blank" rel="noopener noreferrer">Privacy 313 313 - Policy</a></li> 314 314 - {/if} 315 315 - {#if tosUrl} 316 316 - <li><a href={tosUrl} target="_blank" rel="noopener noreferrer">Terms of Service</a></li> 317 317 - {/if} 318 318 - </ul> 319 319 - <div class="form-group"> 320 320 - <label for="accept-policies" class="moove-checkbox-label"> 321 321 - <input bind:checked={formData.acceptPolicies} type="checkbox" id="accept-policies" 322 322 - name="acceptPolicies" required> 323 323 - <span> 286 286 + 287 287 + <div class="form-group"> 288 288 + <button type="button" onclick={() => showAdvance = !showAdvance} id="advance" name="advance">Advance 289 289 + Options 290 290 + </button> 291 291 + </div> 292 292 + {#if showAdvance} 293 293 + <div class="section" style="padding-bottom: 10px; text-align: left"> 294 294 + <h3>Pick and choose which actions to run</h3> 295 295 + <p>Useful if a migration failed and you want to have a bit more manual control</p> 296 296 + <div class="form-control"> 297 297 + <label class="moove-checkbox-label"> 298 298 + <input type="checkbox" id="createNewAccount" name="createNewAccount" 299 299 + bind:checked={formData.createNewAccount}> 300 300 + Create a New Account on the New PDS 301 301 + </label> 302 302 + </div> 303 303 + <div class="form-control"> 304 304 + <label class="moove-checkbox-label"> 305 305 + <input bind:checked={formData.migrateRepo} type="checkbox" id="migrateRepo" 306 306 + name="migrateRepo"> 307 307 + Migrate Repo 308 308 + </label> 309 309 + </div> 310 310 + <div class="form-control"> 311 311 + <label class="moove-checkbox-label"> 312 312 + <input bind:checked={formData.migrateBlobs} type="checkbox" id="migrateBlobs" 313 313 + name="migrateBlobs"> 314 314 + Migrate Blobs 315 315 + </label> 316 316 + </div> 317 317 + <div class="form-control"> 318 318 + <label class="moove-checkbox-label"> 319 319 + <input bind:checked={formData.migrateMissingBlobs} type="checkbox" 320 320 + id="migrateMissingBlobs" 321 321 + name="migrateMissingBlobs"> 322 322 + Migrate Missing Blobs 323 323 + </label> 324 324 + </div> 325 325 + <div class="form-control"> 326 326 + <label class="moove-checkbox-label"> 327 327 + <input bind:checked={formData.migratePrefs} type="checkbox" id="migratePrefs" 328 328 + name="migratePrefs"> 329 329 + Migrate Prefs 330 330 + </label> 331 331 + </div> 332 332 + <div class="form-control"> 333 333 + <label class="moove-checkbox-label"> 334 334 + <input bind:checked={formData.migratePlcRecord} type="checkbox" id="migratePlcRecord" 335 335 + name="migratePlcRecord"> 336 336 + Migrate PLC Record 337 337 + </label> 338 338 + </div> 339 339 + 340 340 + </div> 341 341 + {/if} 342 342 + 343 343 + {#if requiresAccept} 344 344 + <div class="section" style="text-align: left"> 345 345 + <h3>Provider policies</h3> 346 346 + <p> 347 347 + To migrate to {cleanSelectedPds}, you must review and accept: 348 348 + </p> 349 349 + <ul> 350 350 + {#if privacyUrl} 351 351 + <li><a href={privacyUrl} target="_blank" rel="noopener noreferrer">Privacy 352 352 + Policy</a></li> 353 353 + {/if} 354 354 + {#if tosUrl} 355 355 + <li><a href={tosUrl} target="_blank" rel="noopener noreferrer">Terms of Service</a></li> 356 356 + {/if} 357 357 + </ul> 358 358 + <div class="form-group"> 359 359 + <label for="accept-policies" class="moove-checkbox-label"> 360 360 + <input bind:checked={formData.acceptPolicies} type="checkbox" id="accept-policies" 361 361 + name="acceptPolicies" required> 362 362 + <span> 324 363 I have read and accept 325 364 326 365 </span> 327 327 - </label> 366 366 + </label> 367 367 + </div> 328 368 </div> 369 369 + {/if} 370 370 + <p style="text-align: left">There are some risks that come with doing an account migration. 371 371 + (Can view them 372 372 + <a href="https://github.com/bluesky-social/pds/blob/main/ACCOUNT_MIGRATION.md#%EF%B8%8F-warning-%EF%B8%8F-%EF%B8%8F">here</a>) 373 373 + and that the creator or host of this migration tool is not liable and will not be able to help you 374 374 + in 375 375 + the 376 376 + event something goes wrong. I also have read over the <a href={resolve('/info')}>extended 377 377 + information 378 378 + from 379 379 + PDS MOOver 380 380 + about account 381 381 + migrations.</a> 382 382 + </p> 383 383 + <div class="form-group"> 384 384 + <label for="confirmation" class="moove-checkbox-label"> 385 385 + <input bind:checked={formData.confirmation} type="checkbox" id="confirmation" 386 386 + name="confirmation" 387 387 + required> 388 388 + <span>I understand</span> 389 389 + </label> 329 390 </div> 330 330 - {/if} 331 331 - <p style="text-align: left">There are some risks that come with doing an account migration. 332 332 - (Can view them 333 333 - <a href="https://github.com/bluesky-social/pds/blob/main/ACCOUNT_MIGRATION.md#%EF%B8%8F-warning-%EF%B8%8F-%EF%B8%8F">here</a>) 334 334 - and that the creator or host of this migration tool is not liable and will not be able to help you in 335 335 - the 336 336 - event something goes wrong. I also have read over the <a href={resolve('/info')}>extended information 337 337 - from 338 338 - PDS MOOver 339 339 - about account 340 340 - migrations.</a> 341 341 - </p> 342 342 - <div class="form-group"> 343 343 - <label for="confirmation" class="moove-checkbox-label"> 344 344 - <input bind:checked={formData.confirmation} type="checkbox" id="confirmation" name="confirmation" 345 345 - required> 346 346 - <span>I understand</span> 347 347 - </label> 348 348 - </div> 349 349 - {#if errorMessage !== null} 350 350 - <div class="error-message">{errorMessage}</div> 351 351 - {/if} 391 391 + {#if errorMessage !== null} 392 392 + <div class="error-message">{errorMessage}</div> 393 393 + {/if} 394 394 + 395 395 + {#if showStatusMessage} 396 396 + <div id="warning">*Please make sure to stay on this page during the MOOve for the 397 397 + best result 398 398 + </div> 399 399 + <div id="status-message" class="status-message">{statusMessage}</div> 400 400 + {/if} 401 401 + 352 402 353 353 - {#if showStatusMessage} 354 354 - <div id="warning">*Please make sure to stay on this page during the MOOve for the 355 355 - best result 403 403 + <div> 404 404 + <button disabled={disableSubmit} 405 405 + type="submit">{selectedPds ? `MOOve to ${cleanSelectedPds}` : 'MOOve'}</button> 356 406 </div> 357 357 - <div id="status-message" class="status-message">{statusMessage}</div> 358 358 - {/if} 359 407 360 360 - <div> 361 361 - <button disabled={disableSubmit} 362 362 - type="submit">{selectedPds ? `MOOve to ${cleanSelectedPds}` : 'MOOve'}</button> 363 363 - </div> 364 364 - </form> 365 365 - 408 408 + </form> 409 409 + {/if} 366 410 {:else} 367 411 <SignThePapers migrator={migrator} newHandle={newHandle}/> 368 412 {/if}

+116

web-ui/src/routes/moover/[[pds]]/Captcha.svelte

··· 1 1 + <script lang="ts"> 2 2 + import {onMount} from 'svelte'; 3 3 + 4 4 + interface CaptchaProps { 5 5 + pdsUrl: string; 6 6 + handle: string; 7 7 + onSuccess: (code: string) => void; 8 8 + onError?: (error: string) => void; 9 9 + } 10 10 + 11 11 + let {pdsUrl, handle, onSuccess, onError}: CaptchaProps = $props(); 12 12 + 13 13 + function generateState(): string { 14 14 + const array = new Uint8Array(32); 15 15 + crypto.getRandomValues(array); 16 16 + return Array.from(array, byte => byte.toString(16).padStart(2, '0')).join(''); 17 17 + } 18 18 + 19 19 + let captcha_state = $state(generateState()); 20 20 + let iframeRef: HTMLIFrameElement | null = $state(null); 21 21 + let isLoading = $state(true); 22 22 + 23 23 + 24 24 + const gateUrl = $derived( 25 25 + `${pdsUrl}/gate/signup?state=${encodeURIComponent(captcha_state)}&handle=${encodeURIComponent(handle)}&redirect_url=${encodeURIComponent(window.location.origin)}`, 26 26 + ); 27 27 + 28 28 + // Monitor iframe for URL changes 29 29 + function checkIframeUrl() { 30 30 + if (!iframeRef) return; 31 31 + 32 32 + try { 33 33 + const iframeUrl = new URL(iframeRef.contentWindow?.location.href ?? ''); 34 34 + 35 35 + // Check if the iframe has been redirected with code and state parameters 36 36 + // This indicates the captcha was completed 37 37 + const urlState = iframeUrl.searchParams.get('state'); 38 38 + const code = iframeUrl.searchParams.get('code'); 39 39 + 40 40 + // Only process if we have at least a state parameter (indicates redirect happened) 41 41 + if (urlState) { 42 42 + 43 43 + // Verify state matches 44 44 + if (urlState !== captcha_state) { 45 45 + const stateError = 'State mismatch - possible security issue'; 46 46 + onError?.(stateError); 47 47 + return; 48 48 + } 49 49 + if (!code) { 50 50 + const codeError = 'No code returned from captcha'; 51 51 + onError?.(codeError); 52 52 + return; 53 53 + 54 54 + } 55 55 + 56 56 + onSuccess(code); 57 57 + } 58 58 + } catch { 59 59 + /* empty */ 60 60 + } 61 61 + } 62 62 + 63 63 + onMount(() => { 64 64 + // Poll for URL changes 65 65 + const interval = setInterval(checkIframeUrl, 100); 66 66 + 67 67 + return () => clearInterval(interval); 68 68 + }); 69 69 + </script> 70 70 + 71 71 + <div class="iframe-wrapper"> 72 72 + <iframe 73 73 + bind:this={iframeRef} 74 74 + src={gateUrl} 75 75 + title="Captcha Verification" 76 76 + onload={() => isLoading = false} 77 77 + ></iframe> 78 78 + {#if isLoading} 79 79 + <div class="loading-overlay"> 80 80 + <p>Loading verification...</p> 81 81 + </div> 82 82 + {/if} 83 83 + </div> 84 84 + 85 85 + <style> 86 86 + 87 87 + .iframe-wrapper { 88 88 + position: relative; 89 89 + width: 100%; 90 90 + height: 500px; 91 91 + background: white; 92 92 + border: 1px solid #ddd; 93 93 + border-radius: 4px; 94 94 + overflow: hidden; 95 95 + } 96 96 + 97 97 + iframe { 98 98 + width: 100%; 99 99 + height: 100%; 100 100 + border: none; 101 101 + } 102 102 + 103 103 + .loading-overlay { 104 104 + position: absolute; 105 105 + top: 0; 106 106 + left: 0; 107 107 + right: 0; 108 108 + bottom: 0; 109 109 + background: rgba(255, 255, 255, 0.9); 110 110 + display: flex; 111 111 + align-items: center; 112 112 + justify-content: center; 113 113 + color: #666; 114 114 + } 115 115 + 116 116 + </style>