wip

web-ui/src/lib/components/RotationKeyDisplay.svelte

···
+<script lang="ts">
+    let {handle, multiBasePrivateKey} = $props();
+    import {handleAndPDSResolver} from '@pds-moover/moover'
+
+    const copyToClipboard = async (text: string) => {
+        try {
+            await navigator.clipboard.writeText(text);
+            alert('Copied to clipboard');
+        } catch (e) {
+            console.error(e);
+            alert('Failed to copy to clipboard');
+        }
+    }
+
+    const downloadNewRotationKey = async (rotationKey: string, handle: string) => {
+        if (!rotationKey) return;
+
+
+        //try and find the did to add to the file as well
+        let didText = '';
+        try {
+            let {usersDid} = await handleAndPDSResolver(handle);
+            didText = `DID: ${usersDid}\n`;
+        } catch (e) {
+            //sliently log. Rather the user have their rotation key than not. a did can always be found other ways if needed
+            console.error(e);
+        }
+
+
+        const content = `You can use these to recover your account if it's ever necessary via https://pdsmoover.com/restore. The restore process will ask for the Private key\n\nKEEP IN A SECURE LOCATION\n\n${didText}PublicKey: ${rotationKey.publicKey}\nPrivateKey: ${rotationKey.privateKey}\n`;
+        const blob = new Blob([content], {type: 'text/plain'});
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+
+
+        a.download = `${handle}-rotation-key.txt`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
+</script>
+
+
+<div class="section" style="margin-top: 16px; border: 2px solid #f39c12; padding: 16px;">
+    <h3 style="color: #d35400;">Important: Save Your New Rotation Key Now</h3>
+    <p style="color: #c0392b; font-weight: bold;">
+        Warning: This is the only time we will show you your private rotation key. Save it in a secure place.
+        If you lose it, you may not be able to recover your account in the event of a PDS failure or hijack.
+    </p>
+    <div class="form-group">
+        <label>New Rotation Key (Private - keep secret)</label>
+        <div style="display:flex; gap:8px; align-items:center;">
+            {#if multiBasePrivateKey}
+                <code
+                        style="overflow-wrap:anywhere;">{multiBasePrivateKey}</code>
+            {/if}
+
+            <button type="button"
+                    onclick={async ()  => await copyToClipboard(multiBasePrivateKey)}>Copy
+            </button>
+        </div>
+    </div>
+    <div class="form-group">
+        <button type="button" onclick={async () => await downloadNewRotationKey(multiBasePrivateKey, handle)}>Download
+            Key File
+        </button>
+    </div>
+</div>

web-ui/src/routes/moover/+page.svelte

···
     let showTwoFactorCodeInput = $state(false);
     let showAdvance = $state(false);
     let showStatusMessage = $state(false);
-    let askForPlcToken = $state(true);
+    let askForPlcToken = $state(false);
+    let disableSubmit = $state(false);
 
     let errorMessage: null | string = $state(null);
 
···
 
     async function submitMoove(event: SubmitEvent & { currentTarget: EventTarget & HTMLFormElement }) {
         event.preventDefault();
+        disableSubmit = true;
         errorMessage = null;
         showStatusMessage = false;
 
         if (!formData.confirmation) {
             errorMessage = 'Please confirm that you understand the risks of doing an account migration';
+            disableSubmit = false;
             return;
         }
 
···
             if (showTwoFactorCodeInput) {
                 if (showTwoFactorCodeInput === null) {
                     errorMessage = 'Please enter the 2FA that was sent to your email.'
+                    disableSubmit = false;
+                    return;
                 }
             }
 
···
                 formData.twoFactorCode,
             );
             if (migrator.migratePlcRecord) {
+                //I don't think disable submit is needed, but you never know.
+                disableSubmit = false;
                 askForPlcToken = true;
             } else {
                 updateStatusHandler('Migration of your repo is complete! But the PLC operation was not done so your old account is still the valid one.');
             }
         } catch (error) {
+            disableSubmit = false;
             console.error(error);
             //@ts-expect-error: JS being js. doesn't like not having the type'
             if (error.error === 'AuthFactorTokenRequired') {
···
 
 <div class="container">
     <MooHeader title="PDS MOOver"/>
-    <button onclick={() => askForPlcToken = !askForPlcToken}>I'm not a cow</button>
+    <!--    <button onclick={() => askForPlcToken = !askForPlcToken}>I'm not a cow</button>-->
 
     {#if !askForPlcToken}
         <a href={resolve('/info')}>Idk if I trust a cow to move my atproto account to a new PDS</a>
···
             {/if}
 
             <div>
-                <button type="submit">MOOve</button>
+                <button disabled={disableSubmit} type="submit">MOOve</button>
             </div>
         </form>
     {:else}

web-ui/src/routes/moover/SignThePapers.svelte

···
             // Generate a new rotation key if requested
             if (createANewRotationKey) {
 
+                //TODO write the new component and should be about ready to test
+
+
                 //TODO this will become a prop to the new component
                 // window.handle = this.newHandle;
                 let plcOps = new PlcOps();