From 0c0b8ae920511b8f1698e414c585747008c483e8 Mon Sep 17 00:00:00 2001
From: Lang <7system7@gmail.com>
Date: Mon, 13 Apr 2026 15:50:28 +0200
Subject: [PATCH] new: usr: Add opportunity to use profile picture. #4
---
.env.dist | 28 +-
Makefile | 2 +
assets/css/homepage/_auth-bar.scss | 21 +-
assets/css/homepage/_profile.scss | 53 +-
assets/js/components/AvatarUpload.jsx | 71 +
assets/js/profile.jsx | 13 +
bun.lock | 185 ++-
compose.yaml | 42 +-
composer.json | 3 +
composer.lock | 1362 ++++++++++++++++-
config/bundles.php | 2 +
config/packages/flysystem.yaml | 14 +
config/packages/liip_imagine.yaml | 21 +
config/routes.yaml | 3 +
config/services.yaml | 12 +-
docker/entrypoint.sh | 4 +-
docker/minio-init.sh | 36 +
src/Controller/ProfileController.php | 196 ++-
src/Entity/User.php | 16 +-
.../2026/04/Version20260413000001.php | 42 +
symfony.lock | 22 +
templates/Game/index.html.twig | 8 +-
templates/Security/profile.html.twig | 8 +-
23 files changed, 1952 insertions(+), 212 deletions(-)
create mode 100644 assets/js/components/AvatarUpload.jsx
create mode 100644 config/packages/flysystem.yaml
create mode 100644 config/packages/liip_imagine.yaml
create mode 100755 docker/minio-init.sh
create mode 100644 src/Migrations/2026/04/Version20260413000001.php
diff --git a/.env.dist b/.env.dist
index 6eee4c2..f65a0fe 100644
--- a/.env.dist
+++ b/.env.dist
@@ -4,7 +4,7 @@
###> symfony/framework-bundle ###
APP_ENV=dev
-APP_SECRET=c1c278747d952ea66326352b72bb8ec6
+APP_SECRET=changethis
#TRUSTED_PROXIES=127.0.0.1,127.0.0.2
#TRUSTED_HOSTS=localhost,example.com
###< symfony/framework-bundle ###
@@ -15,6 +15,19 @@ APP_SECRET=c1c278747d952ea66326352b72bb8ec6
# Configure your db driver and server_version in config/packages/doctrine.yaml
DATABASE_URL=mysql://db_user:db_password@127.0.0.1:3306/db_name
###< doctrine/doctrine-bundle ###
+
+###> google/recaptcha ###
+RECAPTCHA_SITE_KEY=changethis
+RECAPTCHA_SECRET_KEY=changethis
+###< google/recaptcha ###
+
+###> minio/minio ###
+MINIO_ROOT_USER=changethis
+MINIO_ROOT_PASSWORD=changethis
+MINIO_ENDPOINT=http://localhost:9000
+MINIO_PUBLIC_URL=http://localhost:9000
+###< minio/minio ###
+
###> symfony/mailer ###
MAILER_DSN=smtp://localhost:1025
MAIL_DOMAIN=localhost
@@ -23,9 +36,18 @@ MAIL_DOMAIN=localhost
###> symfony/mercure-bundle ###
# See https://symfony.com/doc/current/mercure.html#configuration
# The URL of the Mercure hub, used by the app to publish updates (can be a local URL)
-MERCURE_URL=https://example.com/.well-known/mercure
+MERCURE_URL=https://mine.local/.well-known/mercure
# The public URL of the Mercure hub, used by the browser to connect
-MERCURE_PUBLIC_URL=https://example.com/.well-known/mercure
+MERCURE_PUBLIC_URL=https://mine.local/.well-known/mercure
# The secret used to sign the JWTs
MERCURE_JWT_SECRET="!ChangeThisMercureHubJWTSecretKey!"
+# Publisher JWT (must match publisher_jwt in your Caddyfile)
+MERCURE_JWT_TOKEN=changethis
+# Subscriber JWT sent to the browser so it can authenticate its EventSource connection
+MERCURE_SUBSCRIBER_JWT=changethis
###< symfony/mercure-bundle ###
+
+###> web-auth/webauthn-framework ###
+WEBAUTHN_RP_ID=mine.local
+WEBAUTHN_ORIGIN=https://mine.local
+###< web-auth/webauthn-framework ###
diff --git a/Makefile b/Makefile
index e51a3de..7957c92 100644
--- a/Makefile
+++ b/Makefile
@@ -16,6 +16,8 @@ start:
docker compose up -d
start-build:
+ composer i
+ bun run build
docker compose up -d --build
stop:
diff --git a/assets/css/homepage/_auth-bar.scss b/assets/css/homepage/_auth-bar.scss
index c98bd17..b5ea685 100644
--- a/assets/css/homepage/_auth-bar.scss
+++ b/assets/css/homepage/_auth-bar.scss
@@ -89,4 +89,23 @@
border-color: rgba(149, 207, 245, 0.5);
}
}
-}
\ No newline at end of file
+}
+
+.hero-auth-avatar {
+ width: 22px;
+ height: 22px;
+ border-radius: 50%;
+ object-fit: cover;
+ flex-shrink: 0;
+ border: 1px solid rgba(35, 111, 135, 0.5);
+
+ &--initials {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(135deg, rgba(35, 111, 135, 0.45) 0%, rgba(173, 10, 5, 0.3) 100%);
+ font: 800 9px 'Rajdhani', sans-serif;
+ color: rgba(149, 207, 245, 0.9);
+ letter-spacing: 1px;
+ }
+}
diff --git a/assets/css/homepage/_profile.scss b/assets/css/homepage/_profile.scss
index 269fd0e..9c21211 100644
--- a/assets/css/homepage/_profile.scss
+++ b/assets/css/homepage/_profile.scss
@@ -20,6 +20,7 @@
}
.profile-avatar {
+ position: relative;
width: 80px;
height: 80px;
flex-shrink: 0;
@@ -32,8 +33,56 @@
font: 800 28px 'Rajdhani', sans-serif;
color: rgba(149, 207, 245, 0.9);
letter-spacing: 2px;
- box-shadow: 0 0 0 4px rgba(35, 111, 135, 0.08),
- 0 0 24px rgba(35, 111, 135, 0.2);
+ box-shadow: 0 0 0 4px rgba(35, 111, 135, 0.08), 0 0 24px rgba(35, 111, 135, 0.2);
+ cursor: pointer;
+ overflow: hidden;
+ transition: box-shadow 200ms ease;
+
+ &:hover {
+ box-shadow: 0 0 0 4px rgba(35, 111, 135, 0.18), 0 0 32px rgba(35, 111, 135, 0.4);
+
+ .profile-avatar__overlay {
+ opacity: 1;
+ }
+ }
+
+ &--loading {
+ pointer-events: none;
+ opacity: 0.6;
+ }
+
+ &__img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 50%;
+ display: block;
+ }
+
+ &__initials {
+ font: 800 28px 'Rajdhani', sans-serif;
+ color: rgba(149, 207, 245, 0.9);
+ letter-spacing: 2px;
+ pointer-events: none;
+ }
+
+ &__overlay {
+ position: absolute;
+ inset: 0;
+ border-radius: 50%;
+ background: rgba(0, 0, 0, 0.55);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ transition: opacity 200ms ease;
+ pointer-events: none;
+
+ i {
+ font-size: 20px;
+ color: #fff;
+ }
+ }
}
.profile-info {
diff --git a/assets/js/components/AvatarUpload.jsx b/assets/js/components/AvatarUpload.jsx
new file mode 100644
index 0000000..bcec227
--- /dev/null
+++ b/assets/js/components/AvatarUpload.jsx
@@ -0,0 +1,71 @@
+import React, { useRef, useState } from 'react';
+
+export default function AvatarUpload({ uploadUrl, initialThumbUrl, initials }) {
+ const [thumbUrl, setThumbUrl] = useState(initialThumbUrl || null);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const inputRef = useRef(null);
+
+ function handleClick() {
+ inputRef.current?.click();
+ }
+
+ function handleChange(e) {
+ const file = e.target.files?.[0];
+ if (!file) return;
+
+ const fd = new FormData();
+ fd.append('avatar', file);
+
+ setLoading(true);
+ setError(null);
+
+ fetch(uploadUrl, { method: 'POST', body: fd })
+ .then(r => r.json())
+ .then(data => {
+ if (data.error) {
+ setError(data.error);
+ return;
+ }
+ setThumbUrl(data.thumbUrl);
+
+ const navImg = document.querySelector('.hero-auth-avatar:not(.hero-auth-avatar--initials)');
+ const navInitials = document.querySelector('.hero-auth-avatar.hero-auth-avatar--initials');
+ if (navImg) {
+ navImg.src = data.thumbUrl;
+ } else if (navInitials) {
+ const img = document.createElement('img');
+ img.src = data.thumbUrl;
+ img.alt = navInitials.textContent.trim();
+ img.className = 'hero-auth-avatar';
+ navInitials.replaceWith(img);
+ }
+ })
+ .catch(() => setError('Upload failed. Please try again.'))
+ .finally(() => setLoading(false));
+ }
+
+ return (
+
+ {thumbUrl
+ ?
+ :
{initials}
+ }
+
+
+
+
+ {error &&
{error}
}
+