Merge pull request #4618 from manuelmeister/feature/add-help-navigation

Add help & news on login screen and main nav

.github/workflows/reusable-dev-deployment.yml

@@ -60,7 +60,7 @@ jobs:
             |<span aria-hidden="true">🔨</span> Latest commit | [${{ inputs.sha }}](https://github.com/${{ github.repository }}/commit/${{ inputs.sha }}) |
             |<span aria-hidden="true">🔍</span> Latest deploy log | [${{ steps.job-url.outputs.html_url }}](${{ steps.job-url.outputs.html_url }}) |
           comment_tag: feature-branch-deployment-status
-      
+
       - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
         with:
           ref: ${{ inputs.sha }}
@@ -87,6 +87,8 @@ jobs:
             --set caddy.image.repository='docker.io/${{ vars.DOCKER_HUB_USERNAME }}/ecamp3-api-caddy' \
             --set postgresql.dbBackupRestoreImage.repository='docker.io/${{ vars.DOCKER_HUB_USERNAME }}/ecamp3-db-backup-restore' \
             --set termsOfServiceLinkTemplate='https://ecamp3.ch/{lang}/tos' \
+            --set newsLink='https://ecamp3.ch/blog' \
+            --set helpLink='https://ecamp3.ch/faq' \
             --set domain=${{ inputs.name }}.${{ vars.DOMAIN }} \
             --set ingress.basicAuth.enabled=${{ vars.BASIC_AUTH_ENABLED || false  }} \
             --set ingress.basicAuth.username=${{ secrets.BASIC_AUTH_USERNAME }} \

.github/workflows/reusable-stage-prod-deployment.yml

@@ -46,6 +46,8 @@ jobs:
             --set caddy.image.repository='docker.io/${{ vars.DOCKER_HUB_USERNAME }}/ecamp3-api-caddy' \
             --set postgresql.dbBackupRestoreImage.repository='docker.io/${{ vars.DOCKER_HUB_USERNAME }}/ecamp3-db-backup-restore' \
             --set termsOfServiceLinkTemplate='https://ecamp3.ch/{lang}/tos' \
+            --set newsLink='https://ecamp3.ch/blog' \
+            --set helpLink='https://ecamp3.ch/faq' \
             --set domain=${{ env.domain }} \
             --set ingress.basicAuth.enabled=${{ vars.BASIC_AUTH_ENABLED || false  }} \
             --set ingress.basicAuth.username=${{ secrets.BASIC_AUTH_USERNAME }} \

.helm/deploy-to-cluster.sh

@@ -35,6 +35,8 @@ app_jwt_private_key=$(echo -n "$app_jwt_passphrase" | openssl pkey -in "$SCRIPT_
 for i in 1; do
   values="$values --set imageTag=${version}"
   values="$values --set termsOfServiceLinkTemplate=https://ecamp3.ch/{lang}/tos"
+  values="$values --set newsLink=https://ecamp3.ch/blog"
+  values="$values --set helpLink=https://ecamp3.ch/faq"
   values="$values --set domain=$instance_name-"$i".$domain"
   values="$values --set mail.dummyEnabled=true"
   values="$values --set ingress.basicAuth.enabled=$BASIC_AUTH_ENABLED"
@@ -95,7 +97,7 @@ for i in 1; do
     values="$values --set $imagespec.image.pullPolicy=$pull_policy"
     values="$values --set $imagespec.image.repository=docker.io/${docker_hub_account}/ecamp3-api-$imagespec"
   done
-  
+
   values="$values --set postgresql.dbBackupRestoreImage.pullPolicy=$pull_policy"
   values="$values --set postgresql.dbBackupRestoreImage.repository=docker.io/${docker_hub_account}/ecamp3-db-backup-restore"
 

.helm/ecamp3/templates/frontend_configmap.yaml

@@ -21,6 +21,8 @@ data:
       VERSION: '{{ .Values.deployedVersion }}',
       VERSION_LINK_TEMPLATE: '{{ .Values.versionLinkTemplate }}',
       TERMS_OF_SERVICE_LINK_TEMPLATE: '{{ .Values.termsOfServiceLinkTemplate }}',
+      NEWS_LINK: '{{ .Values.newsLink }}',
+      HELP_LINK: '{{ .Values.helpLink }}',
     {{- if .Values.recaptcha.siteKey }}
       RECAPTCHA_SITE_KEY: '{{ .Values.recaptcha.siteKey }}',
     {{- else }}

.helm/ecamp3/values.yaml

@@ -9,6 +9,8 @@ domain:
 deployedVersion: "devel"
 versionLinkTemplate: 'https://github.com/ecamp/ecamp3/commit/{version}'
 termsOfServiceLinkTemplate: # 'https://ecamp3.ch/{lang}/tos'
+newsLink: # 'https://ecamp3.ch/blog'
+helpLink: # 'https://ecamp3.ch/faq'
 
 # enable/disable feature across the complete deployment
 featureToggle:

frontend/src/App.vue

@@ -90,27 +90,11 @@ export default {
   width: 100%;
 }
 
-.user-nav {
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
-}
-
 .v-btn--open {
   background: #b0bec5 !important;
   color: rgba(0, 0, 0, 0.87) !important;
 }
 
-.ec-usermenu {
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
-  right: 0;
-  left: inherit !important;
-
-  .v-list {
-    border-radius: 0;
-  }
-}
-
 .v-app-bar .v-toolbar__content {
   padding-left: 0;
   padding-right: 0;

frontend/src/components/layout/AuthContainer.vue

@@ -2,10 +2,7 @@
   <v-container class="sso--container fill-height justify-center align-center" fluid>
     <v-col
       cols="12"
-      sm="8"
-      md="5"
-      lg="4"
-      class="pa-0 pa-sm-4 pb-sm-12"
+      class="pa-0 pa-sm-4 pb-sm-12 auth-column"
       :class="{ 'fill-height': $vuetify.breakpoint.xsOnly }"
     >
       <v-card
@@ -50,4 +47,7 @@ export default {
 .fill-min-height {
   min-height: 100%;
 }
+.auth-column {
+  max-width: 600px;
+}
 </style>

frontend/src/components/navigation/UserMeta.vue

@@ -5,8 +5,9 @@
     offset-y
     dark
     right
+    rounded
     :content-class="
-      ['ec-usermenu', $vuetify.breakpoint.xsOnly && 'rounded-lg mt-2'].join(' ')
+      ['ec-usermenu my-4', $vuetify.breakpoint.xsOnly && 'rounded-lg mt-2'].join(' ')
     "
     transition="slide-y-transition"
     :close-on-content-click="false"
@@ -41,7 +42,7 @@
         </span>
       </v-btn>
     </template>
-    <v-list dense class="user-nav" tag="ul" light color="blue-grey lighten-5">
+    <v-list class="user-nav py-0" tag="ul" light>
       <v-list-item
         tag="li"
         block
@@ -55,6 +56,24 @@
         <v-icon left>mdi-format-list-bulleted-triangle</v-icon>
         <span>{{ $tc('components.navigation.userMeta.myCamps') }}</span>
       </v-list-item>
+      <v-list-item
+        v-if="!$vuetify.breakpoint.lgAndUp"
+        block
+        :href="helpLink"
+        target="_blank"
+      >
+        <v-icon left>mdi-help-circle</v-icon>
+        <span>{{ $tc('global.navigation.help') }}</span>
+        <v-spacer />
+        <v-icon small right>mdi-open-in-new</v-icon>
+      </v-list-item>
+      <v-list-item block :href="newsLink" target="_blank">
+        <v-icon left>mdi-script-text-outline</v-icon>
+        <span>{{ $tc('global.navigation.news') }}</span>
+        <v-spacer />
+        <v-icon small right>mdi-open-in-new</v-icon>
+      </v-list-item>
+      <v-divider />
       <v-list-item block tag="li" @click="logout">
         <v-progress-circular
           v-if="logoutInProgress"
@@ -73,6 +92,7 @@
 <script>
 import UserAvatar from '../user/UserAvatar.vue'
 import { mapGetters } from 'vuex'
+import { getEnv } from '@/environment.js'
 
 export default {
   name: 'UserMeta',
@@ -95,6 +115,12 @@ export default {
     }
   },
   computed: {
+    newsLink() {
+      return getEnv().NEWS_LINK
+    },
+    helpLink() {
+      return getEnv().HELP_LINK
+    },
     ...mapGetters({
       authUser: 'getLoggedInUser',
     }),

frontend/src/environment.js

@@ -18,6 +18,8 @@ export function getEnv() {
       'https://github.com/ecamp/ecamp3/commit/{version}',
     TERMS_OF_SERVICE_LINK_TEMPLATE:
       env.TERMS_OF_SERVICE_LINK_TEMPLATE ?? 'https://ecamp3.ch/{lang}/tos',
+    NEWS_LINK: env.NEWS_LINK ?? 'https://ecamp3.ch/blog',
+    HELP_LINK: env.HELP_LINK ?? 'https://ecamp3.ch/faq',
     FEATURE_DEVELOPER: (env.VITE_FEATURE_DEVELOPER ?? 'true') === 'true',
     LOGIN_INFO_TEXT_KEY: env.VITE_LOGIN_INFO_TEXT_KEY ?? 'dev',
   }

frontend/src/locales/de.json

@@ -463,7 +463,9 @@
     "navigation": {
       "admin": {
         "title": "Admin"
-      }
+      },
+      "help": "Hilfe",
+      "news": "News"
     },
     "serverError": {
       "409": "Uuuups... Diese Aktion hat zu einem Fehler auf dem Server geführt.",

frontend/src/locales/en.json

@@ -463,7 +463,9 @@
     "navigation": {
       "admin": {
         "title": "Admin"
-      }
+      },
+      "help": "Help",
+      "news": "News"
     },
     "serverError": {
       "409": "Uuuups... This action caused an server-side error.",

frontend/src/locales/fr.json

@@ -446,7 +446,9 @@
     "navigation": {
       "admin": {
         "title": "Admin"
-      }
+      },
+      "help": "Aide",
+      "news": "Actualités"
     },
     "serverError": {
       "409": "Oooops... Cette action a provoqué une erreur côté serveur.",

frontend/src/locales/it.json

@@ -446,7 +446,9 @@
     "navigation": {
       "admin": {
         "title": "Admin"
-      }
+      },
+      "help": "Aiuto",
+      "news": "Notizie"
     },
     "serverError": {
       "409": "Oooops... Questa azione ha causato un errore sul lato server.",

frontend/src/locales/rm.json

@@ -410,7 +410,9 @@
     "navigation": {
       "admin": {
         "title": "Admin"
-      }
+      },
+      "help": "Agid",
+      "news": "Noviteds"
     },
     "serverError": {
       "409": "Uuuups... Questa acziun ha chaschunà ina errur sin il server."

frontend/src/router.js

@@ -7,6 +7,7 @@ import { getEnv } from '@/environment.js'
 
 Vue.use(Router)
 
+const NavigationAuth = () => import('./views/auth/NavigationAuth.vue')
 const NavigationDefault = () => import('./views/NavigationDefault.vue')
 const NavigationCamp = () => import('./views/camp/navigation/NavigationCamp.vue')
 const GenericPage = () => import('./components/generic/GenericPage.vue')
@@ -43,31 +44,31 @@ export default new Router({
       path: '/register',
       name: 'register',
       components: {
-        navigation: NavigationDefault,
+        navigation: NavigationAuth,
         default: () => import('./views/auth/Register.vue'),
       },
     },
     {
       path: '/register-done',
       name: 'register-done',
       components: {
-        navigation: NavigationDefault,
+        navigation: NavigationAuth,
         default: () => import('./views/auth/RegisterDone.vue'),
       },
     },
     {
       path: '/reset-password',
       name: 'resetPasswordRequest',
       components: {
-        navigation: NavigationDefault,
+        navigation: NavigationAuth,
         default: () => import('./views/auth/ResetPasswordRequest.vue'),
       },
     },
     {
       path: '/reset-password/:id',
       name: 'resetPassword',
       components: {
-        navigation: NavigationDefault,
+        navigation: NavigationAuth,
         default: () => import('./views/auth/ResetPassword.vue'),
       },
       props: {
@@ -82,7 +83,7 @@ export default new Router({
       path: '/activate/:userId/:activationKey',
       name: 'activate',
       components: {
-        navigation: NavigationDefault,
+        navigation: NavigationAuth,
         default: () => import('./views/auth/Activate.vue'),
       },
       props: {
@@ -98,15 +99,15 @@ export default new Router({
       path: '/login',
       name: 'login',
       components: {
-        navigation: NavigationDefault,
+        navigation: NavigationAuth,
         default: () => import('./views/auth/Login.vue'),
       },
     },
     {
       path: '/loginCallback',
       name: 'loginCallback',
       components: {
-        navigation: NavigationDefault,
+        navigation: NavigationAuth,
         default: () => import('./views/auth/LoginCallback.vue'),
       },
     },

frontend/src/views/NavigationDefault.vue

@@ -6,21 +6,33 @@
     color="blue-grey darken-4"
     dark
   >
-    <logo text />
+    <Logo text />
     <v-spacer />
-    <user-meta />
+    <v-toolbar-items v-if="$vuetify.breakpoint.lgAndUp">
+      <v-btn :href="helpLink" target="_blank" text>
+        {{ $tc('global.navigation.help') }}
+        <span class="blue-grey--text"><v-icon small right>mdi-open-in-new</v-icon></span>
+      </v-btn>
+    </v-toolbar-items>
+    <UserMeta />
   </v-app-bar>
 </template>
 
 <script>
 import UserMeta from '@/components/navigation/UserMeta.vue'
 import Logo from '@/components/navigation/Logo.vue'
+import { getEnv } from '@/environment.js'
 
 export default {
   name: 'NavigationDefault',
   components: {
     UserMeta,
     Logo,
   },
+  computed: {
+    helpLink() {
+      return getEnv().HELP_LINK
+    },
+  },
 }
 </script>

frontend/src/views/Profile.vue

@@ -4,10 +4,13 @@
       v-if="user"
       max-width="800"
       :title="
-        $tc('views.profile.profile') + ': ' + (user._meta.loading ? '' : user.displayName)
+        $tc('views.profile.profile') + (user._meta.loading ? '' : ': ' + user.displayName)
       "
       toolbar
     >
+      <template #title-actions>
+        <UserMeta v-if="!$vuetify.breakpoint.mdAndUp" avatar-only btn-classes="mr-n4" />
+      </template>
       <v-col>
         <v-skeleton-loader type="text" :loading="profile._meta.loading">
           <e-text-field