automatically create an identity on the first page (and other UI tweaks)

src/views/AccountViewView.vue

@@ -4,6 +4,16 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Back -->
+    <div class="text-lg text-center font-light relative px-7">
+      <h1
+        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        @click="$router.back()"
+      >
+        <fa icon="chevron-left" class="fa-fw"></fa>
+      </h1>
+    </div>
+
     <!-- Heading -->
     <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-4">
       Your Identity
@@ -51,24 +61,6 @@
       </router-link>
     </div>
 
-    <!-- Registration notice -->
-    <!-- We won't show any loading indicator because it usually doesn't change anything. We'll just pop the message in only if we discover that they need it. -->
-    <div
-      v-if="!loadingLimits && !limits?.nextWeekBeginDateTime"
-      class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mb-4"
-    >
-      <p class="mb-4">
-        <b>Note:</b> Before you can publicly announce a new project or time
-        commitment, a friend needs to register you.
-      </p>
-      <router-link
-        :to="{ name: 'contact-qr' }"
-        class="inline-block text-md uppercase bg-amber-600 text-white px-4 py-2 rounded-md"
-      >
-        Share Your Info
-      </router-link>
-    </div>
-
     <!-- Identity Details -->
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
       <h2 v-if="givenName" class="text-xl font-semibold mb-2">
@@ -80,9 +72,9 @@
       <span v-else>
         <router-link
           :to="{ name: 'new-edit-account' }"
-          class="block w-full text-center text-md text-blue-500 uppercase border border-dashed border-slate-400 px-1.5 py-2 rounded-md mb-2"
+          class="block w-full text-center text-md bg-amber-200 text-blue-500 uppercase border border-dashed border-slate-400 px-1.5 py-2 rounded-md mb-2"
         >
-          (Set Your Name)
+          Set Your Name
         </router-link>
       </span>
 
@@ -101,6 +93,24 @@
       </div>
     </div>
 
+    <!-- Registration notice -->
+    <!-- We won't show any loading indicator because it usually doesn't change anything. We'll just pop the message in only if we discover that they need it. -->
+    <div
+      v-if="!loadingLimits && !limits?.nextWeekBeginDateTime"
+      class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mb-4"
+    >
+      <p class="mb-4">
+        <b>Note:</b> Before you can publicly announce a new project or time
+        commitment, a friend needs to register you.
+      </p>
+      <router-link
+        :to="{ name: 'contact-qr' }"
+        class="inline-block text-md uppercase bg-amber-600 text-white px-4 py-2 rounded-md"
+      >
+        Share Your Info
+      </router-link>
+    </div>
+
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
       <div
         v-if="!notificationMaybeChanged"
@@ -135,41 +145,11 @@
       </router-link>
     </div>
 
-    <h3 class="text-sm uppercase font-semibold mb-3">Data Export</h3>
-
-    <router-link
-      :to="{ name: 'seed-backup' }"
+    <div
       v-if="activeDid"
-      class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+      class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
     >
-      Backup Identifier Seed
-    </router-link>
-
-    <button
-      v-bind:class="computedStartDownloadLinkClassNames()"
-      class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
-      @click="exportDatabase()"
-    >
-      Download Settings & Contacts
-      <br />
-      (excluding Identifier Data)
-    </button>
-    <a
-      ref="downloadLink"
-      v-bind:class="computedDownloadLinkClassNames()"
-      class="block w-full text-center text-md uppercase bg-green-600 text-white px-1.5 py-2 rounded-md mb-6"
-    >
-      If no download happened yet, click again here to download now.
-    </a>
-
-    <div v-if="activeDid" class="flex mt-8 py-2">
-      <h3 class="text-sm uppercase font-semibold">Rate Limits</h3>
-      <button
-        class="block w-fit text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md ml-2 mr-2 mb-2"
-        @click="checkLimits()"
-      >
-        Check Limits
-      </button>
+      <div class="mb-2">Usage Limits</div>
       <!-- show spinner if loading limits -->
       <div v-if="loadingLimits" class="text-center">
         Checking&hellip; <fa icon="spinner" class="fa-spin"></fa>
@@ -200,6 +180,40 @@
           </b>
         </p>
       </div>
+      <button
+        class="block float-right w-fit text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mt-2"
+        @click="checkLimits()"
+      >
+        Recheck Limits
+      </button>
+    </div>
+
+    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
+      <div>Data Export</div>
+      <router-link
+        :to="{ name: 'seed-backup' }"
+        v-if="activeDid"
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2 mt-2"
+      >
+        Backup Identifier Seed
+      </router-link>
+
+      <button
+        v-bind:class="computedStartDownloadLinkClassNames()"
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
+        @click="exportDatabase()"
+      >
+        Download Settings & Contacts
+        <br />
+        (excluding Identifier Data)
+      </button>
+      <a
+        ref="downloadLink"
+        v-bind:class="computedDownloadLinkClassNames()"
+        class="block w-full text-center text-md uppercase bg-green-600 text-white px-1.5 py-2 rounded-md"
+      >
+        If no download happened yet, click again here to download now.
+      </a>
     </div>
 
     <!-- id used by puppeteer test script -->