Modal template for deletion confirmation (#2190)

## Description

<!-- What changed? Why? (the code + comments should speak for itself on
the "how") -->

<!-- Fun screenshots or a cool video or something are super helpful as
well. If this touches platform-specific behavior, this is where test
evidence should be collected. -->

<!-- Any issues this pull request closes or pull requests this
supersedes should be linked with `Closes #issuenumber`. -->

This adds a template modal that can be used for confirming that the user
wants to delete something. The main goal is to reduce complication and
duplicated code, and standardize the way we handle deletion.

closes #2175

## Meta

Merge checklist:
- [x] Pull Request title is [short, imperative
summary](https://cbea.ms/git-commit/) of proposed changes
- [x] The description documents the _what_ and _why_
- [x] This PR has been
[linted](https://docs.photonvision.org/en/latest/docs/contributing/linting.html).
- [ ] If this PR changes behavior or adds a feature, user documentation
is updated
- [ ] If this PR touches photon-serde, all messages have been
regenerated and hashes have not changed unexpectedly
- [ ] If this PR touches configuration, this is backwards compatible
with settings back to v2025.3.2
- [ ] If this PR touches pipeline settings or anything related to data
exchange, the frontend typing is updated
- [ ] If this PR addresses a bug, a regression test for it is added

---------

Co-authored-by: Devolian <devondoyle@outlook.com>

photon-client/src/components/cameras/CameraCalibrationInfoCard.vue

@@ -5,6 +5,7 @@ import { useStateStore } from "@/stores/StateStore";
 import { computed, inject, ref } from "vue";
 import { axiosPost, getResolutionString, parseJsonFile } from "@/lib/PhotonUtils";
 import { useTheme } from "vuetify";
+import PvDeleteModal from "@/components/common/pv-delete-modal.vue";
 
 const theme = useTheme();
 
@@ -12,7 +13,7 @@ const props = defineProps<{
   videoFormat: VideoFormat;
 }>();
 
-const confirmRemoveDialog = ref({ show: false, vf: {} as VideoFormat });
+const confirmRemoveDialog = ref({ show: false, vf: props.videoFormat as VideoFormat });
 
 const removeCalibration = (vf: VideoFormat) => {
   axiosPost("/calibration/remove", "delete a camera calibration", {
@@ -20,8 +21,6 @@ const removeCalibration = (vf: VideoFormat) => {
     width: vf.resolution.width,
     height: vf.resolution.height
   });
-
-  confirmRemoveDialog.value.show = false;
 };
 
 const exportCalibration = ref();
@@ -110,17 +109,6 @@ const calibrationImageURL = (index: number) =>
         <v-card-title class="pa-0"> Calibration Details </v-card-title>
       </v-col>
       <v-col cols="12" md="6" class="d-flex align-center pt-0 pt-md-3">
-        <v-btn
-          color="error"
-          :disabled="!currentCalibrationCoeffs"
-          class="mr-2"
-          style="flex: 1"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-          @click="() => (confirmRemoveDialog = { show: true, vf: props.videoFormat })"
-        >
-          <v-icon start size="large">mdi-delete</v-icon>
-          <span>Delete</span>
-        </v-btn>
         <v-btn
           color="buttonPassive"
           class="mr-2"
@@ -140,6 +128,7 @@ const calibrationImageURL = (index: number) =>
         />
         <v-btn
           color="buttonPassive"
+          class="mr-2"
           :disabled="!currentCalibrationCoeffs"
           style="flex: 1"
           :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
@@ -154,6 +143,16 @@ const calibrationImageURL = (index: number) =>
           :href="exportCalibrationURL"
           target="_blank"
         />
+        <v-btn
+          color="error"
+          :disabled="!currentCalibrationCoeffs"
+          style="flex: 1"
+          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          @click="() => (confirmRemoveDialog = { show: true, vf: props.videoFormat })"
+        >
+          <v-icon start size="large">mdi-delete</v-icon>
+          <span>Delete</span>
+        </v-btn>
       </v-col>
     </div>
     <v-card-title class="pt-0 pb-0"
@@ -312,32 +311,13 @@ const calibrationImageURL = (index: number) =>
     </v-card-text>
   </v-card>
 
-  <v-dialog v-model="confirmRemoveDialog.show" width="600">
-    <v-card color="surface" dark>
-      <v-card-title>Delete Calibration</v-card-title>
-      <v-card-text class="pt-0">
-        Are you sure you want to delete the calibration for {{ confirmRemoveDialog.vf.resolution.width }}x{{
-          confirmRemoveDialog.vf.resolution.height
-        }}? This cannot be undone.
-        <v-card-actions class="pt-5 pb-0 pr-0" style="justify-content: flex-end">
-          <v-btn
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            color="primary"
-            @click="() => (confirmRemoveDialog.show = false)"
-          >
-            Cancel
-          </v-btn>
-          <v-btn
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            color="error"
-            @click="removeCalibration(confirmRemoveDialog.vf)"
-          >
-            Delete
-          </v-btn>
-        </v-card-actions>
-      </v-card-text>
-    </v-card>
-  </v-dialog>
+  <pv-delete-modal
+    v-model="confirmRemoveDialog.show"
+    :width="500"
+    :title="'Delete Calibration'"
+    :description="`Are you sure you want to delete the calibration for '${confirmRemoveDialog.vf.resolution.width}x${confirmRemoveDialog.vf.resolution.height}'? This action cannot be undone.`"
+    :on-confirm="() => removeCalibration(confirmRemoveDialog.vf)"
+  />
 </template>
 
 <style scoped>

photon-client/src/components/cameras/CameraSettingsCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import PvSelect, { type SelectItem } from "@/components/common/pv-select.vue";
-import PvInput from "@/components/common/pv-input.vue";
+import PvDeleteModal from "@/components/common/pv-delete-modal.vue";
 import PvNumberInput from "@/components/common/pv-number-input.vue";
 import PvSwitch from "@/components/common/pv-switch.vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
@@ -120,17 +120,9 @@ watchEffect(() => {
 });
 
 const showDeleteCamera = ref(false);
-const yesDeleteMySettingsText = ref("");
-const deletingCamera = ref(false);
 const deleteThisCamera = () => {
-  if (deletingCamera.value) return;
-  deletingCamera.value = true;
-
-  const payload = { cameraUniqueName: useStateStore().currentCameraUniqueName };
-
-  axiosPost("/utils/nukeOneCamera", "delete this camera", payload).finally(() => {
-    deletingCamera.value = false;
-    showDeleteCamera.value = false;
+  axiosPost("/utils/nukeOneCamera", "delete this camera", {
+    cameraUniqueName: useStateStore().currentCameraUniqueName
   });
 };
 const wrappedCameras = computed<SelectItem[]>(() =>
@@ -208,45 +200,13 @@ const wrappedCameras = computed<SelectItem[]>(() =>
       </v-col>
     </v-card-text>
 
-    <v-dialog v-model="showDeleteCamera" width="800">
-      <v-card color="surface" flat>
-        <v-card-title> Delete {{ useCameraSettingsStore().currentCameraSettings.nickname }}? </v-card-title>
-        <v-card-text class="pt-0 pb-10px">
-          Are you sure you want to delete "{{ useCameraSettingsStore().currentCameraSettings.nickname }}"? This cannot
-          be undone.
-        </v-card-text>
-        <v-card-text class="pt-0 pb-10px">
-          <pv-input
-            v-model="yesDeleteMySettingsText"
-            :label="'Type &quot;' + useCameraSettingsStore().currentCameraName + '&quot;:'"
-            :label-cols="6"
-            :input-cols="6"
-          />
-        </v-card-text>
-        <v-card-actions class="pa-5 pt-0">
-          <v-btn
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            color="primary"
-            class="text-black"
-            @click="showDeleteCamera = false"
-          >
-            Cancel
-          </v-btn>
-          <v-btn
-            color="error"
-            :disabled="
-              yesDeleteMySettingsText.toLowerCase() !== useCameraSettingsStore().currentCameraName.toLowerCase()
-            "
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            :loading="deletingCamera"
-            @click="deleteThisCamera"
-          >
-            <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
-            <span class="open-label">Delete</span>
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+    <pv-delete-modal
+      v-model="showDeleteCamera"
+      title="Delete Camera"
+      :description="`Are you sure you want to delete the camera '${useCameraSettingsStore().currentCameraSettings.nickname}'? This action cannot be undone.`"
+      :expected-confirmation-text="useCameraSettingsStore().currentCameraSettings.nickname"
+      :on-confirm="deleteThisCamera"
+    />
   </v-card>
 </template>
 

photon-client/src/components/common/pv-delete-modal.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useTheme } from "vuetify";
+import pvInput from "./pv-input.vue";
+
+const theme = useTheme();
+
+const value = defineModel<boolean | undefined>({ required: true });
+
+const props = withDefaults(
+  defineProps<{
+    expectedConfirmationText?: string;
+    onBackup?: () => void;
+    onConfirm: () => void;
+    title: string;
+    description?: string;
+    deleteText?: string;
+    width?: number;
+  }>(),
+  {
+    width: 700
+  }
+);
+
+const confirmationText = ref("");
+</script>
+
+<template>
+  <v-dialog v-model="value" :width="props.width" dark>
+    <v-card color="surface" flat>
+      <v-card-title style="display: flex; justify-content: center">
+        {{ title }}
+      </v-card-title>
+      <v-card-text class="pt-0 pb-10px">
+        <span> {{ description }} </span>
+      </v-card-text>
+      <v-card-text v-if="expectedConfirmationText" class="pt-0 pb-0">
+        <pv-input
+          v-model="confirmationText"
+          :label="'Type &quot;' + expectedConfirmationText + '&quot;:'"
+          :label-cols="6"
+          :input-cols="6"
+        />
+      </v-card-text>
+      <v-card-text class="pt-10px">
+        <v-row class="align-center text-white">
+          <v-col v-if="onBackup" cols="6">
+            <v-btn
+              color="buttonActive"
+              style="float: right"
+              width="100%"
+              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+              @click="onBackup"
+            >
+              <v-icon start class="open-icon" size="large"> mdi-export </v-icon>
+              <span class="open-label">Backup Data</span>
+            </v-btn>
+          </v-col>
+          <v-col v-if="description" :cols="onBackup ? '6' : '12'">
+            <v-btn
+              color="error"
+              width="100%"
+              :disabled="
+                expectedConfirmationText
+                  ? confirmationText.toLowerCase() !== expectedConfirmationText.toLowerCase()
+                  : false
+              "
+              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+              @click="
+                onConfirm();
+                confirmationText = '';
+                value = false;
+              "
+            >
+              <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
+              <span class="open-label">
+                {{ deleteText ?? title }}
+              </span>
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>

photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue

@@ -9,6 +9,7 @@ import PvInput from "@/components/common/pv-input.vue";
 import { PipelineType } from "@/types/PipelineTypes";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 import { useTheme } from "vuetify";
+import PvDeleteModal from "@/components/common/pv-delete-modal.vue";
 
 const theme = useTheme();
 
@@ -422,33 +423,13 @@ const wrappedCameras = computed<SelectItem[]>(() =>
         </v-card-actions>
       </v-card>
     </v-dialog>
-    <v-dialog v-model="showPipelineDeletionConfirmationDialog" width="500">
-      <v-card color="surface">
-        <v-card-title class="pb-0">Delete Pipeline</v-card-title>
-        <v-card-text>
-          Are you sure you want to delete
-          <span style="color: white">"{{ useCameraSettingsStore().currentPipelineSettings.pipelineNickname }}"</span>?
-          This cannot be undone.
-        </v-card-text>
-        <v-card-actions class="pa-5 pt-0">
-          <v-btn
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            color="primary"
-            class="text-black"
-            @click="showPipelineDeletionConfirmationDialog = false"
-          >
-            Cancel
-          </v-btn>
-          <v-btn
-            color="error"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            @click="confirmDeleteCurrentPipeline"
-          >
-            Delete
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+    <pv-delete-modal
+      v-model="showPipelineDeletionConfirmationDialog"
+      :width="500"
+      title="Delete Pipeline"
+      description="Are you sure you want to delete the current pipeline? This action cannot be undone."
+      :on-confirm="confirmDeleteCurrentPipeline"
+    />
     <v-dialog v-model="showPipelineTypeChangeDialog" persistent width="600">
       <v-card color="surface" dark>
         <v-card-title class="pb-0">Change Pipeline Type</v-card-title>

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

@@ -2,7 +2,7 @@
 import { inject, ref } from "vue";
 import { useStateStore } from "@/stores/StateStore";
 import PvSelect from "@/components/common/pv-select.vue";
-import PvInput from "@/components/common/pv-input.vue";
+import PvDeleteModal from "@/components/common/pv-delete-modal.vue";
 import { useTheme } from "vuetify";
 import { axiosPost } from "@/lib/PhotonUtils";
 
@@ -113,12 +113,8 @@ const handleSettingsImport = () => {
 };
 
 const showFactoryReset = ref(false);
-const expected = "Delete Everything";
-const yesDeleteMySettingsText = ref("");
 const nukePhotonConfigDirectory = () => {
   axiosPost("/utils/nukeConfigDirectory", "delete the config directory");
-
-  showFactoryReset.value = false;
 };
 </script>
 
@@ -280,63 +276,15 @@ const nukePhotonConfigDirectory = () => {
         </v-col>
       </v-row>
     </div>
-    <v-dialog v-model="showFactoryReset" width="800" dark>
-      <v-card color="surface" flat>
-        <v-card-title style="display: flex; justify-content: center">
-          <span class="open-label">
-            <v-icon end color="red" class="open-icon ma-1" size="large">mdi-alert-outline</v-icon>
-            Factory Reset PhotonVision
-            <v-icon end color="red" class="open-icon ma-1" size="large">mdi-alert-outline</v-icon>
-          </span>
-        </v-card-title>
-        <v-card-text class="pt-0 pb-10px">
-          <v-row class="align-center text-white">
-            <v-col cols="12" md="6">
-              <span> This will delete ALL OF YOUR SETTINGS and restart PhotonVision. </span>
-            </v-col>
-            <v-col cols="12" md="6">
-              <v-btn
-                color="primary"
-                style="float: right"
-                :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-                @click="openExportSettingsPrompt"
-              >
-                <v-icon start class="open-icon" size="large"> 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-card-text>
-        <v-card-text class="pt-0 pb-0">
-          <pv-input
-            v-model="yesDeleteMySettingsText"
-            :label="'Type &quot;' + expected + '&quot;:'"
-            :label-cols="6"
-            :input-cols="6"
-          />
-        </v-card-text>
-        <v-card-text class="pt-10px">
-          <v-btn
-            color="error"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            :disabled="yesDeleteMySettingsText.toLowerCase() !== expected.toLowerCase()"
-            @click="nukePhotonConfigDirectory"
-          >
-            <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
-            <span class="open-label">
-              {{ $vuetify.display.mdAndUp ? "Delete everything, I have backed up what I need" : "Delete Everything" }}
-            </span>
-          </v-btn>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
+    <pv-delete-modal
+      v-model="showFactoryReset"
+      title="Factory Reset PhotonVision"
+      description="This will delete all settings and configurations stored on this device, including network settings. This action cannot be undone."
+      expected-confirmation-text="Delete Everything"
+      :on-confirm="nukePhotonConfigDirectory"
+      :on-backup="openExportSettingsPrompt"
+      delete-text="Factory reset"
+    />
   </v-card>
 </template>
 

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

@@ -2,8 +2,8 @@
 import { ref, computed, inject } from "vue";
 import { useStateStore } from "@/stores/StateStore";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
-import type { ObjectDetectionModelProperties } from "@/types/SettingTypes";
-import pvInput from "@/components/common/pv-input.vue";
+import { type ObjectDetectionModelProperties } from "@/types/SettingTypes";
+import PvDeleteModal from "@/components/common/pv-delete-modal.vue";
 import { useTheme } from "vuetify";
 import { axiosPost } from "@/lib/PhotonUtils";
 
@@ -73,17 +73,9 @@ const handleImport = async () => {
 };
 
 const deleteModel = async (model: ObjectDetectionModelProperties) => {
-  useStateStore().showSnackbarMessage({
-    message: "Deleting Object Detection Model...",
-    color: "secondary",
-    timeout: -1
-  });
-
   axiosPost("/objectdetection/delete", "delete an object detection model", {
     modelPath: model.modelPath
   });
-
-  confirmDeleteDialog.value.show = false;
 };
 
 const renameModel = async (model: ObjectDetectionModelProperties, newName: string) => {
@@ -123,11 +115,8 @@ const openExportIndividualModelPrompt = () => {
 };
 
 const showNukeDialog = ref(false);
-const expected = "Delete Models";
-const yesDeleteMyModelsText = ref("");
 const nukeModels = () => {
   axiosPost("/objectdetection/nuke", "clear and reset object detection models");
-  showNukeDialog.value = false;
 };
 
 const showBulkImportDialog = ref(false);
@@ -378,35 +367,20 @@ const handleBulkImport = () => {
             </tbody>
           </v-table>
 
-          <v-dialog v-model="confirmDeleteDialog.show" width="600">
-            <v-card color="surface" dark>
-              <v-card-title>Delete Object Detection Model</v-card-title>
-              <v-card-text class="pt-0">
-                Are you sure you want to delete the model {{ confirmDeleteDialog.model.nickname }}?
-                <v-card-actions class="pt-5 pb-0 pr-0" style="justify-content: flex-end">
-                  <v-btn
-                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-                    color="buttonPassive"
-                    @click="confirmDeleteDialog.show = false"
-                  >
-                    Cancel
-                  </v-btn>
-                  <v-btn
-                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-                    color="error"
-                    @click="deleteModel(confirmDeleteDialog.model)"
-                  >
-                    Delete
-                  </v-btn>
-                </v-card-actions>
-              </v-card-text>
-            </v-card>
-          </v-dialog>
+          <pv-delete-modal
+            v-model="confirmDeleteDialog.show"
+            :width="500"
+            :on-confirm="() => deleteModel(confirmDeleteDialog.model)"
+            title="Delete Object Detection Model"
+            :description="`Are you sure you want to delete the model ${confirmDeleteDialog.model.nickname}?`"
+            delete-text="Delete model"
+          />
+
           <v-dialog v-model="showRenameDialog.show" width="600">
             <v-card color="surface" dark>
               <v-card-title>Rename Object Detection Model</v-card-title>
               <v-card-text class="pt-0">
-                Enter a new name for the model {{ showRenameDialog.model.nickname }}:
+                Enter a new name for the model "{{ showRenameDialog.model.nickname }}":
                 <div class="pa-5 pb-0">
                   <v-text-field v-model="showRenameDialog.newName" hide-details label="New Name" variant="underlined" />
                 </div>
@@ -462,64 +436,15 @@ const handleBulkImport = () => {
       </v-row>
     </div>
 
-    <v-dialog v-model="showNukeDialog" width="800" dark>
-      <v-card color="surface" flat>
-        <v-card-title style="display: flex; justify-content: center">
-          <span class="open-label">
-            <v-icon end color="error" class="open-icon ma-1" size="large">mdi-alert-outline</v-icon>
-            Clear and Reset Object Detection Models
-            <v-icon end color="error" class="open-icon ma-1" size="large">mdi-alert-outline</v-icon>
-          </span>
-        </v-card-title>
-        <v-card-text class="pt-0 pb-10px">
-          <v-row class="align-center text-white">
-            <v-col cols="12" md="6">
-              <span> This will delete ALL OF YOUR MODELS and re-extract the default models. </span>
-            </v-col>
-            <v-col cols="12" md="6">
-              <v-btn
-                color="buttonActive"
-                style="float: right"
-                :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-                @click="openExportPrompt"
-              >
-                <v-icon start class="open-icon" size="large"> mdi-export </v-icon>
-                <span class="open-label">Backup Models</span>
-                <a
-                  ref="exportModels"
-                  style="color: black; text-decoration: none; display: none"
-                  :href="`http://${address}/api/objectdetection/export`"
-                  download="photonvision-object-detection-models-export.zip"
-                  target="_blank"
-                />
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-card-text>
-        <v-card-text class="pt-0 pb-0">
-          <pv-input
-            v-model="yesDeleteMyModelsText"
-            :label="'Type &quot;' + expected + '&quot;:'"
-            :label-cols="6"
-            :input-cols="6"
-          />
-        </v-card-text>
-        <v-card-text class="pt-10px">
-          <v-btn
-            color="error"
-            width="100%"
-            :disabled="yesDeleteMyModelsText.toLowerCase() !== expected.toLowerCase()"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            @click="nukeModels"
-          >
-            <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
-            <span class="open-label">
-              {{ $vuetify.display.mdAndUp ? "Delete models, I have backed up what I need" : "Delete Models" }}
-            </span>
-          </v-btn>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
+    <pv-delete-modal
+      v-model="showNukeDialog"
+      :on-backup="openExportPrompt"
+      :on-confirm="nukeModels"
+      title="Delete and Reset All Object Detection Models"
+      :description="'This will delete ALL object detection models and re-extract the default object detection models. This action cannot be undone.'"
+      :expected-confirmation-text="'Delete Models'"
+      delete-text="Delete all models"
+    />
   </v-card>
 </template>
 

photon-client/src/views/CameraMatchingView.vue

@@ -7,15 +7,13 @@ import {
   PVCameraInfo,
   type PVCSICameraInfo,
   type PVFileCameraInfo,
-  type PVUsbCameraInfo,
-  type UiCameraConfiguration
+  type PVUsbCameraInfo
 } from "@/types/SettingTypes";
 import { axiosPost, getResolutionString } from "@/lib/PhotonUtils";
 import PhotonCameraStream from "@/components/app/photon-camera-stream.vue";
-import PvInput from "@/components/common/pv-input.vue";
+import PvDeleteModal from "@/components/common/pv-delete-modal.vue";
 import PvCameraInfoCard from "@/components/common/pv-camera-info-card.vue";
 import PvCameraMatchCard from "@/components/common/pv-camera-match-card.vue";
-import type { WebsocketCameraSettingsUpdate } from "@/types/WebsocketDataTypes";
 import { useTheme } from "vuetify";
 
 const theme = useTheme();
@@ -55,17 +53,14 @@ const deactivateModule = (cameraUniqueName: string) => {
   );
 };
 
-const deletingCamera = ref(false);
-const deleteThisCamera = (cameraName: string) => {
-  if (deletingCamera.value) return;
-  deletingCamera.value = true;
-  const payload = {
-    cameraUniqueName: cameraName
-  };
+const confirmDeleteDialog = ref({ show: false, nickname: "", cameraUniqueName: "" });
+const deletingCamera = ref<string | null>(null);
 
-  axiosPost("/utils/nukeOneCamera", "delete a camera", payload).finally(() => {
-    setCameraDeleting(null);
-    deletingCamera.value = false;
+const deleteThisCamera = (cameraUniqueName: string) => {
+  if (deletingCamera.value) return;
+  deletingCamera.value = cameraUniqueName;
+  axiosPost("/utils/nukeOneCamera", "delete a camera", { cameraUniqueName: cameraUniqueName }).finally(() => {
+    deletingCamera.value = null;
   });
 };
 
@@ -110,15 +105,6 @@ const setCameraView = (camera: PVCameraInfo | null, isConnected: boolean | null)
   viewingCamera.value = [camera, isConnected];
 };
 
-const viewingDeleteCamera = ref(false);
-const cameraToDelete = ref<UiCameraConfiguration | WebsocketCameraSettingsUpdate | null>(null);
-const setCameraDeleting = (camera: UiCameraConfiguration | WebsocketCameraSettingsUpdate | null) => {
-  yesDeleteMySettingsText.value = "";
-  viewingDeleteCamera.value = camera !== null;
-  cameraToDelete.value = camera;
-};
-const yesDeleteMySettingsText = ref("");
-
 /**
  * Get the connection-type-specific camera info from the given PVCameraInfo object.
  */
@@ -274,8 +260,16 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
                   class="pa-0"
                   color="error"
                   style="width: 100%"
+                  :loading="module.uniqueName === deletingCamera"
                   :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-                  @click="setCameraDeleting(module)"
+                  @click="
+                    () =>
+                      (confirmDeleteDialog = {
+                        show: true,
+                        nickname: module.nickname,
+                        cameraUniqueName: module.uniqueName
+                      })
+                  "
                 >
                   <v-icon size="x-large">mdi-trash-can-outline</v-icon>
                 </v-btn>
@@ -360,8 +354,16 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
                   class="pa-0"
                   color="error"
                   style="width: 100%"
+                  :loading="module.uniqueName === deletingCamera"
                   :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-                  @click="setCameraDeleting(module)"
+                  @click="
+                    () =>
+                      (confirmDeleteDialog = {
+                        show: true,
+                        nickname: module.nickname,
+                        cameraUniqueName: module.uniqueName
+                      })
+                  "
                 >
                   <v-icon size="x-large">mdi-trash-can-outline</v-icon>
                 </v-btn>
@@ -465,43 +467,13 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
       </v-card>
     </v-dialog>
 
-    <!-- Camera delete modal -->
-    <v-dialog v-model="viewingDeleteCamera" width="800">
-      <v-card v-if="cameraToDelete !== null" class="dialog-container" color="surface" flat>
-        <v-card-title> Delete {{ cameraToDelete.nickname }}? </v-card-title>
-        <v-card-text class="pb-10px">
-          Are you sure you want to delete "{{ cameraToDelete.nickname }}"? This cannot be undone.
-        </v-card-text>
-        <v-card-text class="pt-0 pb-10px">
-          <pv-input
-            v-model="yesDeleteMySettingsText"
-            :label="'Type &quot;' + cameraToDelete.nickname + '&quot;:'"
-            :label-cols="6"
-            :input-cols="6"
-          />
-        </v-card-text>
-        <v-card-actions class="pa-5 pt-0">
-          <v-btn
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            color="primary"
-            class="text-black"
-            @click="cameraToDelete = null"
-          >
-            Cancel
-          </v-btn>
-          <v-btn
-            color="error"
-            :disabled="yesDeleteMySettingsText.toLowerCase() !== cameraToDelete.nickname.toLowerCase()"
-            :loading="deletingCamera"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            @click="deleteThisCamera(cameraToDelete.uniqueName)"
-          >
-            <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
-            <span class="open-label">Delete</span>
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+    <pv-delete-modal
+      v-model="confirmDeleteDialog.show"
+      title="Delete Camera"
+      :description="`Are you sure you want to delete the camera '${useCameraSettingsStore().currentCameraSettings.nickname}'? This action cannot be undone.`"
+      :expected-confirmation-text="confirmDeleteDialog.nickname"
+      :on-confirm="() => deleteThisCamera(confirmDeleteDialog.cameraUniqueName)"
+    />
   </div>
 </template>