Refactor maintenance page

- Add the maintenance page in webapp for testing, because it is kind of not possible to develop it with docker, because of leak of automatic recompiling.

webapp/Dockerfile.maintenance

@@ -56,8 +56,10 @@ COPY package.json yarn.lock ./
 RUN yarn install --production=false --frozen-lockfile --non-interactive
 
 COPY assets assets
-COPY components/LocaleSwitch/ components/LocaleSwitch
+COPY components/_new/features/Maintenance/ components/_new/features/Maintenance
 COPY components/Dropdown.vue components/Dropdown.vue
+COPY components/LocaleSwitch/ components/LocaleSwitch
+COPY components/Logo/ components/Logo
 COPY layouts/blank.vue layouts/blank.vue
 COPY locales locales
 COPY mixins mixins

webapp/components/Logo/Logo.vue

@@ -71,7 +71,7 @@ export default {
       maintenance: {
         path: logos.LOGO_MAINTENACE_RESET_PATH,
         alt: 'Under Maintenance',
-        widthDefault: '75%',
+        widthDefault: '200px',
       },
     }
     return {

webapp/components/_new/features/Maintenance/Maintenance.vue

@@ -0,0 +1,45 @@
+<template>
+  <transition name="fade" appear>
+    <section class="maintenance">
+      <base-card>
+        <template #imageColumn>
+          <a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
+            <logo type="maintenance" />
+          </a>
+        </template>
+        <ds-heading tag="h3">{{ $t('maintenance.title', metadata) }}</ds-heading>
+        <ds-space margin="small">
+          <ds-text>{{ $t('maintenance.explanation') }}</ds-text>
+          <ds-text>
+            {{ $t('maintenance.questions') }}
+            <a :href="'mailto:' + supportEmail">{{ supportEmail }}</a>
+          </ds-text>
+        </ds-space>
+        <template #topMenu>
+          <locale-switch offset="5" />
+        </template>
+      </base-card>
+    </section>
+  </transition>
+</template>
+
+<script>
+import emails from '~/constants/emails.js'
+import links from '~/constants/links.js'
+import metadata from '~/constants/metadata.js'
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+import Logo from '~/components/Logo/Logo'
+
+export default {
+  layout: 'blank',
+  components: {
+    LocaleSwitch,
+    Logo,
+  },
+  data() {
+    return { links, metadata, supportEmail: emails.SUPPORT }
+  },
+}
+</script>
+
+<style lang="scss"></style>

webapp/maintenance/source/pages/index.vue

@@ -1,53 +1,15 @@
+<!-- test maintenance in webapp logged in with "http://localhost:3000/__testing-in-webapp__/maintenance" -->
 <template>
-  <transition name="fade" appear>
-    <ds-container width="medium">
-      <base-card>
-        <ds-space>
-          <locale-switch class="login-locale-switch" offset="5" />
-        </ds-space>
-        <ds-flex>
-          <ds-flex-item :width="{ base: '100%', sm: 1, md: 1 }">
-            <ds-space>
-              <a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
-                <logo type="maintenance" />
-              </a>
-            </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', metadata) }}</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:' + supportEmail">{{ supportEmail }}</a>
-                </ds-text>
-              </ds-space>
-            </ds-flex-item>
-          </ds-flex-item>
-        </ds-flex>
-      </base-card>
-    </ds-container>
-  </transition>
+  <maintenance />
 </template>
 
 <script>
-import emails from '~/constants/emails.js'
-import links from '~/constants/links.js'
-import metadata from '~/constants/metadata.js'
-import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
-import Logo from '~/components/Logo/Logo'
+import Maintenance from '~/components/_new/features/Maintenance/Maintenance'
 
 export default {
   layout: 'blank',
   components: {
-    LocaleSwitch,
-    Logo,
-  },
-  data() {
-    return { links, metadata, supportEmail: emails.SUPPORT }
+    Maintenance,
   },
 }
 </script>

webapp/nuxt.config.js

@@ -32,12 +32,13 @@ export default {
     publicPages: [
       'login',
       'logout',
+      'pages-slug',
       'password-reset-request',
       'password-reset-enter-nonce',
       'password-reset-change-password',
       'registration',
-      'pages-slug',
       'terms-and-conditions',
+      '__testing-in-webapp__-maintenance',
       'code-of-conduct',
       'changelog',
       'imprint',

webapp/pages/__testing-in-webapp__/maintenance.vue

@@ -0,0 +1,17 @@
+<!-- test maintenance in webapp logged in with "http://localhost:3000/__testing-in-webapp__/maintenance" -->
+<template>
+  <maintenance />
+</template>
+
+<script>
+import Maintenance from '~/components/_new/features/Maintenance/Maintenance'
+
+export default {
+  layout: 'blank',
+  components: {
+    Maintenance,
+  },
+}
+</script>
+
+<style lang="scss"></style>