style remaining pages

pages/cancel.vue

@@ -1,8 +1,12 @@
 <template>
-  <div>
+  <div class="prose lg:prose-xl m-5">
     <p>
       We are sorry that you canceled your transaction!
+    </p>
+    <p>
       <NuxtLink to="/pricing">Pricing</NuxtLink>
+    </p>
+    <p>
       <NuxtLink to="/dashboard">To Your Dashboard</NuxtLink>
     </p>
   </div>

pages/fail.vue

@@ -1,8 +1,12 @@
 <template>
-  <div>
+  <div class="prose lg:prose-xl m-5">
     <p>
       We are sorry that you were unable to subscribe.
+    </p>
+    <p>
       <NuxtLink to="/pricing">Pricing</NuxtLink>
+    </p>
+    <p>
       <NuxtLink to="/dashboard">To Your Dashboard</NuxtLink>
     </p>
   </div>

pages/join/[join_password].vue

@@ -2,22 +2,22 @@
   import { AccountWithMembers } from '~~/lib/services/service.types';
 
   const route = useRoute();
-  const {join_password} : {join_password?: string} = route.params;
+  const { join_password }: { join_password?: string } = route.params;
 
   const accountStore = useAccountStore();
 
   const { $client } = useNuxtApp();
   // this could probably be an elegant destructure here but I lost patience
   let account: AccountWithMembers | undefined;
-  if(join_password){
+  if (join_password) {
-    const result = await $client.account.getAccountByJoinPassword.useQuery({join_password});
+    const result = await $client.account.getAccountByJoinPassword.useQuery({ join_password });
     account = result.data.value?.account;
   }
 
   const { data: dbUser } = await $client.auth.getDBUser.useQuery();
 
-  async function doJoin(){
+  async function doJoin() {
-    if(account){
+    if (account) {
       await accountStore.joinUserToAccountPending(account.id);
     } else {
       console.log(`Unable to Join`)
@@ -25,21 +25,41 @@
   }
 </script>
 <template>
-  <div>
+  <div class="py-10 px-4 sm:px-6 lg:px-8">
-    <div v-if="account">
+    <div class="max-w-md mx-auto">
-      <h3>Join {{ account?.name }}</h3>
+      <h2 class="text-3xl font-extrabold text-gray-900">Request to Join Bob's Team</h2>
-      
+      <template v-if="dbUser?.dbUser">
-      <div v-if="dbUser?.dbUser">
+        <p class="mt-2 text-sm text-gray-500">
-        <button @click.prevent="doJoin()">Join</button>
+          Click below to request to Join the team. 
+          Your request to join will remain as 'Pending' 
+          untill the team administrators complete their review.</p>
+          <p class="mt-2 text-sm text-gray-500">
+          If your requeste is approved, you will become a member of the team and 
+          will be able to switch to the team account at any time in order to share
+          the benefits of the team plan.
+        </p>
+        <div class="mt-6">
+          <button @click.prevent="doJoin()" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md
+                            shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700
+                            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+            Join
+          </button>
         </div>
-      <div v-else>
+      </template>
-        <NuxtLink to="/signup">Sign up to Join team</NuxtLink>
+      <template v-else>
-        <p>or</p>
+        <p class="m-5 text-sm text-gray-500">Only signed in users can join a team.  Please either Signup or Signin and then return to this page using the join link.</p>
-        <NuxtLink to="/signin">Sign in to Join team</NuxtLink>
+        <button @click.prevent="navigateTo('/signup')" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md
-      </div>
+                            shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700
-    </div>
+                            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-    <div v-else>
+          Sign Up
-      <h3>This does not appear to be a valid Join Link.  Please ask a Team administrator to re-generate and resend the Join link.</h3>
+        </button>
+        <div class="m-10"></div>
+        <button @click.prevent="navigateTo('/signin')" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md
+                            shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700
+                            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+          Sign In
+        </button>
+      </template>
     </div>
   </div>
 </template>

pages/notes/[note_id].vue

@@ -4,10 +4,9 @@ const { $client } = useNuxtApp();
 const { data: note } = await $client.notes.getById.useQuery({note_id: +route.params.note_id});
 </script>
 <template>
-  <div>
+  <div class="prose lg:prose-xl m-5">
     <h3>Note Detail {{ route.params.note_id }}</h3>
-    <pre>{{ note?.note.note_text }}</pre>
+    <div class="prose lg:prose-xl m-5">{{ note?.note.note_text }}</div>
 
-    <NuxtLink to="/notes/1">Back to Note 1 via an internal link (should not reload page)</NuxtLink>
   </div>
 </template>

pages/success.vue

@@ -13,10 +13,10 @@ try{
 </script>
 
 <template>
-  <div>
+  <div class="prose lg:prose-xl m-5">
     <p>
-      <span v-if="!customer.deleted">We appreciate your business {{customer.name}}!</span>
+      <span v-if="customer && !customer.deleted">We appreciate your business {{customer.name}}!</span>
-      <span v-if="customer.deleted">It appears your stripe customer information has been deleted!</span>
+      <span v-if="customer && customer.deleted">It appears your stripe customer information has been deleted!</span>
     </p>
     <p>Checkout our reasonable <NuxtLink to="/pricing">Pricing</NuxtLink></p>
   </div>