Merge pull request #1 from LibreCodeCoop/feature/customize-theme

Feature/customize theme

.eslintrc.js

@@ -56,19 +56,19 @@ module.exports = {
 				warnOnUnassignedImports: true,
 			},
 		],
+		// Prepare for Vue 3 Migration
+		'vue/no-deprecated-data-object-declaration': 'warn',
+		'vue/no-deprecated-events-api': 'warn',
+		'vue/no-deprecated-filter': 'warn',
+		'vue/no-deprecated-functional-template': 'warn',
+		'vue/no-deprecated-html-element-is': 'warn',
+		'vue/no-deprecated-props-default-this': 'warn',
+		'vue/no-deprecated-router-link-tag-prop': 'warn',
+		'vue/no-deprecated-scope-attribute': 'warn',
+		'vue/no-deprecated-slot-attribute': 'warn',
+		'vue/no-deprecated-slot-scope-attribute': 'warn',
+		'vue/no-deprecated-v-is': 'warn',
+		'vue/no-deprecated-v-on-number-modifiers': 'warn',
+		'vue/require-explicit-emits': 'warn',
 	},
-	// Prepare for Vue 3 Migration
-	'vue/no-deprecated-data-object-declaration': 'warn',
-	'vue/no-deprecated-events-api': 'warn',
-	'vue/no-deprecated-filter': 'warn',
-	'vue/no-deprecated-functional-template': 'warn',
-	'vue/no-deprecated-html-element-is': 'warn',
-	'vue/no-deprecated-props-default-this': 'warn',
-	'vue/no-deprecated-router-link-tag-prop': 'warn',
-	'vue/no-deprecated-scope-attribute': 'warn',
-	'vue/no-deprecated-slot-attribute': 'warn',
-	'vue/no-deprecated-slot-scope-attribute': 'warn',
-	'vue/no-deprecated-v-is': 'warn',
-	'vue/no-deprecated-v-on-number-modifiers': 'warn',
-	'vue/require-explicit-emits': 'warn',
 }

.github/workflows/node.yml

@@ -36,8 +36,22 @@ jobs:
 
     name: node
     steps:
+      - name: Set app env
+        run: |
+          # Split and keep last
+          echo "APP_NAME=${GITHUB_REPOSITORY##*/}" >> $GITHUB_ENV
+
+      - name: Checkout server
+        uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
+        with:
+          submodules: true
+          repository: nextcloud/server
+          ref: ${{ matrix.server-versions }}
+
       - name: Checkout
         uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
+        with:
+          path: apps/${{ env.APP_NAME }}
 
       - name: Read package.json node and npm engines version
         uses: skjnldsv/read-package-engines-version-actions@8205673bab74a63eb9b8093402fd9e0e018663a1 # v2.2
@@ -55,11 +69,13 @@ jobs:
         run: npm i -g npm@"${{ steps.versions.outputs.npmVersion }}"
 
       - name: Install dependencies & build
+        working-directory: apps/${{ env.APP_NAME }}
         run: |
           npm ci
           npm run build --if-present
 
       - name: Check webpack build changes
+        working-directory: apps/${{ env.APP_NAME }}
         run: |
           bash -c "[[ ! \"`git status --porcelain `\" ]] || (echo 'Please recompile and commit the assets, see the section \"Show changes on failure\" for details' && exit 1)"
 

appinfo/info.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0"?>
 <info xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://apps.nextcloud.com/schema/apps/info.xsd">
 	<id>my_company</id>
-	<name>LibreSign</name>
+	<name>My Company</name>
 	<summary>Get access to important information about your company</summary>
 	<description><![CDATA[**Get access to important information about your company]]>
 	</description>

appinfo/routes/routesPageController.php

@@ -26,7 +26,9 @@
 
 return [
 	'routes' => [
-		// Pages - restricted
-		['name' => 'page#index', 'url' => '/', 'verb' => 'GET'],
+		// default route (Vue.js frontend)
+		['name' => 'page#index', 'url' => '/{path}', 'verb' => 'GET',
+			'requirements' => ['path' => '.*'],
+			'defaults' => ['path' => '']],
 	],
 ];

css/main.css

@@ -0,0 +1,7 @@
+#header .app-menu, #contactsmenu/*, #header .unified-search*/ {
+	display: none;
+}
+
+:root {
+	--image-logo: 'fake-path'
+}

lib/AppInfo/Application.php

@@ -2,6 +2,7 @@
 
 namespace OCA\MyCompany\AppInfo;
 
+use OCA\MyCompany\Middleware\InjectionMiddleware;
 use OCP\AppFramework\App;
 use OCP\AppFramework\Bootstrap\IBootContext;
 use OCP\AppFramework\Bootstrap\IBootstrap;
@@ -21,5 +22,6 @@ public function boot(IBootContext $context): void {
 	}
 
 	public function register(IRegistrationContext $context): void {
+		$context->registerMiddleWare(InjectionMiddleware::class, true);
 	}
 }

lib/Controller/PageController.php

@@ -3,6 +3,8 @@
 namespace OCA\MyCompany\Controller;
 
 use OCA\MyCompany\AppInfo\Application;
+use OCA\Settings\Settings\Personal\PersonalInfo;
+use OCA\Settings\Settings\Personal\Security\Authtokens;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\Attribute\NoAdminRequired;
 use OCP\AppFramework\Http\Attribute\NoCSRFRequired;
@@ -13,21 +15,22 @@
 class PageController extends Controller {
 	public function __construct(
 		IRequest $request,
+		private PersonalInfo $personalInfo,
+		private Authtokens $authTokens,
 	) {
 		parent::__construct(Application::APP_ID, $request);
 	}
 
-	/**
-	 * Render default template
-	 */
 	#[NoAdminRequired]
 	#[NoCSRFRequired]
-	public function index(): TemplateResponse {
-		Util::addScript(Application::APP_ID, 'libresign-main');
+	public function index(string $path): TemplateResponse {
+		Util::addScript(Application::APP_ID, 'my_company-main');
+
+		$this->personalInfo->getForm();
+		$this->authTokens->getForm();
 
 		$response = new TemplateResponse(Application::APP_ID, 'main');
 
 		return $response;
 	}
-
 }

lib/Middleware/InjectionMiddleware.php

@@ -0,0 +1,65 @@
+<?php
+
+declare(strict_types=1);
+
+namespace OCA\MyCompany\Middleware;
+
+use OCA\Theming\Controller\ThemingController;
+use OCP\AppFramework\Controller;
+use OCP\AppFramework\Http\ContentSecurityPolicy;
+use OCP\AppFramework\Http\FileDisplayResponse;
+use OCP\AppFramework\Http\Response;
+use OCP\AppFramework\Middleware;
+use OCP\Files\IAppData;
+use OCP\Files\NotFoundException;
+use OCP\Files\SimpleFS\ISimpleFolder;
+use OCP\IRequest;
+
+class InjectionMiddleware extends Middleware {
+	public function __construct(
+		private IAppData $appData,
+		private IRequest $request
+	) {
+	}
+
+	public function afterController(Controller $controller, string $methodName, Response $response): Response {
+		if ($controller instanceof ThemingController && $methodName === 'getImage') {
+			return $this->getImageFromDomain($response);
+		}
+		return $response;
+	}
+
+	private function getImageFromDomain(Response $response): Response {
+		$headers = $response->getHeaders();
+		if (str_contains($headers['Content-Disposition'], '"background"')) {
+			return $this->getBackgroundOfDomain($response);
+		}
+		return $response;
+	}
+
+	private function getBackgroundOfDomain(Response $response): Response {
+		try {
+			$folder = $this->getRootFolder('themes')->getFolder($this->request->getServerHost());
+			$file = $folder->getFile('background.jpg');
+		} catch (NotFoundException $e) {
+			return $response;
+		}
+
+		$response = new FileDisplayResponse($file);
+		$csp = new ContentSecurityPolicy();
+		$csp->allowInlineStyle();
+		$response->setContentSecurityPolicy($csp);
+		$response->cacheFor(3600);
+		$response->addHeader('Content-Disposition', 'attachment; filename="background.jpg"');
+		$response->addHeader('Content-Type', 'image/jpeg');
+		return $response;
+	}
+
+	private function getRootFolder(string $folder): ISimpleFolder {
+		try {
+			return $this->appData->getFolder($folder);
+		} catch (NotFoundException $e) {
+			return $this->appData->newFolder($folder);
+		}
+	}
+}

package.json

@@ -25,6 +25,7 @@
 		"vuex": "^3.6.2"
 	},
 	"devDependencies": {
+		"@nextcloud/auth": "^2.1.0",
 		"@nextcloud/babel-config": "^1.0.0",
 		"@nextcloud/browserslist-config": "^2.3.0",
 		"@nextcloud/eslint-config": "^8.3.0-beta.2",

src/App.vue

@@ -1,15 +1,24 @@
 <template>
 	<NcContent app-name="my_company">
+		<LeftSidebar />
+		<NcAppContent>
+			<router-view />
+		</NcAppContent>
 	</NcContent>
 </template>
 
 <script>
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
 
+import LeftSidebar from './components/LeftSidebar.vue'
+
 export default {
 	name: 'App',
 	components: {
-		NcContent
+		LeftSidebar,
+		NcAppContent,
+		NcContent,
 	},
 }
 </script>

src/components/LeftSidebar.vue

@@ -0,0 +1,34 @@
+<template>
+	<NcAppNavigation :aria-label="t('my_company', 'Main menu')">
+		<template #list>
+			<NcAppNavigationItem :to="{name: 'home'}"
+				:title="t('my_company', 'Home')"
+				icon="icon-home"
+				:exact="true" />
+			<NcAppNavigationItem :to="{name: 'profile'}"
+				:title="t('my_company', 'Profile')"
+				:open="false"
+				:allow-collapse="true"
+				icon="icon-user">
+				<template>
+					<NcAppNavigationItem :to="{name: 'security'}"
+						:title="t('my_company', 'Security')"
+						icon="icon-password" />
+				</template>
+			</NcAppNavigationItem>
+		</template>
+	</NcAppNavigation>
+</template>
+
+<script>
+import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+
+export default {
+	name: 'LeftSidebar',
+	components: {
+		NcAppNavigation,
+		NcAppNavigationItem,
+	},
+}
+</script>

src/main.js

@@ -19,12 +19,12 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
-import { generateFilePath } from '@nextcloud/router'
+import { getRequestToken } from '@nextcloud/auth'
 import { translate, translatePlural } from '@nextcloud/l10n'
+import { generateFilePath } from '@nextcloud/router'
 
 import App from './App.vue'
 
@@ -36,12 +36,16 @@ Vue.mixin({ methods: { t, n } })
 Vue.prototype.t = translate
 Vue.prototype.n = translatePlural
 
+// 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/')
+__webpack_public_path__ = generateFilePath('my_company', '', 'js/')
 
 Vue.prototype.t = t
 Vue.prototype.n = n
@@ -50,6 +54,11 @@ Vue.prototype.OCA = OCA
 
 Vue.use(VueRouter)
 
+// Force redirect if rewrite enabled but accessed through index.php
+if (window.location.pathname.split('/')[1] === 'index.php' && OC.config.modRewriteWorking) {
+	router.push({ name: 'root' })
+}
+
 const instance = new Vue({
 	el: '#content',
 	name: 'MyCompany',