General: Improve user interface of passkey explanation

[Lyynnnx]

Summary

Checklist

General

• This is a small issue that I tested locally and was confirmed by another developer on a test server.
• Language: I followed the guidelines for inclusive, diversity-sensitive, and appreciative language.
• I chose a title conforming to the naming conventions for pull requests.

Client

• Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data (e.g. using paging).
• I strictly followed the principle of data economy for all client-server REST calls.
• I strictly followed the client coding guidelines.
• I strictly followed the AET UI-UX guidelines.
• Following the theming guidelines, I specified colors only in the theming variable files and checked that the changes look consistent in both the light and the dark theme.
• I added multiple integration tests (Vitest) related to the features (with a high test coverage), while following the test guidelines.
• I added authorities to all new routes and checked the course groups for displaying navigation elements (links, buttons).
• I documented the TypeScript code using JSDoc style.
• I added multiple screenshots/screencasts of my UI changes.
• I translated all newly inserted strings into English and German.

Motivation and Context

The passkey nudge model hasn't received any updates for a long time. To increase the usage of passkey of users, it's crucial to provide user with useful information about passkeys, keeping the text amount as few as possible.
Decreasing the amount of text in passkey-setup modal improves the UX and attracts the user's attention

Description

This PR rethinks the UI of SetupPasskeyModalComponent, decreases the amount of text, adds icons and make the whole design more clear to users. It also adds new facts about passkeys similar to as it is implemented in Thesis Management

Steps for Testing

Prerequisites:

1. An account, where the passkey was not set up yet
2. Log in to Artemis
3. Verify that you got the Set Up Your First Passkey on This Device modal with a new UI.

Testserver States

You can manage test servers using Helios. Check environment statuses in the environment list. To deploy to a test server, go to the CI/CD page, find your PR or branch, and trigger the deployment.

Review Progress

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Test Coverage

Client

Class/File	Line Coverage	Lines	Expects	Ratio
setup-passkey-modal.component.ts	91.89%	76	17	22.4

Last updated: 2026-08-08 14:19:41 UTC

Screenshots

Summary by CodeRabbit

• UI Improvements
  • Refreshed the passkey setup dialog with improved sizing, layout, and styling.
  • Added visual explanations highlighting faster sign-in, passwordless access, and enhanced security.
  • Updated controls for a more consistent and accessible experience.
  • Improved actions for setting up a passkey, closing the dialog, or being reminded later.
• Localization
  • Added English and German translations for the passkey setup content and reminder option.

[Claudia-Anthropica]

@Lyynnnx The latest tests cover the rendered footer controls, and I found no new code-level regression in the responsive TUM UI implementation. However, the exact-head snapshot has a failed required All required CI Passed check and a failed E2E / Report E2E Overall Status aggregate. The repository gate explicitly treats that aggregate as the authoritative E2E verdict despite successful phase jobs, so please obtain a green required CI result.

[SultanTheHL]

Issues mentioned above has been resolved. Approve👍

[Claudia-Anthropica]

@Lyynnnx The exact-head implementation resolves the prior localization, semantic styling, responsive footer, and test-coverage findings, and I found no new code-level regression. However, the required All required CI Passed check and authoritative E2E / Report E2E Overall Status aggregate remain failed; please fix or rerun the E2E failure and obtain a green required CI result.

[LuisL02]

Tested on TS5, new passkey UI is clean and works as expected - buttons are highlighted on hover and functional.

[az108]

Code Review and Tested on TS5 and works as described with a great new passkey overview. 👍

One thing I noticed was that the set up later button was not consistent with the other buttons, but this seems to be wanted.