Add OTP support

[C0ntroller]

Pull Request

Description

This PR will add OTP support to TUfast where the secret is stored, and the values automatically filled on login.

Although this makes 2FA kinda useless, the fact that 2FA will be forced, and that this feature was requested multiple times means it should be added.
Also, currently the really critical logins (HISQIS/jExam/Selma) are not even secured by 2FA.

References

Closes #127

Type of change

• Bug fix (non-breaking change which fixes a bug)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that might cause existing functionality to not work as expected)

Further info

• This change requires a documentation update
• I updated the documentation accordingly, if required
• I commented my code where its useful

Testing

We have 1500+ Users. Please test your changes thoroughly.

• Tested my changes on Firefox
• Tested my changes on Chromium-Based-Browsers
• Successfully run npm run test locally

Additional Information

When testing this, please be careful when creating new tokens!! Always save them in another location!

[OliEfr]

Thank you very much - I will get it to test it on Chrome.

[Nix-da]

Hi, I testet it in Chrome (Version 120.0.6099.224) and the new 2FA auto login worked.
I testet it on my Windows 11 Laptop and my Windows 10 PC and succsessfully logged 3 times on all of those plattforms: Opal, Self Service Portal, OpalExam, OpalExam2 and OpalExam3.

Furtheremore I reviewed the code changes a bit and everything looks fine to me. It reuses many functions of the username-password auto login, which already proofed to work.

I just have some notes regarding its usability:

• On OpalExam 1-3 the automatic selection of "TU Dresden" is not working. I did not test if this is a problem of this branch or if this does not work on the current release aswell.
• There really needs to be a hint somewhere on how to save the token in TUFast. I expected to find another input field below username and password in the settings. I only found out that you have to generate a new token while reviewing the code. Just adding a small text panel below the selma-password input field for this would help a lot.

[Nix-da]

Also - when adding the Add On to chrome - this throws an error in contentScripts/login/opalHome.js:32 (clickLogin):

Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

I am not sure what that even means, but i does not seem to have impact on functionality.

[C0ntroller]

On OpalExam 1-3 the automatic selection of "TU Dresden" is not working. I did not test if this is a problem of this branch or if this does not work on the current release aswell.

We do not inject any scripts into OpalExam for obvious reasons. So works as intended.

Also - when adding the Add On to chrome - this throws an error in contentScripts/login/opalHome.js:32 (clickLogin):

Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

I am not sure what that even means, but i does not seem to have impact on functionality.

Nice catch, would've never noticed that. As you said, it has no impact on functionality in this case.
I do know what that means (the CSP is a security mechanism to specify sources for any resources) but As I honestly don't even know why the error occurs in this line, I would say this is a problem for later.

There really needs to be a hint somewhere on how to save the token in TUFast. I expected to find another input field below username and password in the settings. I only found out that you have to generate a new token while reviewing the code. Just adding a small text panel below the selma-password input field for this would help a lot.

Yes this will need to be done, thanks for pointing that out. Probably it will just be another "tab" in the login window, as layout shifts currently mean more styling issues ^^

[OliEfr]

Could and should the UI-Change (i.e. additional input field) be done in another PR, or should I leave this one open?

[C0ntroller]

Could and should the UI-Change (i.e. additional input field) be done in another PR, or should I leave this one open?

Will try to add it today.

[C0ntroller]

Nope, seems to be a bit harder as the currently established Username-Password input fields are really hard to extend.
This is more a work for @Noxdor or future me when I ever try to kill snowpack and make the settings mobile friendly ^^'

But I don't think thats too bad. Most users use TOTPs (I think? Personal experience...) and don't know where to find their secret. So saying to just generate a new token currently is the easiest way for anyone...

So @OliEfr if you want to merge do it.