feat(ui): lock screen on key store unseal (#1194)

radicle-dev · Nov 5, 2020 · 4a8213b · 4a8213b
1 parent 4df7986
commit 4a8213b
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 16 deletions.
diff --git a/ui/App.svelte b/ui/App.svelte
@@ -107,12 +107,7 @@
     <Bsod />
   </div>
 
-  <!-- TODO(julien): Dress up loading screen -->
   <div slot="loading" class="error">
-    {#if $location === path.lock()}
-      <EmptyState headerText="Unlocking the app..." emoji="🚪" text="" />
-    {:else}
-      <EmptyState headerText="Loading..." emoji="🕵️" text="" />
-    {/if}
+    <EmptyState headerText="Loading..." emoji="🕵️" text="" />
   </div>
 </Remote>
diff --git a/ui/Screen/Lock.svelte b/ui/Screen/Lock.svelte
@@ -1,16 +1,23 @@
 <script lang="ts">
+  import * as screen from "../src/screen";
   import * as session from "../src/session";
 
   import { Button, Emoji, Input } from "../DesignSystem/Primitive";
 
   let passphrase = "";
+  let unlockInProgress = false;
 
   const unlock = async () => {
-    await session.unseal(passphrase);
+    unlockInProgress = true;
+    screen.lock();
+    await session.unseal(passphrase).finally(() => {
+      screen.unlock();
+      unlockInProgress = false;
+    });
   };
 
   const onEnter = () => {
-    if (passphrase.length > 0) {
+    if (passphrase.length > 0 && !unlockInProgress) {
       unlock();
     }
   };
@@ -42,12 +49,13 @@
       autofocus
       placeholder="Enter your passphrase"
       bind:value={passphrase}
+      disabled={unlockInProgress}
       dataCy="passphrase-input"
       on:enter={onEnter}
       style="width: 16rem; margin-right: 1rem;" />
     <Button
       dataCy="unlock-button"
-      disabled={passphrase.length === 0}
+      disabled={passphrase.length === 0 || unlockInProgress}
       on:click={unlock}>
       Unlock
     </Button>

diff --git a/ui/Screen/Onboarding.svelte b/ui/Screen/Onboarding.svelte
@@ -5,6 +5,7 @@
   import * as notification from "../src/notification.ts";
   import { State } from "../src/onboarding.ts";
   import { createIdentity } from "../src/identity.ts";
+  import * as screen from "../src/screen.ts";
   import * as session from "../src/session.ts";
   import * as urn from "../src/urn.ts";
 
@@ -16,6 +17,7 @@
   let identity;
   let handle;
   let state = State.Welcome;
+  let createIdentityInProgress = false;
 
   let inY = 1000;
   let outY = -1000;
@@ -38,9 +40,10 @@
 
   const onCreateIdentity = async (handle, passphrase) => {
     try {
+      screen.lock();
+      createIdentityInProgress = true;
       await session.createKeystore(passphrase);
       // Retry until the API is up
-      notification.info("Creating the identity...");
       identity = await withRetry(() => createIdentity({ handle }), 200);
       state = State.SuccessView;
     } catch (error) {
@@ -49,6 +52,9 @@
       notification.error(
         `Could not create identity: ${urn.shorten(error.message)}`
       );
+    } finally {
+      screen.unlock();
+      createIdentityInProgress = false;
     }
   };
 </script>
@@ -98,6 +104,7 @@
     <div class="content" in:fly={{ y: inY }} out:fly={{ y: outY }}>
       <div class="inner">
         <EnterPassphrase
+          disabled={createIdentityInProgress}
           on:previous={() => {
             animateBackward();
             state = State.EnterName;

diff --git a/ui/Screen/Onboarding/EnterPassphrase.svelte b/ui/Screen/Onboarding/EnterPassphrase.svelte
@@ -8,6 +8,8 @@
 
   import { Button, Input } from "../../DesignSystem/Primitive";
 
+  export let disabled = false;
+
   const dispatch = createEventDispatcher();
 
   let repeatedPassphraseInput;
@@ -76,7 +78,10 @@
   }
 
   $: allowNext =
-    passphrase && passphrase === repeatedPassphrase && !validations;
+    passphrase &&
+    passphrase === repeatedPassphrase &&
+    !validations &&
+    !disabled;
 
   let ran = false;
 
@@ -139,7 +144,8 @@
       hint="↵"
       style="margin-top: 1.5rem;"
       validation={passphraseValidation}
-      bind:value={passphrase} />
+      bind:value={passphrase}
+      {disabled} />
 
     <div class="repeat" hidden={!passphrase}>
       <p style="margin-bottom: 0.5rem;">And enter it again, just to be safe.</p>
@@ -150,15 +156,17 @@
         placeholder="Repeat the secure passphrase"
         hint="↵"
         validation={repeatedPassphraseValidation}
-        bind:value={repeatedPassphrase} />
+        bind:value={repeatedPassphrase}
+        {disabled} />
     </div>
 
     <div class="buttons">
       <Button
         dataCy="back-button"
         variant="transparent"
         style="margin-right: 1rem;"
-        on:click={() => dispatch('previous')}>
+        on:click={() => dispatch('previous')}
+        {disabled}>
         Back
       </Button>
 

diff --git a/ui/src/session.ts b/ui/src/session.ts
@@ -105,8 +105,6 @@ export const unseal = async (passphrase: string): Promise<boolean> => {
   try {
     await api.set<unknown>(`keystore/unseal`, { passphrase });
   } catch (error) {
-    sessionStore.loading();
-    sessionStore.success({ status: Status.SealedSession });
     notification.error(`Could not unlock the session: ${error.message}`);
     return false;
   }