admin/hspguard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: profile picture fetching through guard service

Browse Source
This commit is contained in:
Amir Adal
2025-05-29 19:51:15 +02:00
parent 41c3dfdfe4
commit d9ca1ce2b4
7 changed files with 57 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
cmd/hspguard/api/api.go
View File

@ -46,7 +46,14 @@ func (s *APIServer) Run() error {
router.Route("/api/v1", func(r chi.Router) {
am := imiddleware.New(s.cfg)
r.Use(imiddleware.WithSkipper(am.Runner, "/api/v1/auth/login", "/api/v1/register", "/api/v1/auth/refresh", "/api/v1/oauth/token"))
r.Use(imiddleware.WithSkipper(
am.Runner,
"/api/v1/auth/login",
"/api/v1/register",
"/api/v1/auth/refresh",
"/api/v1/oauth/token",
"/api/v1/avatar",
))
userHandler := user.NewUserHandler(s.repo, s.storage)
userHandler.RegisterRoutes(r)

4
internal/storage/mod.go
View File

@ -34,6 +34,10 @@ func (fs *FileStorage) PutObject(ctx context.Context, bucketName string, objectN
return fs.client.PutObject(ctx, bucketName, objectName, reader, size, opts)
}
func (fs *FileStorage) GetObject(ctx context.Context, bucketName string, objectName string, opts minio.GetObjectOptions) (*minio.Object, error) {
return fs.client.GetObject(ctx, bucketName, objectName, opts)
}
func (fs *FileStorage) EndpointURL() *url.URL {
return fs.client.EndpointURL()
}

33
internal/user/routes.go
View File

@ -4,6 +4,8 @@ import (
"context"
"encoding/json"
"fmt"
"io"
"log"
"net/http"
"path/filepath"
"strings"
@ -34,6 +36,7 @@ func NewUserHandler(repo *repository.Queries, minio *storage.FileStorage) *UserH
func (h *UserHandler) RegisterRoutes(api chi.Router) {
api.Post("/register", h.register)
api.Put("/avatar", h.uploadAvatar)
api.Get("/avatar/{avatar}", h.getAvatar)
}
type RegisterParams struct {
@ -93,6 +96,28 @@ func (h *UserHandler) register(w http.ResponseWriter, r *http.Request) {
}
}
func (h *UserHandler) getAvatar(w http.ResponseWriter, r *http.Request) {
avatarObject := chi.URLParam(r, "avatar")
object, err := h.minio.GetObject(r.Context(), "guard-storage", avatarObject, minio.GetObjectOptions{})
if err != nil {
web.Error(w, "avatar not found", http.StatusNotFound)
return
}
defer object.Close()
stat, err := object.Stat()
if err != nil {
log.Printf("ERR: failed to get object stats: %v\n", err)
web.Error(w, "failed to get avatar", http.StatusNotFound)
return
}
w.Header().Set("Content-Type", stat.ContentType)
w.WriteHeader(http.StatusOK)
io.Copy(w, object)
}
func (h *UserHandler) uploadAvatar(w http.ResponseWriter, r *http.Request) {
userId, ok := util.GetRequestUserId(r.Context())
if !ok {
@ -134,11 +159,9 @@ func (h *UserHandler) uploadAvatar(w http.ResponseWriter, r *http.Request) {
return
}
imageURL := fmt.Sprintf("http://%s/%s/%s", h.minio.EndpointURL().Host, "guard-storage", uploadInfo.Key)
if err := h.repo.UpdateProfilePicture(r.Context(), repository.UpdateProfilePictureParams{
ProfilePicture: pgtype.Text{
String: imageURL,
String: uploadInfo.Key,
Valid: true,
},
ID: user.ID,
@ -148,14 +171,14 @@ func (h *UserHandler) uploadAvatar(w http.ResponseWriter, r *http.Request) {
}
type Response struct {
URL string `json:"url"`
AvatarID string `json:"url"`
}
w.Header().Set("Content-Type", "application/json")
w.WriteHeader(http.StatusOK)
encoder := json.NewEncoder(w)
if err := encoder.Encode(Response{URL: imageURL}); err != nil {
if err := encoder.Encode(Response{AvatarID: uploadInfo.Key}); err != nil {
web.Error(w, "failed to write response", http.StatusInternalServerError)
}
}

12
web/src/components/Home/Tabs/Home.tsx
View File

@ -1,6 +1,6 @@
import { Button } from "@/components/ui/button";
import Avatar from "@/feature/Avatar";
import { useAuth } from "@/store/auth";
import { User } from "lucide-react";
import { type FC } from "react";
const Home: FC = () => {
@ -10,15 +10,7 @@ const Home: FC = () => {
return (
<div className="flex flex-col items-center gap-2 p-7">
<div className="w-24 h-24 sm:w-36 sm:h-36 overflow-hidden rounded-full flex items-center justify-center bg-gray-300">
{profile?.profile_picture ? (
<img
className="w-full h-full object-cover"
src={profile.profile_picture}
alt="profile pic"
/>
) : (
<User size={64} />
)}
<Avatar iconSize={64} />
</div>
<h1 className="dark:text-gray-200 text-gray-800 text-2xl select-none">
Welcome, {profile?.full_name}

7
web/src/components/Home/Tabs/PersonalInfo.tsx
View File

@ -1,3 +1,4 @@
import Avatar from "@/feature/Avatar";
import { ChevronRight } from "lucide-react";
import { type FC } from "react";
@ -35,11 +36,7 @@ const PersonalInfo: FC = () => {
</div>
<div>
<div className="w-16 h-16 overflow-hidden rounded-full dark:bg-gray-400 bg-gray-700">
<img
className="w-full h-full"
src="http://192.168.178.69:9000/guard-storage/profile_eff00028-2d9e-458d-8944-677855edc147_1748099702417601900.jpg"
alt="profile pic"
/>
<Avatar iconSize={12} />
</div>
</div>
</div>

15
web/src/feature/AccountList/index.tsx
View File

@ -1,8 +1,9 @@
import { type LocalAccount } from "@/repository/account";
import { useAuth } from "@/store/auth";
import { CirclePlus, User } from "lucide-react";
import { CirclePlus } from "lucide-react";
import { useCallback, type FC } from "react";
import { Link, useLocation } from "react-router";
import Avatar from "../Avatar";
const AccountList: FC = () => {
const accounts = useAuth((state) => state.accounts);
@ -27,17 +28,7 @@ const AccountList: FC = () => {
>
<div>
<div className="rounded-full w-10 h-10 overflow-hidden bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-200 mr-3 ring ring-gray-400 dark:ring dark:ring-gray-500">
{account.profilePicture ? (
<img
src={account.profilePicture}
className="w-full h-full flex-1 object-cover"
alt="profile"
/>
) : (
<div className="w-full h-full flex items-center justify-center">
<User />
</div>
)}
<Avatar iconSize={8} avatarId={account.profilePicture ?? null} />
</div>
</div>
<div className="flex flex-col">

14
web/src/feature/Avatar/index.tsx
View File

@ -1,22 +1,28 @@
import { useAuth } from "@/store/auth";
import { User } from "lucide-react";
import type { FC } from "react";
import { useMemo, type FC } from "react";
export interface AvatarProps {
iconSize?: number;
className?: string;
avatarId?: string;
}
const Avatar: FC<AvatarProps> = ({ iconSize = 32, className }) => {
const Avatar: FC<AvatarProps> = ({ iconSize = 32, className, avatarId }) => {
const profile = useAuth((state) => state.profile);
const avatar = useMemo(
() => (avatarId !== undefined ? avatarId : profile?.profile_picture),
[avatarId, profile?.profile_picture],
);
return (
<div
className={`overflow-hidden bg-gray-100 rounded-full ring ring-gray-400 dark:ring dark:ring-gray-500 flex items-center justify-center ${className}`}
>
{profile?.profile_picture ? (
{avatar ? (
<img
src={profile?.profile_picture?.toString()}
src={`/api/v1/avatar/${avatar?.toString()}`}
className="w-full h-full flex-1 object-cover"
alt="profile"
/>