correct user settings manager (and password reset)
This commit is contained in:
LathanDevers
@@ -6,7 +6,7 @@ interface BadgeProps {
|
||||
name: string
|
||||
}
|
||||
|
||||
export const StatusBadge: React.FC<BadgeProps> = ({ className, name }) => {
|
||||
export const Badge: React.FC<BadgeProps> = ({ className, name }) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -20,4 +20,4 @@ export const StatusBadge: React.FC<BadgeProps> = ({ className, name }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default StatusBadge;
|
||||
export default Badge;
|
||||
@@ -1,43 +1,74 @@
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/Card';
|
||||
import { Lock } from "lucide-react";
|
||||
import React from 'react';
|
||||
import { Loader, Lock, KeyRound } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom"; // Assurez-vous d'utiliser react-router
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import StatusBadge from '../ui/StatusBadge';
|
||||
import type { User } from '@/types/User';
|
||||
|
||||
export function AccessWidget() {
|
||||
interface AccessWidgetProps {
|
||||
user: User | null;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
export const AccessWidget: React.FC<AccessWidgetProps> = ({
|
||||
user,
|
||||
isLoading,
|
||||
error,
|
||||
}) => {
|
||||
// Hook de navigation
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="p-6 border-slate-100">
|
||||
<h2 className="text-lg font-semibold text-slate-900 border-slate-100 flex items-center"><Lock className="w-5 h-5 mr-2 text-slate-400"></Lock>Sécurité de l'accès</h2>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
{/* MFA Status */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900">Authentification à double facteur (MFA)</p>
|
||||
<p className="text-xs text-slate-500 mt-1">Exigée par les politiques de sécurité GISE</p>
|
||||
<Card className="flex flex-col h-full">
|
||||
<div className="p-6 border-b border-slate-300/30 dark:border-slate-700/30">
|
||||
<h2 className="text-lg font-black text-slate-900 dark:text-slate-100 flex items-center gap-3">
|
||||
<div className="p-2 rounded-xl bg-[#e8e8e8] dark:bg-[#1e293b] shadow-[3px_3px_6px_#c5c5c5,-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#121926,-3px_-3px_6px_#2a3850]">
|
||||
<Lock className="w-5 h-5 text-blue-600 dark:text-blue-500" />
|
||||
</div>
|
||||
<span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-500 mr-1.5"></span>
|
||||
Actif
|
||||
</span>
|
||||
</div>
|
||||
Sécurité de l'accès
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-slate-100">
|
||||
<button className="text-sm font-medium text-blue-900 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 px-4 py-2 rounded-lg transition-colors duration-200 border border-blue-100">
|
||||
Générer de nouveaux codes de secours
|
||||
</button>
|
||||
{isLoading && !error && (
|
||||
<div className="p-8 flex justify-center items-center flex-1">
|
||||
<Loader className="w-6 h-6 animate-spin text-blue-600" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mot de passe */}
|
||||
<div className="pt-4 border-t border-slate-100">
|
||||
<p className="text-sm font-medium text-slate-900 mb-2">Mot de passe institutionnel</p>
|
||||
<p className="text-xs text-slate-500 mb-4">Dernière modification : Il y a 43 jours</p>
|
||||
<button className="text-sm font-medium text-slate-700 hover:text-slate-900 bg-white hover:bg-slate-50 border border-slate-300 px-4 py-2 rounded-lg transition-colors duration-200 shadow-sm">
|
||||
Modifier le mot de passe
|
||||
</button>
|
||||
{!isLoading && !error && (
|
||||
<div className="p-6 space-y-8 flex-1">
|
||||
|
||||
{/* MFA */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-bold text-slate-900 dark:text-slate-200">Authentification (MFA)</p>
|
||||
<p className="text-xs font-medium text-slate-500 dark:text-slate-400 mt-1">Exigée par GISE</p>
|
||||
</div>
|
||||
<StatusBadge status={user?.mfa_enabled ? "Actif" : "Hors Ligne"} />
|
||||
</div>
|
||||
|
||||
{/* MOT DE PASSE (Lien vers la sous-page) */}
|
||||
<div className="pt-8 border-t border-slate-300/30 dark:border-slate-700/30">
|
||||
<p className="text-sm font-bold text-slate-900 dark:text-slate-200 mb-1">Mot de passe institutionnel</p>
|
||||
<p className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-5">Dernière modification : Il y a 43 jours</p>
|
||||
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
// Navigation vers votre route dédiée
|
||||
onClick={() => navigate('/settings/security/password')}
|
||||
leftIcon={<KeyRound className="w-4 h-4" />}
|
||||
className="w-full sm:w-auto"
|
||||
>
|
||||
Modifier le mot de passe
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default AccessWidget;
|
||||
@@ -1,7 +1,33 @@
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/Card';
|
||||
import type { Company } from '@/types/Company';
|
||||
import type { User } from '@/types/User';
|
||||
import { Loader } from '@/components/ui/Loader';
|
||||
import { Building } from "lucide-react";
|
||||
|
||||
export function InformationWidget() {
|
||||
interface InformationWidgetProps {
|
||||
user: User | null;
|
||||
company: Company | null;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
function setVipBadge(vip_level: string | undefined) {
|
||||
switch (vip_level?.toLowerCase()) {
|
||||
case "platinum":
|
||||
return <span className="px-2 py-1 bg-amber-600 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">{vip_level?.toUpperCase()}</span>;
|
||||
case "premium":
|
||||
return <span className="px-2 py-1 bg-violet-600 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">{vip_level?.toUpperCase()}</span>;
|
||||
default:
|
||||
return <span className="px-2 py-1 bg-blue-600 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">{vip_level?.toUpperCase()}</span>;
|
||||
}
|
||||
}
|
||||
|
||||
export const InformationWidget: React.FC<InformationWidgetProps> = ({
|
||||
user,
|
||||
company,
|
||||
isLoading,
|
||||
error,
|
||||
}) => {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="p-6 border-slate-100">
|
||||
@@ -11,25 +37,29 @@ export function InformationWidget() {
|
||||
</h2>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<dl className="space-y-4 text-sm">
|
||||
<div>
|
||||
<dt className="text-slate-500 font-medium">Entité Légale</dt>
|
||||
<dd className="mt-1 font-semibold text-slate-900">Cabinet Juridique Example & Associés</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-slate-500 font-medium">Administrateur du compte</dt>
|
||||
<dd className="mt-1 text-slate-900">Direction Générale (direction@example.com)</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-slate-500 font-medium">Niveau d'Infogérance (SLA)</dt>
|
||||
<dd className="mt-1 flex items-center">
|
||||
<span className="px-2 py-1 bg-blue-900 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">VIP PLATINUM</span>
|
||||
<span className="text-slate-700 font-medium">Couverture 24/7 (99.99%)</span>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</CardContent>
|
||||
{isLoading && !error && <Loader />}
|
||||
{!isLoading && !error && (
|
||||
<CardContent>
|
||||
<dl className="space-y-4 text-sm">
|
||||
<div>
|
||||
<dt className="text-slate-500 font-medium">Entité Légale</dt>
|
||||
<dd className="mt-1 font-semibold text-slate-900">{company?.name}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-slate-500 font-medium">Administrateur du compte</dt>
|
||||
<dd className="mt-1 text-slate-900">{user?.role} {user?.name}</dd>
|
||||
<dd className="mt-1 text-slate-500">Email : {user?.emailVisibility && user?.email}{!user?.emailVisibility && "caché"}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-slate-500 font-medium">Niveau d'Infogérance (SLA)</dt>
|
||||
<dd className="mt-1 flex items-center">
|
||||
{setVipBadge(company?.vip_level)}
|
||||
<span className="text-slate-700 font-medium">Couverture 24/7 (99.99%)</span>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user