Translatable, mobile-responsive maintenance page

webapp/locales/de.json

@@ -1,4 +1,9 @@
 {
+  "maintenance": {
+    "title": "Human Connection befindet sich in der Wartung",
+    "explanation": "Zurzeit führen wir einige geplante Wartungsarbeiten durch, bitte versuch es später erneut.",
+    "questions": "Bei Fragen oder Problemen erreichst du uns per E-Mail an" 
+  },
   "index": {
     "no-results": "Keine Beiträge gefunden.",
     "change-filter-settings": "Verändere die Filter-Einstellungen um mehr Ergebnisse zu erhalten."

webapp/locales/en.json

@@ -1,4 +1,9 @@
 {
+  "maintenance": {
+    "title": "Human Connection is under maintenance",
+    "explanation": "At the moment we are doing some scheduled maintenance, please try again later.",
+    "questions": "Any Questions or concerns, send an email to" 
+  },
   "index": {
     "no-results": "No contributions found.",
     "change-filter-settings": "Change your filter settings to get more results."

webapp/maintenance/maintenance.vue

@@ -0,0 +1,55 @@
+<template>
+  <transition name="fade" appear>
+    <ds-container width="small">
+      <ds-card>
+        <ds-space>
+          <client-only>
+            <locale-switch class="login-locale-switch" offset="5" />
+          </client-only>
+        </ds-space>
+        <ds-flex>
+          <ds-flex-item :width="{ base: '100%', sm: 1, md: 1 }">
+            <ds-space>
+              <img
+                class="login-image"
+                alt="Human Connection"
+                src="/img/sign-up/onourjourney.svg"
+              />
+            </ds-space>
+          </ds-flex-item>
+          <ds-flex-item :width="{ base: '100%', sm: 1, md: 1 }">
+            <ds-flex-item>
+              <ds-heading tag='h3'>
+                {{ $t('maintenance.title') }}
+              </ds-heading>
+            </ds-flex-item>
+            <ds-flex-item>
+              <ds-space margin="small">
+                <ds-text>
+                  {{ $t('maintenance.explanation') }}
+                </ds-text>
+                <ds-text>
+                  {{ $t('maintenance.questions') }}
+                  <a href="mailto:info@human-connection.org" class="email-link">
+                    info@human-connection.org
+                  </a>.
+                </ds-text>
+              </ds-space>
+            </ds-flex-item>
+          </ds-flex-item>
+        </ds-flex>
+      </ds-card>
+    </ds-container>
+  </transition>
+</template>
+
+<script>
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+
+export default {
+	layout:'blank',
+  components: {
+    LocaleSwitch,
+  },
+}
+</script>

webapp/middleware/maintenance.js

@@ -0,0 +1,4 @@
+
+export default async ({ redirect }) => {
+  return redirect('/maintenance')
+}

webapp/nuxt.config.js

@@ -1,5 +1,6 @@
+import path from 'path'
 const pkg = require('./package')
-const envWhitelist = ['NODE_ENV', 'MAINTENANCE', 'MAPBOX_TOKEN']
+export const envWhitelist = ['NODE_ENV', 'MAPBOX_TOKEN']
 const dev = process.env.NODE_ENV !== 'production'
 
 const styleguidePath = '../Nitro-Styleguide'
@@ -15,7 +16,7 @@ const buildDir = process.env.NUXT_BUILD || '.nuxt'
 const additionalSentryConfig = {}
 if (process.env.COMMIT) additionalSentryConfig.release = process.env.COMMIT
 
-module.exports = {
+export default {
   buildDir,
   mode: 'universal',
 
@@ -310,7 +311,6 @@ module.exports = {
      */
     extend(config, ctx) {
       if (process.env.STYLEGUIDE_DEV) {
-        const path = require('path')
         config.resolve.alias['@@'] = path.resolve(__dirname, `${styleguidePath}/src/system`)
         config.module.rules.push({
           resourceQuery: /blockType=docs/,

webapp/nuxt.config.maintenance.js

@@ -0,0 +1,70 @@
+import defaultNuxtConfig, { envWhitelist } from './nuxt.config.js'
+
+export default {
+  ...defaultNuxtConfig,
+  head: {
+    title: 'Human Connection',
+    meta: [
+      {
+        charset: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        hid: 'description',
+        name: 'description',
+        content: 'Maintenance page for Human Connection'
+      },
+    ],
+    link: [
+      {
+        rel: 'icon',
+        type: 'image/x-icon',
+        href: '/favicon.ico',
+      },
+    ],
+  },
+  env: {
+    ...defaultNuxtConfig.env,
+    maintenance: true,
+  },
+
+  /*
+   ** Plugins to load before mounting the App
+   */
+  plugins: [
+    { src: `~/plugins/styleguide.js`, ssr: true },
+    { src: '~/plugins/i18n.js', ssr: true },
+    { src: '~/plugins/v-tooltip.js', ssr: false },
+  ],
+
+
+  /*
+   ** Nuxt.js modules
+   */
+  modules: [
+    [
+      'nuxt-env',
+      {
+        keys: envWhitelist,
+      },
+    ],
+    'cookie-universal-nuxt',
+    '@nuxtjs/style-resources',
+    '@nuxtjs/sentry',
+  ],
+
+
+  router: {
+    middleware: ['maintenance'],
+    extendRoutes (routes, resolve) {
+      routes.push({
+        name: 'maintenance',
+        path: '*',
+        component: resolve(__dirname, 'maintenance/maintenance.vue'),
+      })
+    }
+  },
+}

webapp/package.json

@@ -15,6 +15,7 @@
     "storybook": "start-storybook -p 3002 -c storybook/",
     "build": "nuxt build",
     "start": "nuxt start",
+    "generate:maintenance": "nuxt generate -c nuxt.config.maintenance.js",
     "generate": "nuxt generate",
     "lint": "eslint --ext .js,.vue .",
     "precommit": "yarn lint",

webapp/store/auth.js

@@ -53,6 +53,7 @@ export const actions = {
     if (!process.server) {
       return
     }
+    if (this.app.$env.maintenance) return
     const token = this.app.$apolloHelpers.getToken()
     if (!token) {
       return