Add per user mock upload toggle with warnings

frontend/App.vue

@@ -54,7 +54,21 @@
 
       <div class="card w-100 bg-light mb-2">
         <div class="card-body">
-          <p class="card-text">{{ edits.length }} edits to upload</p>
+
+          <template v-if="upload_state === undefined">
+            <div v-if="mockUpload" class="alert alert-danger">
+              <i class="fa fa-exclamation-triangle"></i>
+              Changes won't be saved to OpenStreetMap. This software uses a mock upload process to allow testing of the user interface, while it is still in development.
+            </div>
+            <div v-else class="alert alert-info">
+              <i class="fa fa-info-circle"></i>
+              Editing is live, changes will be uploaded to OpenStreetMap.
+            </div>
+          </template>
+
+          <p class="card-text">
+            {{ edits.length + (edits.length == 1 ? " edit" : " edits") }} to upload
+          </p>
           <form @submit.prevent="upload">
             <div class="mb-3">
               <label for="changesetComment" class="form-label">Changeset comment</label>
@@ -590,6 +604,7 @@ export default {
     startMode: String,
     q: String,
     defaultComment: String,
+    mockUpload: Boolean,
   },
   data() {
     return {

matcher/model.py

@@ -327,6 +327,7 @@ class User(Base, UserMixin):
     multi = Column(String)
     units = Column(String)
     wikipedia_tag = Column(Boolean, default=False)
+    mock_upload = Column(Boolean, default=True)
 
     osm_id = Column(Integer, index=True)
     osm_account_created = Column(DateTime)

templates/map.html

@@ -28,6 +28,7 @@
         username: {{ username | tojson }},
         startMode: {{ mode | tojson }},
         q: {{ q | tojson }},
+        mockUpload: {{ g.user.is_authenticated and g.user.mock_upload | tojson }},
       };
 
       const app = createApp(App, props).mount('#app');