fix(auth): add forgot password flow and fix OAuth URL clearing

This commit is contained in:
Kirill
2026-05-22 14:47:06 +05:00
parent 68bbbf8895
commit b1530ef705
3 changed files with 193 additions and 3 deletions
+47 -3
View File
@@ -9,6 +9,7 @@ import Typography from '@mui/material/Typography'
import { useUnit } from 'effector-react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { AuthCodeForm } from '@/features/auth-code'
import { AuthForgotForm } from '@/features/auth-forgot'
import { OAuthButtons } from '@/features/auth-oauth'
import { AuthPasswordForm } from '@/features/auth-password'
import { $user } from '@/shared/model/auth'
@@ -19,6 +20,7 @@ export function AuthPage() {
const [message, setMessage] = useState<string | null>(null)
const [oauthError, setOauthError] = useState<string | null>(null)
const [tab, setTab] = useState(0)
const [showForgot, setShowForgot] = useState(false)
const [searchParams, setSearchParams] = useSearchParams()
const navigate = useNavigate()
const user = useUnit($user)
@@ -27,10 +29,46 @@ export function AuthPage() {
if (user) navigate('/', { replace: true })
}, [navigate, user])
const oauthErrorParam = searchParams.get('oauthError')
if (oauthErrorParam) {
setOauthError(oauthErrorParam)
useEffect(() => {
const err = searchParams.get('oauthError')
if (!err) return
setOauthError(err)
setSearchParams({}, { replace: true })
}, [searchParams, setSearchParams])
if (showForgot) {
return (
<Box
sx={{
display: 'flex',
alignItems: 'start',
justifyContent: 'center',
minHeight: 'calc(100vh - 64px)',
px: 2,
background: `radial-gradient(circle at 50% 30%, ${alpha(theme.palette.primary.main, 0.05)} 0%, transparent 70%)`,
}}
>
<Box sx={{ width: '100%', maxWidth: 440 }}>
<Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
<BearLogo sx={{ fontSize: 72 }} />
</Box>
<Typography variant="h5" sx={{ fontWeight: 700, textAlign: 'center' }} gutterBottom>
Восстановление пароля
</Typography>
<Paper
sx={{
p: 4,
borderRadius: 3,
border: `1px solid ${theme.palette.divider}`,
}}
>
<AuthForgotForm onBack={() => setShowForgot(false)} />
</Paper>
</Box>
</Box>
)
}
return (
@@ -104,6 +142,12 @@ export function AuthPage() {
{tab === 0 && <AuthPasswordForm isRegister={false} onSuccess={() => navigate('/', { replace: true })} />}
{tab === 1 && <AuthCodeForm onSuccess={() => navigate('/', { replace: true })} />}
<Box sx={{ mt: 2, mb: 1, display: 'flex', justifyContent: 'center' }}>
<Button variant="text" size="small" onClick={() => setShowForgot(true)}>
Забыли пароль?
</Button>
</Box>
<Box sx={{ mt: 3, mb: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
<Box sx={{ flex: 1, borderBottom: `1px solid ${theme.palette.divider}` }} />
<Typography variant="body2" color="text.secondary" sx={{ px: 1, whiteSpace: 'nowrap' }}>