All configuration to route for signature validation, from php files to webpack for dev and prod

.prettierrc

@@ -0,0 +1,4 @@
+{
+	"trailingComma": "es6",
+	"arrowParens": "always"
+}

appinfo/routes.php

@@ -22,6 +22,7 @@ return [
 		// Pages
 		['name' => 'page#index', 'url' => '/', 'verb' => 'GET'],
 		['name' => 'page#sign', 'url' => '/sign/{uuid}', 'verb' => 'GET'],
-		['name' => 'page#getPdf', 'url' => '/pdf/{uuid}', 'verb' => 'GET']
+		['name' => 'page#getPdf', 'url' => '/pdf/{uuid}', 'verb' => 'GET'],
+		// ['name' => 'page#validation', 'url' => '/validation', 'verb' => 'GET']
 	],
 ];

lib/Controller/PageController.php

@@ -87,4 +87,19 @@ class PageController extends Controller {
 
 		return $resp;
 	}
+
+	// /**
+	//  * @NoAdminRequired
+	//  * @NoCSRFRequired
+	//  */
+	// public function validation() {
+	// 	Util::addScript(Application::APP_ID, 'libresign-validation');
+	// 	$response = new TemplateResponse(Application::APP_ID, 'validation', [], TemplateResponse::RENDER_AS_BASE);
+
+	// 	$policy = new ContentSecurityPolicy();
+	// 	$policy->addAllowedFrameDomain('\'self\'');
+	// 	$response->setContentSecurityPolicy($policy);
+
+	// 	return $response;
+	// }
 }

src/assets/styles/validation.scss

@@ -0,0 +1,73 @@
+.container{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	// height: %;
+	width: 100%;
+
+	.image{
+		width: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		@media screen and (max-width: 900px) {
+			display: none;
+			width: 0%;
+		}
+	}
+	#dataUUID{
+		width: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		@media screen and (max-width: 900px){
+			width: 100%;
+		}
+	}
+}
+
+form{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 20px;
+	margin: 20px;
+	border-radius: 8px;
+	border: 1px solid var(--color-background-dark);
+	max-width: 500px;
+
+	@media screen and (max-width: 900px) {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		max-width: 100%;
+	}
+}
+
+h1{
+	font-size: 24px;
+	font-weight: bold;
+}
+
+h3{
+	color: #337ab7;
+}
+
+input{
+	width: 100%;
+	margin: 20px 0px;
+	background-color: var(--color-background-dark);
+}
+
+button{
+	background-color: #0082c9;
+	color: #FFF;
+	// width: min-content;
+	align-self: center;
+
+	&:hover{
+		background-color: #286090;
+	}
+}

src/router/router.js

@@ -43,6 +43,10 @@ const routes = [
 		props: (route) => ({
 			messageToast: t('libresign', 'You need to create an account to sign this file.'),
 		}),
+	}, {
+		path: '/validation',
+		component: () => import('../views/Validation'),
+		name: 'validation',
 	}, {
 		path: '/sign/:uuid',
 		component: () => import('../views/DefaultPageError'),

src/validation.js

@@ -0,0 +1,72 @@
+/**
+ * @copyright Copyright (c) 2021 Lyseon Techh <contato@lt.coop.br>
+ *
+ * @author Lyseon Tech <contato@lt.coop.br>
+ * @author Vinicios Gomes <viniciosgomesviana@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { generateFilePath } from '@nextcloud/router'
+import { getRequestToken } from '@nextcloud/auth'
+import { sync } from 'vuex-router-sync'
+import Vue from 'vue'
+
+import Validation from './views/Validation'
+import router from './router'
+import store from './store'
+
+import VTooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+
+import '@nextcloud/dialogs/styles/toast.scss'
+
+// CSP config for webpack dynamic chunk loading
+// eslint-disable-next-line
+__webpack_nonce__ = btoa(getRequestToken());
+
+// Correct the root of the app for chunk loading
+// OC.linkTo matches the apps folders
+// OC.generateUrl ensure the index.php (or not)
+// We do not want the index.php since we're loading files
+// eslint-disable-next-line
+__webpack_public_path__ = generateFilePath('libresign', '', 'js/');
+
+sync(store, router)
+
+Vue.directive('Tooltip', VTooltip)
+
+Vue.prototype.t = t
+Vue.prototype.n = n
+
+Vue.prototype.OC = OC
+Vue.prototype.OCA = OCA
+
+if (
+	window.location.pathname.split('/')[1] === 'index.php'
+  && OC.config.modRewriteWorking
+) {
+	router.push({ name: 'Validation' })
+}
+
+export default new Vue({
+	el: '#content',
+	// eslint-disable-next-line vue/match-component-file-name
+	name: 'Validation',
+	router,
+	store,
+	render: (h) => h(Validation),
+})

src/views/Validation.vue

@@ -0,0 +1,61 @@
+<template>
+	<Content app-name="libresign">
+		<div class="container">
+			<div class="image">
+				<img :src="image">
+			</div>
+			<div id="dataUUID">
+				<form>
+					<h1>{{ title }}</h1>
+					<h3>{{ legend }}</h3>
+					<input v-model="uuid" type="text">
+					<button class="btn" @click.prevent="validateByUUID">
+						{{ buttonTitle }}
+					</button>
+				</form>
+			</div>
+		</div>
+	</Content>
+</template>
+
+<script>
+import axios from '@nextcloud/axios'
+import Content from '@nextcloud/vue/dist/Components/Content'
+import BackgroundImage from '../assets/images/bg.png'
+import { generateUrl } from '@nextcloud/router'
+
+export default {
+	name: 'Validation',
+
+	components: {
+		Content,
+	},
+
+	data() {
+		return {
+			image: BackgroundImage,
+			title: t('libresign', 'Validate Subscription.'),
+			legend: t('libresign', 'Enter the UUID of the document to validate.'),
+			buttonTitle: t('libresign', 'Validation'),
+			uuid: '',
+		}
+	},
+	methods: {
+		async validateByUUID() {
+			// eslint-disable-next-line no-console
+			console.log(this.uuid)
+			try {
+				console.info('resp')
+				const response = await axios.get(generateUrl(`/apps/libresign/api/0.1/file/validate/${this.uuid}`))
+				console.info(response)
+			} catch (err) {
+				console.error(err)
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../assets/styles/validation.scss';
+</style>

webpack.dev.js

@@ -9,7 +9,8 @@ const config = {
 		tab: path.resolve(path.join('src', 'tab.js')),
 		settings: path.resolve(path.join('src', 'settings.js')),
 		external: path.resolve(path.join('src', 'external.js')),
-    },
+		validation: path.resolve(path.join('src', 'validation.js')),
+	},
 }
 
-module.exports = merge(config, webpackConfig)
+module.exports = merge(config, webpackConfig)

webpack.prod.js

@@ -9,7 +9,8 @@ const config = {
 		tab: path.resolve(path.join('src', 'tab.js')),
 		settings: path.resolve(path.join('src', 'settings.js')),
 		external: path.resolve(path.join('src', 'external.js')),
-    },
+		validation: path.resolve(path.join('src', 'validation.js')),
+	},
 }
 
-module.exports = merge(config, webpackConfig)
+module.exports = merge(config, webpackConfig)