feat: Implement AI Chat Agent, Email Notifications, and UI enhancements
continuous-integration/drone/push Build is passing
continuous-integration/drone/push Build is passing
This commit is contained in:
@@ -8,7 +8,7 @@ import { Input } from "@/components/ui/input";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts';
|
||||
import { Trophy, Target, TrendingUp, Plus, CheckCircle2, Circle, Flame } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { useState, useCallback } from 'react';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Goal, Reward, User } from '@shared/schema';
|
||||
@@ -73,6 +73,7 @@ export default function AchievementsPage({ user }: { user: User }) {
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Rewards
|
||||
const { data: rewards = [] } = useQuery<Reward[]>({
|
||||
queryKey: ['/api/rewards', user.id],
|
||||
@@ -82,40 +83,13 @@ export default function AchievementsPage({ user }: { user: User }) {
|
||||
}
|
||||
});
|
||||
|
||||
const buyRewardMutation = useMutation({
|
||||
mutationFn: async (rewardId: string) => {
|
||||
const res = await fetch('/api/rewards/buy', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ rewardId, userId: user.id })
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.json();
|
||||
throw new Error(err.error || "Failed to buy");
|
||||
}
|
||||
return res.json();
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['/api/rewards'] });
|
||||
// Invalidate user query if we had one for XP, assuming manual update for now or refetch
|
||||
// user.xp -= data.cost... (but user object is static const in this file currently)
|
||||
toast({
|
||||
title: t('rewards.processing'), // Should contain success message really
|
||||
description: "Purchase successful!",
|
||||
});
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
toast({
|
||||
title: t('common.error'),
|
||||
description: t('rewards.insufficientFunds') === error.message ? t('rewards.insufficientFunds') : error.message,
|
||||
variant: "destructive"
|
||||
});
|
||||
}
|
||||
const { data: history = [] } = useQuery<any[]>({
|
||||
queryKey: ['/api/user/history'],
|
||||
});
|
||||
|
||||
const handleBuyReward = (rewardId: string) => {
|
||||
buyRewardMutation.mutate(rewardId);
|
||||
};
|
||||
const { data: inventory = [] } = useQuery<any[]>({
|
||||
queryKey: ['/api/user/inventory'],
|
||||
});
|
||||
|
||||
const handleCreateGoal = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
@@ -166,10 +140,10 @@ export default function AchievementsPage({ user }: { user: User }) {
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['/api/rewards'] });
|
||||
toast({ title: "Reward created!" });
|
||||
toast({ title: t('rewards.created', 'Reward created!') });
|
||||
},
|
||||
onError: () => {
|
||||
toast({ title: "Failed to create reward", variant: "destructive" });
|
||||
toast({ title: t('rewards.createError', 'Failed to create reward'), variant: "destructive" });
|
||||
}
|
||||
});
|
||||
|
||||
@@ -183,6 +157,8 @@ export default function AchievementsPage({ user }: { user: User }) {
|
||||
});
|
||||
};
|
||||
|
||||
const [activeTab, setActiveTab] = useState("overview");
|
||||
|
||||
return (
|
||||
<div className="space-y-6 pb-20 md:pb-0">
|
||||
<div className="flex items-center justify-between">
|
||||
@@ -192,10 +168,12 @@ export default function AchievementsPage({ user }: { user: User }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="overview" className="space-y-4">
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
|
||||
<TabsList>
|
||||
<TabsTrigger value="overview">{t('achievements.title')}</TabsTrigger>
|
||||
<TabsTrigger value="rewards">{t('rewards.shopTitle')}</TabsTrigger>
|
||||
<TabsTrigger value="inventory">{t('achievements.inventory')}</TabsTrigger>
|
||||
<TabsTrigger value="history">{t('achievements.history')}</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="overview" className="space-y-4">
|
||||
|
||||
@@ -417,33 +395,33 @@ export default function AchievementsPage({ user }: { user: User }) {
|
||||
<Trophy className="h-5 w-5 text-primary" />
|
||||
<CardTitle>{t('rewards.shopTitle')}</CardTitle>
|
||||
</div>
|
||||
<CardDescription>Spend your {user.xp} XP on exclusive rewards!</CardDescription>
|
||||
<CardDescription>{t('achievements.rewardsDescription', { xp: user.xp })}</CardDescription>
|
||||
</div>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button size="sm">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Reward
|
||||
{t('achievements.addReward')}
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create Custom Reward</DialogTitle>
|
||||
<DialogTitle>{t('achievements.createCustomReward')}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleCreateReward} className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Title</label>
|
||||
<label className="text-sm font-medium">{t('achievements.rewardTitle')}</label>
|
||||
<Input name="title" required />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Description</label>
|
||||
<label className="text-sm font-medium">{t('achievements.rewardDescription')}</label>
|
||||
<Input name="description" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Cost (XP)</label>
|
||||
<label className="text-sm font-medium">{t('achievements.rewardCost')}</label>
|
||||
<Input name="cost" type="number" required />
|
||||
</div>
|
||||
<Button type="submit" className="w-full">Create Reward</Button>
|
||||
<Button type="submit" className="w-full">{t('achievements.createRewardBtn')}</Button>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
@@ -455,15 +433,92 @@ export default function AchievementsPage({ user }: { user: User }) {
|
||||
<RewardCard
|
||||
reward={reward}
|
||||
userXp={user.xp}
|
||||
onBuy={handleBuyReward}
|
||||
isBuying={buyRewardMutation.isPending}
|
||||
userId={user.id}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
|
||||
<TabsContent value="inventory">
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
{inventory.length === 0 ? (
|
||||
<div className="col-span-full text-center py-12 text-muted-foreground">
|
||||
<Trophy className="h-12 w-12 mx-auto mb-3 opacity-20" />
|
||||
<p>{t('achievements.noInventory')}</p>
|
||||
<Button variant="link" onClick={() => document.querySelector('[value="rewards"]')?.dispatchEvent(new MouseEvent('click', { bubbles: true }))}>
|
||||
{t('achievements.goToShop')}
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
inventory.map((item) => (
|
||||
<Card key={item.id} className="overflow-hidden">
|
||||
<div className="h-32 bg-muted flex items-center justify-center text-4xl">
|
||||
{/* Quick icon mapping or default */}
|
||||
{item.reward.icon === 'coffee' ? '☕' :
|
||||
item.reward.icon === 'gamepad-2' ? '🎮' :
|
||||
item.reward.icon === 'palette' ? '🎨' : '🎁'}
|
||||
</div>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">{item.reward.title.startsWith('rewards.') ? t(item.reward.title) : item.reward.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-xs text-muted-foreground mb-2">
|
||||
{item.reward.description?.startsWith('rewards.') ? t(item.reward.description) : item.reward.description}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t('achievements.purchasedAt', { date: new Date(item.purchasedAt).toLocaleDateString() })}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="history">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('achievements.xpHistory')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-1">
|
||||
{history.length === 0 ? (
|
||||
<p className="text-center py-8 text-muted-foreground">{t('achievements.noHistory')}</p>
|
||||
) : (
|
||||
history.map((event) => (
|
||||
<div key={event.id} className="flex items-center justify-between py-3 border-b last:border-0 hover:bg-muted/50 px-2 rounded-md transition-colors">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-2 rounded-full ${event.source === 'task_completion' ? 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400' :
|
||||
event.source === 'daily_streak' ? 'bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400' :
|
||||
'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400'
|
||||
}`}>
|
||||
{event.source === 'task_completion' ? <CheckCircle2 className="h-4 w-4" /> :
|
||||
event.source === 'daily_streak' ? <Flame className="h-4 w-4" /> :
|
||||
<Trophy className="h-4 w-4" />}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-sm">
|
||||
{t(`gamification.source.${event.source}`, { defaultValue: event.source }) as string}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{new Date(event.createdAt).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className="font-bold text-green-600 dark:text-green-400">
|
||||
+{event.amount} XP
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs >
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
|
||||
import { SMTPSettingsCard } from "@/components/admin/SMTPSettingsCard";
|
||||
import { AiSettingsCard } from "@/components/admin/AiSettingsCard";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import { useLocation } from "wouter";
|
||||
|
||||
export default function AdminSettings() {
|
||||
const { t } = useTranslation();
|
||||
const [, setLocation] = useLocation();
|
||||
|
||||
return (
|
||||
<div className="space-y-6 container mx-auto p-4 max-w-5xl">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="icon" onClick={() => setLocation("/settings")}>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">{t('settings.admin.title')}</h1>
|
||||
<p className="text-muted-foreground">{t('settings.admin.description')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6">
|
||||
<AiSettingsCard />
|
||||
<SMTPSettingsCard />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -12,15 +12,17 @@ import {
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Plus, Shield, ShieldAlert, User as UserIcon } from "lucide-react";
|
||||
import { Plus, Shield, User as UserIcon } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
export default function AdminUserManagement() {
|
||||
const { t } = useTranslation();
|
||||
const { toast } = useToast();
|
||||
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
||||
const [newUser, setNewUser] = useState({ username: '', email: '', password: '', role: 'user' });
|
||||
@@ -34,6 +36,10 @@ export default function AdminUserManagement() {
|
||||
queryKey: ["/api/admin/settings"],
|
||||
});
|
||||
|
||||
// Delete User State
|
||||
const [deleteUser, setDeleteUser] = useState<User | null>(null);
|
||||
const [confirmText, setConfirmText] = useState("");
|
||||
|
||||
// Mutations
|
||||
const toggleActiveMutation = useMutation({
|
||||
mutationFn: (userId: string) => apiRequest("POST", `/api/admin/users/${userId}/toggle-active`),
|
||||
@@ -44,14 +50,25 @@ export default function AdminUserManagement() {
|
||||
onError: (e: Error) => toast({ title: "Failed to update", description: e.message, variant: "destructive" }),
|
||||
});
|
||||
|
||||
const toggleRegistrationMutation = useMutation({
|
||||
mutationFn: (enabled: boolean) => apiRequest("POST", "/api/admin/settings", { registration_enabled: enabled }),
|
||||
const updateSettingsMutation = useMutation({
|
||||
mutationFn: (data: Partial<typeof settings>) => apiRequest("POST", "/api/admin/settings", data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/admin/settings"] });
|
||||
toast({ title: "Settings updated" });
|
||||
toast({ title: t('userManagement.settingsUpdated', 'Settings updated') });
|
||||
},
|
||||
});
|
||||
|
||||
const deleteUserMutation = useMutation({
|
||||
mutationFn: (userId: string) => apiRequest("DELETE", `/api/admin/users/${userId}`),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/admin/users"] });
|
||||
setDeleteUser(null);
|
||||
setConfirmText("");
|
||||
toast({ title: t('userManagement.userDeleted', 'User deleted') });
|
||||
},
|
||||
onError: (e: Error) => toast({ title: "Failed to delete", description: e.message, variant: "destructive" }),
|
||||
});
|
||||
|
||||
const createUserMutation = useMutation({
|
||||
mutationFn: (data: typeof newUser) => apiRequest("POST", "/api/admin/users", data),
|
||||
onSuccess: () => {
|
||||
@@ -66,64 +83,66 @@ export default function AdminUserManagement() {
|
||||
return (
|
||||
<div className="space-y-6 container mx-auto p-4 max-w-5xl">
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-3xl font-bold tracking-tight">User Management</h1>
|
||||
<h1 className="text-3xl font-bold tracking-tight">{t('userManagement.title')}</h1>
|
||||
</div>
|
||||
|
||||
{/* Global Settings */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>System Settings</CardTitle>
|
||||
<CardDescription>Control global access and registration</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex items-center justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="font-medium">Public Registration</p>
|
||||
<p className="text-sm text-muted-foreground">Allow new users to sign up</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={settings?.registration_enabled}
|
||||
onCheckedChange={(checked) => toggleRegistrationMutation.mutate(checked)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Global Settings (Registration Only now) */}
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('userManagement.registration')}</CardTitle>
|
||||
<CardDescription>{t('userManagement.registrationDesc')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex items-center justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="font-medium">{t('userManagement.publicRegistration')}</p>
|
||||
<p className="text-sm text-muted-foreground">{t('userManagement.publicRegistrationDesc')}</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={settings?.registration_enabled}
|
||||
onCheckedChange={(checked) => updateSettingsMutation.mutate({ registration_enabled: checked })}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* User Table */}
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Registered Users</CardTitle>
|
||||
<CardDescription>Manage user accounts and roles</CardDescription>
|
||||
<CardTitle>{t('userManagement.registeredUsers')}</CardTitle>
|
||||
<CardDescription>{t('userManagement.registeredUsersDesc')}</CardDescription>
|
||||
</div>
|
||||
<Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button><Plus className="mr-2 h-4 w-4" /> Create User</Button>
|
||||
<Button><Plus className="mr-2 h-4 w-4" /> {t('userManagement.createUser')}</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create New User</DialogTitle>
|
||||
<DialogTitle>{t('userManagement.createUser')}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Username</Label>
|
||||
<Label>{t('settings.account.username')}</Label>
|
||||
<Input value={newUser.username} onChange={e => setNewUser({ ...newUser, username: e.target.value })} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Email</Label>
|
||||
<Label>{t('auth.email')}</Label>
|
||||
<Input value={newUser.email} onChange={e => setNewUser({ ...newUser, email: e.target.value })} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Password</Label>
|
||||
<Label>{t('auth.password')}</Label>
|
||||
<Input type="password" value={newUser.password} onChange={e => setNewUser({ ...newUser, password: e.target.value })} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Role</Label>
|
||||
<Label>{t('userManagement.table.role')}</Label>
|
||||
<select
|
||||
className="w-full p-2 border rounded-md bg-background"
|
||||
value={newUser.role}
|
||||
onChange={e => setNewUser({ ...newUser, role: e.target.value })}
|
||||
>
|
||||
<option value="user">User</option>
|
||||
<option value="admin">Administrator</option>
|
||||
<option value="user">{t('userManagement.roles.user')}</option>
|
||||
<option value="admin">{t('userManagement.roles.admin')}</option>
|
||||
</select>
|
||||
</div>
|
||||
<Button
|
||||
@@ -131,7 +150,7 @@ export default function AdminUserManagement() {
|
||||
disabled={createUserMutation.isPending}
|
||||
className="w-full"
|
||||
>
|
||||
{createUserMutation.isPending ? 'Creating...' : 'Create User'}
|
||||
{createUserMutation.isPending ? t('common.loading') : t('userManagement.createUser')}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
@@ -141,17 +160,17 @@ export default function AdminUserManagement() {
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>User</TableHead>
|
||||
<TableHead>Role</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>XP / Level</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
<TableHead>{t('userManagement.table.user')}</TableHead>
|
||||
<TableHead>{t('userManagement.table.role')}</TableHead>
|
||||
<TableHead>{t('userManagement.table.status')}</TableHead>
|
||||
<TableHead>{t('userManagement.table.xp')}</TableHead>
|
||||
<TableHead className="text-right">{t('userManagement.table.actions')}</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{isLoading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="text-center h-24">Loading users...</TableCell>
|
||||
<TableCell colSpan={5} className="text-center h-24">{t('common.loading')}</TableCell>
|
||||
</TableRow>
|
||||
) : users.map((user) => (
|
||||
<TableRow key={user.id}>
|
||||
@@ -164,32 +183,41 @@ export default function AdminUserManagement() {
|
||||
<TableCell>
|
||||
{user.role === 'admin' ? (
|
||||
<Badge variant="default" className="bg-primary/20 text-primary hover:bg-primary/30">
|
||||
<Shield className="w-3 h-3 mr-1" /> Admin
|
||||
<Shield className="w-3 h-3 mr-1" /> {t('userManagement.roles.admin')}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="outline">
|
||||
<UserIcon className="w-3 h-3 mr-1" /> User
|
||||
<UserIcon className="w-3 h-3 mr-1" /> {t('userManagement.roles.user')}
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{user.isActive ? (
|
||||
<Badge variant="secondary" className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100">Active</Badge>
|
||||
<Badge variant="secondary" className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100">{t('userManagement.table.active')}</Badge>
|
||||
) : (
|
||||
<Badge variant="destructive">Inactive</Badge>
|
||||
<Badge variant="destructive">{t('userManagement.table.inactive')}</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{user.xp} XP (Lvl {user.level})
|
||||
{user.xp} XP ({t('gamification.level', { level: user.level })})
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<TableCell className="text-right flex items-center justify-end gap-2">
|
||||
<Button
|
||||
variant={user.isActive ? "destructive" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => toggleActiveMutation.mutate(user.id)}
|
||||
disabled={user.role === 'admin' && user.username === 'admin'} // Protect super admin heuristic
|
||||
disabled={user.role === 'admin' && user.username === 'admin'}
|
||||
>
|
||||
{user.isActive ? 'Deactivate' : 'Activate'}
|
||||
{user.isActive ? t('userManagement.table.deactivate') : t('userManagement.table.activate')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-destructive hover:text-destructive"
|
||||
onClick={() => setDeleteUser(user)}
|
||||
disabled={user.role === 'admin' && user.username === 'admin'}
|
||||
>
|
||||
{t('common.delete')}
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
@@ -198,6 +226,35 @@ export default function AdminUserManagement() {
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Dialog open={!!deleteUser} onOpenChange={(open) => !open && setDeleteUser(null)}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('userManagement.deleteUser')}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-2">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('userManagement.deleteConfirm', { username: deleteUser?.username })}
|
||||
</p>
|
||||
<Label>{t('userManagement.typeToConfirm')}: <span className="font-bold select-all">{deleteUser?.username}</span></Label>
|
||||
<Input
|
||||
value={confirmText}
|
||||
onChange={(e) => setConfirmText(e.target.value)}
|
||||
placeholder={deleteUser?.username}
|
||||
/>
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button variant="outline" onClick={() => setDeleteUser(null)}>{t('common.cancel')}</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => deleteUser && deleteUserMutation.mutate(deleteUser.id)}
|
||||
disabled={confirmText !== deleteUser?.username || deleteUserMutation.isPending}
|
||||
>
|
||||
{deleteUserMutation.isPending ? t('common.loading') : t('common.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import { useEffect } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useLocation } from "wouter";
|
||||
import { useLocation, Link } from "wouter";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { insertUserSchema, InsertUser, loginSchema, registerSchema, LoginUser } from "@shared/schema";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { apiRequest } from "@/lib/queryClient";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
@@ -22,12 +24,15 @@ import {
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { BrainCircuit } from "lucide-react";
|
||||
|
||||
export default function AuthPage() {
|
||||
const { t } = useTranslation();
|
||||
const { toast } = useToast();
|
||||
const queryClient = useQueryClient();
|
||||
const [activeTab, setActiveTab] = useState("login");
|
||||
|
||||
const { data: settings } = useQuery<{ registration_enabled: boolean }>({
|
||||
queryKey: ["/api/settings/public"],
|
||||
@@ -92,10 +97,9 @@ export default function AuthPage() {
|
||||
<div className="bg-white/10 p-4 rounded-2xl inline-block mb-4 backdrop-blur-sm">
|
||||
<BrainCircuit className="w-16 h-16 text-primary-foreground" />
|
||||
</div>
|
||||
<h1 className="text-4xl font-bold tracking-tight">TaskFlow</h1>
|
||||
<h1 className="text-4xl font-bold tracking-tight">{t('auth.heroTitle')}</h1>
|
||||
<p className="text-lg text-zinc-400">
|
||||
Master your productivity with AI-driven task management, gamified
|
||||
achievements, and intelligent focus modes.
|
||||
{t('auth.heroSubtitle')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -106,52 +110,61 @@ export default function AuthPage() {
|
||||
<div className="lg:hidden mx-auto bg-primary/10 p-3 rounded-xl w-fit mb-2">
|
||||
<BrainCircuit className="w-8 h-8 text-primary" />
|
||||
</div>
|
||||
<CardTitle className="text-2xl font-bold">Welcome Back</CardTitle>
|
||||
<CardTitle className="text-2xl font-bold">{t('auth.welcomeBack')}</CardTitle>
|
||||
<CardDescription>
|
||||
Sign in to your account
|
||||
{settings?.registration_enabled && " or create a new one"} to get started
|
||||
{settings?.registration_enabled
|
||||
? t('auth.signInDesc')
|
||||
: t('auth.signInDescNoReg')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Tabs defaultValue="login" className="space-y-6">
|
||||
<TabsList className={`grid w-full ${settings?.registration_enabled ? 'grid-cols-2' : 'grid-cols-1'}`}>
|
||||
<TabsTrigger value="login">Login</TabsTrigger>
|
||||
{settings?.registration_enabled && (
|
||||
<TabsTrigger value="register">Register</TabsTrigger>
|
||||
)}
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="login">
|
||||
<AuthForm
|
||||
mode="login"
|
||||
onSubmit={(data) => loginMutation.mutate(data)}
|
||||
isLoading={loginMutation.isPending}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<div className="flex w-full mb-6 bg-zinc-100 dark:bg-zinc-800 p-1 rounded-lg">
|
||||
<button
|
||||
onClick={() => setActiveTab("login")}
|
||||
className={`flex-1 py-2 text-sm font-medium rounded-md transition-all ${activeTab === "login"
|
||||
? "bg-white dark:bg-zinc-950 shadow-sm text-foreground"
|
||||
: "text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
{t('auth.login')}
|
||||
</button>
|
||||
{settings?.registration_enabled && (
|
||||
<TabsContent value="register">
|
||||
<AuthForm
|
||||
mode="register"
|
||||
onSubmit={(data) => {
|
||||
registerMutation.mutate(data as InsertUser, {
|
||||
onError: (error) => {
|
||||
// We can't access form here directly easily without refactoring,
|
||||
// but we can pass a callback or handle it in AuthForm if we passed mutation there.
|
||||
// However, simpler is to catch it here if we want global toast.
|
||||
// The Requirements say "indicate failure".
|
||||
// To set FIELD errors, we must be inside the form submit context or have access to form methods.
|
||||
// Let's refactor AuthForm to handle the mutation itself or return the error?
|
||||
// Actually, simpler: pass the mutation TO AuthForm so it can handle onError.
|
||||
}
|
||||
})
|
||||
}}
|
||||
isLoading={registerMutation.isPending}
|
||||
registerMutation={registerMutation} // Pass mutation to handle errors inside
|
||||
/>
|
||||
</TabsContent>
|
||||
<button
|
||||
onClick={() => setActiveTab("register")}
|
||||
className={`flex-1 py-2 text-sm font-medium rounded-md transition-all ${activeTab === "register"
|
||||
? "bg-white dark:bg-zinc-950 shadow-sm text-foreground"
|
||||
: "text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
{t('auth.register')}
|
||||
</button>
|
||||
)}
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
{activeTab === "login" ? (
|
||||
<AuthForm
|
||||
mode="login"
|
||||
onSubmit={(data) => loginMutation.mutate(data)}
|
||||
isLoading={loginMutation.isPending}
|
||||
/>
|
||||
) : (
|
||||
settings?.registration_enabled ? (
|
||||
<AuthForm
|
||||
mode="register"
|
||||
onSubmit={(data) => {
|
||||
registerMutation.mutate(data as InsertUser, {
|
||||
onError: (error) => {
|
||||
// Handled in form
|
||||
}
|
||||
})
|
||||
}}
|
||||
isLoading={registerMutation.isPending}
|
||||
registerMutation={registerMutation}
|
||||
/>
|
||||
) : (
|
||||
<div className="p-4 text-center text-muted-foreground">{t('auth.registrationDisabled')}</div>
|
||||
)
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
@@ -170,8 +183,9 @@ function AuthForm({
|
||||
isLoading: boolean;
|
||||
registerMutation?: any; // Type accurately if possible, but 'any' for quick fix avoids generic complexities
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const { toast } = useToast();
|
||||
const form = useForm<InsertUser>({
|
||||
const form = useForm<any>({
|
||||
resolver: zodResolver(mode === "login" ? loginSchema : registerSchema),
|
||||
defaultValues: {
|
||||
username: "",
|
||||
@@ -212,9 +226,9 @@ function AuthForm({
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{mode === 'login' ? 'Username or Email' : 'Username'}</FormLabel>
|
||||
<FormLabel>{mode === 'login' ? t('auth.usernameOrEmail') : t('auth.username')}</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder={mode === 'login' ? "Enter username or email" : "Choose a username"} {...field} />
|
||||
<Input placeholder={mode === 'login' ? t('auth.enterUsernameOrEmail') : t('auth.chooseUsername')} {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -227,9 +241,9 @@ function AuthForm({
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormLabel>{t('auth.email')}</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="email" placeholder="Enter your email" {...field} />
|
||||
<Input type="email" placeholder={t('auth.enterEmail')} {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -242,11 +256,11 @@ function AuthForm({
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormLabel>{t('auth.password')}</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
placeholder={t('auth.enterPassword')}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
@@ -254,14 +268,41 @@ function AuthForm({
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{mode === "login" && (
|
||||
<div className="flex items-center justify-between">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rememberMe"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center space-x-2 space-y-0">
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="font-normal cursor-pointer">
|
||||
{t("auth.rememberMe")}
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Link href="/forgot-password">
|
||||
<Button variant="link" className="px-0 font-normal mt-0 h-auto text-muted-foreground hover:text-primary" type="button">
|
||||
{t("auth.forgotPassword")}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<Button className="w-full" type="submit" disabled={isLoading}>
|
||||
{isLoading
|
||||
? mode === "login"
|
||||
? "Logging in..."
|
||||
: "Creating account..."
|
||||
? t('auth.loggingIn')
|
||||
: t('auth.creatingAccount')
|
||||
: mode === "login"
|
||||
? "Sign In"
|
||||
: "Create Account"}
|
||||
? t('auth.signIn')
|
||||
: t('auth.createAccount')}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Link } from "wouter";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardFooter,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { BrainCircuit, ArrowLeft } from "lucide-react";
|
||||
|
||||
export default function ForgotPasswordPage() {
|
||||
const { t } = useTranslation();
|
||||
const { toast } = useToast();
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
|
||||
const forgotPasswordSchema = z.object({
|
||||
email: z.string().email(t("validation.email")),
|
||||
});
|
||||
|
||||
type ForgotPasswordFormData = z.infer<typeof forgotPasswordSchema>;
|
||||
|
||||
const form = useForm<ForgotPasswordFormData>({
|
||||
resolver: zodResolver(forgotPasswordSchema),
|
||||
defaultValues: {
|
||||
email: "",
|
||||
},
|
||||
});
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: async (data: ForgotPasswordFormData) => {
|
||||
const res = await fetch("/api/auth/forgot-password", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const text = await res.text();
|
||||
throw new Error(text || "Failed to send reset email");
|
||||
}
|
||||
return res.json();
|
||||
},
|
||||
onSuccess: () => {
|
||||
setIsSuccess(true);
|
||||
toast({ title: t("auth.resetEmailSent") });
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
toast({
|
||||
title: t("common.error"),
|
||||
description: "Something went wrong. Please try again.",
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = (data: ForgotPasswordFormData) => {
|
||||
mutation.mutate(data);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen grid lg:grid-cols-2">
|
||||
<div className="hidden lg:flex flex-col justify-center items-center bg-zinc-900 p-12 text-white">
|
||||
<div className="max-w-md space-y-4 text-center">
|
||||
<div className="bg-white/10 p-4 rounded-2xl inline-block mb-4 backdrop-blur-sm">
|
||||
<BrainCircuit className="w-16 h-16 text-primary-foreground" />
|
||||
</div>
|
||||
<h1 className="text-4xl font-bold tracking-tight">{t("app.title")}</h1>
|
||||
<p className="text-lg text-zinc-400">
|
||||
{t("auth.forgotPasswordDesc")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center p-4 bg-background">
|
||||
<Card className="w-full max-w-md shadow-xl border-border/50">
|
||||
<CardHeader className="text-center space-y-2">
|
||||
<div className="lg:hidden mx-auto bg-primary/10 p-3 rounded-xl w-fit mb-2">
|
||||
<BrainCircuit className="w-8 h-8 text-primary" />
|
||||
</div>
|
||||
<CardTitle className="text-2xl font-bold">{t("auth.forgotPasswordTitle")}</CardTitle>
|
||||
<CardDescription>
|
||||
{t("auth.forgotPasswordDesc")}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isSuccess ? (
|
||||
<div className="text-center space-y-4">
|
||||
<div className="p-4 bg-green-500/10 text-green-600 rounded-lg">
|
||||
<p>{t("auth.resetEmailSentDesc")}</p>
|
||||
</div>
|
||||
<p className="text-sm text-neutral-500">{t("auth.checkSpam")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="email" placeholder="email@example.com" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button className="w-full" type="submit" disabled={mutation.isPending}>
|
||||
{mutation.isPending ? t("auth.sending") : t("auth.sendResetLink")}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
)}
|
||||
</CardContent>
|
||||
<CardFooter className="justify-center">
|
||||
<Link href="/auth">
|
||||
<Button variant="link" className="text-sm text-neutral-500">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" /> {t("auth.backToLogin")}
|
||||
</Button>
|
||||
</Link>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Loader2, Trophy, Medal } from "lucide-react";
|
||||
@@ -11,6 +12,7 @@ interface LeaderboardUser {
|
||||
}
|
||||
|
||||
export default function LeaderboardPage() {
|
||||
const { t } = useTranslation();
|
||||
const { data: leaderboard, isLoading } = useQuery<LeaderboardUser[]>({
|
||||
queryKey: ["/api/leaderboard"],
|
||||
});
|
||||
@@ -30,15 +32,15 @@ export default function LeaderboardPage() {
|
||||
<Trophy className="h-8 w-8 text-yellow-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Leaderboard</h1>
|
||||
<p className="text-muted-foreground">Top performers in the community</p>
|
||||
<h1 className="text-3xl font-bold tracking-tight">{t('leaderboardPage.title')}</h1>
|
||||
<p className="text-muted-foreground">{t('leaderboardPage.subtitle')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="border-border/50 shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>Global Rankings</CardTitle>
|
||||
<CardDescription>Users ranked by total XP (opt-in only)</CardDescription>
|
||||
<CardTitle>{t('leaderboardPage.globalRankings')}</CardTitle>
|
||||
<CardDescription>{t('leaderboardPage.globalRankingsDesc')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
@@ -46,9 +48,9 @@ export default function LeaderboardPage() {
|
||||
<div
|
||||
key={user.id}
|
||||
className={`flex items-center justify-between p-4 rounded-lg border ${index === 0 ? 'bg-yellow-500/10 border-yellow-500/50' :
|
||||
index === 1 ? 'bg-slate-400/10 border-slate-400/50' :
|
||||
index === 2 ? 'bg-amber-700/10 border-amber-700/50' :
|
||||
'bg-card hover:bg-accent/50 transition-colors'
|
||||
index === 1 ? 'bg-slate-400/10 border-slate-400/50' :
|
||||
index === 2 ? 'bg-amber-700/10 border-amber-700/50' :
|
||||
'bg-card hover:bg-accent/50 transition-colors'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
@@ -58,19 +60,19 @@ export default function LeaderboardPage() {
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-semibold text-lg">{user.username}</span>
|
||||
<span className="text-xs text-muted-foreground">Level {user.level}</span>
|
||||
<span className="text-xs text-muted-foreground">{t('gamification.level', { level: user.level })}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-mono font-bold text-lg text-primary">{user.xp}</span>
|
||||
<span className="text-xs text-muted-foreground uppercase tracking-wider">XP</span>
|
||||
<span className="text-xs text-muted-foreground uppercase tracking-wider">{t('leaderboardPage.xp')}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{leaderboard?.length === 0 && (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
No users on the leaderboard yet. Be the first to join in Settings!
|
||||
{t('leaderboardPage.noUsers')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -79,3 +81,4 @@ export default function LeaderboardPage() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,193 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Link, useLocation } from "wouter";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardFooter,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { BrainCircuit, ArrowLeft } from "lucide-react";
|
||||
|
||||
export default function ResetPasswordPage() {
|
||||
const { t } = useTranslation();
|
||||
const { toast } = useToast();
|
||||
const [location, setLocation] = useLocation();
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
|
||||
// Parse query params manually since wouter doesn't have a hook for it built-in easily for this version?
|
||||
// Actually window.location.search is easy enough
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
const token = searchParams.get("token");
|
||||
|
||||
const resetPasswordSchema = z.object({
|
||||
password: z.string().min(6, t("validation.minLength", { min: 6 })),
|
||||
confirmPassword: z.string(),
|
||||
}).refine((data) => data.password === data.confirmPassword, {
|
||||
message: t("validation.passwordMatch"),
|
||||
path: ["confirmPassword"],
|
||||
});
|
||||
|
||||
type ResetPasswordFormData = z.infer<typeof resetPasswordSchema>;
|
||||
|
||||
const form = useForm<ResetPasswordFormData>({
|
||||
resolver: zodResolver(resetPasswordSchema),
|
||||
defaultValues: {
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
},
|
||||
});
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: async (data: ResetPasswordFormData) => {
|
||||
const res = await fetch("/api/auth/reset-password", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ token, newPassword: data.password }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const json = await res.json();
|
||||
throw new Error(json.error || "Failed to reset password");
|
||||
}
|
||||
return res.json();
|
||||
},
|
||||
onSuccess: () => {
|
||||
setIsSuccess(true);
|
||||
toast({ title: t("auth.resetSuccess") });
|
||||
setTimeout(() => setLocation("/auth"), 3000);
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
toast({
|
||||
title: t("common.error"),
|
||||
description: error.message,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = (data: ResetPasswordFormData) => {
|
||||
if (!token) {
|
||||
toast({ title: t("auth.invalidToken"), description: t("auth.missingToken"), variant: "destructive" });
|
||||
return;
|
||||
}
|
||||
mutation.mutate(data);
|
||||
};
|
||||
|
||||
if (!token) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-background">
|
||||
<Card className="w-full max-w-md shadow-xl border-border/50">
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-destructive">{t("auth.invalidToken")}</CardTitle>
|
||||
<CardDescription>{t("auth.missingToken")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardFooter className="justify-center">
|
||||
<Link href="/auth">
|
||||
<Button variant="link">{t("auth.backToLogin")}</Button>
|
||||
</Link>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen grid lg:grid-cols-2">
|
||||
<div className="hidden lg:flex flex-col justify-center items-center bg-zinc-900 p-12 text-white">
|
||||
<div className="max-w-md space-y-4 text-center">
|
||||
<div className="bg-white/10 p-4 rounded-2xl inline-block mb-4 backdrop-blur-sm">
|
||||
<BrainCircuit className="w-16 h-16 text-primary-foreground" />
|
||||
</div>
|
||||
<h1 className="text-4xl font-bold tracking-tight">{t("app.title")}</h1>
|
||||
<p className="text-lg text-zinc-400">
|
||||
{t("auth.resetPasswordDesc")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center p-4 bg-background">
|
||||
<Card className="w-full max-w-md shadow-xl border-border/50">
|
||||
<CardHeader className="text-center space-y-2">
|
||||
<div className="lg:hidden mx-auto bg-primary/10 p-3 rounded-xl w-fit mb-2">
|
||||
<BrainCircuit className="w-8 h-8 text-primary" />
|
||||
</div>
|
||||
<CardTitle className="text-2xl font-bold">{t("auth.resetPasswordTitle")}</CardTitle>
|
||||
<CardDescription>
|
||||
{t("auth.resetPasswordDesc")}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isSuccess ? (
|
||||
<div className="text-center space-y-4">
|
||||
<div className="p-4 bg-green-500/10 text-green-600 rounded-lg">
|
||||
<p>{t("auth.resetSuccess")}</p>
|
||||
<p className="text-sm mt-2">{t("auth.redirecting")}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("auth.newPassword")}</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" placeholder="******" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="confirmPassword"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("auth.confirmPassword")}</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" placeholder="******" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button className="w-full" type="submit" disabled={mutation.isPending}>
|
||||
{mutation.isPending ? t("auth.resetting") : t("auth.resetBtn")}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
)}
|
||||
</CardContent>
|
||||
{isSuccess && (
|
||||
<CardFooter className="justify-center">
|
||||
<Link href="/auth">
|
||||
<Button variant="link" className="text-sm text-neutral-500">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" /> {t("auth.backToLogin")}
|
||||
</Button>
|
||||
</Link>
|
||||
</CardFooter>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +1,56 @@
|
||||
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { AlertCircle } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { AlertCircle, ArrowLeft } from "lucide-react";
|
||||
import { Link } from "wouter";
|
||||
// This image would ideally be imported, but for now we reference the public asset we would have (conceptually) or generated
|
||||
// Since we generated it to an artifact, we need to move it to proper location or assume a path.
|
||||
// For now, I will assume it's copied to /public/404-illustration.png by a separate command or use a placeholder if not.
|
||||
// But as I am an agent, I will rely on the user to see the artifact.
|
||||
// Wait, I can't easily reference the artifact URL in the code unless I copy it to the public dir.
|
||||
// I'll assume for this design I use a standard nice layout, and if I could I would put the image there.
|
||||
// I will use a placeholder styling or the generated image if I can move it.
|
||||
// Let's copy the generated image to the public folder first!
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div className="min-h-screen w-full flex items-center justify-center bg-gray-50">
|
||||
<Card className="w-full max-w-md mx-4">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex mb-4 gap-2">
|
||||
<AlertCircle className="h-8 w-8 text-red-500" />
|
||||
<h1 className="text-2xl font-bold text-gray-900">404 Page Not Found</h1>
|
||||
<div className="min-h-screen w-full flex items-center justify-center bg-background p-4">
|
||||
<Card className="w-full max-w-2xl mx-auto shadow-xl border-dashed border-2 overflow-hidden bg-card text-card-foreground">
|
||||
<div className="md:flex">
|
||||
<div className="md:w-1/2 bg-muted/30 flex items-center justify-center p-8">
|
||||
{/*
|
||||
In a real app, I'd move the generated image to public/assets/404.png
|
||||
For now, I'll use a high-quality SVG placeholder or just the <img> tag pointing to where I'll put it.
|
||||
I'll Move the artifact to client/public/404.png in the next step.
|
||||
*/}
|
||||
<img
|
||||
src="/404-illustration.png"
|
||||
alt="Damaged Task List"
|
||||
className="w-full h-auto object-contain drop-shadow-lg transform rotate-3 hover:rotate-0 transition-transform duration-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:w-1/2 p-8 flex flex-col justify-center">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<AlertCircle className="h-6 w-6 text-destructive" />
|
||||
<span className="text-sm font-semibold text-destructive tracking-wider uppercase">Error 404</span>
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-sm text-gray-600">
|
||||
Did you forget to add the page to the router?
|
||||
</p>
|
||||
</CardContent>
|
||||
<h1 className="text-4xl font-extrabold text-foreground mb-4 tracking-tight">
|
||||
Page Not Found
|
||||
</h1>
|
||||
|
||||
<p className="text-muted-foreground mb-8 leading-relaxed">
|
||||
Oops! It looks like this task got lost in the shuffle. The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.
|
||||
</p>
|
||||
|
||||
<Link href="/">
|
||||
<Button className="w-full sm:w-auto gap-2 group">
|
||||
<ArrowLeft className="h-4 w-4 group-hover:-translate-x-1 transition-transform" />
|
||||
Back to Dashboard
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
|
||||
+245
-18
@@ -6,7 +6,12 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
||||
import { Globe, Tag, Plus, Edit, Trash2, Layers, User as UserIcon, ShieldCheck } from 'lucide-react'; // Added ShieldCheck
|
||||
import { Globe, Tag, Plus, Edit, Trash2, Layers, User as UserIcon, ShieldCheck, Share2, Server, Copy, Settings as SettingsIcon } from 'lucide-react';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { ShareAccessModal } from '@/components/ShareAccessModal';
|
||||
import { ChangePasswordModal } from '@/components/ChangePasswordModal';
|
||||
import { UpdateProfileModal } from '@/components/UpdateProfileModal';
|
||||
import { ShareLabelModal } from '@/components/ShareLabelModal';
|
||||
import { Label } from '@shared/schema';
|
||||
import { User } from '@shared/schema';
|
||||
import { queryClient, apiRequest } from '@/lib/queryClient';
|
||||
@@ -31,6 +36,11 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
|
||||
const [editingLabel, setEditingLabel] = useState<Label | null>(null);
|
||||
const [labelName, setLabelName] = useState('');
|
||||
const [labelColor, setLabelColor] = useState('#3B82F6');
|
||||
const [isShareAccessOpen, setIsShareAccessOpen] = useState(false);
|
||||
const [isShareLabelOpen, setIsShareLabelOpen] = useState(false);
|
||||
const [sharingLabel, setSharingLabel] = useState<Label | null>(null);
|
||||
const [isChangePasswordOpen, setIsChangePasswordOpen] = useState(false);
|
||||
const [isUpdateProfileOpen, setIsUpdateProfileOpen] = useState(false);
|
||||
|
||||
const handleLanguageChange = (value: string) => {
|
||||
i18n.changeLanguage(value);
|
||||
@@ -39,17 +49,17 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
|
||||
};
|
||||
|
||||
const privacyMutation = useMutation({
|
||||
mutationFn: async (updates: { showOnLeaderboard?: boolean; isSearchable?: boolean }) => {
|
||||
mutationFn: async (updates: { showOnLeaderboard?: boolean; isSearchable?: boolean; aiEnabled?: boolean }) => {
|
||||
const res = await apiRequest("PATCH", "/api/user/privacy", updates);
|
||||
return res.json();
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/user"] });
|
||||
toast({ title: "Privacy settings updated" });
|
||||
toast({ title: "Settings updated" });
|
||||
},
|
||||
});
|
||||
|
||||
const handlePrivacyUpdate = (updates: { showOnLeaderboard?: boolean; isSearchable?: boolean }) => {
|
||||
const handlePrivacyUpdate = (updates: { showOnLeaderboard?: boolean; isSearchable?: boolean; aiEnabled?: boolean }) => {
|
||||
privacyMutation.mutate(updates);
|
||||
};
|
||||
|
||||
@@ -130,6 +140,37 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
|
||||
}
|
||||
};
|
||||
|
||||
const handleShareLabel = (label: Label) => {
|
||||
setSharingLabel(label);
|
||||
setIsShareLabelOpen(true);
|
||||
};
|
||||
|
||||
const generateApiKeyMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const res = await apiRequest("POST", "/api/user/apikey", {});
|
||||
return res.json();
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/user"] });
|
||||
toast({ title: t('settings.mcp.generated') });
|
||||
},
|
||||
});
|
||||
|
||||
const revokeApiKeyMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
await apiRequest("DELETE", "/api/user/apikey");
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/user"] });
|
||||
toast({ title: t('settings.mcp.revoked') });
|
||||
},
|
||||
});
|
||||
|
||||
const copyToClipboard = (text: string) => {
|
||||
navigator.clipboard.writeText(text);
|
||||
toast({ title: "Copied!" });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
@@ -143,20 +184,158 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<UserIcon className="w-5 h-5" />
|
||||
Account
|
||||
{t('settings.account.title')}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Manage your account settings
|
||||
{t('settings.account.description')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium leading-none">Username</p>
|
||||
<p className="text-sm text-muted-foreground">{user?.username || 'Loading...'}</p>
|
||||
<p className="text-sm font-medium leading-none">{t('settings.account.username')}</p>
|
||||
<p className="text-sm text-muted-foreground">{user?.username || t('common.loading')}</p>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium leading-none">User ID</p>
|
||||
<p className="text-sm text-muted-foreground font-mono">{user?.id || '...'}</p>
|
||||
|
||||
<div className="space-y-1" data-testid="container-email">
|
||||
<p className="text-sm font-medium leading-none">{t('auth.email')}</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-sm text-muted-foreground" data-testid="text-email">{user?.email || 'No email set'}</p>
|
||||
<Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setIsUpdateProfileOpen(true)} data-testid="button-edit-email">
|
||||
<Edit className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{user?.role === 'admin' && (
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium leading-none">{t('settings.account.userId')}</p>
|
||||
<p className="text-sm text-muted-foreground font-mono">{user?.id || '...'}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="pt-2">
|
||||
<Button variant="outline" onClick={() => setIsChangePasswordOpen(true)} data-testid="button-change-password">
|
||||
{t('auth.changePassword')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{user && (
|
||||
<>
|
||||
<UpdateProfileModal open={isUpdateProfileOpen} onOpenChange={setIsUpdateProfileOpen} user={user} />
|
||||
<ChangePasswordModal open={isChangePasswordOpen} onOpenChange={setIsChangePasswordOpen} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Social & Privacy */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<UserIcon className="w-5 h-5" />
|
||||
{t('settings.social.title')}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{t('settings.social.description')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<p className="font-medium">{t('settings.social.publicLeaderboard')}</p>
|
||||
<p className="text-sm text-muted-foreground">{t('settings.social.publicLeaderboardDesc')}</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={user?.showOnLeaderboard}
|
||||
onCheckedChange={(checked) => handlePrivacyUpdate({ showOnLeaderboard: checked })}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<p className="font-medium">{t('settings.social.searchable')}</p>
|
||||
<p className="text-sm text-muted-foreground">{t('settings.social.searchableDesc')}</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={user?.isSearchable}
|
||||
onCheckedChange={(checked) => handlePrivacyUpdate({ isSearchable: checked })}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<p className="font-medium">{t('settings.ai.enableUser')}</p>
|
||||
<p className="text-sm text-muted-foreground">{t('settings.ai.enableUserDesc')}</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={user?.aiEnabled}
|
||||
onCheckedChange={(checked) => handlePrivacyUpdate({ aiEnabled: checked })}
|
||||
/>
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<Button variant="outline" onClick={() => setIsShareAccessOpen(true)}>
|
||||
<Share2 className="w-4 h-4 mr-2" />
|
||||
{t('settings.social.shareAccess')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<ShareAccessModal open={isShareAccessOpen} onOpenChange={setIsShareAccessOpen} />
|
||||
|
||||
{/* MCP Integration */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Server className="w-5 h-5" />
|
||||
{t('settings.mcp.title')}
|
||||
</CardTitle>
|
||||
<CardDescription>{t('settings.mcp.description')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<p className="font-medium">{t('settings.mcp.status')}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-green-500">
|
||||
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
|
||||
<span className="font-medium">{t('settings.mcp.running')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium">{t('settings.mcp.url')}</p>
|
||||
<div className="flex gap-2">
|
||||
<Input readOnly value={`${window.location.protocol}//${window.location.host}/api/mcp/sse`} />
|
||||
<Button variant="outline" size="icon" onClick={() => copyToClipboard(`${window.location.protocol}//${window.location.host}/api/mcp/sse`)}>
|
||||
<Copy className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium">{t('settings.mcp.apiKey')}</p>
|
||||
{user?.apiKey ? (
|
||||
<div className="flex gap-2">
|
||||
<Input type="password" readOnly value={user.apiKey} />
|
||||
{/* Show full key on click/copy only, usually concealed */}
|
||||
<Button variant="outline" size="icon" onClick={() => copyToClipboard(user.apiKey!)}>
|
||||
<Copy className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={() => revokeApiKeyMutation.mutate()} disabled={revokeApiKeyMutation.isPending}>
|
||||
{t('settings.mcp.revoke')}
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-muted-foreground">{t('settings.mcp.noKey')}</p>
|
||||
<Button onClick={() => generateApiKeyMutation.mutate()} disabled={generateApiKeyMutation.isPending}>
|
||||
{t('settings.mcp.generate')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-muted/50 p-3 rounded-lg text-sm text-muted-foreground">
|
||||
{t('settings.mcp.instructions')}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -167,16 +346,21 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<ShieldCheck className="w-5 h-5 text-primary" />
|
||||
Administration
|
||||
{t('settings.admin.title')}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
System-wide settings and user management
|
||||
{t('settings.admin.description')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button onClick={() => setLocation("/admin/users")} className="w-full sm:w-auto">
|
||||
Manage Users & Registration
|
||||
</Button>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Button onClick={() => setLocation("/admin/users")} className="w-full sm:w-auto">
|
||||
{t('settings.admin.manageUsers')}
|
||||
</Button>
|
||||
<Button onClick={() => setLocation("/admin/settings")} variant="outline" className="w-full sm:w-auto">
|
||||
{t('settings.admin.smtpSettings')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
@@ -193,7 +377,7 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Select value={i18n.language} onValueChange={changeLanguage}>
|
||||
<Select value={i18n.language} onValueChange={handleLanguageChange}>
|
||||
<SelectTrigger className="w-full sm:w-64" data-testid="select-language">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
@@ -315,6 +499,17 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{label.creatorId === user?.id && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="w-6 h-6 text-muted-foreground hover:text-primary"
|
||||
onClick={() => handleShareLabel(label)}
|
||||
title={t('settings.labels.share')}
|
||||
>
|
||||
<Share2 className="w-3 h-3" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
@@ -359,6 +554,13 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<ShareLabelModal
|
||||
open={isShareLabelOpen}
|
||||
onOpenChange={setIsShareLabelOpen}
|
||||
label={sharingLabel}
|
||||
currentUser={user}
|
||||
/>
|
||||
|
||||
{/* Project Templates */}
|
||||
<Card data-testid="card-project-templates">
|
||||
<CardHeader>
|
||||
@@ -380,6 +582,31 @@ export default function Settings({ onNavigateToTemplates }: SettingsProps) {
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Admin Section */}
|
||||
{
|
||||
user?.role === 'admin' && (
|
||||
<Card className="border-destructive/20 bg-destructive/5">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-destructive">
|
||||
<ShieldCheck className="w-5 h-5" />
|
||||
{t('settings.admin.title')}
|
||||
</CardTitle>
|
||||
<CardDescription>{t('settings.admin.description')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col sm:flex-row gap-4">
|
||||
<Button variant="outline" onClick={() => setLocation('/admin/users')}>
|
||||
<UserIcon className="w-4 h-4 mr-2" />
|
||||
{t('settings.admin.manageUsers')}
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => setLocation('/admin/settings')}>
|
||||
<SettingsIcon className="w-4 h-4 mr-2" />
|
||||
{t('settings.ai.title')} / {t('settings.smtp.title')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user