Profile picture

Author: warmijusti

auth-libs/web-component/dist/hanko-auth.esm.js

@@ -146,6 +146,7 @@ export const styles = css`
     font-size: var(--hot-font-size-large);
     font-weight: var(--hot-font-weight-bold);
     color: var(--hot-color-gray-600);
+    overflow: hidden;
   }
 
   .profile-info {
@@ -238,6 +239,15 @@ export const styles = css`
   .osm-status-badge.required {
     background-color: var(--hot-color-warning-600);
   }
+  /* Avatar image — fills the circle, hides the initial letter */
+  .avatar-img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+    display: block;
+  }
+
   .header-avatar {
     width: var(--hot-spacing-2x-large);
     height: var(--hot-spacing-2x-large);
@@ -247,6 +257,7 @@ export const styles = css`
     align-items: center;
     justify-content: center;
     font-size: var(--hot-font-size-small);
+    overflow: hidden;
     font-weight: var(--hot-font-weight-semibold);
     color: white;
   }
@@ -267,8 +278,14 @@ export const styles = css`
     display: inline-block;
     cursor: pointer;
     transition: all 0.2s;
-    font-weight: var(--login-btn-font-weight, var(--font-weight, var(--hot-font-weight-medium)));
-    font-family: var(--login-btn-font-family, var(--font-family, var(--hot-font-sans)));
+    font-weight: var(
+      --login-btn-font-weight,
+      var(--font-weight, var(--hot-font-weight-medium))
+    );
+    font-family: var(
+      --login-btn-font-family,
+      var(--font-family, var(--hot-font-sans))
+    );
   }
 
   /* Button variants - filled */
@@ -493,4 +510,9 @@ export const styles = css`
     box-sizing: border-box;
     text-decoration: none;
   }
+
+  /* Style Hanko's internal link button (e.g. "Create account") */
+  hanko-auth::part(link) {
+    font-weight: bold;
+  }
 `;

auth-libs/web-component/dist/hanko-auth.iife.js

@@ -72,6 +72,7 @@ const sharedAuth = {
   initialized: false,
   instances: new Set<any>(),
   profileDisplayName: "", // Shared profile display name
+  profilePictureUrl: "", // Shared profile picture URL
   hankoReady: false, // used for translations
 };
 
@@ -144,6 +145,7 @@ export class HankoAuth extends LitElement {
   @state() private error: string | null = null;
   @state() private hankoReady = false; // Tracks when Hanko registration is complete
   @state() private profileDisplayName: string = "";
+  @state() private profilePictureUrl: string = "";
   @state() private hasAppMapping = false; // True if user has mapping in the app
   @state() private userProfileLanguage: string | null = null; // Language from user profile
   // dropdown
@@ -321,6 +323,8 @@ export class HankoAuth extends LitElement {
     if (this._hanko !== sharedAuth.hanko) this._hanko = sharedAuth.hanko;
     if (this.profileDisplayName !== sharedAuth.profileDisplayName)
       this.profileDisplayName = sharedAuth.profileDisplayName;
+    if (this.profilePictureUrl !== sharedAuth.profilePictureUrl)
+      this.profilePictureUrl = sharedAuth.profilePictureUrl;
     if (this.hankoReady !== sharedAuth.hankoReady)
       this.hankoReady = sharedAuth.hankoReady;
   }
@@ -332,6 +336,7 @@ export class HankoAuth extends LitElement {
     sharedAuth.osmData = this.osmData;
     sharedAuth.loading = this.loading;
     sharedAuth.profileDisplayName = this.profileDisplayName;
+    sharedAuth.profilePictureUrl = this.profilePictureUrl;
     sharedAuth.hankoReady = this.hankoReady;
 
     // Sync to all other instances
@@ -886,6 +891,13 @@ export class HankoAuth extends LitElement {
           this.log("👤 Display name set to:", this.profileDisplayName);
         }
 
+        // picture_url is always set by the backend (Gravatar fallback); osm_avatar_url as secondary
+        const picUrl = profile.picture_url || profile.osm_avatar_url;
+        if (picUrl) {
+          this.profilePictureUrl = picUrl;
+          this.log("🖼️ Profile picture set to:", this.profilePictureUrl);
+        }
+
         // Set language from user profile if available
         if (profile.language) {
           this.userProfileLanguage = profile.language;
@@ -1254,6 +1266,7 @@ export class HankoAuth extends LitElement {
     this.osmData = null;
     this.hasAppMapping = false;
     this.userProfileLanguage = null; // Clear user's language preference
+    this.profilePictureUrl = ""; // Clear profile picture
 
     // Broadcast state changes to other instances
     if (this._isPrimary) {
@@ -1453,7 +1466,11 @@ export class HankoAuth extends LitElement {
           <div class="container">
             <div class="profile">
               <div class="profile-header">
-                <div class="profile-avatar">${initial}</div>
+                <div class="profile-avatar">
+                  ${this.profilePictureUrl
+                    ? html`<img class="avatar-img" src="${this.profilePictureUrl}" alt="${initial}" @error=${(e: Event) => { (e.target as HTMLImageElement).style.display = "none"; }} />`
+                    : initial}
+                </div>
                 <div class="profile-info">
                   <div class="profile-email">
                     ${this.user.email || this.user.id}
@@ -1538,7 +1555,11 @@ export class HankoAuth extends LitElement {
               class="bar-trigger"
             >
               <div class="bar-info">
-                <span class="header-avatar">${initial}</span>
+                <span class="header-avatar">
+                ${this.profilePictureUrl
+                  ? html`<img class="avatar-img" src="${this.profilePictureUrl}" alt="${initial}" @error=${(e: Event) => { (e.target as HTMLImageElement).style.display = "none"; }} />`
+                  : initial}
+              </span>
                 <span class="bar-email"
                   >${this.user.email || this.user.id}</span
                 >
@@ -1563,7 +1584,11 @@ export class HankoAuth extends LitElement {
               aria-haspopup="true"
               class="dropdown-trigger"
             >
-              <span class="header-avatar">${initial}</span>
+              <span class="header-avatar">
+                ${this.profilePictureUrl
+                  ? html`<img class="avatar-img" src="${this.profilePictureUrl}" alt="${initial}" @error=${(e: Event) => { (e.target as HTMLImageElement).style.display = "none"; }} />`
+                  : initial}
+              </span>
 
               ${this.osmConnected
                 ? html`

auth-libs/web-component/dist/hanko-auth.umd.js

@@ -278,11 +278,12 @@ function LoginPage() {
 
           {returnTo && !isOnboarding && (
             <div className="mt-6 pt-6 border-t border-hot-gray-200 text-center">
+              <span>← </span>
               <a
                 href={returnTo}
-                className="text-sm text-hot-gray-600 hover:text-hot-gray-900 inline-flex items-center gap-2 transition-colors"
+                className="font-bold text-hot-gray-900 hover:underline inline-flex items-center gap-2 transition-colors "
               >
-                <span>←</span> {t("backToPreviousPage")}
+                {t("backToPreviousPage")}
               </a>
             </div>
           )}

auth-libs/web-component/src/hanko-auth.styles.ts

@@ -70,7 +70,9 @@ function ProfilePage() {
       setProfile(null);
 
       // Show confirmation
-      alert(t("accountDeleted") || "Your account has been deleted successfully.");
+      alert(
+        t("accountDeleted") || "Your account has been deleted successfully.",
+      );
 
       // Redirect to the return URL (previous app) or login page
       if (returnTo) {
@@ -198,7 +200,7 @@ function ProfilePage() {
               }}
               className="text-hot-gray-1000 hover:text-hot-gray-900 text-sm transition-colors"
             >
-              ← {t("backTo")} {backInfo.label}
+              ← {t("back")}
             </button>
           </div>
         </div>

auth-libs/web-component/src/hanko-auth.ts

@@ -1,6 +1,6 @@
 /**
  * Translations for the login frontend
- * 
+ *
  * To add a new language, add a new key to the translations object
  */
 
@@ -20,10 +20,10 @@ export interface Translations {
   accessAllTools: string;
   backToPreviousPage: string;
   poweredBy: string;
-  
+
   // ProfilePage
   myProfile: string;
-  backTo: string;
+  back: string;
   profileInformation: string;
   pictureUrl: string;
   firstName: string;
@@ -44,7 +44,7 @@ export interface Translations {
   accountCreated: string;
   accountDeleted: string;
   profileUpdated: string;
-  
+
   // Common
   login: string;
 }
@@ -59,14 +59,15 @@ export const translations: Record<string, Translations> = {
     noImNew: "No, I'm new here",
     notSure: 'Not sure? Select "Yes" and we\'ll check for you.',
     connectOsmAccount: "Connect your OpenStreetMap account",
-    connectSameOsm: "Connect with the same OSM account you used before to recover your",
+    connectSameOsm:
+      "Connect with the same OSM account you used before to recover your",
     goBack: "← Go back",
     settingUpAccount: "Setting up your account...",
     accessAllTools: "Access all HOT tools and services",
     backToPreviousPage: "Back to previous page",
     poweredBy: "Powered by",
     myProfile: "My Profile",
-    backTo: "Back to",
+    back: "Back",
     profileInformation: "Profile Information",
     pictureUrl: "Picture URL",
     firstName: "First Name",
@@ -78,11 +79,14 @@ export const translations: Record<string, Translations> = {
     saveChanges: "Save Changes",
     saving: "Saving...",
     security: "Security",
-    managePasswordPasskeys: "Manage your password, passkeys, and active sessions.",
+    managePasswordPasskeys:
+      "Manage your password, passkeys, and active sessions.",
     dangerZone: "Danger Zone",
-    deleteAccountWarning: "Permanently delete your account and all associated data.",
+    deleteAccountWarning:
+      "Permanently delete your account and all associated data.",
     deleteAccount: "Delete Account",
-    deleteConfirm: "Are you sure you want to delete your account? This action cannot be undone.",
+    deleteConfirm:
+      "Are you sure you want to delete your account? This action cannot be undone.",
     deleteComingSoon: "Account deletion will be available soon.",
     accountCreated: "Account created",
     accountDeleted: "Your account has been deleted successfully.",
@@ -98,30 +102,35 @@ export const translations: Record<string, Translations> = {
     noImNew: "No, soy nuevo aquí",
     notSure: '¿No estás seguro? Selecciona "Sí" y lo verificaremos por ti.',
     connectOsmAccount: "Conecta tu cuenta de OpenStreetMap",
-    connectSameOsm: "Conéctate con la misma cuenta OSM que usaste antes para recuperar tu",
+    connectSameOsm:
+      "Conéctate con la misma cuenta OSM que usaste antes para recuperar tu",
     goBack: "← Volver",
     settingUpAccount: "Configurando tu cuenta...",
     accessAllTools: "Accede a todas las herramientas y servicios de HOT",
     backToPreviousPage: "Volver a la página anterior",
     poweredBy: "Desarrollado por",
     myProfile: "Mi Perfil",
-    backTo: "Volver a",
+    back: "Volver",
     profileInformation: "Información del Perfil",
     pictureUrl: "URL de imagen",
     firstName: "Nombre",
     lastName: "Apellido",
     email: "Correo electrónico",
-    emailManagedBy: "El correo es administrado por tu proveedor de inicio de sesión",
+    emailManagedBy:
+      "El correo es administrado por tu proveedor de inicio de sesión",
     language: "Idioma",
     connectedToOsm: "Conectado a OpenStreetMap",
     saveChanges: "Guardar Cambios",
     saving: "Guardando...",
     security: "Seguridad",
-    managePasswordPasskeys: "Administra tu contraseña, passkeys y sesiones activas.",
+    managePasswordPasskeys:
+      "Administra tu contraseña, passkeys y sesiones activas.",
     dangerZone: "Zona de Peligro",
-    deleteAccountWarning: "Elimina permanentemente tu cuenta y todos los datos asociados.",
+    deleteAccountWarning:
+      "Elimina permanentemente tu cuenta y todos los datos asociados.",
     deleteAccount: "Eliminar Cuenta",
-    deleteConfirm: "¿Estás seguro de que quieres eliminar tu cuenta? Esta acción no se puede deshacer.",
+    deleteConfirm:
+      "¿Estás seguro de que quieres eliminar tu cuenta? Esta acción no se puede deshacer.",
     deleteComingSoon: "La eliminación de cuenta estará disponible pronto.",
     accountCreated: "Cuenta creada",
     accountDeleted: "Tu cuenta ha sido eliminada exitosamente.",
@@ -137,14 +146,15 @@ export const translations: Record<string, Translations> = {
     noImNew: "Non, je suis nouveau",
     notSure: 'Pas sûr ? Sélectionnez "Oui" et nous vérifierons pour vous.',
     connectOsmAccount: "Connectez votre compte OpenStreetMap",
-    connectSameOsm: "Connectez-vous avec le même compte OSM que vous avez utilisé auparavant pour récupérer votre",
+    connectSameOsm:
+      "Connectez-vous avec le même compte OSM que vous avez utilisé auparavant pour récupérer votre",
     goBack: "← Retour",
     settingUpAccount: "Configuration de votre compte...",
     accessAllTools: "Accédez à tous les outils et services HOT",
     backToPreviousPage: "Retour à la page précédente",
     poweredBy: "Propulsé par",
     myProfile: "Mon Profil",
-    backTo: "Retour à",
+    back: "Retour",
     profileInformation: "Informations du Profil",
     pictureUrl: "URL de l'image",
     firstName: "Prénom",
@@ -156,11 +166,14 @@ export const translations: Record<string, Translations> = {
     saveChanges: "Enregistrer les Modifications",
     saving: "Enregistrement...",
     security: "Sécurité",
-    managePasswordPasskeys: "Gérez votre mot de passe, passkeys et sessions actives.",
+    managePasswordPasskeys:
+      "Gérez votre mot de passe, passkeys et sessions actives.",
     dangerZone: "Zone Dangereuse",
-    deleteAccountWarning: "Supprimer définitivement votre compte et toutes les données associées.",
+    deleteAccountWarning:
+      "Supprimer définitivement votre compte et toutes les données associées.",
     deleteAccount: "Supprimer le Compte",
-    deleteConfirm: "Êtes-vous sûr de vouloir supprimer votre compte ? Cette action ne peut pas être annulée.",
+    deleteConfirm:
+      "Êtes-vous sûr de vouloir supprimer votre compte ? Cette action ne peut pas être annulée.",
     deleteComingSoon: "La suppression de compte sera bientôt disponible.",
     accountCreated: "Compte créé",
     accountDeleted: "Votre compte a été supprimé avec succès.",
@@ -176,14 +189,15 @@ export const translations: Record<string, Translations> = {
     noImNew: "Não, sou novo aqui",
     notSure: 'Não tem certeza? Selecione "Sim" e verificaremos para você.',
     connectOsmAccount: "Conecte sua conta OpenStreetMap",
-    connectSameOsm: "Conecte-se com a mesma conta OSM que você usou antes para recuperar seu",
+    connectSameOsm:
+      "Conecte-se com a mesma conta OSM que você usou antes para recuperar seu",
     goBack: "← Voltar",
     settingUpAccount: "Configurando sua conta...",
     accessAllTools: "Acesse todas as ferramentas e serviços HOT",
     backToPreviousPage: "Voltar à página anterior",
     poweredBy: "Desenvolvido por",
     myProfile: "Meu Perfil",
-    backTo: "Voltar para",
+    back: "Voltar",
     profileInformation: "Informações do Perfil",
     pictureUrl: "URL da imagem",
     firstName: "Nome",
@@ -197,9 +211,11 @@ export const translations: Record<string, Translations> = {
     security: "Segurança",
     managePasswordPasskeys: "Gerencie sua senha, passkeys e sessões ativas.",
     dangerZone: "Zona de Perigo",
-    deleteAccountWarning: "Excluir permanentemente sua conta e todos os dados associados.",
+    deleteAccountWarning:
+      "Excluir permanentemente sua conta e todos os dados associados.",
     deleteAccount: "Excluir Conta",
-    deleteConfirm: "Tem certeza de que deseja excluir sua conta? Esta ação não pode ser desfeita.",
+    deleteConfirm:
+      "Tem certeza de que deseja excluir sua conta? Esta ação não pode ser desfeita.",
     deleteComingSoon: "A exclusão de conta estará disponível em breve.",
     accountCreated: "Conta criada",
     accountDeleted: "Sua conta foi excluída com sucesso.",