Require confirmation before deleting a conversation

Signed-off-by: Joas Schilling <coding@schilljs.com>

css/icons.scss

@@ -70,6 +70,14 @@
 		/* Show favorite icon in yellow instead of default black. */
 		@include icon-color('star-dark', 'actions', 'FC0', 1, true);
 	}
+
+	.icon-delete-critical {
+		@include icon-color('delete', 'actions', $color-error, 1, true);
+		&:hover,
+		&:focus {
+			filter: initial;
+		}
+	}
 }
 
 // The atwho panel is a direct child of the body, so it is not affected by

src/components/LeftSidebar/ConversationsList/Conversation.vue

@@ -86,7 +86,8 @@
 				{{ t('spreed', 'Leave conversation') }}
 			</ActionButton>
 			<ActionButton v-if="canDeleteConversation"
-				icon="icon-delete"
+				icon="icon-delete-critical"
+				class="critical"
 				@click.prevent.exact="deleteConversation">
 				{{ t('spreed', 'Delete conversation') }}
 			</ActionButton>
@@ -263,6 +264,19 @@ export default {
 		 * Deletes the conversation.
 		 */
 		async deleteConversation() {
+			OC.dialogs.confirm(
+				t('spreed', 'Do you really want to delete "{displayName}"?', this.item),
+				t('spreed', 'Delete conversation'),
+				async function(decision) {
+					if (!decision) {
+						return
+					}
+
+					if (this.item.token === this.$store.getters.getToken()) {
+						this.$router.push('/apps/spreed')
+						this.$store.dispatch('updateToken', '')
+					}
+
 					try {
 						await deleteConversation(this.item.token)
 						// If successful, deletes the conversation from the store
@@ -270,6 +284,8 @@ export default {
 					} catch (error) {
 						console.debug(`error while deleting conversation ${error}`)
 					}
+				}.bind(this)
+			)
 		},
 		/**
 		 * Deletes the current user from the conversation.
@@ -332,6 +348,12 @@ export default {
 	}
 }
 
+.critical {
+	::v-deep .action-button__text {
+		color: var(--color-error) !important;
+	}
+}
+
 .scroller {
 	flex: 1 0;
 }