feat(pages): replace middleware with soft 404 call to actions

maevsi · May 13, 2023 · 7627338 · 7627338
1 parent 15f0e8b
commit 7627338
Show file tree

Hide file tree

Showing 14 changed files with 138 additions and 146 deletions.
diff --git a/nuxt/components/_/Error.vue b/nuxt/components/_/Error.vue
@@ -1,15 +1,17 @@
 <template>
-  <div class="flex flex-col gap-4">
-    <i18n-t
-      keypath="maevNo"
-      class="flex items-center justify-center gap-1 text-xl font-black"
-      tag="span"
-    >
-      <template #emojiFacePleading>
-        <EmojiFacePleading />
-      </template>
-    </i18n-t>
-    <h1>{{ statusCode ? `${statusCode} - ` : '' }}{{ statusReason }}</h1>
+  <div class="flex flex-col items-center gap-4">
+    <CardStateAlert class="flex flex-col items-center text-3xl">
+      <i18n-t
+        keypath="maevNo"
+        class="flex items-center gap-1 text-xl font-black"
+        tag="span"
+      >
+        <template #emojiFacePleading>
+          <EmojiFacePleading />
+        </template>
+      </i18n-t>
+      {{ statusCode ? `${statusCode} - ` : '' }}{{ statusReason }}
+    </CardStateAlert>
     <p v-if="statusCode === 403" class="text-center">
       {{ t('error403Description') }}
       <br />
@@ -33,11 +35,22 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const { locale, t } = useI18n()
+const { ssrContext } = useNuxtApp()
 
 // computations
 const statusReason = computed(() => {
   return status(props.statusCode, locale.value) || (t('error') as string)
 })
+
+// methods
+const init = () => {
+  if (ssrContext && props.statusCode) {
+    ssrContext.event.node.res.statusCode = props.statusCode
+  }
+}
+
+// initialization
+init()
 </script>
 
 <script lang="ts">

diff --git a/nuxt/components/layout/LayoutCallToAction.vue b/nuxt/components/layout/LayoutCallToAction.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="flex flex-col items-center">
+    <span>{{ callToActionDescription }}</span>
+    <ButtonColored
+      :aria-label="callToAction"
+      :to="
+        localePath({
+          path: '/task/account/sign-in',
+          query: {
+            to: route.fullPath,
+          },
+        })
+      "
+    >
+      {{ callToAction }}
+    </ButtonColored>
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  callToAction: string
+  callToActionDescription: string
+}
+withDefaults(defineProps<Props>(), {})
+
+const localePath = useLocalePath()
+const route = useRoute()
+</script>
diff --git a/nuxt/cypress/e2e/taskEventCreate.cy.ts b/nuxt/cypress/e2e/taskEventCreate.cy.ts
@@ -9,7 +9,7 @@ describe('task event create page', () => {
       }).then((resp) => {
         expect(resp.status).to.equal(302)
         expect(resp.redirectedToUrl).to.equal(
-          `${CYPRESS_BASE_URL}/task/account/sign-in?referrer=/task/event/create`
+          `${CYPRESS_BASE_URL}/task/account/sign-in?to=/task/event/create`
         )
       })
     })

diff --git a/nuxt/middleware/forbiddenNotAccount.ts b/nuxt/middleware/forbiddenNotAccount.ts
diff --git a/nuxt/middleware/forbiddenNotAnonymous.ts b/nuxt/middleware/forbiddenNotAnonymous.ts
diff --git a/nuxt/pages/account/index.vue b/nuxt/pages/account/index.vue
@@ -1,29 +1,16 @@
 <template>
+  <!-- TODO: fill page with content instead (https://github.com/maevsi/maevsi/issues/1264) -->
   <div>
     <LayoutBreadcrumbs>
       {{ title }}
     </LayoutBreadcrumbs>
+    <CardStateInfo>
+      {{ t('accountDescription') }}
+    </CardStateInfo>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useMaevsiStore } from '~/store'
-
-definePageMeta({
-  middleware: [
-    () => {
-      const store = useMaevsiStore()
-      const localePath = useLocalePath()
-
-      if (store.jwtDecoded?.role === 'maevsi_account') {
-        return navigateTo(localePath('/account/' + store.jwtDecoded.username))
-      } else {
-        return navigateTo(localePath('/task/account/sign-in'))
-      }
-    },
-  ],
-})
-
 const { t } = useI18n()
 
 // data
@@ -41,7 +28,9 @@ export default {
 
 <i18n lang="yaml">
 de:
+  accountDescription: Hier wirst du bald interessante Veranstalter entdecken können.
   title: Konten
 en:
+  accountDescription: Here you will soon be able to discover interesting event organizers.
   title: accounts
 </i18n>
diff --git a/nuxt/pages/contact/index.vue b/nuxt/pages/contact/index.vue
@@ -3,25 +3,19 @@
     <h1>
       {{ title }}
     </h1>
-    <ContactList />
+    <ContactList v-if="store.jwtDecoded?.role === 'maevsi_account'" />
+    <LayoutCallToAction
+      v-else
+      :call-to-action="t('anonymousCta')"
+      :call-to-action-description="t('anonymousCtaDescription')"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useMaevsiStore } from '~/store'
 
-definePageMeta({
-  middleware: [
-    () => {
-      const store = useMaevsiStore()
-
-      if (!store.signedInUsername) {
-        return abortNavigation({ statusCode: 403 })
-      }
-    },
-  ],
-})
-
+const store = useMaevsiStore()
 const { t } = useI18n()
 
 // data
@@ -39,7 +33,11 @@ export default {
 
 <i18n lang="yaml">
 de:
+  anonymousCta: Finde sie auf maevsi
+  anonymousCtaDescription: Wo sind deine Freunde?
   title: Kontaktbuch
 en:
+  anonymousCta: Find them on maevsi
+  anonymousCtaDescription: Where are your friends?
   title: Contact book
 </i18n>
diff --git a/nuxt/pages/dashboard/index.vue b/nuxt/pages/dashboard/index.vue
@@ -3,7 +3,10 @@
     <h1>
       {{ title }}
     </h1>
-    <div class="flex flex-col gap-4">
+    <div
+      v-if="store.jwtDecoded?.role === 'maevsi_account'"
+      class="flex flex-col gap-4"
+    >
       <div class="flex gap-4">
         <section class="lg:w-1/2">
           <h2>{{ t('eventsMine') }}</h2>
@@ -54,25 +57,17 @@
         </CardStateInfo>
       </section>
     </div>
+    <LayoutCallToAction
+      v-else
+      :call-to-action="t('anonymousCta')"
+      :call-to-action-description="t('anonymousCtaDescription')"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useMaevsiStore } from '~/store'
 
-definePageMeta({
-  middleware: [
-    () => {
-      const store = useMaevsiStore()
-      const localePath = useLocalePath()
-
-      if (store.jwtDecoded?.role !== 'maevsi_account') {
-        return navigateTo(localePath('/'))
-      }
-    },
-  ],
-})
-
 const { t } = useI18n()
 const store = useMaevsiStore()
 const localePath = useLocalePath()
@@ -95,6 +90,8 @@ export default {
 
 <i18n lang="yaml">
 de:
+  anonymousCta: Finde ihn auf maevsi
+  anonymousCtaDescription: Dir fehlt der Überblick über Veranstaltungen?
   contactBook: Kontaktbuch
   contactsMine: Meine Kontake
   eventsMine: Meine Veranstaltungen
@@ -106,6 +103,8 @@ de:
   title: Dashboard
   uploadsMine: Meine Uploads
 en:
+  anonymousCta: Find it on maevsi
+  anonymousCtaDescription: Are you missing an overview of events?
   contactBook: Contact book
   contactsMine: My contacts
   eventsMine: My events

diff --git a/nuxt/pages/task/account/email-address/verify.vue b/nuxt/pages/task/account/email-address/verify.vue
@@ -2,34 +2,20 @@
   <div>
     <h1>{{ title }}</h1>
     <Loader
+      v-if="isCodeValid"
       :api="api"
       :error-pg-ids="{
         postgres55000: t('postgres55000'),
         postgresP0002: t('postgresP0002'),
       }"
     />
+    <Error v-else :status-code="422" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useAccountEmailAddressVerificationMutation } from '~/gql/documents/mutations/account/accountEmailAddressVerification'
 
-definePageMeta({
-  middleware: [
-    (to) => {
-      const localePath = useLocalePath()
-
-      if (
-        Array.isArray(to.query.code) ||
-        to.query.code === null ||
-        !REGEX_UUID.test(to.query.code)
-      ) {
-        return navigateTo(localePath('/'))
-      }
-    },
-  ],
-})
-
 const localePath = useLocalePath()
 const { t } = useI18n()
 const route = useRoute()
@@ -43,6 +29,14 @@ const api = getApiData([accountEmailAddressVerificationMutation])
 // data
 const title = t('title')
 
+// computations
+const isCodeValid = computed(
+  () =>
+    route.query.code &&
+    !Array.isArray(route.query.code) &&
+    REGEX_UUID.test(route.query.code)
+)
+
 // lifecycle
 onMounted(async () => {
   // run on client side only

diff --git a/nuxt/pages/task/account/password/reset/index.vue b/nuxt/pages/task/account/password/reset/index.vue
@@ -1,32 +1,26 @@
 <template>
   <div>
     <h1>{{ title }}</h1>
-    <FormAccountPasswordReset />
+    <FormAccountPasswordReset v-if="isCodeValid" />
+    <Error v-else :status-code="422" />
   </div>
 </template>
 
 <script setup lang="ts">
-definePageMeta({
-  middleware: [
-    (to) => {
-      const localePath = useLocalePath()
-
-      if (
-        Array.isArray(to.query.code) ||
-        to.query.code === null ||
-        !REGEX_UUID.test(to.query.code)
-      ) {
-        return navigateTo(localePath('/'))
-      }
-    },
-  ],
-})
-
 const { t } = useI18n()
+const route = useRoute()
 
 // data
 const title = t('title')
 
+// computations
+const isCodeValid = computed(
+  () =>
+    route.query.code &&
+    !Array.isArray(route.query.code) &&
+    REGEX_UUID.test(route.query.code)
+)
+
 // initialization
 useHeadDefault(title)
 </script>

diff --git a/nuxt/pages/task/account/sign-in.vue b/nuxt/pages/task/account/sign-in.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <CardStateInfo v-if="routeQueryReferrer">
+    <CardStateInfo v-if="isReferring">
       {{ t('accountRequired') }}
     </CardStateInfo>
     <h1>{{ title }}</h1>
@@ -15,15 +15,19 @@ import { useMaevsiStore } from '~/store'
 
 definePageMeta({
   middleware: [
-    () => {
+    (to) => {
       const store = useMaevsiStore()
       const localePath = useLocalePath()
 
       if (
         store.jwtDecoded?.role === 'maevsi_account' &&
-        !Array.isArray(route.query.referrer)
+        !Array.isArray(to.query.to)
       ) {
-        return navigateTo(route.query.referrer || localePath('/dashboard/'))
+        return navigateTo(
+          to.redirectedFrom?.fullPath ||
+            to.query.to ||
+            localePath('/dashboard/')
+        )
       }
     },
   ],
@@ -34,9 +38,7 @@ const { t } = useI18n()
 
 // data
 const title = t('title')
-
-// computations
-const routeQueryReferrer = computed(() => route.query.referrer)
+const isReferring = route.redirectedFrom || route.query.to
 
 // initialization
 useHeadDefault(title)