Make import overwrite off by default and add warning (#2078)

* Move CSV example rendering to code to get around breaking auto-formatter.
* Improve overwrite confirmation logic.

---------

Co-authored-by: Kailash Nadh <kailash@nadh.in>

docs/swagger/collections.yaml

@@ -2487,6 +2487,8 @@ components:
               type: string
             import.subscribe:
               type: string
+            import.subscribeWarning:
+              type: string
             import.title:
               type: string
             import.upload:

frontend/src/views/Import.vue

@@ -6,7 +6,7 @@
     <b-loading :active="isLoading" />
 
     <section v-if="isFree()" class="wrap">
-      <form @submit.prevent="onSubmit" class="box">
+      <form @submit.prevent="onUpload" class="box">
         <div>
           <div class="columns">
             <div class="column">
@@ -93,12 +93,8 @@
         </h5>
         <p>{{ $t('import.instructionsHelp') }}</p>
         <br />
-        <blockquote className="csv-example">
+        <blockquote class="csv-example">
-          <code className="csv-headers">
+          <code class="csv-headers"> <span>email,</span> <span>name,</span> <span>attributes</span></code>
-              <span>email,</span>
-              <span>name,</span>
-              <span>attributes</span>
-            </code>
         </blockquote>
 
         <hr />
@@ -106,23 +102,8 @@
         <h5 class="title is-size-6">
           {{ $t('import.csvExample') }}
         </h5>
-        <blockquote className="csv-example">
+
-          <code className="csv-headers">
+        <pre class="csv-example" v-text="example" />
-              <span>email,</span>
-              <span>name,</span>
-              <span>attributes</span>
-            </code><br />
-          <code className="csv-row">
-              <span>user1@mail.com,</span>
-              <span>"User One",</span>
-              <span>"{""age"": 42, ""planet"": ""Mars""}"</span>
-            </code><br />
-          <code className="csv-row">
-              <span>user2@mail.com,</span>
-              <span>"User Two",</span>
-              <span>"{""age"": 24, ""job"": ""Time Traveller""}"</span>
-            </code>
-        </blockquote>
       </div>
     </section><!-- upload //-->
 
@@ -175,8 +156,9 @@ export default Vue.extend({
         subStatus: 'unconfirmed',
         delim: ',',
         lists: [],
-        overwrite: true,
+        overwrite: false,
         file: null,
+        example: '',
       },
 
       // Initial page load still has to wait for the status API to return
@@ -295,6 +277,32 @@ export default Vue.extend({
       });
     },
 
+    renderExample() {
+      const h = 'email, name, attributes\n'
+        + 'user1 @mail.com, "User One", "{""age"": 42, ""planet"": ""Mars""}"\n'
+        + 'user2 @mail.com, "User Two", "{""age"": 24, ""job"": ""Time Traveller""}"';
+
+      this.example = h;
+    },
+
+    resetForm() {
+      this.form.mode = 'subscribe';
+      this.form.overwrite = false;
+      this.form.file = null;
+      this.form.lists = [];
+      this.form.subStatus = 'unconfirmed';
+      this.form.delim = ',';
+    },
+
+    onUpload() {
+      if (this.form.mode === 'subscribe' && this.form.overwrite) {
+        this.$utils.confirm(this.$t('import.subscribeWarning'), this.onSubmit, this.resetForm);
+        return;
+      }
+
+      this.onSubmit();
+    },
+
     onSubmit() {
       this.isProcessing = true;
 
@@ -336,6 +344,7 @@ export default Vue.extend({
   },
 
   mounted() {
+    this.renderExample();
     this.pollStatus();
 
     const ids = this.$utils.parseQueryIDs(this.$route.query.list_id);

i18n/en.json

@@ -259,6 +259,7 @@
     "import.recordsCount": "{num} / {total} records",
     "import.stopImport": "Stop import",
     "import.subscribe": "Subscribe",
+    "import.subscribeWarning":"Overwriting will re-subscribe unusbscribed e-mails. Continue?",
     "import.title": "Import subscribers",
     "import.upload": "Upload",
     "lists.confirmDelete": "Are you sure? This does not delete subscribers.",