zzstoatzz.io
Client side atproto account migrator in your web browser, along with services for backups and adversarial migrations.
2.0 kB
59 lines
1<script lang="ts">
2 import MooHeader from '$lib/components/MooHeader.svelte';
3 import {PlcOps} from '@pds-moover/moover';
4 import type {RotationKeyType} from '$lib/types';
5 import RotationKeyDisplay from '$lib/components/RotationKeyDisplay.svelte';
6
7 let handle: string = $state('');
8 let errorMessage: null | string = $state(null);
9 let status: null | string = $state(null);
10 let newlyCreatedRotationPrivateKey: null | RotationKeyType = $state(null);
11
12
13 const generateNewKey = async () => {
14 errorMessage = null;
15 status = 'Generating a new rotation key…';
16 try {
17 const plcOps = new PlcOps();
18 newlyCreatedRotationPrivateKey = await plcOps.createANewSecp256k1();
19 status = 'New rotation key generated.';
20 } catch (e) {
21 console.error(e);
22 // @ts-expect-error: already checked for null
23 errorMessage = e?.message || 'Failed to generate a new rotation key';
24 status = null;
25 }
26 };
27
28</script>
29
30
31<div class="container">
32
33 <MooHeader title="Rotation Key"/>
34 <div class="section">
35 <p style="text-align: left;">This page is intended for development and is not listed. This will NOT save a key
36 to your account.</p>
37 <div class="form-group">
38 <label for="handle">Handle</label>
39 <input bind:value={handle} type="text" id="handle" name="handle" placeholder="Enter your handle"/>
40 </div>
41 <div class="form-group">
42 <button type="button" onclick={generateNewKey}>Generate New Rotation Key</button>
43 </div>
44 </div>
45
46 {#if status}
47 <div class="status-message">{status}</div>
48 {/if}
49
50 {#if errorMessage}
51 <div class="error-message">{errorMessage}</div>
52 {/if}
53
54
55 {#if newlyCreatedRotationPrivateKey}
56 <RotationKeyDisplay handle={handle} rotationKey={newlyCreatedRotationPrivateKey}/>
57 {/if}
58
59</div>