everysoftware · everysoftware · May 24, 2025 · May 24, 2025
diff --git a/README.md b/README.md
@@ -72,8 +72,8 @@ make up
 FastID is available at [http://localhost:8012](http://localhost:8012):
 
 ![Sign In](img/signin.png)
-![Profile](img/profile.png)
-![Connections](img/connections.png)
+![Profile](img/profile1.png)
+![Connections](img/profile2.png)
 
 Admin panel is available at: [http://localhost:8012/admin](http://localhost:8012/admin):
 
@@ -90,7 +90,7 @@ To start using FastID, you need to [create](http://localhost:8012/admin/app/crea
 This will allow you to use FastID for
 authentication in your application.
 
-![Sign In](img/create_app.png)
+![Create app](img/admin_create_app.png)
 
 Once you have created an application, you can use the standard OAuth 2.0 flow to authenticate users. FastID supports the
 authorization code flow, which is the most secure and recommended way to authenticate users.
@@ -143,7 +143,6 @@ def callback(code: str) -> Any:
         headers={"Authorization": f"Bearer {token}"},
     )
     return response.json()
-
 ```
 
 In this example, we define two routes:
@@ -158,9 +157,13 @@ Run the FastAPI application:
 fastapi dev examples/httpx.py
 ```
 
-Visit [http://localhost:8000/login](http://localhost:8000/login) to start the authentication process. After logging in,
-you will be redirected to the `/callback` route, where you can see the user's information.
+Visit [http://localhost:8000/login](http://localhost:8000/login) to start the authentication process. You will be
+redirected to the FastID login page, where you can log in with your credentials or use a third-party provider.
+
+![Login](img/oauth_consent.png)
+
+After logging in, you will be redirected to the `/callback` route, where you can access the user's information.
 
-![Test Response](img/test_response.png)
+![Test Response](img/oauth_callback.png)
 
 **Made with ❤️**
diff --git a/docs/docs/img/action_confirmation.png b/docs/docs/img/action_confirmation.png
diff --git a/docs/docs/img/admin_apps.png b/docs/docs/img/admin_apps.png
diff --git a/docs/docs/img/admin_create_app.png b/docs/docs/img/admin_create_app.png
diff --git a/docs/docs/img/admin_login.png b/docs/docs/img/admin_login.png
diff --git a/docs/docs/img/admin_oauth_accounts.png b/docs/docs/img/admin_oauth_accounts.png
diff --git a/docs/docs/img/admin_users.png b/docs/docs/img/admin_users.png
diff --git a/docs/docs/img/admin_view_app.png b/docs/docs/img/admin_view_app.png
diff --git a/docs/docs/img/api_docs.png b/docs/docs/img/api_docs.png
diff --git a/docs/docs/img/api_request.png b/docs/docs/img/api_request.png
diff --git a/docs/docs/img/change_email.png b/docs/docs/img/change_email.png
diff --git a/docs/docs/img/change_password.png b/docs/docs/img/change_password.png
diff --git a/docs/docs/img/connections.png b/docs/docs/img/connections.png
diff --git a/docs/docs/img/create_app.png b/docs/docs/img/create_app.png
diff --git a/docs/docs/img/delete_account.png b/docs/docs/img/delete_account.png
diff --git a/docs/docs/img/dashboards_logs.png → docs/docs/img/grafana_logs.png b/docs/docs/img/dashboards_logs.png → docs/docs/img/grafana_logs.png
diff --git a/docs/docs/img/dashboard_metrics.png → docs/docs/img/grafana_metrics.png b/docs/docs/img/dashboard_metrics.png → docs/docs/img/grafana_metrics.png
diff --git a/docs/docs/img/logo_fully_transparent.png b/docs/docs/img/logo_fully_transparent.png
diff --git a/docs/docs/img/logo_transparent.png b/docs/docs/img/logo_transparent.png
diff --git a/docs/docs/img/logo_white.png b/docs/docs/img/logo_white.png
diff --git a/docs/docs/img/oauth_callback.png b/docs/docs/img/oauth_callback.png
diff --git a/docs/docs/img/oauth_consent.png b/docs/docs/img/oauth_consent.png
diff --git a/docs/docs/img/oauth_login.png b/docs/docs/img/oauth_login.png
diff --git a/docs/docs/img/profile.png b/docs/docs/img/profile.png
diff --git a/docs/docs/img/profile1.png b/docs/docs/img/profile1.png
diff --git a/docs/docs/img/profile2.png b/docs/docs/img/profile2.png
diff --git a/docs/docs/img/restore_account.png b/docs/docs/img/restore_account.png
diff --git a/docs/docs/img/signin.png b/docs/docs/img/signin.png
diff --git a/docs/docs/img/signup.png b/docs/docs/img/signup.png
diff --git a/docs/docs/img/verify_action.png b/docs/docs/img/verify_action.png
diff --git a/docs/docs/overview.md b/docs/docs/overview.md
@@ -4,18 +4,24 @@
 
 ![Sign In](img/signin.png)
 ![Sign Up](img/signup.png)
-![Profile](img/profile.png)
-![Connections](img/connections.png)
-![Action Confirmation](img/action_confirmation.png)
+![Profile](img/profile1.png)
+![Profile](img/profile2.png)
+![Action Confirmation](img/verify_action.png)
 ![Change Password](img/change_password.png)
+![Change Email](img/change_email.png)
 ![Delete Account](img/delete_account.png)
+![Restore Account](img/restore_account.png)
 
 ## Admin Dashboard
 
 ![Admin Login](img/admin_login.png)
 ![Admin Apps](img/admin_apps.png)
 ![Admin Users](img/admin_users.png)
+![Admin OAuth Accounts](img/admin_oauth_accounts.png)
+![Admin Create App](img/admin_create_app.png)
+![Admin View App](img/admin_view_app.png)
 
 ## API Docs
 
 ![API Docs](img/api_docs.png)
+![API Docs](img/api_request.png)
diff --git a/docs/docs/tutorial/get_started.md b/docs/docs/tutorial/get_started.md
@@ -6,12 +6,12 @@ To start using FastID, you need to [create](http://localhost:8012/admin/app/crea
 This will allow you to use FastID for
 authentication in your application.
 
-![Sign In](../img/create_app.png)
+![Sign In](../img/admin_create_app.png)
 
 Once you have created an application, you can use the standard OAuth 2.0 flow to authenticate users. FastID supports the
 authorization code flow, which is the most secure and recommended way to authenticate users.
 
-## HTTPX example
+## HTTPX Example
 
 Here is an example of how to use FastID for authentication in a Python application using the
 [FastAPI](https://fastapi.tiangolo.com/) framework and the [httpx](https://www.python-httpx.org/) library.
@@ -64,7 +64,7 @@ def callback(code: str) -> Any:
 
 ```
 
-## FastLink example
+## FastLink Example
 
 You can also use the [FastLink](https://github.com/everysoftware/fastlink) as a faster and safer way:
 
@@ -78,24 +78,24 @@ from fastlink.schemas import OAuth2Callback, ProviderMeta
 
 app = FastAPI()
 fastid = FastLink(
-   ProviderMeta(server_url="http://localhost:8012", scope=["openid"]),
-   ...,  # Client ID
-   ...,  # Client Secret
-   "http://localhost:8000/callback",
+    ProviderMeta(server_url="http://localhost:8012", scope=["openid"]),
+    ...,  # Client ID
+    ...,  # Client Secret
+    "http://localhost:8000/callback",
 )
 
 
 @app.get("/login")
 async def login() -> Any:
-   async with fastid:
-      url = await fastid.login_url()
-      return RedirectResponse(url=url)
+    async with fastid:
+        url = await fastid.login_url()
+        return RedirectResponse(url=url)
 
 
 @app.get("/callback")
 async def callback(call: Annotated[OAuth2Callback, Depends()]) -> Any:
-   async with fastid:
-      return await fastid.callback_raw(call)
+    async with fastid:
+        return await fastid.callback_raw(call)
 ```
 
 ## Results
@@ -112,7 +112,11 @@ Run the FastAPI application:
 fastapi dev examples/httpx.py
 ```
 
-Visit [http://localhost:8000/login](http://localhost:8000/login) to start the authentication process. After logging in,
-you will be redirected to the `/callback` route, where you can see the user's information.
+Visit [http://localhost:8000/login](http://localhost:8000/login) to start the authentication process. You will be
+redirected to the FastID login page, where you can log in with your credentials or use a third-party provider.
 
-![Test Response](../img/test_response.png)
+![Login](../img/oauth_consent.png)
+
+After logging in, you will be redirected to the `/callback` route, where you can access the user's information.
+
+![Test Response](../img/oauth_callback.png)
diff --git a/docs/docs/tutorial/observability.md b/docs/docs/tutorial/observability.md
@@ -0,0 +1,19 @@
+# Observability
+
+FastID provides built-in support for observability using **Grafana**, **Prometheus**,
+**Tempo**, and **Loki**. This allows you to monitor your application performance and log data effectively.
+
+## Setup
+
+Repository containing the required infrastructure and sample
+dashboards: [https://github.com/everysoftware/fastapi-obs](https://github.com/everysoftware/fastapi-obs).
+
+To use the observability features, you need to have the following environment variables set in your `.env` file:
+
+```
+OBS_ENABLED=1
+OBS_TEMPO_URL="http://TEMPO_URL:4317"
+```
+
+![Metrics](../img/grafana_metrics.png)
+![Logs](../img/grafana_logs.png)
diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml
@@ -127,6 +127,7 @@ nav:
       - tutorial/get_started.md
       - tutorial/notifications.md
       - tutorial/social.md
+      - tutorial/observability.md
       - tutorial/api.md
 
 extra:

diff --git a/fastid/pages/router.py b/fastid/pages/router.py
@@ -106,13 +106,14 @@ def verify_action(
 @router.get("/change-password")
 def change_password(
     request: Request,
+    user: Annotated[User | None, Depends(get_user_or_none)],
     verified: Annotated[bool, Depends(is_action_verified)],
 ) -> Response:
     if not verified:
         return RedirectResponse(f"/verify-action?action={UnsafeAction.change_password}")
     return templates.TemplateResponse(
         "change-password.html",
-        {"request": request},
+        {"request": request, "user": user},
     )
 
 

diff --git a/img/action_confirmation.png b/img/action_confirmation.png
diff --git a/img/admin_apps.png b/img/admin_apps.png
diff --git a/img/admin_create_app.png b/img/admin_create_app.png
diff --git a/img/admin_login.png b/img/admin_login.png
diff --git a/img/admin_oauth_accounts.png b/img/admin_oauth_accounts.png
diff --git a/img/admin_users.png b/img/admin_users.png
diff --git a/img/admin_view_app.png b/img/admin_view_app.png
diff --git a/img/api_docs.png b/img/api_docs.png
diff --git a/img/api_request.png b/img/api_request.png
diff --git a/img/change_email.png b/img/change_email.png
diff --git a/img/change_password.png b/img/change_password.png
diff --git a/img/connections.png b/img/connections.png
diff --git a/img/create_app.png b/img/create_app.png
diff --git a/img/delete_account.png b/img/delete_account.png
diff --git a/img/dashboards_logs.png → img/grafana_logs.png b/img/dashboards_logs.png → img/grafana_logs.png
diff --git a/img/dashboard_metrics.png → img/grafana_metrics.png b/img/dashboard_metrics.png → img/grafana_metrics.png
diff --git a/img/logo_fully_transparent.png b/img/logo_fully_transparent.png
diff --git a/img/logo_white.png b/img/logo_white.png
diff --git a/img/oauth_callback.png b/img/oauth_callback.png
diff --git a/img/oauth_consent.png b/img/oauth_consent.png
diff --git a/img/oauth_login.png b/img/oauth_login.png
diff --git a/img/profile.png b/img/profile.png
diff --git a/img/profile1.png b/img/profile1.png
diff --git a/img/profile2.png b/img/profile2.png
diff --git a/img/restore_account.png b/img/restore_account.png
diff --git a/img/signin.png b/img/signin.png
diff --git a/img/signup.png b/img/signup.png
diff --git a/img/test_response.png b/img/test_response.png
diff --git a/img/verify_action.png b/img/verify_action.png
diff --git a/static/js/auth.js b/static/js/auth.js
@@ -29,6 +29,11 @@ document.addEventListener('DOMContentLoaded', () => {
                 alert("Passwords do not match.");
                 return;
             }
+            const passwordRegex = /^((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W).{8,20})$/;
+            if (!passwordRegex.test(password)) {
+                alert("Password must be at least 8 characters long and include a number and a special character.");
+                return;
+            }
             const body = {
                 email: document.getElementById("email").value,
                 password: password,