Add face remove box

src/components/FaceDeleteModal.vue

@@ -0,0 +1,91 @@
+<template>
+    <NcModal
+        size="small"
+        @close="close"
+        :outTransition="true">
+
+        <div class="container">
+            <div class="head">
+                <span>{{ t('memories', 'Remove person') }}</span>
+            </div>
+
+            <span>{{ t('memories', 'Are you sure you want to remove {name}', { name }) }}</span>
+
+            <div class="buttons">
+                <NcButton @click="save" class="button" type="error">
+                    {{ t('memories', 'Delete') }}
+                </NcButton>
+            </div>
+        </div>
+    </NcModal>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Watch } from 'vue-property-decorator';
+import { NcButton, NcModal, NcTextField } from '@nextcloud/vue';
+import { showError } from '@nextcloud/dialogs'
+import GlobalMixin from '../mixins/GlobalMixin';
+import client from '../services/DavClient';
+
+@Component({
+    components: {
+        NcButton,
+        NcModal,
+        NcTextField,
+    }
+})
+export default class FaceDeleteModal extends Mixins(GlobalMixin) {
+    private user: string = "";
+    private name: string = "";
+
+    @Watch('$route')
+    async routeChange(from: any, to: any) {
+        this.refreshParams();
+    }
+
+    mounted() {
+        this.refreshParams();
+    }
+
+    public refreshParams() {
+        this.user = this.$route.params.user || '';
+        this.name = this.$route.params.name || '';
+    }
+
+    public async save() {
+		try {
+			await client.deleteFile(`/recognize/${this.user}/faces/${this.name}`)
+            this.$router.push({ name: 'people' });
+            this.close();
+		} catch (error) {
+            console.log(error);
+			showError(this.t('photos', 'Failed to delete {name}.', {
+                name: this.name,
+            }));
+		}
+    }
+
+    public close() {
+        this.$emit('close');
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+	margin: 20px;
+
+    .head {
+        font-weight: 500;
+    }
+}
+
+.buttons {
+    margin-top: 10px;
+    text-align: right;
+
+    button {
+        display: inline-block;
+    }
+}
+</style>

src/components/FaceEditModal.vue

@@ -2,9 +2,7 @@
     <NcModal
         size="small"
         @close="close"
-        :outTransition="true"
-        :hasNext="false"
-        :hasPrevious="false">
+        :outTransition="true">
 
         <div class="container">
             <div class="head">
@@ -20,7 +18,7 @@
             </div>
 
             <div class="buttons">
-                <NcButton @click="save" class="button" type="error">
+                <NcButton @click="save" class="button" type="primary">
                     {{ t('memories', 'Update') }}
                 </NcButton>
             </div>
@@ -42,7 +40,7 @@ import client from '../services/DavClient';
         NcTextField,
     }
 })
-export default class EditDate extends Mixins(GlobalMixin) {
+export default class FaceEditModal extends Mixins(GlobalMixin) {
     private user: string = "";
     private name: string = "";
     private oldName: string = "";

src/components/FaceTopMatter.vue

@@ -10,15 +10,20 @@
         <div class="name">{{ name }}</div>
 
         <div class="right-actions">
-            <NcActions>
+            <NcActions :inline="1">
                 <NcActionButton :aria-label="t('memories', 'Rename person')" @click="showEditModal=true">
                     {{ t('memories', 'Rename person') }}
                     <template #icon> <EditIcon :size="20" /> </template>
                 </NcActionButton>
+                <NcActionButton :aria-label="t('memories', 'Remove person')" @click="showDeleteModal=true">
+                    {{ t('memories', 'Remove person') }}
+                    <template #icon> <DeleteIcon :size="20" /> </template>
+                </NcActionButton>
             </NcActions>
         </div>
 
         <FaceEditModal v-if="showEditModal" @close="showEditModal=false" />
+        <FaceDeleteModal v-if="showDeleteModal" @close="showDeleteModal=false" />
     </div>
 </template>
 
@@ -28,21 +33,26 @@ import GlobalMixin from '../mixins/GlobalMixin';
 
 import { NcActions, NcActionButton } from '@nextcloud/vue';
 import FaceEditModal from './FaceEditModal.vue';
+import FaceDeleteModal from './FaceDeleteModal.vue';
 import BackIcon from 'vue-material-design-icons/ArrowLeft.vue';
 import EditIcon from 'vue-material-design-icons/Pencil.vue';
+import DeleteIcon from 'vue-material-design-icons/Close.vue';
 
 @Component({
     components: {
         NcActions,
         NcActionButton,
         FaceEditModal,
+        FaceDeleteModal,
         BackIcon,
         EditIcon,
+        DeleteIcon,
     },
 })
 export default class FaceTopMatter extends Mixins(GlobalMixin) {
     private name: string = '';
     private showEditModal: boolean = false;
+    private showDeleteModal: boolean = false;
 
     @Watch('$route')
     async routeChange(from: any, to: any) {