docs: add pictures (#9019)

Signed-off-by: James Elliott <james-d-elliott@users.noreply.github.com>
Co-authored-by: Hendrik Sievers <hendrik1120@users.noreply.github.com>

README.md

@@ -47,7 +47,7 @@ and ingress configurations.
 Here is what Authelia's portal looks like:
 
 <p align="center">
-  <img src="https://www.authelia.com/images/1FA.png" width="400" />
+  <img src="https://www.authelia.com/images/oled.png" width="400" />
   <img src="https://www.authelia.com/images/2FA-METHODS.png" width="400" />
 </p>
 

docs/content/blog/release-notes-4.39/index.md

@@ -69,9 +69,14 @@ A number of exiting features have been added to our WebAuthn implementation.
 
 ### Passkeys and Passwordless Authentication
 
-This release adds support for Passkeys including the ability to perform Passwordless Authentication with them. The
-feature has been implemented to count as non-MFA, and by default users will have to enter their password to perform
-full MFA.
+This release adds support for Passkeys including the ability to perform Passwordless Authentication with them.
+
+{{< figure src="passkeys.png" caption="Passkeys Portal View" alt="Passkeys Portal View" process="resize 300x" >}}
+
+The feature has been implemented to count as non-MFA at the present time, and by default users will have to enter their
+password to perform full MFA.
+
+{{< figure src="password_2fa.png" caption="Passkey Login MFA Password Prompt" alt="Passkey Login MFA Password Prompt" process="resize 300x" >}}
 
 A configuration option exists to change this behaviour. It should be noted we have future plans
 to make this experience more customizable which will remove this configuration option in favor of one that uses
@@ -142,6 +147,8 @@ the client.
 See the [Custom Claims](../../integration/openid-connect/openid-connect-1.0-claims.md#custom-claims) for a fairly
 comprehensive example.
 
+{{< figure src="consent_custom_claims.png" caption="An example of the OpenID Connect 1.0 Consent View with Custom Claims" alt="OpenID Connect 1.0 Consent View" process="resize 300x" >}}
+
 ### JSON Web Encryption
 
 Prior to this release the only option for users was to use signed JSON Web Tokens. In this release we allow the use of
@@ -296,6 +303,8 @@ for more information.
 
 In this release users will notice a brand-new language preference setting from the frontend.
 
+{{< figure src="language_picker_small.png" caption="An example of the Language Picker" alt="Language Picker" process="resize 300x" >}}
+
 ### Log File Reopening
 
 Sending the `SIGHUP` signal in this release will instruct Authelia to reopen any log files. This facilitates the ability
@@ -363,3 +372,10 @@ directories and ensure the permissions in a way that adheres to principle of lea
 
 Should you find the file permissions either too restrictive or not restrictive enough you can override the tmpfiles.d
 configuration by looking at the [Systemd Reference Guide](../../reference/guides/systemd.md).
+
+
+### OLED Theme
+
+{{< figure src="oled.png" caption="Login Portal OLED Theme" alt="OLED Theme" width=400 >}}
+
+A new theme has been added optimized for OLED displays.

docs/content/overview/authentication/security-key/index.md

@@ -22,7 +22,7 @@ __Authelia__ supports hardware-based second factors leveraging [FIDO2] [WebAuthn
 Security keys are among the most secure second factor. This method is already supported by many major applications and
 platforms like Google, Facebook, GitHub, some banks, and much more.
 
-{{< figure src="yubikey.jpg" caption="A YubiKey Security Key" alt="A YubiKey Security Key" width=150 >}}
+{{< figure src="yubikey.jpg" caption="A YubiKey Security Key" alt="A YubiKey Security Key" width=150 process="resize 150x" >}}
 
 Normally, the protocol requires your security key to be enrolled on each site before being able to authenticate with it.
 Since Authelia provides Single Sign-On, your users will need to enroll their device only once to get access to all your
@@ -57,6 +57,21 @@ Yes, as of v4.38.0 and above Authelia supports registering multiple WebAuthn cre
 Yes, as of v4.39.0 and above Authelia supports passwordless logins via Passkeys as per the
 [roadmap](../../../roadmap/active/webauthn.md#passwordless-login).
 
+{{< figure src="passkeys.png" caption="The Passkey Authentication Portal View" alt="The Passkey Authentication Portal View" width=400 process="resize 400x" >}}
+
+### Why does it ask me for my password after using a Passkey to login?
+
+This exists to ensure the `two_factor` policy is enforced. The Passkey itself is a single factor and we do have plans to
+offer very granular control policies and their requirements. For example it will likely be possible to create your own
+custom policy equal to `two_factor` today which also considers a single Passkey login as satisfactory for a particular
+access control policy.
+
+{{< figure src="password_2fa.png" caption="The Passkey MFA Password Authentication Portal View" alt="The Passkey MFA Password Authentication Portal View" width=400 process="resize 400x" >}}
+
+In the meantime the [configuration](../../../configuration/second-factor/webauthn.md) has an experimental option to
+allow Passkey authenticators which support user verification, that perform user verification, and that report they
+performed user verification; to count as satisfying `two_factor`.
+
 ### Why don't I have access to the *Security Key* option?
 
 The [WebAuthn] protocol is a new protocol that is only supported by modern browsers. Please ensure your browser is up to