1333: Add activation route

administration/src/Router.tsx

@@ -19,6 +19,7 @@ import DataPrivacyController from './bp-modules/regions/data-privacy-policy/Data
 import DataPrivacyPolicy from './bp-modules/regions/data-privacy-policy/DataPrivacyPolicy'
 import UserSettingsController from './bp-modules/user-settings/UserSettingsController'
 import ManageUsersController from './bp-modules/users/ManageUsersController'
+import ActivationPage from './mui-modules/activation/ActivationPage'
 import ApplicationApplicantController from './mui-modules/application-verification/ApplicationApplicantController'
 import ApplicationVerificationController from './mui-modules/application-verification/ApplicationVerificationController'
 import ApplyController from './mui-modules/application/ApplyController'
@@ -43,6 +44,7 @@ const Router = () => {
       { path: '/forgot-password', element: <ForgotPasswordController /> },
       { path: '/reset-password/', element: <ResetPasswordController /> },
       { path: '/data-privacy-policy', element: <DataPrivacyPolicy /> },
+      { path: '/activation/:activationCode', element: <ActivationPage /> },
       ...(projectConfig.applicationFeature
         ? [
             { path: '/beantragen', element: <ApplyController /> },

administration/src/bp-modules/auth/Login.tsx

@@ -1,13 +1,12 @@
-import { Button, Card, H2, H3, H4 } from '@blueprintjs/core'
+import { Card, H2, H3, H4 } from '@blueprintjs/core'
 import React, { useContext } from 'react'
-import { useNavigate } from 'react-router-dom'
 
 import getMessageFromApolloError from '../../errors/getMessageFromApolloError'
 import { SignInMutation, SignInPayload, useSignInMutation } from '../../generated/graphql'
 import { ProjectConfigContext } from '../../project-configs/ProjectConfigContext'
-import { setProjectConfigOverride } from '../../project-configs/getProjectConfig'
 import { useAppToaster } from '../AppToaster'
 import StandaloneCenter from '../StandaloneCenter'
+import ProjectSwitcher from '../util/ProjectSwitcher'
 import LoginForm from './LoginForm'
 
 interface State {
@@ -16,7 +15,6 @@ interface State {
 }
 
 const Login = (props: { onSignIn: (payload: SignInPayload) => void }) => {
-  const navigate = useNavigate()
   const config = useContext(ProjectConfigContext)
   const appToaster = useAppToaster()
   const [state, setState] = React.useState<State>({ email: '', password: '' })
@@ -35,11 +33,6 @@ const Login = (props: { onSignIn: (payload: SignInPayload) => void }) => {
       },
     })
 
-  const switchProject = (project: string) => {
-    setProjectConfigOverride(project)
-    navigate(0)
-  }
-
   return (
     <StandaloneCenter>
       <Card style={{ width: '100%', maxWidth: '500px' }}>
@@ -54,12 +47,7 @@ const Login = (props: { onSignIn: (payload: SignInPayload) => void }) => {
           onSubmit={onSubmit}
           loading={mutationState.loading}
         />
-        {process.env.NODE_ENV === 'development' ? (
-          <>
-            <Button onClick={() => switchProject('nuernberg.sozialpass.app')}>Switch to Nürnberg</Button>
-            <Button onClick={() => switchProject('bayern.ehrenamtskarte.app')}>Switch to Ehrenamtskarte Bayern</Button>
-          </>
-        ) : null}
+        <ProjectSwitcher />
       </Card>
     </StandaloneCenter>
   )

administration/src/bp-modules/util/ProjectSwitcher.tsx

@@ -0,0 +1,25 @@
+import { Button } from '@blueprintjs/core'
+import React, { ReactElement } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { setProjectConfigOverride } from '../../project-configs/getProjectConfig'
+
+const ProjectSwitcher = (): ReactElement | null => {
+  const navigate = useNavigate()
+  const switchProject = (project: string) => {
+    setProjectConfigOverride(project)
+    navigate(0)
+  }
+
+  if (process.env.NODE_ENV !== 'development') {
+    return null
+  }
+  return (
+    <>
+      <Button onClick={() => switchProject('nuernberg.sozialpass.app')}>Switch to Nürnberg</Button>
+      <Button onClick={() => switchProject('bayern.ehrenamtskarte.app')}>Switch to Ehrenamtskarte Bayern</Button>
+    </>
+  )
+}
+
+export default ProjectSwitcher

administration/src/mui-modules/activation/ActivationPage.tsx

@@ -0,0 +1,35 @@
+import { Card } from '@mui/material'
+import { styled } from '@mui/system'
+import React, { ReactElement, useContext } from 'react'
+
+import { ProjectConfigContext } from '../../project-configs/ProjectConfigContext'
+import ActivationPageContent from './components/ActivationPageContent'
+
+const CardContainer = styled(Card)`
+  margin: 20px;
+  padding: 20px;
+  max-width: 500px;
+`
+
+const StandaloneHorizontalCenter = styled('div')`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  margin-top: 10%;
+`
+
+const ActivationPage = (): ReactElement | null => {
+  const config = useContext(ProjectConfigContext)
+
+  return (
+    <StandaloneHorizontalCenter>
+      <CardContainer>
+        <ActivationPageContent config={config} />
+      </CardContainer>
+    </StandaloneHorizontalCenter>
+  )
+}
+
+export default ActivationPage

administration/src/mui-modules/activation/components/ActivationPageContent.tsx

@@ -0,0 +1,15 @@
+import React, { ReactElement } from 'react'
+
+import ProjectSwitcher from '../../../bp-modules/util/ProjectSwitcher'
+import { ProjectConfig } from '../../../project-configs/getProjectConfig'
+
+const ActivationPageContent = ({ config }: { config: ProjectConfig }): ReactElement => {
+  if (!config.activation) {
+    return <ProjectSwitcher />
+  }
+  const { activationText, downloadLink } = config.activation
+
+  return <>{activationText(config.name, downloadLink)}</>
+}
+
+export default ActivationPageContent

administration/src/project-configs/bayern/activationText.tsx

@@ -0,0 +1,28 @@
+import { Typography } from '@mui/material'
+import React from 'react'
+
+export const ActivationText = (applicationName: string, downloadLink: string) => (
+  <div>
+    <Typography variant='h6' mb='8px'>
+      Aktivierung nur in der App möglich
+    </Typography>
+    <ol>
+      <li>
+        Laden Sie sich die App <b>{applicationName}</b> im App- oder PlayStore auf Ihrem Smartphone herunter.
+      </li>
+      <li>
+        {' '}
+        Öffnen Sie dafür den folgenden Link auf Ihrem Smartphone:
+        <br />
+        <a href={downloadLink} target='_blank' rel='noreferrer'>
+          {downloadLink}
+        </a>
+      </li>
+      <li>
+        Öffnen Sie nach erfolgreicher Installation die PDF mit dem Aktivierungscode und führen Sie die Aktivierung
+        erneut durch. Gegebenenfalls müssen Sie dabei die heruntergeladene App auswählen, um den Vorgang in der App zu
+        starten.
+      </li>
+    </ol>
+  </div>
+)

administration/src/project-configs/bayern/config.ts

@@ -2,6 +2,7 @@ import { JsonField, findValue } from '../../bp-modules/applications/JsonFieldVie
 import BavariaCardTypeExtension from '../../cards/extensions/BavariaCardTypeExtension'
 import RegionExtension from '../../cards/extensions/RegionExtension'
 import { ProjectConfig } from '../getProjectConfig'
+import { ActivationText } from './activationText'
 import { DataPrivacyAdditionalBaseText, DataPrivacyBaseText, dataPrivacyBaseHeadline } from './dataPrivacyBase'
 import pdfConfiguration from './pdf'
 
@@ -57,6 +58,10 @@ const config: ProjectConfig = {
   dataPrivacyHeadline: dataPrivacyBaseHeadline,
   dataPrivacyContent: DataPrivacyBaseText,
   dataPrivacyAdditionalBaseContent: DataPrivacyAdditionalBaseText,
+  activation: {
+    activationText: ActivationText,
+    downloadLink: 'https://download.bayern.ehrenamtskarte.app/',
+  },
   timezone: 'Europe/Berlin',
   pdf: pdfConfiguration,
 }

administration/src/project-configs/getProjectConfig.ts

@@ -61,6 +61,10 @@ export interface ProjectConfig {
   pdf: PdfConfig
   timezone: string
   activityLogConfig?: ActivityLogConfig
+  activation?: {
+    activationText: (applicationName: string, downloadLink: string) => ReactElement
+    downloadLink: string
+  }
 }
 
 export const setProjectConfigOverride = (hostname: string) => {