Big scary buttons (#1471)

photon-client/src/components/settings/DeviceControlCard.vue

@@ -201,6 +201,39 @@ const handleSettingsImport = () => {
   importType.value = -1;
   importFile.value = null;
 };
+
+const showFactoryReset = ref(false);
+const expected = "Delete Everything";
+const yesDeleteMySettingsText = ref("");
+const nukePhotonConfigDirectory = () => {
+  axios
+    .post("/utils/nukeConfigDirectory")
+    .then(() => {
+      useStateStore().showSnackbarMessage({
+        message: "Successfully dispatched the reset command. Waiting for backend to start back up",
+        color: "success"
+      });
+    })
+    .catch((error) => {
+      if (error.response) {
+        useStateStore().showSnackbarMessage({
+          message: "The backend is unable to fulfil the request to reset the device.",
+          color: "error"
+        });
+      } else if (error.request) {
+        useStateStore().showSnackbarMessage({
+          message: "Error while trying to process the request! The backend didn't respond.",
+          color: "error"
+        });
+      } else {
+        useStateStore().showSnackbarMessage({
+          message: "An error occurred while trying to process the request.",
+          color: "error"
+        });
+      }
+    });
+  showFactoryReset.value = false;
+};
 </script>
 
 <template>
@@ -322,11 +355,85 @@ const handleSettingsImport = () => {
           </v-btn>
         </v-col>
       </v-row>
+      <v-divider style="margin: 12px 0" />
+      <v-row>
+        <v-col cols="12">
+          <v-btn color="red" @click="() => (showFactoryReset = true)">
+            <v-icon left class="open-icon"> mdi-skull-crossbones </v-icon>
+            <span class="open-icon">
+              {{
+                $vuetify.breakpoint.mdAndUp
+                  ? "Factory Reset PhotonVision and delete EVERYTHING (big scary button)"
+                  : "Factory Reset PhotonVision"
+              }}
+            </span>
+          </v-btn>
+        </v-col>
+      </v-row>
     </div>
+
+    <v-dialog v-model="showFactoryReset" width="1500" dark>
+      <v-card dark class="dialog-container pa-6" color="primary" flat>
+        <v-card-title>
+          <span class="open-label">
+            <v-icon right color="red" class="open-icon">mdi-nuke</v-icon>
+            Factory Reset PhotonVision
+            <v-icon right color="red" class="open-icon">mdi-nuke</v-icon>
+          </span>
+        </v-card-title>
+
+        <v-row class="pl-3 align-center pa-6">
+          <v-col cols="12" md="6">
+            <span class="mt-3"> This will delete ALL OF YOUR SETTINGS and restart PhotonVision. </span>
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-btn color="secondary" style="float: right" @click="openExportSettingsPrompt">
+              <v-icon left class="open-icon"> mdi-export </v-icon>
+              <span class="open-label">Backup Settings</span>
+              <a
+                ref="exportSettings"
+                style="color: black; text-decoration: none; display: none"
+                :href="`http://${address}/api/settings/photonvision_config.zip`"
+                download="photonvision-settings.zip"
+                target="_blank"
+              />
+            </v-btn>
+          </v-col>
+        </v-row>
+
+        <v-divider class="mt-4 mb-4" />
+
+        <v-row class="pl-3 align-center pa-6">
+          <v-col>
+            <pv-input
+              v-model="yesDeleteMySettingsText"
+              :label="'Type &quot;' + expected + '&quot;:'"
+              :label-cols="2"
+              :input-cols="10"
+            />
+          </v-col>
+        </v-row>
+
+        <v-btn
+          color="red"
+          :disabled="yesDeleteMySettingsText.toLowerCase() !== expected.toLowerCase()"
+          @click="nukePhotonConfigDirectory"
+        >
+          <v-icon left class="open-icon"> mdi-skull-crossbones </v-icon>
+          <span class="open-label">
+            {{ $vuetify.breakpoint.mdAndUp ? "Delete everything, I have backed up what I need" : "Delete Everything" }}
+          </span>
+        </v-btn>
+      </v-card>
+    </v-dialog>
   </v-card>
 </template>
 
 <style scoped>
+.dialog-container {
+  min-height: 300px !important;
+}
+
 .v-divider {
   border-color: white !important;
 }