fix: plain views on mobile

packages/web-runtime/src/pages/accessDenied.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="h-screen flex flex-col justify-center items-center">
+  <div class="h-screen flex flex-col justify-center items-center p-4">
     <oc-card
       :logo-url="logoImg"
       :title="cardTitle"
-      body-class="w-sm text-center"
-      class="rounded-lg"
+      body-class="text-center"
+      header-class="text-center"
+      class="w-full sm:w-sm rounded-lg"
     >
       <p v-text="cardHint" />
       <oc-button
@@ -23,7 +24,7 @@
     </oc-card>
     <oc-button
       id="exitAnchor"
-      class="mt-4 w-sm"
+      class="mt-4 w-full sm:w-sm"
       size="large"
       appearance="filled"
       color-role="primary"
@@ -34,8 +35,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, unref } from 'vue'
+<script setup lang="ts">
+import { computed, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { storeToRefs } from 'pinia'
 import {
@@ -45,62 +46,47 @@ import {
   useThemeStore
 } from '@opencloud-eu/web-pkg'
 
-export default defineComponent({
-  name: 'AccessDeniedPage',
-  setup() {
-    const themeStore = useThemeStore()
-    const { currentTheme } = storeToRefs(themeStore)
-    const configStore = useConfigStore()
-    const redirectUrlQuery = useRouteQuery('redirectUrl')
+const themeStore = useThemeStore()
+const { currentTheme } = storeToRefs(themeStore)
+const configStore = useConfigStore()
+const redirectUrlQuery = useRouteQuery('redirectUrl')
 
-    const { $gettext } = useGettext()
+const { $gettext } = useGettext()
 
-    const accessDeniedHelpUrl = computed(() => unref(currentTheme).urls?.accessDeniedHelp)
-    const footerSlogan = computed(() => unref(currentTheme).slogan)
-    const logoImg = computed(() => unref(currentTheme).logo)
-
-    const cardTitle = computed(() => {
-      return $gettext('Not logged in')
-    })
-    const cardHint = computed(() => {
-      return $gettext(
-        'This could be because of a routine safety log out, or because your account is either inactive or not yet authorized for use. Please try logging in after a while or seek help from your Administrator.'
-      )
-    })
-    const navigateToLoginText = computed(() => {
-      return $gettext('Log in again')
-    })
-    const logoutButtonsAttrs = computed(() => {
-      const redirectUrl = queryItemAsString(unref(redirectUrlQuery))
-      if (configStore.options.loginUrl) {
-        const configLoginURL = new URL(encodeURI(configStore.options.loginUrl))
-        if (redirectUrl) {
-          configLoginURL.searchParams.append('redirectUrl', redirectUrl)
-        }
-        return {
-          type: 'a' as const,
-          href: configLoginURL.toString()
-        }
-      }
-      return {
-        type: 'router-link' as const,
-        to: {
-          name: 'login',
-          query: {
-            ...(redirectUrl && { redirectUrl })
-          }
-        }
-      }
-    })
+const accessDeniedHelpUrl = computed(() => unref(currentTheme).urls?.accessDeniedHelp)
+const footerSlogan = computed(() => unref(currentTheme).slogan)
+const logoImg = computed(() => unref(currentTheme).logo)
 
+const cardTitle = computed(() => {
+  return $gettext('Not logged in')
+})
+const cardHint = computed(() => {
+  return $gettext(
+    'This could be because of a routine safety log out, or because your account is either inactive or not yet authorized for use. Please try logging in after a while or seek help from your Administrator.'
+  )
+})
+const navigateToLoginText = computed(() => {
+  return $gettext('Log in again')
+})
+const logoutButtonsAttrs = computed(() => {
+  const redirectUrl = queryItemAsString(unref(redirectUrlQuery))
+  if (configStore.options.loginUrl) {
+    const configLoginURL = new URL(encodeURI(configStore.options.loginUrl))
+    if (redirectUrl) {
+      configLoginURL.searchParams.append('redirectUrl', redirectUrl)
+    }
     return {
-      logoImg,
-      cardTitle,
-      cardHint,
-      footerSlogan,
-      navigateToLoginText,
-      accessDeniedHelpUrl,
-      logoutButtonsAttrs
+      type: 'a' as const,
+      href: configLoginURL.toString()
+    }
+  }
+  return {
+    type: 'router-link' as const,
+    to: {
+      name: 'login',
+      query: {
+        ...(redirectUrl && { redirectUrl })
+      }
     }
   }
 })

packages/web-runtime/src/pages/login.vue

@@ -4,22 +4,11 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { authService } from '../services/auth'
-import { queryItemAsString, useRouteQuery } from '@opencloud-eu/web-pkg'
-import { defineComponent, unref } from 'vue'
-import { AppLoadingSpinner } from '@opencloud-eu/web-pkg'
+import { queryItemAsString, useRouteQuery, AppLoadingSpinner } from '@opencloud-eu/web-pkg'
+import { unref } from 'vue'
 
-export default defineComponent({
-  name: 'LoginPage',
-  components: {
-    AppLoadingSpinner
-  },
-  setup() {
-    const redirectUrl = useRouteQuery('redirectUrl')
-    authService.loginUser(queryItemAsString(unref(redirectUrl)))
-
-    return {}
-  }
-})
+const redirectUrl = useRouteQuery('redirectUrl')
+authService.loginUser(queryItemAsString(unref(redirectUrl)))
 </script>

packages/web-runtime/src/pages/logout.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="h-screen flex flex-col justify-center items-center">
+  <div class="h-screen flex flex-col justify-center items-center p-4">
     <oc-card
       :logo-url="logoImg"
       :title="cardTitle"
-      body-class="w-sm text-center"
-      class="rounded-lg"
+      body-class="text-center"
+      header-class="text-center"
+      class="w-full sm:w-sm rounded-lg"
     >
       <p v-text="cardHint" />
       <template #footer>
@@ -13,7 +14,7 @@
     </oc-card>
     <oc-button
       id="exitAnchor"
-      class="mt-4 w-sm"
+      class="mt-4 w-full sm:w-sm"
       size="large"
       appearance="filled"
       color-role="primary"
@@ -23,56 +24,42 @@
     </oc-button>
   </div>
 </template>
-<script lang="ts">
-import { computed, defineComponent, unref } from 'vue'
+<script setup lang="ts">
+import { computed, unref } from 'vue'
 import { useConfigStore, useThemeStore } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { storeToRefs } from 'pinia'
 
-export default defineComponent({
-  name: 'LogoutPage',
-  setup() {
-    const { $gettext } = useGettext()
-    const themeStore = useThemeStore()
-    const { currentTheme } = storeToRefs(themeStore)
-    const configStore = useConfigStore()
-
-    const cardTitle = computed(() => {
-      return $gettext('Logged out')
-    })
-    const cardHint = computed(() => {
-      return $gettext('You have been logged out successfully.')
-    })
-    const loginButtonText = computed(() => {
-      return $gettext('Log in again')
-    })
-    const loginButtonAttrs = computed(() => {
-      if (configStore.options.loginUrl) {
-        const configLoginURL = new URL(encodeURI(configStore.options.loginUrl))
-        return {
-          type: 'a' as const,
-          href: configLoginURL.toString()
-        }
-      }
-      return {
-        type: 'router-link' as const,
-        to: {
-          name: 'login'
-        }
-      }
-    })
-
-    const footerSlogan = computed(() => unref(currentTheme).slogan)
-    const logoImg = computed(() => unref(currentTheme).logo)
+const { $gettext } = useGettext()
+const themeStore = useThemeStore()
+const { currentTheme } = storeToRefs(themeStore)
+const configStore = useConfigStore()
 
+const cardTitle = computed(() => {
+  return $gettext('Logged out')
+})
+const cardHint = computed(() => {
+  return $gettext('You have been logged out successfully.')
+})
+const loginButtonText = computed(() => {
+  return $gettext('Log in again')
+})
+const loginButtonAttrs = computed(() => {
+  if (configStore.options.loginUrl) {
+    const configLoginURL = new URL(encodeURI(configStore.options.loginUrl))
     return {
-      logoImg,
-      cardTitle,
-      cardHint,
-      footerSlogan,
-      loginButtonText,
-      loginButtonAttrs
+      type: 'a' as const,
+      href: configLoginURL.toString()
+    }
+  }
+  return {
+    type: 'router-link' as const,
+    to: {
+      name: 'login'
     }
   }
 })
+
+const footerSlogan = computed(() => unref(currentTheme).slogan)
+const logoImg = computed(() => unref(currentTheme).logo)
 </script>

packages/web-runtime/src/pages/missingOrInvalidConfig.vue

@@ -1,12 +1,13 @@
 <template>
   <div
-    class="bg-role-chrome h-dvh max-h-dvh overflow-y-hidden flex flex-col justify-center items-center"
+    class="bg-role-chrome h-dvh max-h-dvh overflow-y-hidden flex flex-col justify-center items-center p-4"
   >
     <h1 class="sr-only" v-text="$gettext('Error')" />
     <oc-card
       :logo-url="logoImg"
       :title="$gettext('Missing or invalid config')"
       body-class="text-center"
+      header-class="text-center"
       class="rounded-lg"
     >
       <p v-text="$gettext('Please check if the file config.json exists and is correct.')" />

packages/web-runtime/src/pages/notFound.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="flex justify-center items-center flex-col page-not-found">
+  <div class="flex justify-center items-center flex-col page-not-found p-4">
     <oc-icon name="emotion-normal" fill-type="line" size="xxlarge" />
     <h1 class="text-role-on-surface-variant">404</h1>
     <p
-      class="text-xl m-0 text-role-on-surface-variant"
+      class="text-xl m-0 text-role-on-surface-variant text-center"
       v-text="$gettext('The page you are looking for does not exist.')"
     />
   </div>