9189c24 Improvements on registration flow — radicle-explorer

Radicle web interface

Improvements on registration flow

Alexis Sellier committed 5 years ago

commit 9189c24e090ec0332ec0fbdcd21325116f26a2d2
parent 9a9b4bbeb93c32be6c7c75b2be82a76c71dedfdb

2 files changed +24 -23

modified src/Loading.svelte

@@ -1,5 +1,7 @@

 <script lang="typescript">
   export let small = false;
   export let color = "secondary";
   export let center = false;
 </script>
 <style>

@@ -8,6 +10,9 @@

     width: 70px;
     text-align: center;
   }
   .spinner.center {
     margin: auto auto;
   }
   .spinner > div {
     width: 18px;

@@ -55,8 +60,8 @@

   }
 </style>
 <div class="spinner" class:small>
   <div class="bounce1"></div>
   <div class="bounce2"></div>
   <div class="bounce3"></div>
 <div class="spinner" class:small class:center>
   <div class="bounce1" style="background-color: var(--color-{color})"></div>
   <div class="bounce2" style="background-color: var(--color-{color})"></div>
   <div class="bounce3" style="background-color: var(--color-{color})"></div>
 </div>

modified src/base/register/steps/Submit.svelte

@@ -6,6 +6,7 @@

   import { State, state } from '../state';
   import type { Session } from '@app/session';
   import type { Config } from '@app/config';
   import Loading from '@app/Loading.svelte';
   export let config: Config;
   export let subdomain: string;

@@ -32,11 +33,7 @@

   });
 </script>
 <style>
   .domain {
     color: var(--color-secondary);
   }
 </style>
 <style></style>
 <div class="modal" class:error={error}>
   {#if error}

@@ -67,34 +64,33 @@

       {/await} <strong>RAD</strong>...
     </div>
     <div class="modal-actions">
       <button disabled class="primary register">
         Approving...
       </button>
       <Loading small center />
     </div>
   {:else if $state === State.Committing}
     <div class="modal-body">
       Committing...
     </div>
     <div class="modal-actions">
       <button disabled class="primary register">
         Committing...
       </button>
       <Loading small center />
     </div>
   {:else if $state === State.WaitingToRegister}
     <div class="modal-body">
       <!-- TODO -->
       Waiting for commitment time...
     </div>
     <div class="modal-actions">
       <button disabled class="primary register">
         Waiting...
       </button>
       <Loading small center />
     </div>
   {:else if $state === State.Registering}
     <div class="modal-body">
       Registering name...
     </div>
     <div class="modal-actions">
       <button disabled class="primary register">
         Registering...
       </button>
       <Loading small center />
     </div>
   {:else if $state === State.Registered}
     <div class="modal-body">
       The name <span class="domain">{subdomain}</span> has been successfully registered to {registrationOwner}.
       The name <strong>{subdomain}</strong> has been successfully registered to
       <strong>{registrationOwner}</strong>.
     </div>
     <div class="modal-actions">
       <button on:click={() => state.set(State.Idle)} class="primary register">