From a50fd555cf33c709e80fbd20f6cd6d5e246ab5be Mon Sep 17 00:00:00 2001
From: Mackenzie <macoafi@gmail.com>
Date: Wed, 16 Dec 2020 04:52:47 -0500
Subject: [PATCH] Prevent choosing a date before site was added in datepicker
 (#477)

Fixes #446
---
 CHANGELOG.md                                     | 1 +
 assets/js/dashboard/datepicker.js                | 4 +++-
 assets/js/dashboard/mount.js                     | 3 ++-
 lib/plausible_web/templates/stats/stats.html.eex | 2 +-
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6ea96e751..6f988bc44 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,6 +27,7 @@ All notable changes to this project will be documented in this file.
 - Going back in history now correctly resets the period filter plausible/analytics#408
 - Fix URL decoding in query parameters plausible/analytics#416
 - Fix overly-sticky date in query parameters plausible/analytics/#439
+- Prevent picking dates before site insertion plausible/analtics#446
 
 ### Security
 - Do not run the plausible Docker container as root plausible/analytics#362
diff --git a/assets/js/dashboard/datepicker.js b/assets/js/dashboard/datepicker.js
index 4dacd3f7f..5f6d74726 100644
--- a/assets/js/dashboard/datepicker.js
+++ b/assets/js/dashboard/datepicker.js
@@ -214,7 +214,9 @@ class DatePicker extends React.Component {
         </div>
       )
     } else if (this.state.mode === 'calendar') {
-      return <Flatpickr options={{mode: 'range', maxDate: 'today', showMonths: 1, static: true, animate: false}} ref={calendar => this.calendar = calendar} className="invisible" onChange={this.setCustomDate.bind(this)} />
+      const insertionDate = new Date(this.props.site.insertedAt);
+      const dayBeforeCreation = insertionDate - 86400000;
+      return <Flatpickr options={{mode: 'range', maxDate: 'today', minDate: dayBeforeCreation, showMonths: 1, static: true, animate: false}} ref={calendar => this.calendar = calendar} className="invisible" onChange={this.setCustomDate.bind(this)} />
     }
   }
 
diff --git a/assets/js/dashboard/mount.js b/assets/js/dashboard/mount.js
index 8357e707f..2b93c539e 100644
--- a/assets/js/dashboard/mount.js
+++ b/assets/js/dashboard/mount.js
@@ -11,7 +11,8 @@ if (container) {
   const site = {
     domain: container.dataset.domain,
     offset: container.dataset.offset,
-    hasGoals: container.dataset.hasGoals === 'true'
+    hasGoals: container.dataset.hasGoals === 'true',
+    insertedAt: container.dataset.insertedAt
   }
 
   const loggedIn = container.dataset.loggedIn === 'true'
diff --git a/lib/plausible_web/templates/stats/stats.html.eex b/lib/plausible_web/templates/stats/stats.html.eex
index 4f0174d47..b9b806488 100644
--- a/lib/plausible_web/templates/stats/stats.html.eex
+++ b/lib/plausible_web/templates/stats/stats.html.eex
@@ -5,7 +5,7 @@
     </div>
   <% end %>
   <div class="pt-6"></div>
-  <div id="stats-react-container" data-domain="<%= @site.domain %>" data-offset="<%= Timex.Timezone.total_offset(Timex.Timezone.get(@site.timezone)) %>" data-has-goals="<%= @has_goals %>" data-logged-in="<%= !!@conn.assigns[:current_user] %>"></div>
+  <div id="stats-react-container" data-domain="<%= @site.domain %>" data-offset="<%= Timex.Timezone.total_offset(Timex.Timezone.get(@site.timezone)) %>" data-has-goals="<%= @has_goals %>" data-logged-in="<%= !!@conn.assigns[:current_user] %>" data-inserted-at="<%= @site.inserted_at %>"></div>
   <div id="modal_root"></div>
   <%= if !@conn.assigns[:current_user] && @conn.assigns[:demo] do %>
     <div class="bg-gray-50">