Initial commit: base slice (auth, roles, users, admin) scaffold
Backend: .NET 10 Clean Architecture + LiteCqrs.Net + EF Core/PostgreSQL + Identity/JWT. Frontend: React 19 + Vite + TanStack Query/Router + Tailwind v4 with a retro CRT theme. Docker/compose deployment mirroring PnvPanel's conventions, scoped down to the current base feature set.
This commit is contained in:
@@ -0,0 +1,117 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { createFileRoute, useNavigate } from '@tanstack/react-router'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { z } from 'zod'
|
||||
import { changePassword, changeUserName, clearSession, deleteAccount } from '@/features/auth/api'
|
||||
import { useAuthStore } from '@/features/auth/store'
|
||||
import { useRequireAuth } from '@/features/auth/guards'
|
||||
import { HttpError } from '@/shared/api/client'
|
||||
import { Button } from '@/shared/ui/button'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/shared/ui/card'
|
||||
import { Input } from '@/shared/ui/input'
|
||||
import { Label } from '@/shared/ui/label'
|
||||
import { toast } from '@/shared/ui/toast-store'
|
||||
|
||||
export const Route = createFileRoute('/settings')({ component: SettingsPage })
|
||||
|
||||
const userNameSchema = z.object({ newUserName: z.string().min(3).max(64) })
|
||||
const passwordSchema = z.object({ currentPassword: z.string().min(1), newPassword: z.string().min(8) })
|
||||
|
||||
function SettingsPage() {
|
||||
const { t } = useTranslation()
|
||||
const { isReady } = useRequireAuth()
|
||||
const navigate = useNavigate()
|
||||
|
||||
const userNameForm = useForm<z.infer<typeof userNameSchema>>({ resolver: zodResolver(userNameSchema) })
|
||||
const passwordForm = useForm<z.infer<typeof passwordSchema>>({ resolver: zodResolver(passwordSchema) })
|
||||
|
||||
if (!isReady) return null
|
||||
|
||||
const onSaveUserName = async (values: z.infer<typeof userNameSchema>) => {
|
||||
try {
|
||||
await changeUserName(values.newUserName)
|
||||
useAuthStore.getState().setUser({ ...useAuthStore.getState().user!, userName: values.newUserName })
|
||||
toast.success(t('settings.saved'))
|
||||
userNameForm.reset()
|
||||
} catch (error) {
|
||||
toast.error(error instanceof HttpError && error.status === 409 ? t('auth.userNameTaken') : t('common.error'))
|
||||
}
|
||||
}
|
||||
|
||||
const onSavePassword = async (values: z.infer<typeof passwordSchema>) => {
|
||||
try {
|
||||
await changePassword(values.currentPassword, values.newPassword)
|
||||
toast.success(t('settings.saved'))
|
||||
passwordForm.reset()
|
||||
} catch {
|
||||
toast.error(t('common.error'))
|
||||
}
|
||||
}
|
||||
|
||||
const onDeleteAccount = async () => {
|
||||
if (!window.confirm(t('settings.deleteAccountConfirm'))) return
|
||||
try {
|
||||
await deleteAccount()
|
||||
clearSession()
|
||||
void navigate({ to: '/' })
|
||||
} catch {
|
||||
toast.error(t('common.error'))
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<h1 className="crt-glow text-2xl font-bold">{t('settings.title')}</h1>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('settings.changeUserName')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form className="flex flex-col gap-4" onSubmit={userNameForm.handleSubmit(onSaveUserName)}>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="newUserName">{t('settings.newUserName')}</Label>
|
||||
<Input id="newUserName" {...userNameForm.register('newUserName')} />
|
||||
</div>
|
||||
<Button type="submit" className="self-start" disabled={userNameForm.formState.isSubmitting}>
|
||||
{t('common.save')}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('settings.changePassword')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form className="flex flex-col gap-4" onSubmit={passwordForm.handleSubmit(onSavePassword)}>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="currentPassword">{t('settings.currentPassword')}</Label>
|
||||
<Input id="currentPassword" type="password" {...passwordForm.register('currentPassword')} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="newPassword">{t('settings.newPassword')}</Label>
|
||||
<Input id="newPassword" type="password" {...passwordForm.register('newPassword')} />
|
||||
</div>
|
||||
<Button type="submit" className="self-start" disabled={passwordForm.formState.isSubmitting}>
|
||||
{t('common.save')}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-red-700/40">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-red-500">{t('settings.dangerZone')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button variant="destructive" onClick={() => void onDeleteAccount()}>
|
||||
{t('settings.deleteAccount')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user