From 6178658c7283d64f1b7e857d765e3914e54d13b9 Mon Sep 17 00:00:00 2001 From: omaroughriss Date: Thu, 13 Nov 2025 16:47:02 +0100 Subject: [PATCH] Add an account page to update member name --- app/dashboard/account/page.tsx | 311 +++++++++++++++++++++++++++++++++ 1 file changed, 311 insertions(+) create mode 100644 app/dashboard/account/page.tsx diff --git a/app/dashboard/account/page.tsx b/app/dashboard/account/page.tsx new file mode 100644 index 0000000..a3c018e --- /dev/null +++ b/app/dashboard/account/page.tsx @@ -0,0 +1,311 @@ +"use client" + +import React, { useState, useEffect, useCallback } from "react" +import { useRouter } from "next/navigation" +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" +import { Button } from "@/components/ui/button" +import { Badge } from "@/components/ui/badge" +import { Input } from "@/components/ui/input" +import { User, Shield, Key, Edit, Copy, CheckCircle, ArrowLeft, Save, X } from "@/lib/icons" +import UserStore from "@/lib/4nk/UserStore" +import { use4NK } from "@/lib/contexts/FourNKContext" +import MessageBus from "@/lib/4nk/MessageBus" +import { iframeUrl } from "@/app/page" + +export default function AccountPage() { + const [userInfo, setUserInfo] = useState(null) + const [userPairingId, setUserPairingId] = useState(null) + const [isCopied, setIsCopied] = useState(false) + const [isEditing, setIsEditing] = useState(false) + const [editedName, setEditedName] = useState("") + const [isUpdating, setIsUpdating] = useState(false) + const router = useRouter() + + // Récupérer les données du contexte 4NK + const { userName, refreshUserName } = use4NK() + + useEffect(() => { + const updateUserInfo = async () => { + const userStore = UserStore.getInstance() + const accessToken = userStore.getAccessToken() + const pairingId = userStore.getUserPairingId() + + setUserPairingId(pairingId) + + if (accessToken && userName !== null) { + setUserInfo({ + id: pairingId?.slice(0, 8) + "...", + name: userName, + role: "Utilisateur", + }) + } + }; + + updateUserInfo(); + }, [userName]) + + const handleCopyToClipboard = () => { + if (userPairingId) { + navigator.clipboard.writeText(userPairingId).then(() => { + setIsCopied(true); + setTimeout(() => setIsCopied(false), 2000); + }).catch(err => { + console.error('Erreur lors de la copie : ', err); + }); + } + } + + // Fonction pour mettre à jour le memberPublicName + const handleUpdateName = useCallback(async (newName: string) => { + if (!userPairingId) return; + + setIsUpdating(true); + try { + const messageBus = MessageBus.getInstance(iframeUrl); + await messageBus.isReady(); + + const updateData = { + memberPublicName: newName + }; + + // 1. Mettre à jour le process + const updatedProcess = await messageBus.updateProcess(userPairingId, updateData, [], null); + console.log("Process mis à jour :", updatedProcess); + + if (!updatedProcess) { + throw new Error('updateProcess n\'a pas retourné de process mis à jour'); + } + + // 2. Extraire le newStateId + const newStateId = updatedProcess.diffs[0]?.state_id; + if (!newStateId) { + throw new Error('No new state id found'); + } + + // 3. Notifier et Valider + await messageBus.notifyProcessUpdate(userPairingId, newStateId); + await messageBus.validateState(userPairingId, newStateId); + + // 4. Attendre un peu pour que la mise à jour se propage + await new Promise(resolve => setTimeout(resolve, 2000)); + + // 5. Forcer la mise à jour du contexte + await refreshUserName(); + + // 6. Mettre à jour l'interface + setIsEditing(false); + setEditedName(""); + + } catch (error) { + console.error('Error updating name:', error); + alert('Erreur lors de la mise à jour du nom'); + } finally { + setIsUpdating(false); + } + }, [userPairingId, refreshUserName]); + + const handleStartEdit = () => { + setEditedName(userName || ""); + setIsEditing(true); + }; + + const handleCancelEdit = () => { + setIsEditing(false); + setEditedName(""); + }; + + const handleSaveEdit = () => { + if (editedName.trim() && editedName.trim() !== userName) { + handleUpdateName(editedName.trim()); + } else { + setIsEditing(false); + setEditedName(""); + } + }; + + if (!userInfo) { + return ( +
+
+ +

Chargement du profil...

+
+
+ ) + } + + return ( +
+
+ + {/* Header */} +
+ +
+

+ Mon Profil +

+

+ Informations de votre compte 4NK +

+
+
+ + {/* Profile Card */} + + + + + Profil Utilisateur + + + + + {/* User Avatar and Basic Info */} +
+
+ + {userInfo.name.charAt(0)} + +
+
+ {isEditing ? ( +
+ setEditedName(e.target.value)} + onKeyDown={(e) => { + if (e.key === 'Enter' && editedName.trim()) { + handleSaveEdit(); + } else if (e.key === 'Escape') { + handleCancelEdit(); + } + }} + className="text-center text-xl font-semibold" + placeholder="Entrez votre nom" + disabled={isUpdating} + autoFocus + /> + + +
+ ) : ( +
+

+ {userInfo.name} +

+ +
+ )} +
+
+ +
+ + {/* Account Details */} +
+
+ +
+ + {userInfo.id} + + +
+
+ +
+ + {userInfo.role} +
+ +
+ + + + {/* Security Card */} + + + + + Sécurité 4NK + + + + +
+ +
+

+ {userPairingId || 'Non disponible'} +

+
+
+ +
+
+ + + Chiffrement actif + +
+ + 4NK + +
+ + +
+
+ ) +}