File permissions alert and clear command failure message.

extensions/package-manager/js/src/admin/components/ComposerFailureModal.tsx

@@ -0,0 +1,41 @@
+import app from 'flarum/admin/app';
+import Modal from 'flarum/common/components/Modal';
+import { ComponentAttrs } from "flarum/common/Component";
+import Alert from "flarum/common/components/Alert";
+import Mithril from "mithril";
+
+interface Attrs extends ComponentAttrs {
+  output: string;
+}
+
+export default class ComposerFailureModal<T extends Attrs = Attrs> extends Modal<T> {
+  oninit(vnode: Mithril.Vnode<T, this>) {
+    super.oninit(vnode);
+
+    if (this.attrs.error.guessed_cause) {
+      this.alertAttrs = {
+        type: 'error',
+        content: app.translator.trans(`sycho-package-manager.admin.failure_modal.guessed_cause.${this.attrs.error.guessed_cause}`),
+      };
+    }
+  }
+
+  className() {
+    return 'Modal--large ComposerFailureModal';
+  }
+
+  title() {
+    return app.translator.trans('sycho-package-manager.admin.failure_modal.title');
+  }
+
+  content() {
+    return (
+      <div className="Modal-body">
+        <details>
+          <summary>{app.translator.trans('sycho-package-manager.admin.failure_modal.show_composer_output')}</summary>
+          <pre className="ComposerFailureModal-output">{this.attrs.error.output}</pre>
+        </details>
+      </div>
+    );
+  }
+}

extensions/package-manager/js/src/admin/components/Installer.tsx

@@ -4,6 +4,7 @@ import Component from 'flarum/common/Component';
 import Button from "flarum/common/components/Button";
 import Stream from "flarum/common/utils/Stream";
 import LoadingModal from "flarum/admin/components/LoadingModal";
+import ComposerFailureModal from "./ComposerFailureModal";
 
 export default class Installer extends Component {
   packageName!: Stream<string>;
@@ -48,6 +49,15 @@ export default class Installer extends Component {
       body: {
         data: this.data()
       },
+      errorHandler: (e: any) => {
+        const error = e.response.errors[0];
+
+        if (error.code !== 'composer_command_failure') {
+          throw e;
+        }
+
+        app.modal.show(ComposerFailureModal, { error });
+      },
     }).then((response) => {
       const extensionId = response.data.attributes.id;
       app.alerts.show({ type: 'success' }, app.translator.trans('sycho-package-manager.admin.extensions.successful_install', { extension: extensionId }));

extensions/package-manager/js/src/admin/index.js

@@ -1,5 +1,6 @@
 import { extend } from 'flarum/common/extend';
 import app from 'flarum/admin/app';
+import Alert from 'flarum/common/components/Alert';
 import ExtensionPage from 'flarum/admin/components/ExtensionPage';
 import Button from 'flarum/common/components/Button';
 import LoadingModal from 'flarum/admin/components/LoadingModal';
@@ -9,9 +10,20 @@ app.initializers.add('sycho-package-manager', (app) => {
   app.extensionData
     .for('sycho-package-manager')
     .registerSetting(() => {
+      if (!app.data.isRequiredDirectoriesWritable) {
+        return (
+          <div className="Form-group">
+            <Alert type="warning" dismissible={false}>{app.translator.trans('sycho-package-manager.admin.file_permissions')}</Alert>
+          </div>
+        );
+      }
+    })
+    .registerSetting(() => {
+      if (app.data.isRequiredDirectoriesWritable) {
         return (
           <Installer />
         );
+      }
     });
 
   extend(ExtensionPage.prototype, 'topItems', function (items) {