1333: Add activation route

[f1sh1918]

Short description

An activation page is needed to handle opening activation links without the app being installed on the smartphone.
Remind the user that the app has to be installed before the card can be activated.

Proposed changes

• add an activation route
• add install instructions
• add a separate ProjectSwitcher component for dev issues (make it reusable)

Fixes: #1333

Testing

a) dev environment

• create a card
• move the pdf on your device
• uninstall the app on the device (ehrenamt)
• for testing on dev environment you have to use the following linking scheme to test the route in your browser on mobile device .
  http://<networkip>:3000/activation/code#activationCode/ (use the activation code in the console)

There is no real good way to test it on dev environment unfortunately, because we need a localhost/localNetworkIp link to open the route locally. There also might be issues that connection is lost in the flutter app meanwhile you are in the browser and follow instructions. But this can only happen on dev environments (app in background).

b) staging

• create a card
• uninstall the app (ehrenamt)
• open the link in the pdf on smartphone

[ztefanie]

I tried to test this, but it did not work, or I did something wrong.

What I did:

1. Created a card
2. opened http://localhost:3000/activation/AtIEThFmwAN49h0rWeIwBcB1JoS7gTkn7zJ9UFp8pSU=
   The string in the end, is the activation code that is shown below of the qr code on the pdf.
   When the activation code does not contain a e.g. slash, i got this error message Der von Ihnen geöffnete Link ist ungültig. Der Link wurde fehlerhaft in den Browser übertragen. Versuchen Sie, den Link manuell aus der E-Mail oder dem PDF zu kopieren.
   when it does contain a slash, i was just redirected to the login page.

[f1sh1918]

I tried to test this, but it did not work, or I did something wrong.

What I did:

1. Created a card
2. opened http://localhost:3000/activation/AtIEThFmwAN49h0rWeIwBcB1JoS7gTkn7zJ9UFp8pSU=
   The string in the end, is the activation code that is shown below of the qr code on the pdf.
   When the activation code does not contain a e.g. slash, i got this error message Der von Ihnen geöffnete Link ist ungültig. Der Link wurde fehlerhaft in den Browser übertragen. Versuchen Sie, den Link manuell aus der E-Mail oder dem PDF zu kopieren.
   when it does contain a slash, i was just redirected to the login page.

Sorry I forgot to mention
This PR depends on #1324 the link Scheme has to be
activation/code#activationCode/ and the activation Code has to be Uri encoded which should be the case for console.log message . Gonna add an example link in the description.
Probably it makes sense to review #1324 first and merge it

Until i tested michis comments, i'm gonna revert the pr to draft.

[michael-markl]

did not test it

[f1sh1918]

@ztefanie i would appreciate a second review since michael did not test it. thx

[ztefanie]

I tested it on Android emulator.

I get this as the first screen wenn opening http://localhost:3000/activation/code#ChQKBHRlc3QQoqMBGggKAggBIgIIABIQIuF4botoitZxNY86gioBKxoUJPaMJ8zLarOKBYaIDlfvjFLw0fU=

on the emulator:

After clicking on bayern, i see the screen i would have expected. But i think this first screen should not be displayed.

When opening in the browser (on my linux machine) it get:
First screen:

second screen:

[f1sh1918]

This screen is dev only and we need it to decide which project config should be used because we have no proper URL. So this is fine @ztefanie