312 lines
11 KiB
TypeScript
312 lines
11 KiB
TypeScript
"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<any>(null)
|
|
const [userPairingId, setUserPairingId] = useState<string | null>(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 (
|
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<Shield className="h-12 w-12 mx-auto mb-4 text-blue-600 dark:text-blue-400" />
|
|
<p className="text-gray-600 dark:text-gray-400">Chargement du profil...</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
|
|
<div className="max-w-2xl mx-auto space-y-6">
|
|
|
|
{/* Header */}
|
|
<div className="relative">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => router.back()}
|
|
className="absolute left-0 top-0 flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
|
|
>
|
|
<ArrowLeft className="h-4 w-4 mr-1" />
|
|
Retour
|
|
</Button>
|
|
<div className="text-center">
|
|
<h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
|
|
Mon Profil
|
|
</h1>
|
|
<p className="text-gray-600 dark:text-gray-400 mt-2">
|
|
Informations de votre compte 4NK
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Profile Card */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center justify-center">
|
|
<User className="h-5 w-5 mr-2" />
|
|
Profil Utilisateur
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
|
|
{/* User Avatar and Basic Info */}
|
|
<div className="flex flex-col items-center space-y-4">
|
|
<div className="w-20 h-20 bg-blue-100 dark:bg-blue-800 rounded-full flex items-center justify-center">
|
|
<span className="text-blue-600 dark:text-blue-400 font-bold text-2xl">
|
|
{userInfo.name.charAt(0)}
|
|
</span>
|
|
</div>
|
|
<div className="text-center space-y-2">
|
|
{isEditing ? (
|
|
<div className="flex items-center space-x-2">
|
|
<Input
|
|
value={editedName}
|
|
onChange={(e) => 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
|
|
/>
|
|
<Button
|
|
size="sm"
|
|
onClick={handleSaveEdit}
|
|
disabled={isUpdating || !editedName.trim()}
|
|
>
|
|
{isUpdating ? (
|
|
<div className="animate-spin h-4 w-4 border-2 border-blue-600 border-t-transparent rounded-full" />
|
|
) : (
|
|
<Save className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={handleCancelEdit}
|
|
disabled={isUpdating}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-center space-x-2">
|
|
<h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
|
|
{userInfo.name}
|
|
</h3>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={handleStartEdit}
|
|
className="opacity-60 hover:opacity-100"
|
|
>
|
|
<Edit className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<hr className="border-gray-200 dark:border-gray-700" />
|
|
|
|
{/* Account Details */}
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between items-center">
|
|
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
ID Utilisateur
|
|
</label>
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-gray-900 dark:text-gray-100 font-mono text-sm">
|
|
{userInfo.id}
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={handleCopyToClipboard}
|
|
className="h-6 w-6 p-0"
|
|
>
|
|
{isCopied ? (
|
|
<CheckCircle className="h-4 w-4 text-green-500" />
|
|
) : (
|
|
<Copy className="h-4 w-4 text-gray-500" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center">
|
|
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Rôle
|
|
</label>
|
|
<span className="text-gray-900 dark:text-gray-100">{userInfo.role}</span>
|
|
</div>
|
|
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Security Card */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center justify-center">
|
|
<Shield className="h-5 w-5 mr-2" />
|
|
Sécurité 4NK
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-gray-700 dark:text-gray-300 flex items-center justify-center">
|
|
<Key className="h-4 w-4 mr-1" />
|
|
ID de Jumelage Complet
|
|
</label>
|
|
<div className="bg-gray-100 dark:bg-gray-800 p-3 rounded-lg">
|
|
<p className="text-xs font-mono text-gray-600 dark:text-gray-400 break-all text-center">
|
|
{userPairingId || 'Non disponible'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
|
|
<div className="flex items-center">
|
|
<Shield className="h-5 w-5 text-green-600 dark:text-green-400 mr-2" />
|
|
<span className="text-sm font-medium text-green-800 dark:text-green-200">
|
|
Chiffrement actif
|
|
</span>
|
|
</div>
|
|
<Badge variant="outline" className="bg-green-100 dark:bg-green-800 text-green-700 dark:text-green-200 border-green-200 dark:border-green-700 ml-2">
|
|
4NK
|
|
</Badge>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|