zzstoatzz.io
Client side atproto account migrator in your web browser, along with services for backups and adversarial migrations.
3.3 kB
101 lines
1<script lang="ts">
2 import MooHeader from '$lib/components/MooHeader.svelte';
3 import {Migrator} from '@pds-moover/moover';
4 import OgImage from '$lib/components/OgImage.svelte';
5
6 let migrator = $state(new Migrator());
7
8 // Form state
9 let oldHandle = $state('');
10 let oldPassword = $state('');
11 let twoFactorCode = $state('');
12 let showTwoFactorCodeInput = $state(false);
13 let errorMessage: string | null = $state(null);
14 let showStatusMessage = $state(false);
15 let statusMessage = $state('');
16
17 function updateStatusHandler(status: string) {
18 console.log('Status update:', status);
19 statusMessage = status;
20 }
21
22 async function handleSubmit(event: SubmitEvent) {
23 event.preventDefault();
24 errorMessage = null;
25 showStatusMessage = false;
26
27
28 try {
29 if (showTwoFactorCodeInput) {
30 if (twoFactorCode === null || twoFactorCode === '') {
31 errorMessage = 'Please enter the 2FA that was sent to your email.';
32 return;
33 }
34 }
35
36 showStatusMessage = true;
37 await migrator.deactivateOldAccount(
38 oldHandle,
39 oldPassword,
40 updateStatusHandler,
41 twoFactorCode
42 );
43 } catch (err) {
44 //@ts-expect-error: error should be fine
45 if (err.error === 'AuthFactorTokenRequired') {
46 showTwoFactorCodeInput = true;
47 }
48 //@ts-expect-error: error should be fine
49 errorMessage = err.message;
50 }
51 }
52</script>
53
54<svelte:head>
55 <title>PDS MOOver - Turn OFF</title>
56 <meta property="og:description" content="Deactivate your old account"/>
57 <OgImage/>
58</svelte:head>
59
60<div class="container">
61 <MooHeader title="Turn OFF"/>
62
63 <p>Use this page to make sure your old account is deactivated</p>
64
65 <form id="moover-form" onsubmit={handleSubmit}>
66 <!-- Login credentials -->
67 <div class="section">
68 <h2>Login for your old PDS</h2>
69 <div class="form-group">
70 <label for="handle">Old Handle:</label>
71 <input type="text" id="handle" name="handle" placeholder="alice.bsky.social"
72 bind:value={oldHandle}
73 required>
74 </div>
75
76 <div class="form-group">
77 <label for="password">Old Password:</label>
78 <input type="password" id="password" name="password" bind:value={oldPassword} required>
79 </div>
80
81 {#if showTwoFactorCodeInput}
82 <div class="form-group">
83 <label for="two-factor-code">2FA from the email sent</label>
84 <input type="text" id="two-factor-code" name="two-factor-code" bind:value={twoFactorCode}>
85 <div class="error-message">Enter your 2fa code here</div>
86 </div>
87 {/if}
88 </div>
89
90 {#if errorMessage}
91 <div class="error-message">{errorMessage}</div>
92 {/if}
93 {#if showStatusMessage}
94 <div id="status-message" class="status-message">{statusMessage}</div>
95 {/if}
96
97 <div>
98 <button type="submit">Turn it off</button>
99 </div>
100 </form>
101</div>