Implement copy to clipboard and open new issue page

Signed-off-by: Julius Härtl <jus@bitgrid.net>

5 files changed, 40 insertions, 62 deletions

diff --git a/js/init.js b/js/init.js
index 716ce2a..7a4e2ca 100644
--- a/js/init.js
+++ b/js/init.js
@@ -25,9 +25,11 @@ import VueFormWizard from 'vue-form-wizard';
 import VueFormGenerator from 'vue-form-generator';
 import AppSelector from './components/appselector.vue';
 import DetailSection from './components/detailsection.vue';
+import VueClipboard from 'vue-clipboard2';
 
-Vue.use(VueFormWizard)
-Vue.use(VueFormGenerator)
+Vue.use(VueFormWizard);
+Vue.use(VueFormGenerator);
+Vue.use(VueClipboard);
 
 new Vue({
 	el: '#issuetemplate',
@@ -41,7 +43,7 @@ new Vue({
 	data: {
 		tabs: [],
 		model: {},
-		preview: 'preview',
+		preview: {},
 		formOptions: {
 			validationErrorClass: "has-error",
 			validationSuccessClass: "has-success",
@@ -151,26 +153,9 @@ new Vue({
 			});
 			return true;
 		},
-		prettyJSON: function(json) {
-			if (json) {
-				json = JSON.stringify(json, undefined, 4);
-				json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
-				return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
-					var cls = 'number';
-					if (/^"/.test(match)) {
-						if (/:$/.test(match)) {
-							cls = 'key';
-						} else {
-							cls = 'string';
-						}
-					} else if (/true|false/.test(match)) {
-						cls = 'boolean';
-					} else if (/null/.test(match)) {
-						cls = 'null';
-					}
-					return '<span class="' + cls + '">' + match + '</span>';
-				});
-			}
+		openIssue: function() {
+			var urlComplete = this.model.component.bugs + "/new/?title=" + encodeURIComponent(this.model.title) + "&body=" + encodeURIComponent(this.preview.markdown);
+			window.open(urlComplete);
 		}
 	}
-})
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/lib/Controller/APIController.php b/lib/Controller/APIController.php
index 692c775..83daed8 100644
--- a/lib/Controller/APIController.php
+++ b/lib/Controller/APIController.php
@@ -127,7 +127,10 @@ class APIController extends Controller {
 	public function render() {
 		$markdown = $this->detailManager->getRenderedDetails();
 		$parser = new Parsedown();
-		return $parser->text($markdown);
+		return [
+			'markdown' => $markdown,
+			'rendered' => $parser->text($markdown)
+		];
 	}
 
 }
\ No newline at end of file
diff --git a/lib/Service/ComponentService.php b/lib/Service/ComponentService.php
index 8c07d9b..b6e00f7 100644
--- a/lib/Service/ComponentService.php
+++ b/lib/Service/ComponentService.php
@@ -55,26 +55,12 @@ class ComponentService {
 	public function getComponents() {
 		$apps = \OC_App::getAllApps();
 		$serverComponents = array(
-			$this->getComponent('server', $this->l10n->t('Nextcloud server'), 'https://github.com/nextcloud/server'),
-			$this->getComponent('client', $this->l10n->t('Nextcloud desktop client'), 'https://github.com/nextcloud/client'),
-			$this->getComponent('android', $this->l10n->t('Nextcloud Android app'), 'https://github.com/nextcloud/android'),
-			$this->getComponent('ios', $this->l10n->t('Nextcloud iOS app'), 'https://github.com/nextcloud/ios')
+			$this->getComponent('server', $this->l10n->t('Nextcloud server'), 'https://github.com/nextcloud/server/issues'),
+			$this->getComponent('client', $this->l10n->t('Nextcloud desktop client'), 'https://github.com/nextcloud/client/issues'),
+			$this->getComponent('android', $this->l10n->t('Nextcloud Android app'), 'https://github.com/nextcloud/android/issues'),
+			$this->getComponent('ios', $this->l10n->t('Nextcloud iOS app'), 'https://github.com/nextcloud/ios/issues')
 		);
 		$appComponents = [];
-		$externalComponents = [
-			'desktop' => [
-				'name' => $this->l10n->t('Nextcloud Android app repository'),
-				'bugs' => 'https://github.com/nextcloud/android/issues'
-			],
-			'android' => [
-				'name' => $this->l10n->t('Nextcloud Android app repository'),
-				'bugs' => 'https://github.com/nextcloud/android/issues'
-			],
-			'ios' => [
-				'name' => $this->l10n->t('Nextcloud iOS app repository'),
-				'bugs' => 'https://github.com/nextcloud/ios/issues'
-			]
-		];
 		foreach ($apps as $app) {
 			if ($this->appManager->isInstalled($app)) {
 				$appinfo = \OC_App::getAppInfo($app);
@@ -106,7 +92,6 @@ class ComponentService {
 		return [
 			$this->getComponentSection('core', 'Nextcloud server', $serverComponents),
 			$this->getComponentSection('apps', 'Nextcloud apps', $appComponents),
-
 		];
 	}
 
diff --git a/package.json b/package.json
index 3079e29..05fffc6 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
   "homepage": "https://github.com/juliushaertl/issuetemplate#readme",
   "dependencies": {
     "vue": "^2.5.13",
+    "vue-clipboard2": "0.0.8",
     "vue-form-generator": "^2.1.1",
     "vue-form-wizard": "^0.8.2"
   },
diff --git a/templates/settings-admin.php b/templates/settings-admin.php
index 4690379..dab9bd5 100644
--- a/templates/settings-admin.php
+++ b/templates/settings-admin.php
@@ -1,5 +1,11 @@
 <div id="issuetemplate" class="section">
 	<h2 class="inlineblock"><?php p($l->t('Issue reporting')); ?></h2>
+
+	<p>
+		<?php p($l->t("For reporting potential security issues please see")); ?>
+		<a href="https://nextcloud.com/security/">https://nextcloud.com/security/</a>
+	</p>
+
 		<div>
 
 			<form-wizard @on-complete="onComplete"
@@ -8,15 +14,7 @@
 						 error-color="#a94442"
 						 ref="wizard">
 				<div slot="title"></div>
-				<div v-if="model.component" class="wizard-card-footer clearfix">
-					<div class="wizard-footer-left">
-						<wizard-button v-if="$refs.wizard.activeTabIndex > 0 && !$refs.wizard.isLastStep" @click.native="$refs.wizard.prevTab()" :style="$refs.wizard.fillButtonStyle">Previous</wizard-button>
-					</div>
-					<div class="wizard-footer-right">
-						<wizard-button v-if="!$refs.wizard.isLastStep"@click.native="$refs.wizard.nextTab()" class="wizard-footer-right" :style="$refs.wizard.fillButtonStyle">Next</wizard-button>
-						<wizard-button v-else @click.native="onComplete" class="wizard-footer-right finish-button" :style="$refs.wizard.fillButtonStyle">  {{$refs.wizard.isLastStep ? 'Finish' : 'Next'}}</wizard-button>
-					</div>
-				</div>
+
 
 				<tab-content title="Affected component" icon="icon-category-customization icon-invert" :before-change="validateAppSelect">
 					<app-selector v-on:select="selectComponent"></app-selector>
@@ -41,24 +39,30 @@
 							<strong><?php p($l->t("This report will be submitted to nextcloud/server")); ?></strong>
 						</p>
 
-						<div v-html="preview">
+						<div id="preview" v-html="preview.rendered">
 
 						</div>
+						<textarea id="preview" v-html="preview.markdown">
+
+						</textarea>
 					</div>
 				</tab-content>
 
+				<template slot="footer" slot-scope="props">
+					<div class="wizard-footer-left">
+						<button v-if="props.activeTabIndex > 0 && !props.isLastStep" @click="props.prevTab()">Previous</button>
+					</div>
+					<div class="wizard-footer-right">
+						<button v-if="!props.isLastStep" @click="props.nextTab()" class="primary">Next</button>
+						<button v-if="props.isLastStep" v-clipboard:copy="preview.markdown" class="">Copy issue text</button>
+						<button v-if="props.isLastStep && preview.markdown && preview.markdown.length<4096" @click="openIssue()"  class="">Open a new issue</button>
+					</div>
+				</template>
+
 			</form-wizard>
 
 
 		</div>
-
-		<p>
-			<?php p($l->t("For reporting potential security issues please see")); ?>
-			<a href="https://nextcloud.com/security/">https://nextcloud.com/security/</a>
-		</p>
-
-		<h3>Debug output</h3>
-		<pre v-if="model" v-html="prettyJSON(model)"></pre>
 </div>