Alert for Draft Form

app/Http/Controllers/Forms/FormController.php

@@ -98,7 +98,7 @@ public function store(StoreFormRequest $request)
         ]));
 
         return $this->success([
-            'message' => $this->formCleaner->hasCleaned() ? 'Form successfully created, but the Pro features you used will be disabled when sharing your form:' : 'Form created.',
+            'message' => $this->formCleaner->hasCleaned() ? 'Form successfully created, but the Pro features you used will be disabled when sharing your form:' : 'Form created.' . ($form->visibility == 'draft' ? ' But other people won\'t be able to see the form since it\'s currently in draft mode' : ''),
             'form' => (new FormResource($form))->setCleanings($this->formCleaner->getPerformedCleanings()),
             'users_first_form' => $request->user()->forms()->count() == 1
         ]);
@@ -122,7 +122,7 @@ public function update(UpdateFormRequest $request, string $id)
         $form->update($formData);
 
         return $this->success([
-            'message' => $this->formCleaner->hasCleaned() ? 'Form successfully updated, but the Pro features you used will be disabled when sharing your form:' : 'Form updated.',
+            'message' => $this->formCleaner->hasCleaned() ? 'Form successfully updated, but the Pro features you used will be disabled when sharing your form:' : 'Form updated.' . ($form->visibility == 'draft' ? ' But other people won\'t be able to see the form since it\'s currently in draft mode' : ''),
             'form' => (new FormResource($form))->setCleanings($this->formCleaner->getPerformedCleanings()),
         ]);
     }

app/Models/Forms/Form.php

@@ -84,7 +84,10 @@ class Form extends Model
 
         // Security & Privacy
         'can_be_indexed',
-        'password'
+        'password',
+
+        // Custom SEO
+        'seo_meta'
     ];
 
     protected $casts = [

resources/js/components/open/forms/components/CopyContent.vue

@@ -29,6 +29,10 @@ export default {
       type: String,
       required: true
     },
+    isDraft: {
+      type: Boolean,
+      default: false
+    },
   },
 
   data() {
@@ -50,7 +54,8 @@ export default {
       el.select()
       document.execCommand('copy')
       document.body.removeChild(el)
-      this.alertSuccess('Copied!')
+      this.alertSuccess((this.isDraft) ? 'Copied! But other people won\'t be able to see the form since it\'s currently in draft mode' : 'Copied!')
+
     }
   }
 }

resources/js/components/pages/forms/show/ShareLink.vue

@@ -3,7 +3,7 @@
       <h3 class="font-semibold text-xl">Share Link</h3>
       <p>Your form is now published and ready to be shared with the world! Copy this link to share your form
           on social media, messaging apps or via email.</p>
-      <copy-content :content="share_url">
+      <copy-content :content="share_url" :is-draft="form.visibility=='draft'">
         <template #icon>
           <svg class="h-4 w-4 -mt-1 text-blue-600 inline mr-1" viewBox="0 0 20 10" fill="none"
                   xmlns="http://www.w3.org/2000/svg">

resources/js/mixins/forms/saveUpdateAlert.js

@@ -1,7 +1,7 @@
 export default {
   methods: {
     displayFormModificationAlert (responseData) {
-      if (responseData.form.cleanings && Object.keys(responseData.form.cleanings).length > 0) {
+      if (responseData.form && responseData.form.cleanings && Object.keys(responseData.form.cleanings).length > 0) {
         this.alertWarning(responseData.message)
       } else {
         this.alertSuccess(responseData.message)

resources/js/pages/forms/show/index.vue

@@ -49,10 +49,20 @@
               <span class="pr-1">- {{ form.submissions_count }}
                 submission{{ form.submissions_count > 0 ? 's' : '' }}
               </span>
-              <span class="text-blue-500" v-if="form.visibility=='draft'">- Draft (not public)</span>
               <span class="pr-1 text-blue-500" v-if="form.visibility=='closed'">- Closed</span>
               <span class="">- Edited {{ form.last_edited_human }}</span>
             </p>
+            <div v-if="form.visibility=='draft' || (form.tags && form.tags.length > 0)" class="mt-2 flex items-center flex-wrap gap-3">
+              <span v-if="form.visibility=='draft'" 
+                  class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700">
+                Draft - not publicly accessible
+              </span>
+              <span v-for="(tag,i) in form.tags" :key="tag"
+                  class="inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
+              >
+                {{ tag }}
+              </span>
+            </div>
 
             <p v-if="form.closes_at" class="text-yellow-500">
               <span v-if="form.is_closed"> This form stopped accepting submissions on the  {{

resources/js/pages/home.vue

@@ -24,11 +24,15 @@
           <text-input v-if="forms.length > 0" class="mb-6" :form="searchForm" name="search" label="Search a form"
                 placeholder="Name of form to search"
           />
-          <div v-if="allTags.length > 0" class="mb-6">
+          <div v-if="allTags.length > 0" class="mb-4">
             <div v-for="tag in allTags" :key="tag"
-                :class="['text-white p-2 text-xs inline rounded-lg font-semibold cursor-pointer mr-2',{'bg-gray-500 dark:bg-gray-400':selectedTags.includes(tag), 'bg-gray-300 dark:bg-gray-700':!selectedTags.includes(tag)}]"
-                title="Click for filter by tag(s)"
-                @click="onTagClick(tag)"
+                 :class="[
+                   'inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset cursor-pointer mr-2',
+                   {'bg-blue-50 text-blue-600 ring-blue-500/10 dark:bg-blue-400':selectedTags.includes(tag),
+                    'bg-gray-50 text-gray-600 ring-gray-500/10 dark:bg-gray-700 hover:bg-blue-50 hover:text-blue-600 hover:ring-blue-500/10 hover:dark:bg-blue-400':!selectedTags.includes(tag)}
+                 ]"
+                 title="Click for filter by tag(s)"
+                 @click="onTagClick(tag)"
             >
               {{ tag }}
             </div>
@@ -59,22 +63,18 @@
                     <li class="list-disc ml-6 pr-1">{{ form.submissions_count }}
                       submission{{ form.submissions_count > 0 ? 's' : '' }}
                     </li>
-                    <li class="list-disc ml-6 pr-1 text-blue-500" v-if="form.visibility=='draft'">Draft (not public)</li>
                     <li class="list-disc ml-6">Edited {{ form.last_edited_human }}</li>
                   </ul>
-                  <div v-if="form.tags && form.tags.length > 0" class="mt-1">
-                    <template v-for="(tag,i) in form.tags">
-                      <div v-if="i<1" :key="tag"
-                          class="bg-gray-300 dark:bg-gray-700 text-white px-2 py-1 mr-2 text-xs inline rounded-lg font-semibold"
-                      >
-                        {{ tag }}
-                      </div>
-                      <div v-if="i==1" :key="tag"
-                          class="bg-gray-300 dark:bg-gray-700 text-white px-2 py-1 mr-2 text-xs inline rounded-lg font-semibold"
-                      >
-                        {{ form.tags.length-1 }} more
-                      </div>
-                    </template>
+                  <div v-if="form.visibility=='draft' || (form.tags && form.tags.length > 0)" class="mt-1 flex items-center flex-wrap gap-3">
+                    <span v-if="form.visibility=='draft'" 
+                        class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700">
+                      Draft
+                    </span>
+                    <span v-for="(tag,i) in form.tags" :key="tag"
+                        class="inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
+                    >
+                      {{ tag }}
+                    </span>
                   </div>
                 </div>
                 <extra-menu :form="form" :isMainPage="true" />