From 0965e16401984e38488456c4f7648f6abb649192 Mon Sep 17 00:00:00 2001
From: Aarnav Tale <aarnavtale@icloud.com>
Date: Sun, 11 Jan 2026 14:54:10 -0500
Subject: [PATCH] fix: apply gravatar images to the users page

---
 CHANGELOG.md                  |  1 +
 app/routes/users/overview.tsx | 13 +++++++++++++
 config.example.yaml           |  6 +++---
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3c2e3be..904fc8f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@
 - Correctly handle invalid ACL policy inserts on Headscale 0.27+ (closes [#383](https://github.com/tale/headplane/issues/383)).
 - Prevent a machine from changing its owner to itself (closes [#373](https://github.com/tale/headplane/issues/373)).
 - Added an `/admin/api/info` route that can expose sensitive information if `server.info_secret` is set in the configuration (closes [#324](https://github.com/tale/headplane/issues/324)).
+- Correctly apply Gravatar profile pictures on the user page if applicable (closes [#405](https://github.com/tale/headplane/issues/405)).
 ---
 
 # 0.6.1 (October 12, 2025)
diff --git a/app/routes/users/overview.tsx b/app/routes/users/overview.tsx
index 9d805a6..31f171f 100644
--- a/app/routes/users/overview.tsx
+++ b/app/routes/users/overview.tsx
@@ -1,3 +1,4 @@
+import { createHash } from 'node:crypto';
 import { useEffect, useState } from 'react';
 import { Capabilities } from '~/server/web/roles';
 import type { Machine, User } from '~/types';
@@ -32,6 +33,18 @@ export async function loader({ request, context }: Route.LoaderArgs) {
 	const users = apiUsers.map((user) => ({
 		...user,
 		machines: nodes.filter((node) => node.user.id === user.id),
+		profilePicUrl:
+			context.config.oidc?.profile_picture_source === 'gravatar'
+				? (() => {
+						if (!user.email) {
+							return undefined;
+						}
+
+						const emailHash = user.email.trim().toLowerCase();
+						const hash = createHash('sha256').update(emailHash).digest('hex');
+						return `https://www.gravatar.com/avatar/${hash}?s=200&d=identicon&r=x`;
+					})()
+				: user.profilePicUrl,
 	}));
 
 	const roles = await Promise.all(
diff --git a/config.example.yaml b/config.example.yaml
index ae96b79..6952e91 100644
--- a/config.example.yaml
+++ b/config.example.yaml
@@ -164,9 +164,9 @@ integration:
   proc:
     enabled: false
 
-  # OIDC Configuration for simpler authentication
-  # (This is optional, but recommended for the best experience)
-  # oidc:
+# OIDC Configuration for simpler authentication
+# (This is optional, but recommended for the best experience)
+# oidc:
   # The OIDC issuer URL
   # issuer: "https://accounts.google.com"