PageController / App.vue: improve the error message if used without p…

…roper configuration. This addesses issue #9. The app now checks whether the Roundcube location is configured at all and complains about just this instead of throwing cryptic exceptions.
rotdrop · Mar 11, 2024 · a60fee1 · a60fee1
1 parent 20492df
commit a60fee1
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 28 deletions.
diff --git a/lib/Controller/PageController.php b/lib/Controller/PageController.php
@@ -51,6 +51,7 @@ class PageController extends Controller
   const MAIN_ASSET = self::MAIN_TEMPLATE;
   const SUCCESS_STATE = 'success';
   const ERROR_STATE = 'error';
+  const ERROR_NORCURL_REASON = 'norcurl';
   const ERROR_NOEMAIL_REASON = 'noemail';
   const ERROR_LOGIN_REASON = 'login';
   const ERROR_CARDDAV_REASON = 'carddav';
@@ -82,23 +83,29 @@ public function index()
     $state = self::SUCCESS_STATE;
     $reason = null;
 
-    $credentials = $this->config->emailCredentials();
-    if (empty($credentials)) {
+    $roundCubeUrl = $this->authenticator->externalURL();
+    if (empty($roundCubeUrl)) {
       $state = self::ERROR_STATE;
-      $reason = self::ERROR_NOEMAIL_REASON;
-    } elseif (!$this->authenticator->login($credentials['userId'], $credentials['password'])) {
-      $state = self::ERROR_STATE;
-      $reason = self::ERROR_LOGIN_REASON;
-    } elseif ($this->authenticator->cardDavConfig() === false) {
-      $state = self::ERROR_STATE;
-      $reason = self::ERROR_CARDDAV_REASON;
+      $reason = self::ERROR_NORCURL_REASON;
+    } else {
+      $credentials = $this->config->emailCredentials();
+      if (empty($credentials)) {
+        $state = self::ERROR_STATE;
+        $reason = self::ERROR_NOEMAIL_REASON;
+      } elseif (!$this->authenticator->login($credentials['userId'], $credentials['password'])) {
+        $state = self::ERROR_STATE;
+        $reason = self::ERROR_LOGIN_REASON;
+      } elseif ($this->authenticator->cardDavConfig() === false) {
+        $state = self::ERROR_STATE;
+        $reason = self::ERROR_CARDDAV_REASON;
+      }
     }
 
     $this->initialState->provideInitialState('config', [
       'state' => $state,
       'reason' => $reason,
       'emailUserId' => $credentials['userId'] ?? null,
-      Config::EXTERNAL_LOCATION => $this->authenticator->externalURL(),
+$this->authenticator->externalURL(),      Config::EXTERNAL_LOCATION => $roundCubeUrl,
       Config::SHOW_TOP_LINE => $this->config->getAppValue(Config::SHOW_TOP_LINE),
     ]);
 

diff --git a/src/App.vue b/src/App.vue
@@ -19,7 +19,7 @@
  */
 </script>
 <template>
-  <div class="app-container">
+  <div :class="['app-container', state]">
     <div ref="loaderContainer" class="loader-container" />
     <iframe v-if="state !== 'error'"
             :id="frameId"
@@ -71,6 +71,11 @@ export default {
         return null
       }
       switch (this.reason) {
+        case 'norcurl':
+          return t(appName, `You did not tell me where to find your configured Roundcube
+instance. Please head over to the admin-settings and configure this
+app, thank you! I might also be a good idea to have a look at the
+README.md file which is distributed together with this app.`)
         case 'login':
           return t(appName, `Unable to login into Roundcube, there are login errors. Please check
 your personal Roundcube settings. Maybe a re-login to Nextcloud
@@ -134,23 +139,44 @@ helps. Otherwise contact your system administrator.`)
 }
 </script>
 <style lang="scss" scoped>
-.loader-container {
-  background-image: url('../img/loader.gif');
-  background-repeat: no-repeat;
-  background-position: center;
-  z-index:10;
-  width:100%;
-  height:100%;
-  position:fixed;
-  transition: visibility 1s, opacity 1s;
-  &.fading {
-    opacity: 0;
-    visibility: hidden;
+.app-container {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: stretch;
+  align-content: stretch;
+  &.error {
+    .loader-container {
+      display:none; // do not further annoy the user
+    }
+  }
+  .loader-container {
+    background-image: url('../img/loader.gif');
+    background-repeat: no-repeat;
+    background-position: center;
+    z-index:10;
+    width:100%;
+    height:100%;
+    position:fixed;
+    transition: visibility 1s, opacity 1s;
+    &.fading {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+  #errorMsg {
+    align-self: center;
+    padding:2em 2em;
+    font-weight: bold;
+    font-size:120%;
+    max-width: 80%;
+    border: 2px solid var(--color-border-maxcontrast);
+    border-radius: var(--border-radius-pill);
+    background-color: var(--color-background-dark);
+  }
+  iframe {
+    flex-grow: 10;
   }
-}
-#errorMsg {
-  padding:1em 1em;
-  font-weight: bold;
-  font-size:120%;
 }
 </style>