Add a generic modal to wipe data properly

css/style.css

@@ -280,4 +280,77 @@ label {
 	font-size: 1.5em;
 	font-weight: bold;
 	color: #666;
+}
+
+/**
+Modal
+ */
+
+.modal-mask {
+	position: fixed;
+	z-index: 9998;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, .5);
+	display: table;
+	transition: opacity .3s ease;
+}
+
+.modal-wrapper {
+	display: table-cell;
+	vertical-align: middle;
+}
+
+.modal-container {
+	width: 300px;
+	margin: 0px auto;
+	padding: 20px 30px;
+	background-color: #fff;
+	border-radius: 2px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
+	transition: all .3s ease;
+	font-family: Helvetica, Arial, sans-serif;
+}
+
+.modal-header h3 {
+	margin-top: 0;
+	color: #42b983;
+}
+
+.modal-body {
+	margin: 20px 0;
+}
+
+.modal-default-button {
+	float: right;
+}
+
+.modal-crit-button {
+	background: #822C19;
+	color: white;
+}
+
+/*
+ * The following styles are auto-applied to elements with
+ * transition="modal" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the modal transition by editing
+ * these styles.
+ */
+
+.modal-enter {
+	opacity: 0;
+}
+
+.modal-leave-active {
+	opacity: 0;
+}
+
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+	-webkit-transform: scale(1.1);
+	transform: scale(1.1);
 }

js/devel/app.js

@@ -73,8 +73,6 @@ var ContactRenderer = {
 	}
 };
 
-Vue.filter('firstCharacter', ContactRenderer.generateFirstCharacter);
-
 $.urlParam = function (name) {
 	var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
 	if (results == null) {
@@ -85,6 +83,32 @@ $.urlParam = function (name) {
 	}
 };
 
+Vue.filter('firstCharacter', ContactRenderer.generateFirstCharacter);
+const Dialog = Vue.extend({
+	template: '#modal-template'
+});
+
+Vue.directive('confirm', {
+	bind(el, binding, vnode) {
+		const yesMethod = binding.value[1];
+		const bodyMessage = binding.value[0];
+		console.log(bodyMessage);
+		el.handleClick = (e) => {
+			const data = {
+				doYes: function () { yesMethod(); data.show = false; },
+				show: true,
+				bodyMessage: bodyMessage
+			};
+			let dialog = new Dialog({ data: data }).$mount();
+			document.getElementById('app').appendChild(dialog.$el);
+		}
+		el.addEventListener('click', el.handleClick);
+	},
+	unbind(el) {
+		el.removeEventListener('click', el.handleClick);
+	}
+});
+
 (function ($, OC) {
 	// reset count and title
 	window.onfocus = function () {

templates/main.php

@@ -15,6 +15,31 @@ use \OCA\OcSms\Lib\CountryCodes;
 \OCP\Util::addStyle('ocsms', 'style');
 ?>
 
+<script type="text/x-template" id="modal-template">
+    <transition name="modal" v-if="show">
+        <div class="modal-mask">
+            <div class="modal-wrapper">
+                <div class="modal-container">
+                    <div class="modal-body">
+                        {{ bodyMessage }}
+                    </div>
+
+                    <div class="modal-footer">
+                        <slot name="footer">
+                            <button class="modal-default-button" @click="show = false">
+                                <slot name="button-cancel">Cancel</slot>
+                            </button>
+                            <button class="modal-default-button modal-crit-button" @click="doYes">
+                                <slot name="button-ok">Confirm</slot>
+                            </button>
+                        </slot>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </transition>
+</script>
+
 <div id="app">
 	<div id="app-mailbox-peers">
 		<div id="app-contacts-loader" class="icon-loading" v-if="isContactsLoading">
@@ -72,8 +97,9 @@ use \OCA\OcSms\Lib\CountryCodes;
 					<option value="0"><?php p($l->t('Disable'));?></option>
 				</select>
 			</div>
-            <div v-if="!isContactListEmpty()">
-                <button class="crit-button primary" v-on:click="wipeAllMessages();">Reset all messages</button>
+<!--            <div v-if="!isContactListEmpty()">-->
+            <div>
+                <button class="crit-button primary" v-confirm="['wipe ?', wipeAllMessages]">Reset all messages</button>
             </div>
 		</div> <!-- app-settings-content -->
 	</div>